Archive for May, 2012

Mobile Development with jQuery Mobile and Rails

Both jQuery Mobile and Ruby on Rails are widely popular frameworks. In part because of the ubiquity of its namesake parent framework, jQuery Mobile has become arguably the most popular framework for building mobile web applications or, in many cases, PhoneGap applications using web standards. Nonetheless, the two frameworks have some rough edges when working together. Thankfully, John Bender shows how all of these rough edges can be smoothed out in his recent article for the ADC.

John is a member of the team here at Adobe that contributes to the development of  jQuery Mobile as well as a well-known speaker and OSS contributor. His article shows how to get your JQM/Rails project set up, manage layout, handle form validation, fix potential data attributes conflicts and work with debugging. He has identified these areas specifically as potential pain points in integration but, hopefully, using this article you will not feel the pain. So, if you are using Rails and jQuery Mobile, be sure to give  John’s article, “Integrating Rails and jQuery Mobile,” a read.

Common Design Patterns in JavaScript

Anyone who has been programming for some time has come to realize the value of understanding design patterns, regardless of whether or not your background includes a CS degree. In my experience though, I have found that deciphering the definition of a particular design pattern or understanding its use cases can be more difficult than actually coding it. Still, when it gets to implementing the pattern, sometimes translating a pattern from the textbook definition (oftentimes in Java) to whatever language you are working in can be difficult as well.

This is why I am excited about the series of articles Joe Zimmerman is doing for the ADC on implementing common design patterns in JavaScript. Not only does he manage to explain each pattern in easy to understand terms and describes common use cases, but he shows simple examples of how you would implement this pattern using JavaScript. In his most recent article, he covers the adapter, decorator and factory patterns, while his first article covered the singleton, composite and facade patterns. He also has many of these and more posted to his blog.

While you may not require each particular pattern immediately, they are always useful tools to have in your toolbox to use as needed. You also may rely on a framework which uses some of these patterns and understanding the underlying principles can be helpful in your proper use of the framework. Either way, I believe this series of articles (part 3 is coming soon) is well worth reading.

Get Started with the Ember JavaScript Framework

One thing I think everyone can agree on is that there is no shortage of frameworks for JavaScript. Nevertheless, there still seem to be another new framework announced each week. I’ve even tried to track and categorize hundreds of JavaScript frameworks. In my opinion, when choosing a framework one of the key items to consider is the level of community support. This is especially true if you or your development team are not the type of developers who like to delve into the framework source. In this case, having a strong community of users you can turn to for answers and possibly consulting to resolve any issues you encounter can be invaluable.

While a relatively new framework, being released late 2011, Ember.js has garnered a strong following. This could be, in part, because Ember grew out of the popular SproutCore library and was originally SproutCore 2.0 until Ember creators Yehuda Katz and Tom Dale decided to separate the project. As opposed to the widget focus of SproutCore 1.0, Ember is designed to offer a standard architecture for JavaScript applications and easy view templating.

One person who has become a well-known voice in the Ember community is Andy Matthews. That is why I am very excited that he has written a beginner’s guide to Ember for the ADC. If you are interested in learning about Ember or evaluating architectural frameworks for you and your team, you definitely should check it out.

Cutting Edge HTML5 – Filesystem API

One of the first questions people ask when they are considering adding a new HTML5 feature to their site is: when is it safe to use feature x? In fact, there is, as many of you already know, a site devoted to that specific question. Sometimes the answer is that a specific feature, while exciting, isn’t ready to put into a production application due to limited support across multiple browsers. This does not mean that you can’t learn about it and even come up with cool innovative uses for the API – even building a prototype of your concept.

The Filesystem API is one such cool HTML5 feature that, while powerful, probably isn’t production ready yet (as you can see on When Can I Use, Chrome is the only browser that currently supports this API). Still, Raymond Camden has designed an interesting proof of concept that shows the potential of this new API in his article “Real-world example of the HTML5 FileSystem API.” In the article and associated code, Raymond builds and explains a demo that downloads a zip filled with site assets, unzips them on the client and finally uses the Filesystem API to cache these assets locally for quick loading. It is an interesting proof of concept and, I hope, may spur some further creative uses of this cutting edge HTML5 feature from readers. So, give it a read, you won’t regret it.

Testing Your JavaScript Applications

As people build increasingly more complex applications using JavaScript, the demands for testing those applications also increase. This has led to a wide variety of testing frameworks and tools specifically designed for JavaScript developers. Testing frameworks like QUnit, which is the test suite used by the jQuery project, have been around for some time and appear to have a broad user base. Other widely discussed tools include PhantomJS which is a headless WebKit that can be used for headless website testing in combination with a variety of other frameworks. If you are looking for a more complete list of testing tools, you can check the JavaScript frameworks list I maintain on my blog.

Despite the variety of testing options, many JavaScript developers have still not fully integrated unit testing or automated functional testing into their development process. This is part of the reason I was specifically interested in Dustin Butler’s recent ADC article on unit testing JavaScript applications with Jasmine. Jasmine is another popular solution for behavior driven development (BDD) which, as Dustin explains, is based upon the more common test driven development (TDD) approach but uses a natural language to define test based upon behaviors often described in an Agile user story.

I highly recommend reading Dustin’s article if you are interested in getting started testing your JavaScript applications or, even, if you are already doing testing using some other framework. As always, I welcome your feedback on the content we publish on the ADC – and if there are any other topics you would like to see covered, be sure to suggest them.