3

I wrote my first proper promise today

I'm building a State-driven, ajax fed Order/Invoice creation UI which Sales Reps use to place purchases for customers over the phone. The backend is a mutated PHP OSCommerce catalog which I've been making strides in refactoring towards OOP/eliminating spahgetti code and the need for a massive bootstrapper file which includes a ton of nonsense (I started by isolating the session and several crucial classes dealing with currency, language and the cart)

I'm using raw JS and jquery with copious reorganization.

I like state driven design, so I write all my data objects as classes using a base class with a simple attribute setter, and then extend the class and define it's attributes as an array which is passed to the parent setter in the construct.

I have also populateFromJson method in the parent class which allows me to match the attribute names to database fields in the backend which returns via ajax.

I achieve the state tracking by placing these objects into an array which underscore.js Observe watches, and that triggers methods to update the DOM or other objects.

Sure, I could do this in react but
1) It's in an admin area where the sales reps using it have to use edge/chrome/Firefox
2) I'm still climbing the react learning curve, so I can rapid prototype in jquery faster instead of getting hung up on something I don't understand
3) said admin area already uses jquery anyway
4) I like a challenge

Implementing promises is quickly turning messy jquery ajax calls into neat organized promise based operations that fit into my state tracking paradigm, so all jquery is responsible for is user interaction events.

The big flaw I want to address is that I'm still making html elements as JS strings to generate inputs/fields into the pseudo-forms.

Can anyone point me in the direction of a library or practice that allows me to generate Dom elements in a template-style manner.

Comments
  • 1
    I use angular for templates of components..
    If you are struggling with promises have a look at the new async/await syntax
  • 0
    I wouldn't say so much struggling with them as it was a challenge of figuring out how what I had written fits.

    An example, I have a method that was responsible for providing shipping cost quotes for each product in the invoice.

    Each product is represented as an instance of the class for that, and whenever the quantity of one is changed, the method is fired to get the new quote, which is a set of 7 choices which must be rendered to the invoice row's select as options.

    This method is also fires when the selected option is changed by the user.

    A cache is necessary in cases when the quantity isn't changed but a redraw happen.

    So my initial 1 method for ajax > render became 4, one to check the cache and ajax if neccesary, another to render, and a third which dispatches them by calling the first and watching the promise. Finally, there is a method that deletes a cache entry for the product if the quantity is changed

    I'm looking forward to replacing the other ajax ops elsewhere.
  • 1
    @spacem. Thankyou!

    https://hackernoon.com/6-reasons-wh...

    I'm glad I took the time to figure out promises, and this is the next step n it seems. I'm glad this crossed my eyes before I got too busy writing everything as promises.

    Gotta love how quickly things become obsolete in this field
  • 0
    It's now working with async await. I ditched jquery ajax for fetch so the try/catch works how I want.
Add Comment