Author Archive: brinaldi

Making PhoneGap Apps Behave More Like Native

PhoneGap offers a load of benefits to developers, allowing them to leverage their HTML/CSS/JavaScript development skills to develop cross-platform mobile applications that take advantage of native hardware and OS features. It also allows you to reuse assets and code from existing mobile web applications. However, when creating a PhoneGap application, you don’t want it to look like simply your web page in a native app wrapper but rather to look and behave like an app.

This can be difficult to achieve, but thankfully there are some tools available to help. One of the most recent tools is the App-UI component library created by Adobe developer  evangelist Andrew Trice. This HTML/JS library creates an application container that follow common mobile application UI patterns including ViewNavigator, SplitViewNavigator and SlidingView and include methods for pushing and popping views.

If you are interested in learning more about the App-UI library, Andrew has written a great tutorial that shows you how to build a movie listing app using the Rotten Tomatoes API and working with the PhoneGap Build service for generating the native files. I was impressed at how easy Andrew has made it to develop native-like apps using this framework. Check out Andrew’s article, “Creating native-like user experiences in PhoneGap with App-UI,” on the ADC.

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.

Do Object Types Matter in JavaScript?

Some of you may recall that back in February, the ADC published an article by Keith Peters called “JavaScript Object Creation – Learning to Live Without ‘New’” in which Keith nicely explained the ways available to create and define objects in JavaScript and recommended a practice he preferred (as the title suggests, it isn’t use new). This article was widely popular not only because Keith is a great writer who explains things in an easy to read manner, but also because there is still a lot of debate on these types of topics in the JavaScript community.

In fact, some of the follow up discussion from Keith’s article led him to author a follow-up which was published this week that focuses on determining object types in JavaScript titled, simply, “Object types in JavaScript.” In this article, Keith discusses a variety of methods available for determining the type of object within JavaScript. However, he then goes on to show how object types can be both unhelpful and unreliable in a dynamic language like JavaScript and advocates “duck typing,” which, put simply, is a way of defining an object by what it does rather than its type. It is a great read and I really hope that it spurs some thoughtful discussion on the topic.

On Motion Detection in Video Using JavaScript

Every day I scour hundreds of sites looking for some of the best content on a variety of topics I am interested in. While there is, obviously, a ton of great content out there, I am always excited when I come across something that I feel is new and unique. That was the case with a recent post by Romuald Quantin.

The getUserMedia API has been a popular topic lately even though it is only fully implemented in Chrome Canary and Opera 12. However, the application Romu had created managed to set itself apart by combining video from the user’s camera with custom built motion detection using JavaScript and playing audio with the sound API’s. I was really impressed with the demo and immediately wished Romu would write about how he created it. Thankfully, he agreed to do so for the ADC and I am very happy that yesterday we published his article, “JavaScript Motion Detection.” If you are interested in seeing how to use some of these cutting edge API’s or just seeing how the browsers are implementing them, I highly recommend reading it. As always, we welcome your feedback on ADC content we publish or any topics you’d like to see published.

Interview with Val Head on CSS3, JavaScript and More.

FITC Toronto is right around the corner and this year it features a ton of speakers focused on creating web applications with HTML5, CSS3 and JavaScript. Over the next couple weeks leading up to the conference, I plan to publish a handful of interviews with some of the speakers who have sessions focused on these topics.

The first interview is with Val Head who is doing a session entitled “Designing Motion with CSS3 and JavaScript” that focuses on helping web designers and developers leverage CSS3 and JavaScript for animations and transitions that enhance their application experience. She also has a short session on typography. In addition to presenting, Val writes for CreativeJS and, recently, for .net Magazine and runs a popular conference called Web Design Day. You can also follow Val on Twitter via @vlh.

Tell me a little bit about your skills and background? By your bio, you seem to be one of those rare designer/developers that people talk about?

I guess I am! Though I hope we’re not really that rare. I got my start in web design because my band needed a web site. I like to joke that that’s how everyone got started making web sites because I’ve met so many colleagues with similar stories.

Along the way I took an animation workshop that introduced me to animating with code in Flash. I’d never thought of programming as being something that was at all creative before that and it pretty much had me hooked.  So that got me started in Flash, which lead to dabbling in Processing, and then most recently JavaScript. (Well, technically I’ve been using JavaScript for years, but it’s only recently gotten fun so it seems new.)

I’ve done lots of design work along the way as well. And combining the two as much as possible. Luckily, there’s lots of opportunity for that when you’re working on interactive projects.

Your presentation at FITC is about using transitions. This seems like one of those things that developers like myself might overuse because it “looks cool” without giving much thought about the meaning a transition might be conveying to a user. Can you explain why you think transitions is an important topic?

Transitions especially are an opportunity to communicate and add a little touch of surprise and delight to your site or app. The best transitions are ones that feel right and look cool. The same goes for any animations in an interface really. But that’s easier said than done!

Like you mentioned it’s easy to overdo them, or just kind of plop them anywhere you can think of with no real plan. Those are both really common mistakes. Along with creating something that’s so complicated it only gets in the way. So there’s a lot to look out for besides just what’s technically possible.

You’ve written in the past about using JavaScript to enhance your CSS transitions. What kind of limitations do you see in CSS transitions that JavaScript can overcome?

CSS transitions and animations are a huge step in what CSS can do, and they can really come in handy. But they often fall short when it comes to interactivity. If you want to get at all sophisticated with when or how you trigger your CSS animations/transitions, you have to turn to JavaScript to help you out. CSS and JavaScript have been working together for a long time though and this is a great way to pair them up. You can take advantage of what each does well and get creative with it.

As  a writer for CreativeJS, you cover a lot of cutting edge HTML5 and JavaScript projects. Are there any projects right now that you are particularly excited about?

There’s been so many amazing projects turning up lately, it’s much too hard to pick just one. The thing I’m most excited about is how fast browser performance is improving. It’s great when you go back to a demo from a few months ago and find that it runs noticeably faster.  I think the “browser wars” (if you can still call it that) are really working in our favour there.

A couple favourites that we’ve posted about recently are the multiplayer music making with Plink (http://creativejs.com/2012/03/plink/) and the highly entertaining MMOsteroids April fools joke. (http://creativejs.com/2012/04/fake-mmo-april-fool-makes-hacker-news/)

Why should FITC attendees go to your session? What will they learn?

I’ll be talking all about the why and how of making awesome animations and transitions with web standards. So, anyone interest in those things should definitely come.

I’ll also be showing handy tricks for giving your animations and transitions that extra bit of polish, and some special considerations that go along with animating DOM elements. Some naming and shaming of sites that have done it all terribly wrong will come up I’m sure. Along with my suggestions on how they could do it better, of course :)

On JavaScript, Objects and Inheritance…

Over the past few months I have dedicated myself to learning JavaScript. By this, I mean, not just being able to use JavaScript, which I have done for many years, but learning the language. To me, this meant stepping beyond doing some DOM-scripting in jQuery for some cool effects, but rather learning the core concepts of the language. For someone who spent many years trying to perfect an understanding of object-oriented programming principles, this can be a tough transition (not that I had OOP principles perfected either). The JavaScript language is not just syntactically different, but fundamentally different – being prototype-based among many other things.

As the JavaScript community continues to grow, there seems to have been much debate about these differences. Some people try to recreate things from classical OOP in JavaScript, like classical inheritance and strict(er) typing. Still others argue that by doing this, you ignore what makes JavaScript uniquely powerful. We’ve covered a little bit of both ends on the ADC, starting with Keith Peters’ popular article “JavaScript object creation: Learning to live without ‘new.’” More recently, I wrote about doing “Pseudo-classical object-oriented programming in JavaScript with Minion.” The latter focuses on one of many libraries that allow you to create objects that mimic classical inheritance and allow for more traditional namespacing and extending of objects. To be clear, I am not taking a side in the debate – something I don’t feel quite qualified to do at the moment. However, I do think it is an important topic and worth exploring both sides of the debate. I plan to continue to cover on the ADC in various forms whether it be in examining languages like CoffeeScript to other libraries/frameworks that offer differing “solutions” to these issues to covering fundamental language concepts in JavaScript.

Hopefully, you find these topics as fascinating and thought-provoking as I do. As always, I welcome your feedback on items we publish on the ADC as well as ideas for topics you’d like to see (and, remember, we even have a forum dedicated to getting your feedback).