taylorchiu
6/16/2014 - 5:38 AM

Javascript Frameworks: Angular vs. Meteor vs. Backbone

Javascript Frameworks: Angular vs. Meteor vs. Backbone

Javascript Frameworks: What's the difference?

Meteor vs. Angular vs. Backbone

All frameworks are not created equal...but what really is the difference? And when should I use which one?

An awesome site to compare all the codes:

todomvc.com

Like Buying a Car...

Imagine you need a new car. Usually, you can go to any car dealer, and the process for choosing a car is the same: You get in, turn it on, and drive around - then you buy the whole car. The only difference is the look and feel, but a car is still a car. Unfortunately, it is not like this when choosing a framework.

Shopping for a framework is more like going to the factory and choosing a bunch of components: do you want the whole car (Meteor), or just the engine (Backbone), or the rest of the car without the engine (Angular)? It probably depends on whether you have opinions about all the different pieces of your car.

###...I don't have opinions, I just want a car...

Meteor

Meteor is to Node as Rails is to Ruby

Meteor is a full-stack framework that allows you to write your entire application in Javascript. It is built to enable real-time updates, so it is good for apps that need to react to a lot of event-driven changes to the database (like, a chat app or a dashboard or a twitter-like-thing). Because it is full-stack, you don't need to configure it to work with a back-end like Rails, or a database -- everything comes with.

It is freakishly easy to get a Meteor app up and running. Follow these instructions and you will have a sample app running in your browser in about 3 minutes.

Key Details:

I would need to do more research to tell you exactly what's customizable in Meteor. But, this is what you get without special configuration:

  • Front-end and Back-end are written in Javascript
  • Uses node.js in the back-end
  • Uses MongoDB for your database
  • Offers its own hosting service and easy deployment (literally just one command)
  • Provides a library of core packages/modules that most apps will need, as well as additional packages that are optional
  • Comes with a command line tool that's super useful for development
  • Comes with Mustache for templating

Pros:

  • You don't need to make a lot of decisions for your components
  • Good for real-time
  • Only need to know one language!
  • Easy deployment/hosting
  • Comes with a command-line tool
  • Currently trendy

Cons:

  • It's opinionated: thou shalt use what they say you shall use.
  • You have to use MongoDB, so no SQL for your database
  • If you already have an API you want to use, or a front-end, or some other piece of a different car that you're fond of, too bad.
  • Your site has to be "light" or else it may run slowly

Meteor Resources:

...I've got the engine, but I want a fancy leather interior...

##AngularJS

Angular has a reputation for having a huge community of followers, which means lots of documentation and support while you're learning. If you already have a SQL database that you'd like to use in your app, Angular is definitely better than Meteor, because you bring your own back-end to the table (and sit yo'self down!). Angular has been called "A toolset based on extending the HTML vocabulary for your application." Meaning, it's not a complete package like Meteor, but it's got a lot of useful things.

Key Details

  • You provide the back-end (you can use it with Rails!)
  • You provide the database
  • Directives make it easy to "wire up" your models and views (watch for user behavior and have it affect your data, aka data-binding)
  • The whole Model-View-Whatever concept feels very familiar and comforting if you're used to Rails

Pros

  • Great for animations
  • You can, but you don't have to, use JQuery with it
  • The concept of "directives" makes it Angular good at connecting user behavior to the DOM
  • Strong community means Angular is well-maintained (fewer bugs) and constantly being improved
  • It's considered "magical" (you don't need to know what's going on for it to work)

Cons

  • No command line tool like Meteor
  • Lots of new vocabulary to learn, like "directive" and "scope"
  • A bit of a learning curve to get good at Angular's more powerful tools
  • Some claim it is opinionated (you have to do things the Angular way)...but I think probably not as opinionated as Meteor!
  • It's considered magical (you don't know what's going on behind the scenes)

Angular Resources:

###...I just want to buy all the parts separately and construct the car myself...

Backbone.js

Backbone is considered lightweight, minimalist, highly customizable, and difficult for the beginner developer. It is best used when you have a lot of code and technologies already set up, and you don't want to re-write or override your existing code because some framework tells you that you have to do things a certain way. I read one blogger describe Backbone as "literally just the spine to hold you up, but no meat or muscles".

It seems like Backbone was cool before Angular took over as King of the Hill. More companies might already have a codebase in Backbone, but Angular seems to be "the future". I feel like people who like Backbone might also like telling you how, in their day, they walked to school uphill, both ways. In the snow.

Hey, there is something to be said for learning things the hard way.

Key Details

  • You don't use Controllers in Backbone
  • You use your own API
  • RESTful routing
  • everything happens with JSON
  • Requires Underscore.js

Pros

  • Small file size means it downloads and loads fast
  • Choose your own components, like templating engine, database, and APIs
  • Not opinionated - everything can be customized

Cons

  • Steep learning curve just to get started in Backbone
  • You'll need to make a lot of choices/decisions/configurations yourself
  • By the time you add add-ons to have comparable functionality as Angular or Meteor, it's no longer considered lightweight or small
  • Everything has to be done manually
  • You may end up writing a lot of boilerplate code

Backbone Resources

Still unsure? Just go with Ember

People say it's cool. I hope to review it another time. It's supposed to be a happy medium between Backbone and Angular - less opinionated than Angular, but with more features than Backbone. I don't know how it compares to Meteor. Good luck!