When it comes to choosing the right JavaScript Framework it certainly is a wild and confusing landscape out there. This guide will help you–a budding front-end developer–navigate those murky waters when the time arrives to choose a framework suited for you. Each framework I’ve chosen to showcase will describe the brief fundamentals, language syntax and also include helpful learning resources.
What is a JavaScript Framework?
In our world of development a “framework” can be defined as a JavaScript library that displays and renders data-driven, interactive interfaces. They exist to help render data to a user when an interaction is triggered. All these libraries differ slightly from one to the next, but their purpose is the same; show new data when an interaction has taken place.
Let’s examine these powerful frameworks deeper to help us better sift through the landscape.
The JavaScript Framework Players
There are many options when it comes to choosing a framework–what follows is a list of the current terrain, including Vue, React, Angular and Ember. Each one has been selected based on community growth and sustainability, GitHub activity, length of time the project has been available to developers, and whether the project is still in use by a large group of developers and development companies.
Vue
First Commit July 27, 2013
File Size: 27.5KB minified
Vue claims to be a progressive framework that is approachable, versatile and performant. If you have a fundamental understanding of the good ol’ web stack (HTML, CSS, JS) you’re already in a great position to use Vue.
“The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.” – VueJS Introduction Docs
When it comes to syntax this is what the library will offer using their bare-bones “Hello World” demo:
<div id="app">
{{ message }}</div>var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})The library will also become more expressive using “attribute values” within your markup. Here’s a more involved syntax using these attributes:
<div id="app-2"><span v-bind:title="message">
Hover your mouse over me for a few seconds
to see my dynamically bound title!</span></div>Syntax aside, Vue.js will allow for the handling of user input, building component templates, binding data to the structure of the DOM with conditionals and loops, and a “declarative rendering” achieved by a straight forward syntax loosely modeled on the Web Components Spec.
Learning Resources:
- Learn Vue 2: Step By Step on Laracasts
- Build a Bookmark Manager With Rails and Vue on Tuts+
- Vue.js Fundamentals by DevMarketer
- Vue Guide on vuejs.org
React
First Commit May 29, 2013
File Size: 7.3KB minified w/Add-ons: 11.3KB minified
React defines itself as a JavaScript library for building interfaces that are driven by dynamic data. It was developed by the employees of Facebook and is also Open Source on GitHub. You may feel a bit gross when I say you’ll author HTML in JavaScript, but unfortunately this is how React works.
Let’s look at a syntax example straight out of the React intro tutorial documentation. This example creates what React calls “Component subclasses” although it has a few different kinds of components too. The syntax for a component call is XML-like as you will notice in this HTML code:
class ShoppingList extends React.Component {
render() {
return (<div className="shopping-list"><h1>Shopping List for {this.props.name}</h1><ul><li>Instagram</li><li>WhatsApp</li><li>Oculus</li></ul></div>
);
}
}<ShoppingList name="Mark" />
React comes with additional options such as add-ons that are considered to be a useful set of utility modules. These add-ons include utilities that help when dealing with animations and transitions, performance profiling tools, test case helpers and much more. React documentation also recommends using React with Babel to allow use of ES6 and JSX in your JavaScript code. There’s also a handy React Devtools extension for Chrome and Firefox that lets you inspect a React component tree in your browser’s Dev Tools.
Learning Resources:
- React For Beginners by Wes Bos
- Getting Started With React.js on Tuts+
- Tutorial: Intro To React
Angular
First Commit September 18, 2014 (GitHub reported)
Initial Release (According to Wikipedia) October 20, 2010
File Size: CLI Tool. No Longer a standalone JS file.
Angular is developed by the team at Google. Since HTML was never meant to be a dynamic language Angular extends the HTML vocabulary by allowing attributes to be extended in your markup. This ultimately allows “declarative bindings” to events, in order to display dynamic data and states based on interactions. You can meet large data requirements by building data models on RxJS, Immutable.js or another push-model. And you can extend the template language with your own components and use a wide array of existing components.
“Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target. For web, mobile web, native mobile and native desktop.”
The Angular syntax is nothing new in terms of HTML attributes and Mustache-esque placeholders, with the exception of the namespacing using ng- as you will see in the following example:
<input type="text" ng-model="yourName" placeholder="Enter a name here"><h1>Hello {{yourName}}!</h1>Angular is also primarily made up of components that are a combination of HTML templates and a component class that controls a portion of the screen.
// src/app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }<!-- index.html --><my-app>Loading AppComponent content here ...</my-app>
The file with the extension .ts from the example above is written in TypeScript. A language that starts from the same syntax and semantics of JavaScript. It’s a superset of JavaScript that compiles into JavaScript, or what you might think of as a “language enhancer” i.e. syntax sugar. This is where the CLI tool will help when it comes time to compile your code.
Learning Resources:
- Get Started With Angular 2 on Tuts+
- Modern Web Apps With Angular 2 on Tuts+
- Learning Angular on angular.io
- Angular Resources angular.io
- Angular2 on egghead.io
Ember
First Commit Apr 30, 2011
File Size: ?
Ember is a library much like the others we’ve discussed that also integrates with Handlebars. For those not familiar with Handlebars it’s a template language to build static pages, much like you may be familiar with for Jekyll. Developers can use Handlebars to describe the markup and use JavaScript to implement custom behavior for components based on the interaction.
“Ember is a JavaScript application framework for creating single-page client-side web applications, which uses Model-View-Controller (MVC) pattern.”
Ember is built with Node and uses a variety of Node.js modules for operation. Ember also has a command line interface tool (installed via npm if you wish) which provides a standard project structure and a set of development tools including an addon system. It also comes packaged with a development server and build environment flags that can be passed via the command-line.
Syntax for Ember looks to be nothing unusual, relying on object literals and the dot notation we are very familiar with in JavaSript, plus Handlebars for the template calls.
import Ember from 'ember';
export default Ember.Controller.extend({
firstName: 'Trek',
lastName: 'Glowacki'
});Hello, <strong>{{firstName}} {{lastName}}</strong>The sample above is a very basic taste of the syntax and file structure. The demo code will export and extend an Ember controller and compile the names from the object literal into your markup.
It’s also worth mentioning that Ember’s router capabilities allows you to stop breaking the web. You get URLs and a working back button by default with every route you create, and the API is easy to use (and familiar to those with experience in server-side web frameworks). Ember.js is free, open source and will always be as they state on their site.
Learning Resources:
- EmberJS Framework Basics on Tuts+
- Getting Into EmberJS on Tuts+
- EmberJS Guides on emberjs.com
Conclusion
Framework choice always boils down to personal coding preference and confidence in the project long term. If you’d like to go deeper into an X vs. Y to help make the choice Vue has a decent explanation and comparison on their site that also includes information about other libraries such as Knockout, Polymer and Riot. You might also like to take our quiz, which should help you narrow down your choices!
