Why do web developers need to learn a JavaScript framework?

link to original text

Maybe when we end this article, a new Javascript framework has already been launched somewhere. But this is really out of our control. Therefore, we should simply continue what we have. At least, because of the disclaimer, we can be sure that we are not inventing a new framework.

Once upon a time, writing effective front-end code meant that you must have a good understanding of how HTML, CSS, and JavaScript come together to create web pages. Well, fortunately, even today, this is almost true. However, in the past decade, the Javascript field has seen explosive growth. 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 will try to unravel some aspects of the modern Javascript landscape. If you want to become a professional front-end developer, we will also study what you might want to learn. But before we do that, let's start from the beginning.

How does JavaScript work?

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

Now, the problem is that JavaScript execution is blocking the DOM. This means that users cannot interact much with the web page. In other words, the longer the JavaScript execution time, the slower the response speed of your web application. This is where AJAX or asynchronous JavaScript and XML come in. Most shiny new JavaScript frameworks also use it.

Why use a framework?

It is possible to build web applications without using any framework. But it's not without reason that the modern JavaScript landscape is evolving so fast. In the past ten years, it has become clear that writing complex applications using pure JavaScript is extremely complex.

The goal of modern JavaScript frameworks is to reduce the tedious and repetitive work required to build interactive and user-friendly Web applications. It can be said that regardless of the language, most frameworks try to do the same thing. However, other programming languages ​​may not have so many frameworks. On the other hand, there are actually hundreds of frameworks and libraries in the modern JavaScript field. Each of these libraries or frameworks tries to solve a specific set of problems.

However, most major frameworks try to solve a common use case: how to build a single-page Web application that can support complex user interaction and manage application state and business logic on the front or client side.

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

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 is no other way to express it. Of course, this is a long and tortuous journey.

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

The first stage

Learn HTML

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

Learn css

CSS or cascading style sheets add beauty to ugly HTML pages. Learn as much as possible. It's huge, there are many options, 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 with serious web development. In addition, I recommend learning at least one CSS framework. If you are not sure what to choose, I would recommend Bootstrap. It will help you build professional web applications with less CSS and some good design patterns.

Learn the basics of JavaScript

Considering that once you start using the framework, you won't be able to write ordinary JavaScript, which may sound counterintuitive. However, learning the basics will benefit you a lot in the future. At this point, you may encounter something called jQuery.

But at the risk of alienating certain developers in the community, I recommend that you only learn it when you have a lot of time. jQuery (a library that makes DOM manipulation easier) once ruled the JavaScript world. However, its usage rate in new projects is not high now, and it may not have that much added value for your time.

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

second stage

Learn the basics of git

Now, although this is not a mandatory requirement for learning JavaScript, it will help you learn from other developers and the community available on sites such as GitHub. You can also put your source code on GitHub for everyone to view and build a community around your own work.

Learn a package manager

Any serious modern JavaScript framework needs to know at least some package managers. The package manager is just a way to manage the various dependencies that the application will use. Unfortunately, ordinary JavaScript does not have many libraries, but as developers release various libraries and packages, the entire ecosystem has been greatly developed. The package manager helps us take advantage of 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 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 a package manager, you won't find it very difficult to learn other package managers.

Make a choice-which JavaScript framework to learn?

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

React is a JavaScript library built by Facebook. The library can be used to create interactive UI. Simply based on numbers, React is the most popular among developers today because React is very easy to learn. However, if you start mixing advanced things like Redux into it, it will be difficult to master.

Angular is a JavaScript framework (or platform) that can be used to build web applications. If you compare Angular with React, you can say that it is a 1,000-pound gorilla. For novices, this can be overwhelming, but once you pass the initial learning curve, you will find yourself in the stratosphere and feel dizzy. By the way, Angular is built and maintained by Google, so you can judge its quality.

Vue is another popular framework, and it clearly tries to find a middle ground between React and Angular. Unless you have a very specific need that can only be solved with Vue, I suggest you use Angular or React.

That being said, I usually don't like supporting one framework over another. A good developer can choose a framework or tool set based on the problem. Both React and Angular can do anything, but they do some things better than others. For example, the form handling in Angular is excellent, and it is very useful for enterprise applications that have a lot of user interaction in filling content. On the other hand, if you have a very dynamic DOM and want to perform a lot of operations based on user interaction, React is great.

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

The third phase

If you have reached this point, you have come a long way. You should be proud of yourself.

However, the journey did not end.

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

So you should continue to learn. Some of the things you can view 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 are interested in using JavaScript to build mobile applications, you can study React Native, Flutter, etc.
• Server-side rendering using the SPA framework.

I wish you a happy study!