Mobile, Cloud, HTML, JavaScript, Java, PHP, Flex
A few weeks weeks ago, I posted a first Backbone.js and Twitter Bootstrap sample application. While interesting, “Employee Directory” is a read-only application. As such, it doesn’t show off the full power of Backbone’s models or the coolness of some of Bootstrap’s data entry features such as forms, validation, etc.
To demonstrate these features, I decided to revisit my wine cellar application, which was in need of a serious UI makeover.
You can run the application here.
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).
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...]
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...]
}
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...]
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...]
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...]
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:
This article (and its companion app) provides an example of building a complete RESTful API using the different HTTP methods:
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...]
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:
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...]
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...]
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.
RSS