Time at the SPA…

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.

Before starting, I needed to learn HTML5 and JavaScript.  HTML5 was refreshing and different from what I expected.  I thought it was all about dynamic content, streaming media, etc.  But really, what HTML5 is all about is back to the first principles of what a markup language is supposed to be: Take an existing document and then “mark it up” with meta-tags that indicate information about the different sections of the document–where are the sections, headers, footers–how does the content fit together logically.  This is a departure from earlier versions of HTML where look and feel tags were interspersed with information oriented markup.  Now all the look and feel stuff is relegated to a separate CSS file.  As a result, you end up with these beautiful HTML documents that describe the content, and a separate CSS that specifies how the document should be rendered.

JavaScript was a real eye-opener.  At first I thought “blech!”  Curly braces don’t scope variables.  There are no namespaces!  OMG I’m going back to BASIC.  But then I read JavaScript: The Good Parts and I gained an appreciation for a few things.  First, if you follow a strict set of best practices, you can avoid writing bad JavaScript code.  Second, JavaScript is fantastically flexible, to the point where it can effectively be redefined into a much richer, more expressive language through the use of JavaScript Libraries.  Lastly, function()s.  Hmmmm….. function()s.   As my friend Buckley says: “There’s one VM that you’re guaranteed to be available on every device and every desktop, and that’s the JavaScript VM.  Get used to it: JavaScript is here to stay.”

After asking around for recommendations for the best JavaScript libraries to use, I settled on JQuery and Backbone.  JQuery took a while to learn.  It’s big and covers a *lot* of functionality.  But damn is it beautiful!  JQuery sticks to it’s knitting and handles DOM selection and manipulation in a really, really elegant way.  It perfectly illustrates how the flexibility of JavaScript can facilitate the creation of a whole new domain specific language.  It’s no surprise that JQuery is everywhere–it’s succinct and powerful.

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.

With these 4 technologies under my belt, HTML5, JavaScript, JQuery, and Backbone I was away to the races–I coded up “rolling a character,” race selection, subrace selection.  I had dynamic content, a nice wizard interface that locked and opened  progressive sections for editing.

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 was pretty skeptical at first.  After all, these were the people who brought us that flaming pile of good intentions called GWT.  Once bitten twice shy.  I went to TodoMVC, a site that provides implementations of a Todo List Single Page Application in 30 or so different JavaScript MVC frameworks–a great place to compare and contrast how different JavaScript libraries solve the same problem.  The Angular solution was impressive!  Backbone solves TodoMVC in 330 lines of JavaScript code.  Angular does the same thing in 120 lines!

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.

So those are my experiences with SPA technologies.  HTML5 and JavaScript are a must.  I assumed JQuery was a must, but it turned out not to be if you’re using Angular.  Angular is risky but powerful.  And Bootstrap is the cat’s milk.

 

It's only fair to share...
Share on FacebookGoogle+Tweet about this on TwitterShare on LinkedIn