Take some time to read the resources I am listing below, in order. They should give you a good idea of where to start with asynchronous programming.
- Chapter 2: Callbacks from Kyle Simpson’s Async & Performance Book
- Chapter 3: Promises from Kyle Simpson’s Async & Performance Book
- Using Fetch from the Mozilla Development Network (MDN)
- Async/Await Tutorial from scotch.io
2. Learn the basics of TypeScript.
With that in mind, I recommend that you learn the basics of TypeScript as soon as possible. By “the basics” I mean: how to add type annotations to your variables, class properties, function arguments, and function return values. TypeScript is incredibly powerful and there is much more to learn than simple type annotations, but this first step will prevent you from regularly shooting yourself in the foot. It still amazes me how often the TypeScript compiler catches a bug that I did not see at first.
Yes, the compiler is going to yell at you…a lot. That’s okay! It is your friend and it wants you to be a better programmer. Take the time to consider the error messages TypeScript gives you and I guarantee your code will improve significantly.
- TypeScript in 5 minutes from the official TypeScript documentation
- Play around in the online TypeScript REPL
- [Paywalled] TypeScript 4 hour workshop by Mike North
- Data Binding a View to a Controller. This is the most important one. Keeping the UI view synced up with the state of your frontend application is the primary reason for all front-end frameworks. Whether the framework is fully MVC, MVVM, or just a view layer, they all have a way to bind some state to a view and keep them in sync.
- Reusable Components. This is the biggest thing that AngularJS got right. Component-based composition of your frontend views, with JS compiling your templates to HTML, is at the heart of modern frameworks like React and Vue, but has been around since AngularJS. Creating dynamic, reusable components is simply not possible, without using an existing framework or creating your own, because the web component’s API is very limited and doesn’t handle the data binding.
These are just to name a couple off the top of my head. The point is that if you look behind the fancy wrenches, screwdrivers, and other tools, the nuts and bolts are the same. Tools change and technology evolves, but if you understand the core pain points of web development (the reasons why the tools exist in the first place), you will be in a much better position to understand and correctly use any present, future, or legacy framework.
4. Learn two similar frameworks simultaneously.
Piggybacking off my point on how the underlying issues that frameworks solve have not changed, I am now going to recommend that you learn two frontend frameworks at once. For instance, Vue and React.
5. Demystify the build process.
Build tooling is the area that has changed the most throughout my career as this is where the biggest gains in performance and asset sizes can be found. Web-based companies and the open-source community are constantly trying to squeeze every small improvement that they can out of the build process, which leads to an ever-changing set of tools and processes.
I have to admit, it took me a while to understand how tools like Webpack work. You set up a simple config, run a command, and suddenly you have a single file with optimized, minimized, and browser-compatible code. Build tools can seem like black magic because all of them strive to be zero-config or very-little-config. This is great for getting started with them but makes them daunting to approach when you actually have to do some custom configuration.
It is incredibly important that you understand what these tools are doing for you. Try to understand what transformations your code is going through and in what order. Try to understand how your modules are being bundled, so you can optimize them better. Try to learn every configuration option because this has the biggest impact on performance and file size.
- Webpack from Nothing. Highly recommended! A great deep dive into the problems that webpack solves
- Grunt and Gulp.js: Task Runner Tools to Streamline Your Front-End Development