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 ", this.props.name);
    }
});

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

var Hello = React.createClass({  
      render: function() {        
           return <div>Hello {this.props.name}</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.

JavaScript Errors: They're Trying to Help, Really.

Writing JavaScript is hard. You won't get it right the first time. You'll make silly mistakes or overlook your syntax. Luckily, JavaScript has some helpful error codes that try to tell you what to fix.

For someone who is new to JavaScript, understanding these messages can be tricky. What's the difference between a SyntaxError and a TypeError? What the heck does undefined is not a function mean? Today we take a look at common JavaScript error codes and their fixes.


Javascript error

The stuff of nightmares for new developers. Credit xkcd

Update: Google has improved its exception messages. No more "undefined is not a function".

EvalError

Definition:
Comes up regarding a problem with the global function eval().

Fix:
You should never get this error, because, as a developer, you should never be using the eval() function in any sort of production code ever.

RangeError

Definition:
As the name implies, RangeError comes up when one of your parameters (numeric only) is outside of its specified range.

Fix:
Check your parameters first to make sure you are passing valid numbers to your functions. Then, make sure all of your associations are correct; that your ranges are properly defined with signs and numbers and that your passing the expected parameters to the expected functions.

ReferenceError

Definition:
Comes up when there is an invalid reference in your code.

Fix:
ReferenceError typically returns "someVariable is not defined." It's easy to confuse "not defined," where an object does not have any defintion or assignment at all, and "undefined," which is a blank or empty value. I call this one the "typo error," because its usually human errors that lead to variables not being properly assigned in the code. Take a close look at your spelling and case.

TypeError

Definition:
Returns when an object does not have the proper type

Fix:
TypeError is a sneaky one, because the message doesn't give you a whole lot of information about where the error is occuring. This error typically comes from improper scoping. Consider the following code:

var Game = function () {
    this.startGame();
    this.timer = setTimeout(function() {
        this.stopGame();    // What is "this" referring to here?
    }, 0);
};

Calling the Game() function returns:

 Uncaught TypeError: undefined is not a function

It may take a few looks to realize that the setTimeout function is actually called against the window object, not the Game object. Window does not have a default stopGame function. Coder General contributor Faina Shalts recently wrote an excellent piece that goes more in depth on the 'this' keyword in JavaScript.

SyntaxError

Defintion:
Returns when any single hair of JavaScript syntax is out of place.

Fix:
One of the less-awesome parts of writing JavaScript is the extensive use of curly braces, semi-colons, and parentheses. When functions and variables become nested several layers deep, its easy for developer to lose track. Thankfully, syntax errors have straightforward fixes. Check your closures, spelling, and look for typos, especially of singular/plural named functions and variables.

URIError

Definition:
Returns when a URI passed to JavaScript code is not written properly.

Fix:
URI errors are similar to syntax errors, but specifically for URIs. For example, if you pass a % in a URL, without any characters after it, you'll get an URIError. In JavaScript, % is an escape character. The JavaScript functions that evaluate URIs are expecting characters after, and there are none. Check your URIs to make sure all of the syntax is correct.

Every JavaScript developer has run into errors in his or her code at some point. A good developer is able to learn from seeing error codes and fixing the problems. JavaScript nirvana may well be the ability to look forward to getting errors in your code. No matter what errors you get while writing JavaScript, remember that they're just trying to help. Really.