Google, Twitter, and AngularJS

Yeoman

My behemoth of a Backbone.js tutorial series has run its course, so I wanted to follow it up with some posts about AngularJS. One thing that intrigues me about AngularJS is the emerging relationship between Google and Twitter. Or between prominent Google and Twitter developers. I don’t think there’s a overarching plan at the management level to create an open source partnership, just a set of coincidences as projects have aligned along certain vectors that are pushing front-end web development forward.

Most of what I’m going to talk about here has been packaged up into Yeoman, which has some Google employees behind it (Paul Irish, Addy Osmani) and includes technology from Twitter (Bower). The rest of this post will break down the emerging next generation Google/Twitter open source stack.

Data Binding, Views, Routes

AngularJS from Google is the obvious choice for data binding. It’s definitely growing in popularity, and Yeoman includes a generator for it.

UI

Bootstrap is also supported by Yeoman, and offers a fine set of extensible UI widgets. Although seeing vanilla Bootstrap sites has become massively clichéd, it doesn’t take much effort to customise it.

Build/Preview: Grunt

In my Backbone.js tutorial, we used Node to create a small web server with RequireJS for local development. I included some details on Grunt purely because I use GNU Make for my own projects, so I wanted to look at Grunt more seriously. The developers behind Yeoman have selected Grunt as their build/preview tool.

Test: Karma, Mocha

Yeoman bundles in Mocha, and Karma can be used to script browsers. It’s used to test AngularJS, so that’s where the connection comes from, and there’s karma-mocha – an adapter for Karma to use Mocha.

Package Management: Bower

Bower, from Twitter, is a lightweight package manager. I’ve talked a bit about it on DailyJS before, and I try to include links to Bower package names when featuring front-end modules. Yeoman comes with Bower.

The Missing Link: Sync

I covered Backbone.sync a fair bit in the Backbone.js tutorial series because it’s so flexible I was able to do some cool things with it like sync data with Google’s JavaScript APIs. This is interesting when you consider that Backbone is configured to talk to a Rails-style REST server out of the box.

So, what about this brave new world of Google/Twitter open source projects? What data syncing solutions are there? To my knowledge there isn’t anything generic, yet, but there is the Yeoman Express Stack:

A proof of concept end-to-end stack for development using Yeoman 0.9.6, Express and AngularJS. Note: This experimental branch is providing for testing purposes only (at present) and does not provide any guarantees.

This is a small project that builds on Yeoman and AngularJS to sync data with a Node/Express server. This came from a weekend hack project that involved Addy Osmani, who has contributed to many of the projects mentioned here.

There is also Angular Socket.io Seed, which persists data to a Node/Express server using Socket.IO.

Also significant is a proposal, Entity-Driven Tooling from the Yeoman developers about adding CRUD generator support:

tl;dr: what if one command could scaffold out the CRUD models/views for your client and server side code, with baked in offline support. Would this help you? Would this solve a pain point of yours? Are there better ways to do this than what’s described below?

Although I’ve often wished for something like this, the post seems to imply a localStorage-based syncing solution would be developed. This would allow the browser-based portion of the project to behave like a client, making data available in localStorage for offline use.

However, syncing data can be difficult, so providing a generator that can do this would be more involved than Backbone.sync. Perhaps basing it around CouchDB’s eventual consistency model would work? Locally available records would have a version parameter which would be used to safely sync concurrently with the server. This would leave conflict resolution up to the developer of the application – some servers might store the latest version of a record, and others might throw an error, perhaps causing the client to display a conflict resolution dialog.

There may be a localStorage sync project the Yeoman developers have in mind.

The Other Missing Link: UI

I can’t help feeling that there’s more to Google open source than Closure Library. If you’ve used Android since Jelly Bean, Chrome OS, or Google Plus, then you know Google’s designers have been pushing things far beyond where the company was just a few years ago. Although Closure Library is a formidable set of tools, the widgets don’t fit in well with the Yeoman generation’s open source projects, and I’m eager to see what a next generation version of Bootstrap would look like.

But for now I’m looking at AngularJS, Grunt, Bootstrap, Bower, Mocha for my next tutorial series. I’ll have to find something interesting to sync data with, because I enjoyed figuring out the Google Tasks API.