It is very easy to write sloppy promise code that is both hard to read and to understand. Knowing good promise design patterns can help with that, as can async/await! (more or that later). But for now, here is a simple promise example:
— ES6 Promises: Patterns and Anti-Patterns by Bobby Brennan
Writing code with promises can get messy very quickly. It can be difficult to read and write asynchronous code because we are so used to reading synchronous code from top to bottom.
await allow us to write asynchronous code in synchronous ways.
One thing to definitely remember is that async/await is essentially just syntactic sugar on top of promises — much like how
class is syntactic sugar for objects. They operate the same way under the hood.
Here is the same code block above for promise, now written with
Both of the two examples above for promises and async/await use a function called
fetch returns a promise, so you can use both async/await and traditional promise code when working with the function, as shown above.
— The MDN Web Docs website has a very detailed article on using fetch that I highly recommend you read through!
4. Classes & Objects
Consider a very simple React component with TypeScript:
For just this one simple component, you have to understand classes, objects, constructors, and TypeScript interfaces.
— This & Object Prototypes by Kyle
class documentation from the MDN Web Docs
— Classes vs. Interfaces in TypeScript
Component-based composition of your front-end applications is wildly popular right now. And typically, there is a one component per file rule that most developers follow. For these reasons, you are going to be using import and export a lot.
It may seem like a trivial thing to use, but don’t just brush over the topic as a whole. Using import and export correctly can significantly improve the performance and file size of your application.
— ES6 Import & Export: A Beginner’s Guide by Adam Cowley
— Named Export vs Default Export in ES6 by Alankar Anand
How 'this’ works
If you have read the rest of this post or any of my other blogs, you will know how important asynchronous programming is in modern web applications.
In an asynchronous world, the context of the current code being executed is constantly changing. As the developer, you will have a much easier time making sense of asynchronous code if you understand how
this is assigned to the current execution context.
Do you know what the rules of thumb are to know what
this is going to be? What are the effects of using
apply? If you don’t know, be sure to check out the further reading links below!
— This & Object Prototypes by Kyle
7. Events & Event Listeners
In any user-facing application such as a web application, most of your code is going to revolve around listening to and responding to user interaction. There are many ways to go about this, so naturally, a number of design patterns have emerged specifically for how to best handle event data and responsive actions.
For example, MVC with 2-way data binding was popular for a long while. In this pattern, the model would update along with the view, facilitated by the controller. Whenever the model would change, the view would also change, and vice-versa. This made it very easy to write user interfaces but was difficult to debug when things went awry.
The most popular pattern today is based on some form of unidirectional data flow. In this pattern, the view components simply send the event data up to its parent components which then choose whether or not to update its own data or not. Then any changes are pushed back down to the child components which will update their own views.
Unidirectional data flow such as React’s Reflux is all about using events and event listeners. It would be extremely difficult to use React or any other modern framework without having a strong grasp of events and event listeners.
— Understanding unidirectional data flow in React by Liz Denhup
— Unidirectional Data Flow? Yes. Flux? I Am Not So Sure. by Adam Neary