dayofjs logo A Free Day of Javascript on Mobile at Google HQThese days it’s hard to ignore the groundswell of the co-mingling of the words “mobile” and “HTML5″. Mobile is where it’s at in 2011 (if it wasn’t already in 2010) and most are betting on HTML5 and the mobile web  to cope with the rapidly multiplying permutations and fragmentation of OS devices, and form factors. As Facebook CTO Brett Taylor was quoted in the WSJ recently, “Mobile is the primary focus for our platform this year,” and “HTML5 is the future platform, that’s where we’re putting a huge amount of our resources.”

This past Thursday, January 27, 2011 a grassroots style event took place at Google Headquarters in Mountain View, CA. A “Free Day of Javascipt on Mobile” attracted some of the best mobile web minds in the Bay Area to discuss the current state and future of javascript on mobile and the mobile web in general.

MJG International led by Marc Grabanski organized the event in a matter of weeks. The event was practically unpublicized, primarily spread by word of mouth (a.k.a Twitter), yet “sold out” in just 23 minutes!  Did I mention it was free? with free t-shirts? free food? and no blatant sales pitch?

“This conference is about getting together with people who want to build and create cool things with great people. It’s not about creating a conference business, hence the decision to make it free and keep independent of cash sponsors.” – MJG

The State of the Web

5394719161 17ed69b5f2 m A Free Day of Javascript on Mobile at Google HQThe day was kicked off by the dynamic duo of Ben Galbraith and Dion Almaer who delivered a “State of the Web” address. After a bit of a history review (by the way the state of the web is… Strong) with first hand knowledge from their work leading the WebOS developer ecosystem, they keenly broke down the three things that make an app platform successful:

  • platform distribution
  • merchandizing (user and developer) experience
  • capabilities

In short, the web has tremendous capabilities and wide reaching distribution, though application discoverability is still a challenge.

“Imagine the world where you go to a store and there are no products just a guy who you can ask questions of that won’t tell you any opinions, just what he’s heard and what he’s been paid to say” -Ben

Another challenge is monetization and merchandising infrastructure. Today many web applications are making money based on subscription and traditional models, but they each must roll their own. Attempts to address this are being led by Google with the Chrome Web Store and Mozilla.

My favorite talk of the day was given by Google Chrome Frame developer Alex Russell. Alex presented a detailed technical walk-through of how Webkit based browsers like Chrome see your application from the inside out. If you are serious about web development be sure to check out this recorded session and check back here for links to the videos when they are published.

Other themes emerged through the day…

Desktop web and mobile web frameworks will converge

There is currently a divide between net new mobile javascript and web frameworks and frameworks intended for the traditional desktop browser. Given most mobile browsers are webkit, why include all of the extraneous bloated support for older desktop browsers like IE6? This philosophy has spurred frameworks like zepto.js which adopted the jQuery API with a stripped down implementation specifically for mobile webkit.

However, the same “opportunities” that led to most javascript frameworks providing unified cross-browser support and encapsulation is emerging in the “mobile” category as well. Android and tablet devices will continue to create drastic fragmentation with respect to form factors, resolutions, features and user expectations.

5394744721 fe3602b8e3 m A Free Day of Javascript on Mobile at Google HQScott Jehl of the jQuery Mobile team was dead on when he described the problem with UserAgent device identification. UserAgent strings are unpredictable, spoof-able, diverse, and may not guarantee that one UserAgent’s capabilities will be the same tomorrow as it is today. Feature test driven detection and progressive enhancement seems to be the only sane way to approach this expanding problem, be it desktop, phone, tablet or whatever.

“Mobile” as a category shouldn’t be used to infer platform or device capabilities! Blackberry, Windows Phone 7, Opera, Android, tablets, other connected devices like televisions, media players, Google TV, set-top boxes and the like with web capabilities are going to make us all yearn for the olden days of “if it weren’t for IE6 life would be perfect.”

So much fragmentation will probably lead framework authors to encapsulate support for desktop, mobile and everything in between within a unified distribution. In fact even Steve Jobs and Apple have adopted this philosophy announcing that Mac OS X Lion will “bring many of the best ideas from iPad back to the Mac.”

Fundamental shift from one to many devices

5394735313 546b9da1dd m A Free Day of Javascript on Mobile at Google HQYehuda Katz of the Sproutcore described the modern day scenario as such: five years ago everyone had one primary computing device, but today people expect to use your app on their desktop, grab their phone, tablet, etc., walk out the door and continue what they were doing. He postulated that your mobile strategy should be centered around this, but that the experience across devices doesn’t have to be the same, rather it should be different, leveraging and optimizing for the device.

5395334260 40082712d8 m A Free Day of Javascript on Mobile at Google HQAnd as Kevin Whinnery of Titanium put it “developing n apps for n platforms doesn’t scale.” There was a general consensus that the “web stack” will be the only way to effectively and reasonably target all these devices. Truth be told that even with all of the cross browser idiosyncrasies, browsers are more consistent than not and are the best cross platform, cross device delivery targets. If your mobile strategy for 2011 is to hire someone to build an iphone app, then you are probably missing the big picture.

Three approaches to building mobile apps

There are three roads one can traverse to build and deploy a mobile application these days. Each of these were mentioned in some way by nearly all of the participants.

Native

The majority of successful mobile applications today are built with native frameworks and tools (e.g. Ojective-C or Java). This approach in all likelihood will yield the best, most integrated, performant, consistent application. However, each platform requires new skills with little crossover between platforms and each application is a completely different effort per device making it cost prohibitive, forcing you to make platform support trade offs.

Native wrapper or bridge

Titanium and PhoneGap are the two primary options in this category but they are in fact very different. Both enable you to deploy native-like applications through a platforms app store.

PhoneGap lets you to build a typical web stack (HTML/JS/CSS) application in an embedded webview component with javascript bindings to native device capabilities (camera, location, etc.) that’s packaged and deployed as a native application. One would typically combined PhoneGap with one of the prominent mobile web application frameworks like jQuery Mobile or Sencha Touch.

With Titanium you develop your application with javascript (e.g. rather than Objective-c or Java), using APIs that proxy to native UI components. Titanium is sort of a bastard child allowing developers to code in javascript, reuse code across platforms, but deliver an application that feels more like a native app from a look and performance perspective. You could use a webview much like with PhoneGap but at that point wouldn’t you just use PhoneGap?

Web-view based web-app

5394742719 c6aa3b4e73 m A Free Day of Javascript on Mobile at Google HQ The lowest barrier of entry, with broadest deployment potential, and most familiar approach is to build a traditional web application. Again Sencha Touch, jQuery Mobile, Spoutcore Amber (to be released), and other pure mobile web frameworks that simulate device look and feel may be used. There are two key disadvantages to this approach. First is that your application is neutered with limited access to native device capabilities such as the camera. The second is a distribution problem; mobile users have been trained to look for apps in the app store and they typically don’t search for applications in the devices browser. As Alex Russell put it “web apps on my phone are not a first class citizen.” Yes, an application bookmark icon can typically be added to the home screen like an installed native application, however getting users to that point is challenging.

Finally

In conclusion, this was a fantastic event, and I am grateful for having the opportunity to participate and grateful for Marc, the MJG team, Google and the other sponsors for hosting such a high quality event.

2011 is set to be the year of HTML5 and mobile together. However in contrast, it’s interesting hear that Google will be more aggressively building native mobile smartphone apps as well.  No matter what happens Alex Russell summed it up best in the panel session: “for serious.”

** photos courtesy of David Calhoun. See all of his photos from the event here.