Disclaimer – No Javascript frameworks were invented for the purpose of writing this article.

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 frontend 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 this decade, the Javascript landscape has literally 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 about 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 a 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 this thing called 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 amount of time Javascript executes, 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 to use a Framework?

It is perfectly possible to build a web application without using any framework. 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, 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 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.

Basically, 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 HTML page. How 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 it 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 if 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 would 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 to learn it only if you have bucket-loads of time. jQuery (a library of 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 – 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. It is the biggest and most widely used. You can explore it here.

Other option is Yarn. Point is that if you understand one package manager, you won’t find it terribly difficult to learn others.

The Big Decision

If you’ve reached 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 to 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’ve 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 merit of 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 here, you’ve come really far. You should be proud of yourself.

However, the journey doesn’t end.

As we talked about earlier, modern Javascript landscape world is evolving rapidly. And so should the 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 that some of them might become even more popular.

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

  • PWAs or 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, 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.
  • and many more…

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


Saurabh Dashora

Saurabh is a Software Architect with over 12 years of experience. He has worked on large-scale distributed systems across various domains and organizations. He is also a passionate Technical Writer and loves sharing knowledge in the community.

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *