Backbone.js Lessons Learned and Improved Sample App

January 30, 2012 By 13 Comments

A few weeks ago, I posted a three-part Backbone.js tutorial (part 1, part 2, part 3). Since then, I spent more time building a real-life application with Backbone. I ran into a number of interesting problems, spent time thinking about solutions, and decided to write them down in this post. These are not definitive answers, just my current thoughts… and as always, I value your input.

Based on this new experience, I revisited the Wine Cellar application used in my tutorial. You can find the improved version here (PHP back-end) or here (Java back-end).

Externalizing Templates

In the initial implementation of my wine cellar app, I “inlined” my templates in a succession of <script> tags like the one below inside index.html.

<script type="text/template" id="wine-list-item">
	<li><a href='#wines/<%= id %>'><%= name %></a></li>
</script>

This approach works fine for a simple application with a limited number of templates. In a larger project, it makes templates hard to maintain. It also makes it difficult for multiple developers to work on different templates at the same time. Removing the script body and adding a src attribute to point to an external file didn’t seem to work to load HTML templates.
[Read more...]

Filed Under: Backbone.js, HTML 5, JavaScript, JQuery

Using Backbone.js with a RESTful Java Back-End

January 10, 2012 By 5 Comments

In a previous post, RESTful services with jQuery and Java using JAX-RS and Jersey, I demonstrated how to build a RESTful API using JAX-RS and Jersey, and how to build a jQuery application that leverages that API. The application used as an example was a Wine Cellar management application.

In follow-up posts, “Backbone.js Wine Cellar Tutorial” (part1, part 2, part 3), I showed how to add structure to the client-side of the Wine Cellar application using Backbone.js. But that three-part tutorial was provided with a PHP back-end.

By popular demand, here is a version of the Backbone.js Wine Cellar application powered by a Java / JAX-RS back-end using Jersey. The server-side of the application provides an example of building a complete RESTful API in Java using the different HTTP methods:
[Read more...]

Filed Under: Backbone.js, Java, JavaScript, JAX-RS, JQuery

Tutorial: HTML Templates with Mustache.js

December 20, 2011 By 6 Comments

}

When developing modern HTML applications, you often write a lot of HTML fragments programmatically. You concatenate HTML tags and dynamic data, and insert the resulting UI markup into the DOM. Here is a random code example of this approach:

$.each(messages.reverse(), function(index, message) {
	$('#messageList').append(
		'<li><span class="list-title">' +
		message.userName + '</span>' +
		'<abbr class="list-timestamp" title="' +
		message.datePosted + '"></abbr>' +
		'<p class="list-text">' + message.messageText + '</p></li>');
	}
});

The proliferation of this kind of code throughout your application comes with some downsides. The tight coupling of UI and data logic doesn’t promote separation of concerns and reuse. It makes your application harder to write and harder to maintain.
[Read more...]

Filed Under: HTML 5, JavaScript, JQuery, Mustache.js, Tutorial

Backbone.js Wine Cellar Tutorial — Part 3: Deep Linking and Application States

December 8, 2011 By 16 Comments

UPDATE: I posted a “Postface” to this series with some lessons learned and an improved version of the app. Make sure you read it here.

In Part 1 of this tutorial, we set up the basic infrastructure for the Wine Cellar application. In Part 2, we added the ability to create, update, and delete (CRUD) wines.

There are a few remaining issues in the application. They are all related to “deep linking”. The application needs to continuously keep its URL in sync with its current state. This allows you to grab the URL from the address bar at any point in time during the course of the application, and re-use or share it to go back to the exact same state.

In this last installment of the tutorial, we add support for deep linking in the Wine Cellar application.
[Read more...]

Filed Under: Backbone.js, JQuery, REST

Backbone.js Wine Cellar Tutorial — Part 1: Getting Started

December 6, 2011 By 38 Comments

One of the challenges when building nontrivial Web applications is that JavaScript’s non-directive nature can initially lead to a lack of structure in your code, or in other words, a lack of… backbone. JavaScript is often written as a litany of free-hanging and unrelated blocks of code, and it doesn’t take long before it becomes hard to make sense of the logic and organization of your own code.

Backbone.js is a lightweight framework that addresses this issue by adding structure to JavaScript-heavy Web applications.
[Read more...]

Filed Under: Backbone.js, JQuery, REST

RESTful services with jQuery, PHP and the Slim Framework

December 1, 2011 By 20 Comments

NOTE: This is the PHP version of this article and its companion app. A Java version is available here.

I have been looking for a lightweight framework to build a RESTful API in PHP. There are a number of good options out there: Slim, Epiphany, Tonic, Recess, and Frapi to name a few. They all seem like good frameworks. In the end, I chose Slim for this project for two main reasons:

  1. It’s very lightweight and focused on REST and nothing else.
  2. It supports all the HTTP methods (GET, POST, PUT, DELETE), which was a key requirement for my application.

This article (and its companion app) provides an example of building a complete RESTful API using the different HTTP methods:

  • GET to retrieve and search data
  • POST to add data
  • PUT to update data
  • DELETE to delete data

The application used as an example for this article is a Wine Cellar app. You can search for wines, add a wine to your cellar, update and delete wines.


You can run the application here. The create/update/delete features are disabled in this online version. Use the link at the bottom of this post to download a fully enabled version.
[Read more...]

Filed Under: JQuery, PHP, REST

RESTful services with jQuery and Java using JAX-RS and Jersey

December 1, 2011 By 8 Comments

NOTE: This is the Java version of this article and its companion app. A PHP version is available here.

This is a more in depth version of my previous post on the same topic. The previous article only covered the HTTP GET method for building RESTful services. This article (and its new companion app) provides an example of building a complete RESTful API using the different HTTP methods:

  • GET to retrieve and search data
  • POST to add data
  • PUT to update data
  • DELETE to delete data

The application used as an example for this article is a Wine Cellar app. You can search for wines, add a wine to your cellar, update and delete wines.


You can run the application here. The create/update/delete features are disabled in this online version. Use the link at the bottom of this post to download a fully enabled version.
[Read more...]

Filed Under: Java, JAX-RS, JQuery, REST

Building Apps with jQuery and JAX-RS – Sample App

November 9, 2011 By 1 Comment

In my previous post, I discussed the process of building RESTful services in Java using JAX-RS and Jersey. As an example, I shared a web application that provides a simple RESTful API for an Employee directory application:

In this post, I share a simple client application that uses these services to provide a basic User Interface for the application. The client is built with jQuery and uses JSON as the data exchange format.
[Read more...]

Filed Under: Java, JAX-RS, JQuery, Sample App, Tutorial

Sample App using the PhoneGap Database API

October 19, 2011 By 36 Comments

This is the third version of my Employee Directory application. The jQuery Mobile and the Mobile jQuery without jQuery Mobile versions both used JSON services to get data from a remote server. In this version, the application gets data from a local database using the PhoneGap database API. As a result, this version can work offline which is probably what you would expect for this type of application.

[Read more...]

Filed Under: JQuery, PhoneGap

Sample App: Mobile jQuery without jQuery Mobile

October 14, 2011 By 11 Comments

Let me preface this post by saying that I’m not advocating this approach versus the other. These are just experiments.

[Read more...]

Filed Under: JQuery, JQuery Mobile, PhoneGap
« Older Posts