C
JavaScript Libraries and Frameworks
JavaScript libraries help to bridge the gap between browser differences and provide easier access to complex browser features. Libraries come in two forms: general and specialty. General JavaScript libraries provide access to common browser functionality and can be used as the basis for a website or web application. Specialty libraries do only specific things and are intended to be used for only parts of a website or web application. This appendix provides an overview of these libraries and some of their functionality, along with websites that you can use as additional resources.
FRAMEWORKS
The “framework” designation covers a spectrum of different patterns, but in some form they all provide an opinionated organizational structure within which complex applications can take shape. Using a framework allows for applications to maintain consistent code conventions while elegantly scaling in size and complexity. They offer robust mechanisms for common tasks such as component definition and reuse, controlling data flow, routing, and many others.
Increasingly, JavaScript frameworks take the form of a single page application (SPA). Single page applications use the HTML5 browser history API to offer an entire application user interface, complete with URL routing, with only a single initial page load. The framework manages the application state as well as all the user interface components during the application's execution. Most popular SPA frameworks have strong developer communities as well as an abundance of third-party extensions.
React
Created by Facebook, the React framework covers the “view” component in the Model-View-Controller model. Its limited purview means it can be used in conjunction with other frameworks or React extensions to attain full MVC coverage. React uses unidirectional data flow, is declarative and component-based, uses a virtual DOM to efficiently rerender the page, and offers a JSX syntax, which allows you to write markup inside JavaScript. Facebook also maintains a complementary framework to React, named “Flux.”
- License: MIT License
- Website:
https://reactjs.org/
Angular
First released in 2010 by Google, the Angular project is a full-featured web application framework for Model-View-Viewmodel architectures. In 2016, the project forked into two branches: Angular 1.x, which is a continuation of the original AngularJS project, and Angular 2, which is a wholly redesigned framework that is built around ES6 constructs and TypeScript. The latest releases of both versions are directive and component-based implementations, and both projects enjoy robust developer communities and third-party add-ons.
- License: MIT License
- Websites:
https://angularjs.org/andhttps://angular.io/
Vue
Vue is a full-featured web application framework designed to be less opinionated than frameworks like Angular. Since its release in 2014, its developer community has grown mightily, and many developers reach for Vue because of its ability to offer performance and organizational gains while allowing for less rigorous adhesion to its tenets.
- License: MIT License
- Website:
https://vuejs.org/
Ember
Ember is very similar to Angular in that it is also a Model-View-Viewmodel architecture and uses preferred conventions to fill out a web application. The 2.0 release in 2015 introduced many behavioral characteristics used by the React framework.
- License: MIT License
- Website:
https://emberjs.com/
Meteor
Meteor is wholly unlike any other framework in this list because it is an isomorphic JavaScript framework, meaning that client and server share a codebase. It also uses a real-time data updating protocol, which continually pushes fresh data changes from DB to client. Meteor is an extremely opinionated framework; however, the benefit of this is that application features can be developed quickly using its robust out-of-the-box featureset.
- License: MIT License
- Website:
http://meteor.com/
Backbone.js
A minimal Model-View-Controller (MVC) open-source library built on top of Underscore.js, Backbone.js is optimized for single-page applications, enabling you to easily update parts of the page as application state changes.
- License: MIT License
- Website:
http://backbonejs.org/
GENERAL LIBRARIES
General JavaScript libraries provide functionality that spans across topics. All general libraries seek to equalize browser interface and implementation differences by wrapping common functionality with new APIs. Some of the APIs look similar to native functionality, whereas others look completely different. General libraries typically provide interaction with the DOM, support for Ajax, and utility methods that aid in common tasks.
jQuery
jQuery is an open-source library that provides a functional programming interface to JavaScript. It is a complete library whose core is built around using CSS selectors to work with DOM elements. Through call chaining, jQuery code looks more like a narrative description of what should happen rather than JavaScript code. This style of code has become popular among designers and prototypers.
- License: MIT License or General Public License (GPL)
- Website:
http://jquery.com/
Google Closure Library
The Google Closure Library is an all-purpose JavaScript toolkit, similar in many ways to jQuery. It consists of an extremely broad set of modules covering both low-level operations and high-level components and widgets. The Closure Library is designed so that modules can be included as necessary, and the library is built to work alongside the Google Closure Compiler (covered in Appendix D, “JavaScript Tools”).
- License: Apache 2.0
- Website:
https://developers.google.com/closure/library/
Underscore.js
While not strictly a general library, Underscore.js does provide some additional functionality for functional programming in JavaScript. The documentation talks about Underscore.js as a complement to jQuery, providing additional low-level functionality for working with objects, arrays, functions, and other JavaScript data types.
- License: MIT License
- Website:
http://documentcloud.github.com/underscore/
Lodash
In the same category as Underscore.js, Lodash is also a utility library that provides you with a supplementary JavaScript toolkit. It introduces enhanced methods for native types, such as arrays, objects, functions, and primitives.
- License: MIT License
- Website:
https://lodash.com/
Prototype
Prototype is an open-source library that provides simple APIs for common web tasks. Originally developed for use in Ruby on Rails, Prototype is class-driven, aiming to provide class definition and inheritance for JavaScript. To that end, Prototype provides a number of classes that encapsulate common and complex functionality into simple API calls. As a single file, Prototype can be dropped into any page with ease.
- License: MIT License and Creative Commons Attribution-Share Alike 3.0 Unported
- Website:
www.prototypejs.org/
The Dojo Toolkit
In the Dojo Toolkit, an open-source library modeled on a package system, groups of functionality are organized into packages that can be loaded on demand. Dojo provides a wide range of options and configurations, covering almost anything you want to do with JavaScript.
- License: “New” BSD License or Academic Free License version 2.1
- Website:
www.dojotoolkit.org/
MooTools
An open-source library designed to be compact and optimized, MooTools adds methods to native JavaScript objects to provide new functionality on familiar interfaces and to provide new objects. Its small size and simple API make MooTools a favorite among web developers.
- License: MIT License
- Website:
www.mootools.net/
qooxdoo
qooxdoo is an open-source library that aims to help with the entire web-application development cycle. qooxdoo implements its own versions of classes and interfaces to create a programming model similar to traditional object-oriented (OO) languages. The library includes a full GUI toolkit and compilers for simplifying the front-end build process. qooxdoo began as an internal library for the 1&1 web-hosting company (www.1and1.com) and later was released under an open-source license.
- License: GNU Lesser General Public License (LGPL) or Eclipse Public License (EPL)
- Website:
www.qooxdoo.org/
ANIMATION AND EFFECTS
Animation and other visual effects have become a big part of web development. Getting smooth animation out of web pages can be a difficult task, and several library developers have stepped up to provide easy-to-use and smooth animation and effects. Many of the general JavaScript libraries mentioned previously also feature animation.
D3
Easily the most popular animation library, D3 (for “Data Driven Documents”) is the most robust and powerful JavaScript data visualization tool in use today. It has an intensely deep featureset, covering canvas, SVG, CSS, and HTML5 visualizations. The library gives you the capability to control the final rendering with extreme precision.
- License: BSD
- Website:
www.d3js.org/
three.js
three.js is one of the most popular WebGL libraries available. It offers a lightweight API that allows you to perform complex 3D renderings and animations.
- License: MIT License
- Website:
https://threejs.org
moo.fx
The moo.fx open-source animation library is designed to work on top of either Prototype or MooTools. Its goal is to be as small as possible (the latest version is 3 KB) and to allow developers to create animations while writing as little code as necessary. moo.fx is included with MooTools by default; it can also be downloaded separately for use with Prototype.
- License: MIT License
- Website:
http://moofx.mad4milk.net/
Lightbox
Lightbox, a JavaScript library for creating simple image overlays on any page, requires both Prototype and script.aculo.us to create its visual effects. The basic idea is to allow users to view an image or a series of images in an overlay without leaving the current page. The “lightbox” overlay is customizable in both appearance and transitions.
- License: Creative Commons Attribution 2.5 License
- Website:
www.huddletogether.com/projects/lightbox2/