Get the highlights in your inbox every week.
If you prefer to follow along as I explore these frameworks, you can watch my video.
|Term||What It Is|
|Document Object Model (DOM)||A tree-structure representation of a website where each node is an object representing part of the webpage. The World Wide Web Consortium (W3C), the international standards organization for the World Wide Web, maintains the definition of the DOM.|
|Virtual DOM||A "virtual" or "ideal" representation of a user interface (UI) is kept in memory and synced with the "real" DOM by a library such as ReactDOM. To explore further, please read ReactJS's virtual DOM and internals documentation.|
|Data Binding||A programming concept to provide a consistent interface for accessing data on websites. Web elements are associated with a property or attribute of an element maintained by the DOM. For example, when you need to fill out a password in a webpage form, the data binding mechanism can check with the password validation logic to ensure that the password is in a valid format.|
|KnockoutJS||Open source Model-View-ViewModel (MVVM) framework||MIT License||Jul 5, 2010|
|EmberJS||Another open source Model-View-ViewModel framework||MIT License||Dec 8, 2011|
For context, here is the publicly available data on popularity based on NPM package downloads per framework, thanks to npm trends.
- Highly optimized for performance—React's virtual DOM implementation and other features boost app rendering performance. See ReactJS's description of how its performance can be benchmarked and measured in terms of how the app performs.
- Excellent supporting tools—Redux, Thunk, and Reselect are some of the best tools for building well-structured, debuggable code.
- One way data binding—The model used in Reach flows from owner to child only making it simpler to trace cause and effect in code. Read more about it on ReactJS's page on data binding.
Who is using ReactJS? Since Facebook invented it, the company itself heavily uses React for its frontpage, and Instagram is said to be completely based on the ReactJS library. You might be surprised to know that other well-known companies like New York Times, Netflix, and Khan Academy also implement ReactJS in their technology stacks.
What may be even more surprising is the availability of jobs for ReactJS developers, as you can see below from research done by Stackoverflow. Hey, you can work on an open source project and get paid to do it. That is pretty cool!
ReactJS's GitHub currently shows over 13K commits and 1,377 contributors to the open source project. And it is an open source project under MIT License.
AngularAngular is close behind. In fact, while React is the more popular choice among open source developers and startup companies, larger corporations tend to prefer Angular (a few are listed below). The main reason is that, while Angular might be more complicated, its uniformity and consistency works well for larger projects. For example, I have worked on both Angular and React throughout my career, and I observed that the larger companies generally consider Angular's strict structure a strength. Here are some other key strengths of Angular:
- Well-designed Command Line Interface: Angular has an excellent Command Line Interface (CLI) tool to easily bootstrap and to develop with Angular. ReactJS also offers the Command Line Interface as well as other tools, but Angular has extensive support and excellent documentation, as you can see on this page.
- One way data binding—Similarly to React, the one-way data binding model makes the framework less susceptible to unwanted side effects.
Angular's GitHub page shows 17,781 commits and 1,133 contributors at the time of this writing. It is also an open source project with an MIT License, so you can feel free to use it for your project or to contribute.
Here are some of the key strengths of VueJS:
- Easier learning curve—Even compared to Angular or React, many front-end developers feel that VueJS has the lowest learning curve.
- Small size—VueJS is relatively lightweight compared to Angular or React. In its official documentation, its size is stated to be only about 30 KB, while the project generated by Angular, for example, is over 65 KB.
- Concise documentation—Vue has thorough but concise and clear documentation. See its official documentation for yourself.
VueJS's GitHub shows 3,099 commits and 239 contributors.
Meteor is used by several corporations such as Qualcomm, Mazda, and Ikea, and many applications like Dispatch and Rocket.Chat. See the case studies on its official website.
Some of the key features of Meteor include:
- Data on the wire—The server sends the data, not HTML, and the client renders it. Data on the wire refers mostly to the way that Meteor forms a WebSocket connection to the server on page load, and then transfers the data needed over that connection.
- Supports most major frameworks—Angular, React, and Vue can be all combined and used in conjunction with Meteor. Thus, you can still use your favorite framework, like React or Angular, but still leverage some of the great features that Meteor offers.
Although Ember has similar benefits to the other frameworks we've discussed, here are some of its unique differentiators:
- Convention over configuration—Ember standardizes naming conventions and automatically generates the result code. This approach has a little more of a learning curve but ensures that programmers follow best-recommended practices.
- Fully-fledged templating mechanism—Ember relies on straight text manipulation, building the HTML document dynamically while knowing nothing about DOM.
As one might expect from a framework used by many applications, Ember's GitHub page shows 19,808 commits and 785 contributors. That is huge!
- Declarative binding—Knockout's declarative binding system provides a concise and powerful way to link data to the UI. It's generally easy to bind to simple data properties or to use a single binding. Read more about it here at KnockoutJS's official documentation page.
- Automatic UI refresh
- Dependency tracking templating
Knockout's GitHub page shows about 1,766 commits and 81 contributors. Those numbers are not as significant compared to the other frameworks, but the project is still actively maintained.
The BackboneJS GitHub page shows 3,386 commits and 289 contributors.
- Fast rendering—Aurelia claims that its framework can render faster than any other framework today.
- Uni-directional data flow—Aurelia uses an observable-based binding system that pushes the data from the model to the view.