JavaScript Frameworks and Libraries for 2016 and Beyond

Less than ten years ago it seemed the usage of JavaScript (JS) was limited to click functionality, form validation, and those annoying pop-windows that IE was constantly throwing at you. Today, the JS world has changed drastically. Once a language that was only client-interaction driven, is now being used for desktop applications, server-side language, content management systems, dependency management, entire web applications, CSS processing, database management and much much more.

If you haven’t started learning a programming language and are looking for a good place to start, I believe JS is a great choice with it’s almost endless potential. If you are also wondering if JS will help land you a job in 2016 and beyond, here is a small list of companies currently running a JS framework and/or library:

  • 37Signals

  • LinkedIn

  • PayPal

  • Dow Jones

  • Spotify

  • YouTube

  • Google

  • Twitch

  • Netflix

  • Kickstarter

Today I would like to share some of the more prominent frameworks and libraries that are in use to day, their purpose, and why they are worth learning for 2016 and beyond. This list is not an attempt to define the “best” JS frameworks, but is more geared towards a solid foundation of what is currently possible with JS.

 

jQuery
jQuery is a fast, small, and feature-rich JavaScript library that makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler to use than writing pure JS. Jquery’s tagline is “write less, do more” and it does just that. Jquery adds a “$” object to your global scope that contains a bunch of methods within it. These methods contain common application functionality thus preventing you from having to write these functions yourself. For instance if you wanted to add a CSS class to an element just use the addClass() method. Want to remove a CSS class? The removeClass() is available that allows you to do just that!

jQuery really broke the doors wide open for making JS a preferred language to manipulate and animate DOM elements at a time when browser limitations held developers back from achieving this functionality with other resources. Today, jQuery is used on 54,451,485 live sites according to builtwith.com. With such widespread usage and vast company of developers, it is safe to say jQuery is here to stay.


Node.js
Node brings the JS language to server-side development with an event-driven, non-blocking I/O (input/output) model that makes it lightweight and efficient. Node is an asynchronous event driven framework that allows all operations to run in a single thread, instead of many different threads, as is the case with Apache running PHP. Since all operations are running asynchronously (non-blocking), your application runs extremely fast without consuming tons of memory. This also allows a Node server to become easily scalable since it can handle many I/O operations simultaneously without a huge load on the server.

Another great benefit of using a JS based server is that you no longer have to transcribe data from one language to another. For instance, if you are pulling object data from a MySQL database with PHP that you need to use in a JS function, you have to find an elegant way to translate that data so that it can be easily used between both languages. This process always results in convoluted code that can be avoided completely if the server-side and client-side of your app are both running JS.


npm
Beyond allowing you to create a server environment, Node also contains a package manager accurately named “npm” for Node Package Manager. Npm allows you to quickly install JS libraries to your Node project through your CLI with easy to use commands. Npm also does a great job at setting up dependencies for your project so if someone installs your module in their project, npm will grab all of the necessary packages that you have defined for your project.

npm can be used for other projects than just a Node application. At Southern Web, we use npm packages within our WordPress projects to handle SASS processing, file minification, image compression, and development environment browser testing.


Keystone.js
Keystone is a an open source framework for developing database-driven websites, applications and APIs in Node.js built on Express.js and MongoDB. This framework is one of a few that are pushing JS into the content management system sector.

As you can see in their demo, the CMS even includes a full-fledged admin UI. While this currently does not compare to the community that WordPress or Drupal has, it is interesting to see that a JS independent application can even handle a CMS on its own.


Angular
Angular is a Model-View-Controller framework that extends the HTML vocabulary in your application, thus resulting in an environment that is expressive, readable, and quick to develop. Angular allows you to implement intense JS functionality with a very minimal amount of code on the front-end and back-end of your application.

Angular also allows for Two Way Data-Binding which allows the developer to implement complex Ajax functionality by simply adding tags to your HTML. An example of this would be updating an H2 tag by typing within a input field. Simply add an attribute to the input element such as “ng-model=””enterName” and add the tag “{{enterName}}” within your H2 tag. Now when a user enters a name in the input field, the H2 tag updates instantly to the text that was entered. This type of functionality would otherwise require the developer to tediously write out the code to handle this interaction and code to store the text that was entered. Instead, Angular handles all of the code with the example above.

When it comes to JS MVC frameworks, I would suggest taking a look at backbone.js, emberjs, and react.js. All are widely used and there is much debate as to which framework will be the most prominent going forward.


Underscore.js
It is stated that underscore.js is the “tie to go along with jQuery’s tux”. Underscore provides over 100 prebuilt functions that allow the devleoper to manipulate data whereas jQuery is mainly used to manipulate the DOM.

Underscore is quite popular and is currently used on many of the web’s top websites, including the list below:

  • theverge.com

  • rottentomatoes.com

  • fidelity.com

  • staples.com

  • cbssports.com

  • walmart.com

The framework is even required for Backbone.js, another JS MVC client and competitor to Angular.js. To make this framework even more attractive, the minified version of the library comes in at 5.7kb…pretty awesome!


Meteor.js
Meteor is a JS web application framework written using Node.js. Meteor allows for rapid prototyping and produces cross-platform (web, Android, iOS) code. It utilizes a few of the frameworks mentioned above (Node, jQuery, backbone) as a publish–subscribe pattern to automatically propagate data changes to clients without requiring the developer to write any synchronization code.

Meteor is a complete foundation for all of client and server side code to be handled by JS. Josh Owens summed it nicely with this:

Here is a list of what it would take to not rely on Meteor.js:

  • Node.js

  • Express

  • Grunt or Gulp

  • Mongoose mongo driver

  • A pub/sub driver (I hear there is a decent redis one)

  • Websocket (which one?)

  • Angular

  • Karma

  • account/oAuth libraries

  • A pot of fresh coffee

As you can see, it Meteor js takes advatage of many JS libraries and packages thus showing the script’s strong prominence in the future of development.

 

The tools listed above are just a small handful of frameworks and libraries being built for the JS community. Besides jQuery, all of the tools mentioned above are six years old or younger! To watch a language come so far in such little time, it is intriguing to see where JS will be in the next five years.

With all of it’s current potential, there has never been a better time to start learning JS. With core language under your belt, jumping into these new technologies will be much easier. If you are interested, a great place to get started is with the courses in Javascript at Code School and Codecademy. I also believe owning a copy of Javascript: The Definitive Guide is a must have resource for all JS developers.

With frameworks and libraries discussed above, hopefully you too will find a career path with JS or even create one of your own.



Related Articles