It might be that by the time we end this article, a new Javascript framework would have been launched somewhere. But that's really not in our control. Therefore, we should simply continue with what we have. At least, because of the disclaimer, we can be sure that we aren't inventing a new framework.

There was a time when writing effective front-end code meant that you had to possess a good understanding of how HTML, CSS, and JavaScript meld together to create web pages. Well, fortunately, that's mostly true even today. However, in the past decade, the Javascript landscape has exploded. Due to this, developers have been left scratching their heads to simply figure out what all they should know in order to build effective web applications.

In this post, we will try to unravel some of the aspects of the modern Javascript landscape. We will also look at what you should probably learn if you want to become a professional front-end developer. But before we do that, let's start from the beginning.

How JavaScript Works

When a client or browser accesses an HTML page, the server sends back the HTML markup. The browser receives it and interprets the markup to construct the DOM or Document Object Model. JavaScript has the capability to interact with the DOM, modify it, and make it interactive. Usually, JavaScript is included in your DOM using script tags.

Now, the problem is that JavaScript execution blocks the DOM. This means that the users cannot do much interaction with the webpage. In other words, the more time JavaScript takes to execute, the less responsive your web application will be. That's where AJAX, or Asynchronous JavaScript and XML, comes in. And that's where most of the shiny new JavaScript frameworks also come in.

Why Use a Framework?

It is perfectly possible to build a web application without using any frameworks. But not for nothing has the modern JavaScript landscape evolved so much. Over the last decade, it became quite apparent that writing complex applications using plain JavaScript was extremely complicated.

The goal of modern JavaScript frameworks is to reduce the amount of tedious and repetitive work required to build interactive and user-friendly web applications. Arguably, most frameworks, irrespective of the language, try to do the same thing. However, other programming languages may not have as many frameworks. On the other hand, the modern JavaScript landscape has literally hundreds of frameworks and libraries. Each of these libraries or frameworks are trying to solve a specific set of problems.

However, most of the major frameworks are trying to solve one common use-case: how to build single-page web applications that can support complex user interactions and manage the state and business logic of the application on the front-end or the client.

In a nutshell, single-page applications, or SPAs, are web applications that can work on the client without constant page reloads.

Steps to Conquer the Modern JavaScript Landscape

Let us assume that you are a complete novice. You want to start learning front-end development and become a professional one day.

You have to learn a lot! There's no other way to put it. Definitely, it's a long, winding journey.

However, for the sake of simplicity, I have divided the journey into phases. These phases can help you master the modern JavaScript landscape.

Phase 1

Learn HTML

There is no escaping HTML and CSS. No matter what framework you use, HTML and CSS will almost always be there. So don't try and bypass them. You should learn how to create an HTML page and now to divide a page into sections. Focus on proper structure and don't worry about the beauty part just as yet.

Learn CSS

CSS or Cascading Style Sheets is what adds the beauty to your ugly HTML pages. Learn as much as you can. It's vast and has so many options that you'll always find new things. If you want a list then learn CSS Grid Layout, Flexbox, Media Queries, and Responsive CSS. These things will help you with serious web development. Also, I recommend learning at least one CSS framework. If you aren't sure what to pick, I would recommend Bootstrap. It will help you build professional web applications with less CSS and some good design patterns. You can read more about it here.

Learn Basic JavaScript

This might sound counter-intuitive considering you won't be writing plain-old JavaScript once you start using frameworks. However, learning the basics will hold you in good stead later. At this point, you might come across something called jQuery.

But at the risk of alienating some of the developers in the community, I would suggest you learn it only if you have bucket-loads of time. jQuery (a library for making DOM manipulation easier) once ruled the JavaScript world. However, now it is not used much for new projects and might not be as much of a value add for your time.

Now, Phase 1 will be the same no matter what you do in the future. If you reach this far, you should pat yourself on the back for the success and introspect whether you want to even continue.

Do you even like JavaScript?

JavaScript isn't for everyone and I have known developers who become frustrated at the apparent chaos JavaScript can become, even in the best of times.

Phase 2

If you've decided to bravely continue on the journey, let me tell you upfront that the real fun begins now!

Learn Basic Git Stuff

Now, while this is not mandatory to learn JavaScript, this will help you learn from other developers and the community available on sites like GitHub. You could also put your source code on GitHub for all to see and build a community around your own work.

Learn Package Managers

Any serious modern JavaScript framework requires knowledge of at least some package manager. A package manager is just a way to manage the various dependencies your application will be using. Unfortunately, plain vanilla JavaScript doesn't come with many libraries but the overall ecosystem has grown tremendously due to various libraries and packages released by developers. Package Managers help us tap into all of that code so that we don't have to write something that's already there.

If you only had time to learn one, I would recommend npm, or node package manager. npm is the biggest and most widely used package manager; you can explore it here.

Another option is Yarn — if you understand one package manager, you won't find it terribly difficult to learn others.

The Big Decision

If you've made it this far, you're ready to take the plunge. But before you do that, you'll have to answer the big question.

Which JavaScript framework do I pick?

There are many, but for the sake of discussion, I'll list the three major ones. In no particular order, they are React, Angular, and Vue.

React is a JavaScript library built by Facebook. This library can be used to create interactive UIs. Simply based on numbers, React is the most popular among developers these days because React is pretty easy to learn. However, it is tough to master if you start throwing some advanced stuff like Redux into the mix.

Angular is a JavaScript framework (or a platform) that can be used to built web applications. Suffice to say that Angular is a 1000-pound gorilla if you compare it to React. It can be overwhelming for newbies but once you get past the initial learning curve, you'll find yourself in the stratosphere with giddy pleasure. And by the way, Angular is built and maintained by Google so you can judge the quality.

Vue is another framework that became popular and apparently tried to tread a middle-line between React and Angular. Unless you have a pretty specific need that can be solved only by Vue, I would recommend going with Angular or React.

Having said that, I generally don't prefer backing one framework over another. A good developer is one who can select the framework or toolset based on the problem. Both React and Angular can do everything but they do certain things better than others. For example, form-handling in Angular is brilliant and really useful for enterprise applications that have lot of user interaction in terms of filling out stuff. React, on the other hand, is amazing if you have an extremely dynamic DOM and want a lot of manipulation based on user interaction.

In my opinion, I would recommend that if you have the time, you should try and learn both. It would open up your perspective and make you a better front-end developer.

Phase 3

If you've reached this point, you've come really far. You should be proud of yourself.

However, the journey doesn't end.

As we talked about earlier, the modern JavaScript landscape is evolving rapidly. And so should web developers if they want to stay relevant. Even the frameworks are evolving rapidly. Google is releasing new Angular versions twice a year with new features. The React ecosystem is expanding rapidly. There are also other frameworks coming in and who knows if some of them might become even more popular.

So learning should continue. Some things that you can look into are:

Progressive Web Apps to make web applications work as native mobile apps.

Tooling frameworks such as Webpack and Babel.

ES6, ES7 syntax

Various test frameworks like Jest, Karma, and Mocha.

If you're interested in building mobile apps using JavaScript, you could look into React Native, Flutter, and so on.

Server-side rendering using SPA frameworks.

The point is that you should keep learning. Where's the fun in stagnating?