The State of JavaScript Frameworks

If there is something you want to build on the web, there is a JavaScript framework to do it. Want to emulate a RESTful Rails backend using Node instead? Sails is for you. Build mobile apps with React components? Get some Reapp in your life. Need an impossibly lightweight and fast client-side MVC? Mithril will be your one and only.

JavaScript will even fix your crappy 'scroll to top' button.

The current state of JavaScript framework development.

The problem with JavaScript ubiquity in web development is mistaking change for progress. Whenever a new framework is released, there tends to be a bit of of an “emperor’s new clothes” effect. While it's easy to bag on every newest flavor of the week. there are JavaScript frameworks that have proven useful for longer that the attention span of a teenager, and are being used to build some awesome stuff. Today we take a look at three: Angular, Meteor, and React.

The Stalwart: Angular

Out of the three listed, Angular is probably the most commonly used JavaScript framework. With backing from the Mountain View Monster themselves (Google), Angular is used by several high-traffic applications, such as MSNBC, Vevo, and Honest Company's e-commerce site. Angular plays nicely with open source back ends like Rails and Node, as well as proprietary solutions like .NET and ASP.NET.

Angular's biggest trick is adding dynamic functionality to otherwise static HTML markup. It accomplishes this feat with two-way data binding, which marries changes to either the view or the model to each other. When an Angular view is updated, the information is also changed, or "binded" to its model. When a model's data is changed, the view is updated automatically. This binding eliminates many of the errors that come from trying to write code to manipulate the DOM on data changes.

Being one of the most widely adopted frameworks also means that the resources for learning Angular are prevalent. CodeSchool has a fantastic video series that breaks down the components very well. Codecademy has also jumped into the fray with their own step by step exercises for tackling Angular.

The Challenger: Meteor

Meteor is unique on the this list as the only truly full stack framework. Unlike our other two contestants for Ruler of All JavaScript, Meteor is not maintained by a Bay-area behemoth, but rather the VC-backed collective of scrappy former MIT students known as Meteor Development Group. Meteor is starting to be adopted by several startups, most notably are Workpop, an Los Angeles-based jobs board for hourly workers, and Classcraft, a teaching gamifcation application.

Meteor’s biggest trick is reactive development. The modern web requires UI’s on the client to respond immediately to changes in data, without having to wait for server calls on every single action. Meteor accomplishes this feat by incorporating a TON of awesome tools that are unlike most other web development frameworks around. The combination of in-house developed tools like Blaze, Tracker, and DDP, combined with awesome existing technologies like Node, MongoDB, jQuery, and Handlebars makes for a comprehensive stack for building reactive web applications quickly.

For context, try to build a real-time chat application in Rails. Don’t worry, I’ll wait.




Back? Not a fun experience, huh? Exactly why Meteor is so awesome. If you need more proof, here’s the Internet’s take on Meteor and its place in modern web development:

Meteor has developed a robust community with great resources in a short time. Atmosphere a catalogue of Meteor packages, similar to Ruby gems. Crater is a Reddit/Hacker News-like community for Meteor news and happenings. There are several great podcasts as well, including The Meteor Podcast, MeteorClub, and Meteor Interviews.

The Phenom: React

Not to be outdone by Google, the Zuckerberg Gang have recently released React, a “JavaScript library for building user interfaces.” React is possibly the best solution yet to creating and using customized UI components. Justin Deal from Zapier Engineering explains it best:

With React, just like with a game engine, you simply specify how a given application state gets translated to a given view. If something changes, you don't change the view. Instead, you just render again and get a new view.

React adoption has been swift, and is currently utilized by two of the biggest web applications in the world: Facebook and Instagram. Some heavy duty credentials, indeed.

It's ironic that, while Angular puts the power of JavaScript directly into your HTML markup, React's new JSX syntax allows HTML to be customized and written directly in JavaScript. So, instead of writing a bunch of string soup to reference your HTML tags like this:

var Hello = React.createClass({displayName: 'Hello',  
    render: function() {
        return React.createElement("div", null, "Hello ",;

the JSX syntax allows a much more direct reference, like so:

var Hello = React.createClass({  
      render: function() {        
           return <div>Hello {}</div>;      

As a web developer, I’ve always found the JavaScript/jQuery of doing HTML references a bit clunky and easy to screw up. The JSX syntax makes it easier to manipulate your views with all of the power of JavaScript in the browser. Add the highly reactive and realtime nature of React views, and you’ve got yourself an awesome new framework that promises to make web development easier.

The Winner: JavaScript Developers

So who is the winner of our JavaScript deathmatch? All three of these frameworks have pros and cons. I’ve always thought that part of our roles as developers is deciding which tool is right for the job. For comparison, here's a discussion among some React and Angular maintainers talking about various topics.

With multiple good tools available, our roles becomes both more involved and easier. Have a giant, constantly changing database that needs to be reflected in your front-end at scale? Angular is your best bet. Need to build an reactive prototype quickly and make your developers happy and more productive? Meteor fills your needs. Need modern view layers that are real-time an use fully customizable components? React is the one for you. You really can’t go wrong with any of these frameworks. In these three cases, the emperor’s new clothes are, in fact, as fancy as they appear to be.