JavaScript, by being the language supported in all mainstream browsers, has been key to the development of browser-based web apps, garnering attention from multitudes of developers while being fitted with new capabilities nearly every year. Naturally, an ecosystem of frameworks and libraries has sprung up around JavaScript in an effort to streamline and enhancement JavaScript application development.
These tools offer capabilities ranging from event-handling to code reduction and data-rendering. Here are the most essential technologies in the JavaScript developers toolkit for developing browser-based web apps.
Essential JavaScript: Angular
Angular, previously known as AngularJS and developed by Google, is a single framework for both mobile and desktop web development. Aimed at creating native-like progressive web apps, Angular offers dependency injection, useful for assembling data services for applications, and an HTML template for composing components.
Where to download Angular
The Angular project quickstart page makes it easy for developers to get started with Angular.
Angular features
September 2016’s Angular Version 2 featured a rewrite based on TypeScript, Microsoft’s typed superset of JavaScript, to get around performance limits in the original Angular architecture.
Now, developers are awaiting Angular 5, which is due October 23. (There was no version 3 or 4.) It is slated to feature:
- An emphasis on making it easier to build progressive web apps, for caching apps in the browser.
- A build optimizer to make the application smaller by eliminating unnecessary code.
- Making Material Design components compatible with server-side rendering.
Angular 6, due five to six months after version 5, is slated to focus on the same themes as Angular 5: ease of use, smaller size, and performance. Angular itself has a strong ecosystem, with four data libraries and support in IDEs such as JetBrains IntelliJ Idea.
Essential JavaScript: Aurelia
Composed of focused modules, Aurelia is a client framework backed by developer Blue Spire for mobile, desktop, and web applications. It promises fast rendering and “great” memory efficiency.
Where to download Aurelia
You can download Aurelia from GitHub.
Aurelia features
There are Aurelia modules for metadata, dependency injection, binding, templating, and routing. Aurelia integrates web components and offers two-way data-binding to objects. Most Aurelia code is written as plain JavaScript.
Other features include:
- An HTML compiler to build custom elements and add attributes to elements.
- Support for dynamic loading.
- A dependency injection container for building coupled code, for unit testing.
- The Aurelia CLI, which presents an option for creating new projects, requires Node 4 or above, NPM 3, and Git.
- Integration with the Polymer library for building reusable web components.
- Inheritance of bindables in the templating engine, for component inheritance situations
Essential JavaScript: Backbone.js
Backbone.js, aka just Backbone, provides structure to JavaScript-heavy application. It features models with key-value binding and custom events, which are collections with an API providing enumerable functions and views with declarative event-handling.
Where to download Backbone.js
You can download both development and production versions of Backbone.js from the Backbone project website.
Backbone.js features
Data in Backbone.js is represented as models, which can be created, validated, destroyed, and saved to the server. The models are connected to applications via a RESTful JSON interface. With Backbone.js, the model triggers a change event when a UI action prompts an attribute of a model to change. Views displaying the model’s state can be notified of this change and re-render themselves.
Essential JavaScript: Ember.js
Ember.js is a framework that emphasizes out-of-the-box productivity. It features integrated templates, called handlebars, that are intended to reduce code-writing; these templates update automatically when data changes.
Where to get Ember.js
You can install Ember.js via NPM by typing npm install -g ember-cli@2.15.
Ember.js features
Ember.js’s features include:
- APIs that are focused on ease of development.
- Common idioms that let developers focus on making an app special.
Ember.js 3.0’s stable release is due February 12, 2018, following a beta release on January 1. APIs deprecated during 2.x but still supported will be purged in Ember.js 3.x. An add-on will supports Ember.js 2x APIs in the 3.x line.
Essential JavaScript: Ext JS
Unlike other prominent JavaScript frameworks, Sencha’s Ext JS is not open source; it is a commercial product. It is for building enterprise-oriented, data-intensive, cross-platform web apps for multiple form factors.
Where to download Ext JS
The Ext JS software be downloaded from Sencha’s Ext JS page.
Ext JS features
The Ext JS framework offers many components, such as for data grids and calendars. Ext JS works with tools such as Sencha Architect, for drag-and-drop HTML5 application development, and Sencha Themer, for styling of apps.
Ext JS’s builders are pondering where to go long term with Ext JS’s architecture. Sencha had planned on releasing Ext JS 7 either late this year or early next year but those plans are now on hold, due to Sencha’s acquisition by Idera. Discussions have been held about possibly offering compliance with the latest ECMAScript standard and using the NPM package manager and the Webpack module bundler.
Essential JavaScript: jQuery
The jQuery JavaScript library features an API for functions such as HTML document manipulation, event-handling, and animation. Under the jurisdiction of the JS Foundation, the jQuery library was first made available in August 2006.
Where to download jQuery
The jQuery software can be downloaded from the jQuery project website.
jQuery features
Although not a framework for building applications, jQuery provides an elegant, lower-level API to make working with the DOM easy across browsers. jQuery can be used with application-building tools like Angular and React/Redux.
The jQuery team is now doing about two releases a year, with just minor versions due between now and mid-2018. Beyond that, jQuery 4.0 and subsequent releases call for a complete rewrite using “next-generation” JavaScript, requiring an update to the build system. Also planned for jQuery 4 and later versions:
- a rewrite of jQuery’s speed framework, to track performance regressions
- a new event module design, to remove special events hooks, avoiding the need for a
jquery.Eventwrapper - support for new native options like passive event listeners
Essential JavaScript: Meteor
Meteor, aka Meteor.js, is a JavaScript framework to enable quicker development of apps for the web, mobile, and desktop using less code. Developers can use JavaScript for all environments, including the application server, web browser, and mobile device.
Where to download Meteor
The Meteor software can be downloaded from the Meteor project website.
Meteor features
The Meteor platform, also known as Meteor.js, includes technologies for building connected-client reactive applications, a build tool, and a set of packages from the Node.js and JavaScript community. With Meteor, the server sends data—not HTML—over the wire, with the client rendering it.
Meteor 1.6 is the next scheduled release, with a focus on upgrading to Node.js 8, which will let Meteor take better advantage of ECMAScript features on the server, which should improve build performance.
Essential JavaScript: Polymer
Google’s Polymer JavaScript library is intended to enable developers to take advantage of web components, providing for reusable custom elements to interoperate with a browser’s built-in elements.
Where to download Polymer
You can install Polymer from the Bower package manager.
Polymer features
Polymer Version 2.0, released in May, improved interoperability by removing the need to use Polymer.dom for DOM manipulation. This makes it easier to use Polymer components with other libraries and frameworks.
Other features in Polymer 2.0 include:
- Data system improvements to boost debugging and propagation of data through and between elements.
- ECMASript 2015 classes and standard custom elements. Polymer Version 1 methods are used to define elements, instead of using a Polymer
factorymethod. But thefactorymethod is still supported via a compatibility layer. - Simpler array handling.
On the drawing board is Polymer 3.0, which is in a preview form and switches from the Bower and HTML imports to NPM and ECMAScript 15 modules. Bower and HTML imports had worked for an HTML imports-based workflow. But they put Polymer outside the mainstream of web development, and made it hard for people working with other frameworks or build tools.
Essential JavaScript: React
Facebook’s React library for building UIs, offers declarative views and is component-based, with component logic written in JavaScript. The React library, also known as React.js, does not support models or controllers, but other related projects do cover these functions.
Where to download React
The React software can be downloaded from the React project website.
React features
You can use the JSX syntax with React to describe a UI, with JSX allowing JavaScript and HTML to be mixed in a single component. The build step then produces pure JavaScript.
To improve performance, React recently underwent a rewrite, dubbed Fiber and featured in the recently released React 16. The upgrade features a design centered on asynchronous rendering, for processing large components. But asynchronous rendering itself is not yet enabled in React; that will happen further along in the React 16.x line.
Other improvements in React 16 include:
- Errors that offer a component stack trace to make them easier to debug.
- Returning of strings/arrays directly from component render methods.
- A new faster, streaming server-side renderer.
- More native-like application performance.
React also has just undergone a re-licensing from the BSD + Patents license to the MIT license, after organizations such as the Apache Software Foundation objected to the license’s terms. Apache feared the BSD + Patents license made its software less of a “universal donor” to downstream projects.
Essential JavaScript: Vue.js
Vue.js is a competitor to React, claiming faster rendering. The core library is focused on the view layer, and the framework is intended to be incrementally adoptable.
Where to download Vue.js
The Vue.js software can be downloaded from the Vue.js project website.
Vue.js features
Declarative rendering is key in Vue.js, using a template syntax to render data to the DOM. The Vue.js component system is an abstraction enabling development of large-scale applications composed of modules that can be self-contained and reusable. Components in Vue.js are essentially a Vue instance with predefined options.
Vue.js 2.5 should arrive in October 2017, featuring better integration of TypeScript. Plans for later versions of Vue.js include:
- making it easier for TypeScript users to start new projects in Vue.js
- a rewrite of the framework’s reactivity system using proxies
- support for the WebAssembly portable code format
- the ability to leveraging more from web components
