After I blogged a three-part Backbone.js tutorial (part 1, part 2, part 3), a number of people asked me to try Angular.js. So I decided to take it for a test drive. I thought it would be interesting to rebuild with Angular.js the Wine Cellar application I had built with Backbone.
[Read more...]
Sample Application with Angular.js
Backbone.js Lessons Learned and Improved Sample App
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...]
Using Backbone.js with a RESTful Java Back-End
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...]
Setting Up WordPress on Amazon EC2 in 5 minutes
Step 1: Create an AWS Account
First things first: you need to create your AWS account. You can sign up here. You’ll have to provide a credit card and a phone number where you will be called as part of the online registration process for verification purposes. Amazon offers a Free Usage Tier, which is great to explore the services and even host real apps without being charged. Check the details here.
[Read more...]
Tutorial: HTML Templates with Mustache.js
}
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...]
Fact Check Michele Bachmann with Politifact and Flex
During the GOP presidential debate last night, Michelle Bachmann said this:
After the debate that we had last week, Politifact came out and said that everything I said was true.
Did Politifact really give her a “True” rating across the board for a performance in the previous debate?
The best way to check if you are on the go, is to use Politifact’s mobile application which was built with Flex and runs on the iPhone, the iPad, the BlackBerry PlayBook, the Kindle Fire, the Barnes and Noble Nook, and other Android devices… using the exact same code. 100% code reusability.
[Read more...]
Mobile Development with Flex 4.6 and Spring
My Mobile Development with Flex 4.6 and Spring video (using the Spring BlazeDS Integration project) is available on Adobe TV. You can watch it here.
The Flex Spring Mobile Test Drive is hosted on GitHub and documented here.
Backbone.js Wine Cellar Tutorial — Part 3: Deep Linking and Application States
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...]
Backbone.js Wine Cellar Tutorial — Part 2: CRUD
In Part 1 of this tutorial, we set up the basic infrastructure for the Wine Cellar application. The application so far is read-only: it allows you to retrieve a list of wines, and display the details of the wine you select.
In this second installment, we will add the ability to create, update, and delete (CRUD) wines.
RESTful Services
As mentioned in Part 1, Backbone.js provides a natural and elegant integration with RESTful services. If your back-end data is exposed through a pure RESTful API, retrieving (GET), creating (POST), updating (PUT), and deleting (DELETE) models is incredibly easy using the Backbone.js simple Model API.
This tutorial uses pure RESTful services. The services are implemented as follows:
| HTTP Method | URL | Action |
|---|---|---|
| GET | /api/wines | Retrieve all wines |
| GET | /api/wines/10 | Retrieve wine with id == 10 |
| POST | /api/wines | Add a new wine |
| PUT | /api/wines/10 | Update wine with id == 10 |
| DELETE | /api/wines/10 | Delete wine with id == 10 |
Backbone.js Wine Cellar Tutorial — Part 1: Getting Started
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...]



RSS