In January, I started a new hobby project to write a Character Generator for D&D Next, the massive public playtest for the next edition of Dungeons and Dragons.
My friend Ivan pointed out that this is the perfect candidate for a Single Page Application (SPA). Client-side persistence is all that’s required. And thus began my journey into the world of client-side technologies.
Backbone is less elegant. What I like about Backbone is that it puts me back in my comfort zone of object oriented programming and MVC. It has classes, and inheritance, and a strict MVC structure with named events, model change listeners, views. It is familiar territory for anyone who’s done any OO MVC programming. Further, it’s built on JQuery and offers seamless interoperability with JQuery.
But it felt heavy, and a lot of finicky code for what I was actually building.
I shared my experiences with my friends Melo and Raul and they suggested I take a look at a new Google technology called AngularJS.
I like writing less code. As Buckley says, “fewer lines of code means fewer bugs.”
So I took a deeper dive into Angular. Learning Angular was a much bigger undertaking than learning Backbone. The Backbone manual fits on a single page and is a straightforward organizational layer built on top of JQuery to help developers manage their MVC components in a coherent way.
Angular turns HTML5 on its head. Rather than working within valid HTML5 documents, it actually *extends* HTML5–adding new proprietary attributes to existing HTML5 tags, and even inviting users to invent their own extensions to HTML5. What Angular does is it reads in the whole extended HTML5 document, parses it, and then translates it into a new document that the browser will understand. Angular defines itself as “What HTML would have been had it been designed for web apps.” There Google goes again: It doesn’t like a standard, so it just invents its own proprietary substitute. If you’re not scared by this, you should be. Will anyone even be using Angular five years from now? Or will Angular apps be marooned on one of those lonely islands reserved for abandoned non-standard platforms.
Except. Except, Angular is sooo good. Sooo right. All that messy DOM manipulation code, gone. No need for JQuery any more! All those tricky event hooks, gone. There is *no* reference to DOM elements in Angular controllers. You just don’t need to know any of that plumbing stuff anymore–all you need to worry about is what your application needs to do.
I gave it a try and rewrote my SPA in Angular. Wow. There’s no going back for me now. It’s just way better than Backbone and JQuery. The DOM manipulation code is in the HTML, where it feels like it should be, and the controllers are much more testable and really focus on business logic and state management. And there’s simply way, way less code. For me, my LOC dropped by 75%! Even though I fear Angular is out on its own, off the HTML standards bus, it’s just so right, and so expressive, that I’m going to stick with it.
Lastly, I want to give a quick shoutout to Bootstrap which I can’t recommend highly enough. It took the “Complex” out of CSS for me. It gives you out of the box responsive design, and practically any basic UI sugar you need to make your app look terrific. It’s kind of a “CSS for dummies.” If you’re short on time and want to make a web app look polished, I seriously recommend Bootstrap.