• Home
  • /
  • Articles
  • /
  • Learning Path for New Age Javascript Technologies
Learning New JavaScript

Learning Path for New Age Javascript Technologies

Okay, after digging deeper into my wishlist of Javascript technologies I have finally been able to devise a sequential learning path that should hopeful make life easier for me. The reason for doing this is when I first started to read the documentation for ReactJS I found a lot of alien terms & jargons (eg, JSX, Babel, Webpack etc.) that I could not follow without learning more about what they meant. Often I found myself switching from one topic to another to make sense of how it fits into this new world of Javascript programming.

So following is my recommended sequence for learning the new Javascript tools & frameworks:

#1 ECMAScript 2015 also called ES6

In a nutshell this is the 6th major revision to the Javascript language. It has added a whole bunch of new inbuilt functions and features which would be essential to learn before we even touch the below tools. Almost all of the below technologies require you to understand this new way of writing Javascript. So it’s the first thing that I will be learning and working with. Full details on the upgrades are available here

#2 Babel

Okay, so ES6 has introduced a lot of new features in Javascript but not all of these features work 100% in all browsers. Take a look at this compatibility chart which maps each new function and its compatibility against each browser. So how do we use ES6 in a browser that may not support the new syntax or function? Here is where Babel comes in handy. Babel is a compiler/polyfill that basically takes in ES6 JS code, compiles it and spits out Javascript that non ES6 compliant browsers can understand. So even if your browser does not support a function like .map() Babel will convert your code into an earlier version of JS which will implement the same functionality as .map(). Pretty cool stuff. You will find a lot of references to Babel in ReactJS and NodeJS frameworks. So I will deep dive into how to use this tool in subsequent posts.

#3 Webpack

At this point all that I can say is that webpack takes in a bunch of files such as css and JS files and bundles them all into a single file that can be used instead. This helps your web application massively because it only requires a single HTTP request to fetch the file instead of multiple round trips to the server for each and every file. Looks like there is a lot more to Webpack but I can only comment when I learn and use it within my own projects.

#4 NodeJS

The first time I ever heard about the possibility of writing server side code with Javascript it pretty much freaked me out. After all Javascript was only ever meant to work within the browser right? It didn’t matter what language you were using in your backend systems and APIs to deliver data, Javascript was the only scripting you ever needed in the browser. Modern browsers have become increasingly powerful, capable of handling and delivering a faster and more interactive experience for users. What started with jQuery has evolved into a full time career option: the modern day front end or UI developer who works only with HTML & Javascript.

NodeJS is taking this further by allowing us to write even server side code with Javascript syntax. The first obvious advantage of doing this is would be that you only need to learn one language: Javascript. On top of that NodeJS seems to be designed to work for scale and capable of handling a large volume of concurrent connections. This seems super interesting and I can’t wait to play around with NodeJS.

#5 Express

ExpressJS is a framework for NodeJS which seems to be quite popular for routing and templating. Since I do not know much about it at the moment, I will probably dig deeper into it at a later stage and provide more specifics benefits.

#6 ReactJS

From what I have read and heard so far, ReactJS is THE most important technology to learn at the moment. It seems to take a completely different approach in rendering UI using a virtual DOM and DOM ‘diffing’ thereby making renders much faster. This is a big shift from jQuery which is based on manipulating DOM elements by IDs or classes etc. React has a concept of state and props which allow you to render and handle dynamic events in your application. Created and used first within Facebook, ReactJS has developed a huge developer community and it seems Facebook has big plans to keep developing and extending this technology.

#7 Redux

I don’t know much about Redux at the moment apart from the fact that it allows for state management and works well with React, so more on this later.

#8 Socket.io

This is probably the oldest technology in wishlist. Socket.io enables us to use websockets in our solutions which allow for bi-directional communication between browser and the server. This means I don’t have to poll the server for real time updates. The simplest example would be a chat application wherein you would want the browser to automatically be notified of a new message. Prior to websockets we would probably poll the server periodically to check for new messages but with sockets this is managed much more efficiently.

 

So that’s its. The above sequence seems logical for learning these new age tools and should hopefully reduce the frustration of me and my peers when learning new concepts.

In my next post, I am hoping to start out with ES6 and learn what it has to offer. Can’t wait to get started!

Leave a Reply