Aura.Backbone.YouTube

Continuing with my theme of demo projects built on a common problem domain - a bare-bones YouTube emulator - I decided to dive into Aura.js http://aurajs.com. Aura is a "clean and scalable architecture for complex JavaScript applications" that evolved from ideas put forth by Googler Addy Osmani and former Yahoo Nicholas Zakas . It provides a high-level component-based abstraction with focus on sandboxing and inter-component communication via publish/subscribe. Aura is framework-agnostic, so you can plug in popular tools like Backbone, Angular, Ember, etc. For the demo I plugged in the ever popular Backbone library.

View the demo here http://tdoherty.github.io/aura.backbone.youtube/

View the source on github:

aura.backbone.youtube

https://github.com/tdoherty/aura.backbone.youtube

aura.backbone.youtube - An Aura.js demo using Backbone.js and YouTube APIs

"OOP to me means only messaging, local retention and protection and hiding of state-process, and extreme late-binding of all things. It can be done in Smalltalk and in LISP. There are possibly other systems in which this is possible, but I’m not aware of them."

~Alan Kay

So my colleagues and I were having a discussion about object oriented programming (OOP) and exactly what it means today versus when the term was first coined by Alan Kay in the late 60’s. Specifically, whether prototype-based languages are truly object oriented as compared to class-based languages which are the mainstream. It’s very interesting to read Kay’s own take on the subject, and realize that what most of us consider to be OOP today resembles but little the original conception.

Backbone Boilerplate

I wrote a rough demo with Tim Branyen’s Backbone Boilerplate using YouTube data feeds. It’s a work in progress as I’m learning Backbone Boilerplate and its bundled LayoutManager.

Check out the demo here

Backbone-Boilerplate.YouTube
github.com
A Backbone Boilerplate demo using YouTube feed data. Contribute to Backbone-Boilerplate.YouTube development by creating an account on GitHub.

AngularJS

I wrote a rough demo with Google’s AngularJS using YouTube data feeds. It’s a work in progress as I’m learning Angular.

Check out the demo here

Angular.YouTube
github.com
An AngularJS demo using YouTube feed data. Contribute to
Angular.YouTube development by creating an account on GitHub.

jQuery.SpinJS

I created a jQuery plugin wrapping Felix Gnass’ excellent spin.js. The plugin adds a background div with configurable color and transparency, and supports AMD. Check it out and let me know what you think.

jQuery.SpinJS
github.com
jquery plugin for spin.js. Contribute to
jQuery.SpinJS development by creating an account on GitHub.

Client Side JavaScript MV* With Ember.js

My team at work is evaluating the suitability of several tools for client-side application development. We’re looking at building out some non-trivial applications on the client and wanted to make the best collective, educated decision on the best tool(s) for the job.

The tools we’ve been looking at include:

• Backbone


• Knockout


• Angular


• Ember

Backbone

I’ve already grown pretty familiar with Backbone, having spearheaded its adoption into our tools set a year or so ago. We’ve built out a few non-trivial applications with Backbone and admire it’s simplicity and elegance. Backbone is lean and non-prescriptive, it’s a minimalistic library that gives you the most basic structure and tools for event-based model management.

Twirl Your Mustache

Reuse Templates On The Client And Server With CouchDB, CouchApp, and Mustache

In my last post I talked about my introduction to building applications with Apache CouchDB and CouchApp. I’ve been refactoring the app to use Backbone.js and RequireJS on the client, and to take advantage of templating to make presentation logic more DRY. This post shows how to reuse Mustache templates on the client and server using CouchDB and CouchApp. I’ve left out the Backbone/RequireJS code for simplicity, and illustrate the client code using jQuery’s shorthand ‘$.get’ AJAX method.

Mustache is a logic-less templating language available for a variety of languages. It ships with CouchApp, and Backbone is agnostic, so it seemed a no-brainer. Mustache supports partial templates, for portions of a page’s markup, and I’ll show how to reuse a partial template to do a partial page refresh on the client.

Say we have the following extremely simplistic template:

/templates/page.html:

	<!DOCTYPE html>
	<html>
	<head>
	<title>{{pagetitle}}</title>
	</head>
	<body>
	<h1>Welcome!</h1>
	<div>Here is your content:</div>
	<div id=”content”>
	{{>content}}
	</div>
	</body>
	</html>

view raw gistfile1.html hosted with ❤ by GitHub

Partial templates are indicated with the greater than (‘>’) symbol, so here we’re indicating that a partial template named ‘content’ should be rendered in the <div id=”content”> element. Now let’s say we have the following partial template:

/templates/partials/content.html:

	<ul>
	<li>Field 1: {{field1}}</li>
	<li>Field 2: {{field2}}</li>
	<li>Field 3: {{field3}}</li>
	</ul>

view raw gistfile1.html hosted with ❤ by GitHub

For the server side, we can render HTML pages via CouchDB ‘shows’ and use Mustache in the show code, i.e.:

/_shows/page.js:

	function(doc, req) {
	var mustache = require(‘vendor/couchapp/lib/mustache’);
	var data = {
	pagetitle: 'My Page',
	field1: '1',
	field2: '2',
	field3: '3'
	};
	return mustache.to_html(this.templates.index, data, this.templates.partials);
	}

view raw gistfile1.js hosted with ❤ by GitHub

Here, this.templates refers to the current design document’s ‘templates’ property, and this.templates.partials to its ‘templates.partials’ property. These correspond to your CouchApp’s directory structure prior to push.

We can then hit the page at: /dbname/_design/docname/_show/page, and use a combination of rewrites.json and a proxy or virtual host to pretty up the URL.

For our purposes, we’re considering reusing a template from the ‘partials’ directory for a client-side partial page refresh. We can serve the template markup from a show also, passing the template name in the URL, i.e., /dbname/_design/docname/_show/templates/page.html:

/_shows/templates.js:

	function(doc, req) {
	var template = req.path[req.path.length - 1].replace(‘.html’, ”),
	out = this.templates[template];
	if (!out) {
	out = this.templates.partials[template];
	}
	return resp = {
	body: out,
	headers: { 'Content-Type': 'text/plain' }
	};
	}

view raw gistfile1.js hosted with ❤ by GitHub

Here, we first look for the template name in the design doc’s templates, then in templates.partials.

On the client, we’ll use the jQuery plugin for mustache, which ships with CouchApp:

<script src=”vendor/couchapp/jquery.mustache.js”></script>

First we’ll make a GET request for the template:

	var template;
	$.get(<templatesShowURL>/<templateName>.html, function(response) {
	template = response;
	});

view raw gistfile1.js hosted with ❤ by GitHub

Then for a partial refresh, we’ll GET our updated data and apply the same partial template on the client:

	$.get(<dataURL>, function(response) {
	$(<selector>).html($.mustache(template, response));
	});

view raw gistfile1.js hosted with ❤ by GitHub

This is an extremely simplistic example, the point being to illustrate the considerable DRY we can achieve through template reuse. Write the template once, and use it on both the client and server.

Nice!