Learning How to Learn JavaScript

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.

Recommended ResourcesTypeScript in 5 minutes from the official TypeScript documentationPlay around in the online TypeScript REPL[Paywalled] TypeScript 4 hour workshop by Mike North3.

Understand why JavaScript frameworks exist.

JavaScript frameworks have been around since I first got into web development back in late 2012.

Back then, AngularJS reigned supreme, Backbone.

js had a decent market share, and Ember was the hot up-and-comer (pun intended).

Interestingly, even though they are now a thing of the past (replaced mostly by React and Vue), the issues that these frontend frameworks address have not changed much.

For example: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.

Recommended ResourcesThe Deepest Reason Why Modern JavaScript Frameworks Exist4.

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.

When using one framework heavily, it can be easy to start feeling like the syntax and patterns of that framework are part of the underlying language (JavaScript in our case).

As the saying goes, if all you have is a hammer, everything starts to look like a nail.

That saying, translated to programming talk, means that if you only ever use one framework, you will inherently start thinking about your solutions in terms of that framework and it will become your crutch instead of your power.

Learning or knowing two frameworks at once can invert this thinking and give you more perspective into what the framework is actually doing for you.

It is exactly like how learning a foreign language can actually make you better at your primary language.

You see similarities and differences between the two and it has you thinking about what linguistic constructs led to those similarities and differences.

Knowing two JavaScript frameworks can provide a similar perspective.

By knowing two paths to the same solution you better understand the root problems they are addressing.


Demystify the build process.

It is not lost on me that I have made 4 recommendations now and only one of them has involved learning vanilla JS.

Whether you like it or not, writing modern JavaScript involves a lot of tooling and frameworks, and the thing that ties them all together is 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.

Recommended ResourcesWebpack from Nothing.

Highly recommended!.A great deep dive into the problems that webpack solvesGrunt and Gulp.

js: Task Runner Tools to Streamline Your Front-End DevelopmentAnd that’s it!.I hope there is a decent amount of value to derive from this post.

As I said in my intro, the JavaScript ecosystem is daunting.

I have been working professionally for 7 years and I still often feel like I’ve barely scratched the surface.

So don’t try to take it all in at once — focus on these five things and you will be well on your way.


. More details

Leave a Reply