Series Part 1: A beginner’s guide to comparing, and getting started with, MVC frameworks: Intro

Any time I hear about a new technology, I try to read about it, figure out what it is and what it does, and whether I think it is something worth me paying attention to and worth me learning. And when things like AngularJS, Ember.js, React, Backbone.js, etc. (collectively grouped together under the term MVC (or MV*, if you prefer, which I do not)) started popping up, I looked at them, got the gist, did not see anything that required me to learn them, and moved on, keeping enough of an eye on them to see what became of them, but nothing more.

Well, time has moved on, and it has become more and more apparent to me that this MVC stuff is simply not going to go away. People obviously love them, and obviously use them like crazy, so I guess I can no longer avoid learning them…

For this series I will be focusing on what I consider to be the big four right now (listed below, each will become a link as I publish that part), and I expect the series to follow this basic pattern:

  1. Intro (this post)
  2. AngularJS
  3. Ember.js
  4. React
  5. Backbone.js
  6. Summary

Getting Started

In preparation for learning, I was doing some research into the various framework options and, in doing that, was preparing to write a thorough, deep-dive piece that granularly compared and contrasted the most popular versions. But my initial research came across such fantastic examples that already existed, that I realized it wouldn’t be worth my time; instead, I will present the best research that I found, collected into this single post, along with a few notes from my perspective.

The first article that I found that I felt really presented clear, useful information, was AngularJS vs. Backbone.js vs. Ember.js, by . While the article does only focus on the three frameworks referenced in the title, I think it is a solid approach, as, while the others may have their own strong points, they simply do not have the market share that these three do, and therefore, if you are new and just getting started (as I am), I think it makes sense to pick one of the big boys, get your feet wet, and then once you are comfortable with that one, branch out into the others.

Uri does a great job of explaining and justifying his focus of these three frameworks, quickly explaining the basic principles behind MVC, providing brief but lucid code examples for each, and boiling his thoughts down into “The Good Parts” and “Pain Points” for each, before wrapping it all up with a short summary, even suggesting which framework that developers of different backgrounds might prefer. Excellent intro article!

I also recommend ‘s article from Smashing Magazine, Journey Through The JavaScript MVC Jungle. Addy starts out by describing MVCs, but also gets into whether you actually need one or not, before listing Pros and Cons for a seemingly never-ending list of MVC frameworks. Exceedingly thorough.

Another good, partial, comparison is Choosing a Front End Framework: Angular vs. Ember vs. React, by . Again, comparing only these three frameworks, Zach first breaks-down each one and advises who he thinks should use it, before doing a “head to head to head” comparison. (He also talks a good bit about the upcoming changes in Angular 2.0, which includes some big changes!) Mostly high-level, but definitely worth the read.

The Next Step

So, once you have some solid ground under your feet, you understand the MVC structure and functionality, and you know the terms and options, you will need to start getting your fingers dirty with a little code…

In the above article from Addy, he introduces us to yet another site he is involved with, TodoMVC, which is “a project which offers the same Todo application implemented using MVC concepts in most of the popular JavaScript MVC frameworks of today”… A bold endeavor, allowing you to download and look through real code examples and see which fits your style.

But if you want to get your fingers really dirty, as in writing your own code, then you want some tutorials. And that’s where the next step in this series will go, beginning with the grandaddy of them all, AngularJS!

Happy learning,

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.