The original link

Chances are that by the time we finish this article, a new JavaScript framework will have been launched somewhere. But it’s really out of our control. Therefore, we should simply continue with what we have. At the very least, thanks to the disclaimer, we can be sure we’re not inventing a new framework.

Once upon a time, writing effective front-end code meant that you had to have a good understanding of how HTML, CSS, and JavaScript worked together to create a Web page. Well, fortunately, that’s almost true even today. In the last decade, however, the JavaScript space has exploded. For this reason, developers have been scratching their heads, just figuring out what they should know to build effective Web applications.

In this article, we’ll try to unravel some aspects of the modern JavaScript landscape. We’ll also look at what you might want to learn if you want to become a professional front-end developer. But before we do that, let’s start at the beginning.

How does JavaScript work?

When a client or browser accesses an HTML page, the server sends back HTML tags. The browser receives it and interprets the tag to construct the DOM or document object model. JavaScript has the ability to interact with the DOM, modify it, and make it interactive. Typically, JavaScript is included in your DOM using script tags.

Now, the problem is that JavaScript execution is blocking the DOM. This means that the user cannot interact with the page as much. In other words, the longer it takes JavaScript to execute, the slower your Web application will be. This is where Ajax or asynchronous JavaScript and XML come in. Most shiny new JavaScript frameworks also use it.

Why use frameworks?

It is entirely possible to build Web applications without using any framework. But modern JavaScript layouts have evolved so quickly for a reason. Over the past decade, it has become clear that writing complex applications in pure JavaScript is extremely complex.

The goal of modern JavaScript frameworks is to reduce the tedious and repetitive effort required to build interactive and user-friendly Web applications. Suffice it to say that most frameworks try to do the same thing regardless of the language. However, other programming languages may not have as many frameworks. On the other hand, the modern JavaScript world actually has hundreds of frameworks and libraries. Each of these libraries or frameworks attempts to solve a specific set of problems.

However, most of the major frameworks attempt to address a common use case: how to build single-page Web applications that can support complex user interactions and manage application state and business logic at the front end or the client.

In short, a single-page application or SPA is a Web application that can run on the client without constantly reloading pages.

Steps to Conquer the Modern JavaScript Landscape

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

You have to learn a lot! There’s no other way to express it. Of course, it’s been a long and winding journey.

However, for the sake of simplicity, I’ve divided the journey into several stages. These stages can help you master the modern JavaScript environment.

The first stage

Learning HTML

No matter what framework you use, HTML and CSS are almost always there. So don’t try to get around them. You should learn how to create an HTML page, now divide the page into sections. Focus on the proper structure and don’t worry about the beautifying part of the page for now.

Learning CSS

CSS, or cascading style sheets, add beauty to ugly HTML pages. Learn as much as you can. It’s big, there are lots of choices, and you can always find something new. If you want a list, then learn CSS Grid Layout, Flexbox, Media Queries, and Responsive CSS. These things will help you do serious Web development. In addition, I recommend learning at least one CSS framework. If you are not sure what to choose, I recommend Bootstrap. It will help you build professional Web applications with less CSS and some good design patterns.

Learning JavaScript Basics

This may sound counterintuitive, considering that you don’t write normal JavaScript once you start using the framework. However, learning the basics will benefit you in the future. At this point, you might come across something called jQuery.

But at the risk of alienating some developers in the community, I recommend learning it only if you have a lot of time on your hands. JQuery, a library that makes DOM manipulation easier, once ruled the JavaScript world. However, it is not used as much on new projects now and may not add that much value to your time.

Now, no matter what you do in the future, Phase 1 will be the same. If you get to this point, pat yourself on the back for success and reflect on whether you want to continue.

The second stage

Learn the basics of git

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

Learn a package manager

Any serious modern JavaScript framework requires at least some knowledge of the package manager. The package manager is just one way to manage the various dependencies that your application will use. Unfortunately, normal JavaScript doesn’t have many libraries, but the entire ecosystem has grown tremendously as developers have released libraries and packages. The package manager helps us leverage all this code so that we don’t have to write something that already exists.

If you only have time to learn one, I would recommend NPM or the Node Package Manager. NPM is the largest and most widely used package manager; You can explore it here.

Another option is YARN — if you know one package manager, you won’t find it difficult to learn about other package managers.

Making a Choice – Which JavaScript Framework to Learn?

There are many, but for the sake of discussion, I’ll list three main 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 today because it’s so easy to learn. However, if you start mixing in advanced things like Redux, it can be difficult to master.

Angular is a JavaScript framework (or platform) for building Web applications. If you compare Angular to React, it’s a 1,000-pound gorilla. For starters, this can be overwhelming, but once you get past the initial learning curve, you’ll find yourself in the stratosphere and feeling giddy. Angular, by the way, is built and maintained by Google, so you can judge its quality.

Vue is another popular framework that clearly tries to find a middle ground between React and Angular. Unless you have a very specific need that can only be addressed through Vue, I recommend using Angular or React.

Having said that, I generally don’t like to support one framework over another. A good developer can choose a framework or toolset based on the problem. Both React and Angular can do everything, but they do some things better than others. For example, form handling in Angular is excellent and useful for enterprise applications that have a lot of user interaction in terms of filling out content. On the other hand, React is great if you have a very dynamic DOM and want to do a lot of things based on user interaction.

In my opinion, I suggest that if you have the time, you should try to learn both at the same time. It will open your eyes and make you a better front-end developer.

The third stage

If you’ve already reached this point, you’ve already gone very far. You should be proud of yourself.

However, the journey is not over.

As we discussed earlier, the modern JavaScript environment is evolving rapidly. If Web developers want to stay relevant, they should do the same. Even frameworks are evolving rapidly. Google releases a new Angular release with new functionality twice a year. The React ecosystem is expanding rapidly. There are other frameworks emerging, and who knows if some of them will become more popular.

So you should continue to study. Some things you can look at are:

  • Progressive Web applications make Web applications work like native mobile applications.
  • Tool frameworks such as Webpack and Babel.
  • ES6, ES7 syntax
  • Various testing frameworks, such as Jest, Karma, and Mocha.
  • If you’re interested in building mobile applications with JavaScript, you can look into React Native, Flutter, and more.
  • Server-side rendering using the SPA framework.

I wish you a happy learning!