Do this before learning a JS framework
By: Angad Singh
Tags: Angular, Vuejs, JavaScript, React, Front End Development

Do this before learning a JS framework

Don’t rush into a framework just yet

For anyone who is OCD/nit-picky about stuff, here’s a disclaimer: I know that definitionOf('framework') !== definitionOf('library') however for ease of use, in this article I will use the words “framework” and “library” interchangeably.

The internet is filled with sub-Reddits, Twitter conversations, Medium articles and YouTube videos about JavaScript frameworks. All major companies use some sort of a framework or JS library to build the views for their web applications. And because of React Native and NativeScript, sometimes even their mobile application views are built with a JS abstraction layer! Currently there are 3 main JavaScript libraries/frameworks; React, Vue and Angular. This builds strong FOMO in developers who are trying to break into the software industry as front-end or full-stack developers. They want to get on the bandwagon and master one of these 3 ASAP. I understand if you feel the same way. Learning React, Vue or Angular will ensure that you can find yourself a full-time job or build yourself a modern web application for your startup. However there are a few things you should ensure that you know how to do in Vanilla JS before you try your hands at React, Vue or Angular.

Basics

This is a given, but I thought I should still throw it out there that before getting into any of these frameworks, you should first cross out the basics of HTML, CSS and JS off your checklist. Now, let’s look at slightly more advanced topics that are still essential before diving into a framework.

Context

In a lot of modern JS code you will see arrow functions. I.e. functions that look like this: () => {}; . What’s the difference between that and a normal function? this. If that sentence didn’t make sense to you, then you have a long way to go. The concept of ‘this’ becomes extremely important anytime you work on any substantial JavaScript project.

Promises

Regardless of your relationship with real-life promises, it is undeniable that promises are necessary in JS. JavaScript is single threaded and certain processes such as waiting for a HTTP response or accessing something on the file system take much longer than a synchronous process, like computing a small arithmetic function. Without Promises, correct programming of these asynchronous processes is impossible. And while you’re at it, you might as well learn the ES6 functionality similar to Promises; async/await, which are also much easier to use in my opinion.

Try/Catch

If you have some experience in any other programming language you will understand why catching errors is necessary, especially on the front-end since you will be dependent on a lot of Promises ‘Resolving’ or ‘Rejecting’ depending on HTTP responses from the back-end. That said, if you want to up your game further and learn about custom javascript errors, you can do so here.

DOM Manipulation

If you do eventually use a framework like React, Vue or Angular, you will never need this functionality of vanilla JavaScript. However it is vital that you understand how DOM manipulation works using plain/vanilla javascript because under the hood of any JS framework, they will be using this to move things around on the website. Knowing DOM manipulation also ensures that you will not have to be tied down to using a full fledged framework when you don’t need it; i.e. creating a small website.

Syntactical Sugar

Most modern JS frameworks now use the latest ES versions and with them; the latest syntactical sweets like object destructuring, spread operators, ternary operator, new array functions like map, reduce, filter etc. It’s probably best to learn these latest syntaxes so your process of learning the actual framework is not overcomplicated by not knowing the syntax. That said, as you know most browsers will not understand the latest EcmaScript features, however we still use them. So how does our website run? How do the browsers still understand our modern JS code? That’s another thing you should look into. Hint: Babel.

Linting

If you never lint your code, once you start using linting you will realise all the small decisions a developer makes. And how inconsistent unlinted code is. For a strict, opinionated and easy to get started with set of rules, I recommend Prettier.

Unit tests

Since I’m assuming that you are beginner to the JS and Front-end world here, I would recommend that you learn how to write unit tests, with Jest, Mocha or any JS testing library of your choice. Of course once you learn a framework, you will have to add to your unit testing skills to be able to test your React/Vue/Angular code properly, but having an understanding of front end unit tests will help a lot!

TypeScript

This one is optional for React and Vue but a must for Angular. However with the new features that TypeScript provides as well as the type safety (when used properly) is worth learning even if you choose to later not use any JS framework for your web application.

With all these topics covered, you should be ready to tackle on your framework of choice. I wish you good luck! And if you happen to pick Squirtle, sorry I mean React, you can follow me on Medium as I share with you what I know about React and even React Native.

A note from the Plain English team

Did you know that we have four publications? Show some love by giving them a follow: JavaScript in Plain English, AI in Plain English, UX in Plain English, Python in Plain English — thank you and keep learning!

We’ve also launched a YouTube and would love for you to support us by subscribing to our Plain English channel