One App, Three Ways: PhotoMVC with Backbone, Angular and React

There's a great resource called TodoMVC that takes the classic Todo app, and implements it using every MVC/MV* framework imaginable. This weekend, I embarked on my own version of TodoMVC with a photo app that displays a selected photo from a list, and lets you give that photo a rating.

Here's the finished product:

Angular version, with help from Bootstrap 

Angular version, with help from Bootstrap 

I built all three apps from scratch. My experience was all over the map. I had moments of great enlightenment, and I had stretches where everything felt like a godawful ordeal. If you're at all shaky on MVC/MV* frameworks, I strongly recommend doing this exercise with the frameworks of your choice. It really drives home the concepts of state management and rendering, and gives you a newfound appreciation (or, at times, outright dismay) for how different client side frameworks manage the age-old tasks of updating data and displaying views. 

Here's a quick breakdown of my impressions (repos linked): 

  • Backbone is the least magical experience of all
  • Angular is super magical and intuitive, but it can feel kind of hacky at times
  • React is the Backbone of the future, and -- coupled with Redux -- is the most exciting thing that I'm learning right now 

I'll post more about React/Redux and the One State Container to Rule Them All later this week, so watch this space if you're interested in such matters.  Until then, commence hacking!