While 2020 was a raging dumpster fire for most of the world, software and digitalisation actually benefited somewhat from the rapid switch to virtual work. I watched as many software developers kickstarted their careers and took up new development skills. Adding new languages and skills to your stack will not only make you a better frontend developer but it'll also make you more desirable to future employers.
But what frontend JavaScript technologies should you learn? Well, there's a bunch of reasons you might want to learn, but let's keep it simple and say this is purely for your career and to advance in your role as a frontend developer or fullstack developer. So based on that, you want to find what technologies and skills are in demand and add them to your stack.
In this article, we'll take a look at the State of JavaScript 2020. In it, we're able to see positive trends and identify popular technologies which help you decide what new technology to jump into. Let's start with the top JavaScript frameworks on the modern web!
Best JavaScript frontend Frameworks 2021
1. React
It’s probably no surprise to anyone that React is the most used frontend JavaScript framework — and has been for the last four years by JavaScript developers. It’s also a top choice for new developers entering the scene due to the high usage, number of online learning sources, and the number of job openings available. 2020 showed a drop in satisfaction for React users, replaced in the top spot by Svelte. Regardless, React maintains very high satisfaction rates from users and is usually the top choice for developers looking to expand their skill set. React users cite the great community, many open-source options, and the wealth of emerging job opportunities. React has such a widely used library that users can enjoy diverse working opportunities, fitting into many different roles across many different industries.
2. Angular
Up next we have Google’s Angular. Angular has developed quite a lot recently with many new updates and features added. According to the State of JavaScript, Angular was the second most used frontend framework in 2020 after React. There's no arguing there are plenty of Angular jobs (see Honeypot) out there for those looking — adding this framework to your skillset is sure to benefit you in the job market. But there's a catch! Let's take a look at how satisfied developers are with the framework. Angular is ranked second-worst in terms of developer satisfaction according to the State of JavaScript Survey 2020. That's a bit of a contradiction for a framework used by a huge chunk of the JavaScript community. (Bear in mind that the State of JS survey defines “satisfaction” as the percentage of developers that would/would not use it again.)
So you've been warned, not many devs are satisfied with Angular — consider this before you move into the space. If you are going to be working with a framework day in and day out it'll be a whole lot better if you actually enjoy the process. I'll say one good thing about Angular though, the framework is maintained by a team at Google. That means they can implement updates faster, and with such a big name backing it, you can be sure it'll be around for a while.
3. VueJs
Based on usage and satisfaction ratings, Vue.js is the third-best JavaScript framework! Personally, I prefer Vue.js over Angular. It has some great options with syntax similar to Angular and added JSX support, making it a very flexible framework if you do come from a React or Angular background. It's got an awesome community with active members and an engaged core team. Check out Honeypot's documentary on how it all started.
If you are considering adding Vue.js to your stack, I suggest you match it with another popular framework since its syntax features will help make an easier transition. Some positives about Vue.js: it has the bonus of being a very lightweight framework in terms of size and it tends to have faster updates in the browser.
4. Svelte (Honorary Mention)
Svelte is a very new framework — it’s only been around for two years! It is very much in its infancy when we compare it to frameworks like React and Angular. Surprisingly, and why I mention it here as a bonus, Svelte has the highest satisfaction ratings according to the State of JavaScript survey. Based on this, I can see this framework becoming competitive in the coming years, after all, titans can fall to newer more sophisticated technologies.
The catch, well Svelte is only two years old which means there aren't that many developers using the framework. So fewer job opportunities at this point in time. But since we expect it to grow — keep an eye on it in the coming years.
What's cool about Svelte is that it takes a new approach to build frontend components. The framework uses compile-time magic to build an application for the browser, instead of Virtual DOM manipulation! This gives Svelte a significant speed advantage since it doesn't need to run so much in the browser instead the application is sent as vanilla JavaScript to the browser. The browser receives only the necessary parts which decrease the size of your overall website! I think I'm going to start playing around with Svelte in my downtime to learn some new mindsets.
Best way to learn JavaScript frameworks
The best way to learn anything is to get dive in and just start using it wherever you can. Alongside that, I suggest you run through some courses to guide you in your learning journey. There's a bunch of courses out there, so find something that suits you! If you don't know where to start I'll run through some of my favourite ones below, some are paid some are free. If you're new to software development stick with the free ones but if you already have a job — check out the paid ones, most likely your company will shoulder the costs!
Paid JavaScript Courses
So all the courses below are from Frontend Masters. I really like Frontend Masters, I've learnt a bunch from there and always go back for more! The courses tend to cover all the popular frontend JavaScript technologies, and with a depth I can appreciate. What's the cost? It's $39 per month for full access (obviously cheaper if you paid a year in full). So with this amount, you'll be able to access all the courses mentioned below, not just one on React or Vue but the whole spread.
React
Brian Holt's course is a great one stop shop for React beginners. He has a great React course which he keeps up to date and relevant — it's through the Frontend Masters platform. Brian is a developer experience manager at Stripe, so heaps of experience. Basically in his course, you follow him along as he builds an application step by step. He also guides you through the build process and all the React features so you'll leave with a great foundation.
Angular
Likewise for Angular, Lukas Ruebbelke provides a great course to keep you sharp in your Angular skills. Lukas is a Principal Engineer at Venmo and a published author.
Vue.js
For those wanting to learn Vue.js, Sarah Drasner leads the VueJs course on Frontend Masters. The course introduces the fundamentals and provides some great comparisons with Angular and React, so if you are coming from that background you'll be up to speed in no time!
Full disclosure, I haven't taken Sarah Drasner’s and Lukas Ruebbelke’s course in their respective technologies, but having taken multiple React courses from Brian Holt and plenty of other frontend courses on Frontend Masters, I have strong confidence that they are great courses for someone looking to expand their skill set in one of these frontend frameworks. They are also widely recommended by the community!
Free JavaScript Courses
If you are a newbie or just wanna save some dollars these free JavaScript courses are for you! The beauty of software is that all you really need is a computer and internet connection to start learning. I'll give you my picks in a second but if you want to go out and search on your own, I suggest looking for projects that will teach you how to handle basic ‘if’ statements, for loops, project structure, and state management.
A good project to try on your own is a Tic-Tac-Toe style game that allows you to take turns against another player and perhaps keep track of scores over time. Don’t be afraid to experiment here and try different things. Here are a few different free resources to try so you can kickstart your learning journey.
React
Create React App for starting a react project from scratch
Angular
VueJs
...
Best Libraries to Pair your Frontend Knowledge with
The beauty of software development and the internet is that many problems have been solved before, and improved over many iterations. Don’t reinvent the wheel! There are plenty of great libraries out there — use them for your project!
In practice, it’s incredibly rare to find a frontend project that solely uses a single frontend technology to build an app. This app will likely be paired with different UI and utility libraries to increase the speed and efficiency that a developer can build. Once you’ve picked and learned your frontend framework of choice, consider pairing it with one of these libraries to kickstart your next project. NOTE: not all of these libraries are compatible with specific frontend frameworks. So do your research before begin installing a library and learning it. Axios, Lodash, and date-fns are choices for utility libraries and are beneficial to your JavaScript repertoire regardless of the framework you choose.
Axios
Provides a consistent means of communicating with different API services. Axios works great because it can be used on a frontend code base and backend codebase, making it a “kill two birds with one stone” library. Finally, Axios doesn’t rely on specific browser functionality, as the popular fetch function does, so it is a more reliable function to use.
Lodash
Will give you the utility functions to parse their data. Granted, a lot of Lodash functionality has slowly fallen by the wayside as new Javascript features come out, but they still offer a plethora of helper functions to make your code more robust and legible. Lodash is one of the most downloaded NPM libraries and maybe the most downloaded utility library in the javascript ecosystem. This is a framework-agnostic library that every javascript developer should be familiar with.
While Moment ranks higher than Date-fns (usage) on the 2020 state of Javascript survey, Moment was retired in late 2020 and provides a list of great alternatives to learn. Date parsing and time parsing libraries are the future (pun intended) and nearly every software project will likely need to use some sort of date parsing library. Date-fns is a personal favourite and a great successor to Moment, the thought processes behind these two libraries are very similar. In fact, most Date libraries have a large overlap, after all, dates and time suck but they don’t vary much in how they work across the world.
On the contrary, jQuery is an older javascript framework that from personal experience has been phased out in many new applications. This library may be listed highly here in the survey results, but I suspect this is because some developers may be supporting older applications. I wouldn’t recommend learning jQuery despite what the survey shows. Stick to a date library and a framework-agnostic library.
Which User Interface should you use?
No website can be a website without some sort of user interface. Yes, building a User Interface from scratch is a pain in the ass, it's time-consuming, tedious and doesn't really provide a great return. I suggest you save some hassle and pick a UI to match your chosen frontend framework(s). Here are some of the popular ones:
React
MaterialUI — a personal favourite, I’ve used it on many different projects and it is a very well thought out and highly supported library. I highly recommend this to someone looking to build a new project without the overhead of designing custom UI components.
AntDesign — a good alternative to MaterialUI, not as popular but still a clean-looking and well-supported UI library.
Angular
VueJs
...
Despite what a dumpster fire this year has been, some good insights and trends have emerged from the JavaScript ecosystem. React is still the King (or Queen) of frontend frameworks but as we've seen things change quickly. Svelte has the eye of many developers and Vue.js is still hugely popular, so let's see what the future holds.
When it comes to learning new technologies, there are plenty of resources available just keep in mind popularity and satisfaction. Pair a major frontend library with a couple of supporting JavaScript libraries and you will have a strong collection of skills to hit the ground running. And like I mentioned before, even if a technology is very popular it doesn't mean it's a pleasure to use.
Hope you enjoyed reading 🙏
