HP/Palm Has Released the Enyo Web UI Framework

Hi, folks —

In case you haven’t heard already, HP/Palm has released the UI framework they used to build the WebOS UI as a free open source JavaScript/CSS framework. That’s right: the WebOS was built using Web technologies — not Java, C++, or something else!

Check out the Enyo JS framework & have fun exploring their samples pages:

www.enyojs.com

Be sure to review the “StyleMatters” sample, which encapsulates what looks like all of the UI components Palm used on WebOS’s distinctive (and gorgeous) UI layer.

http://enyojs.com/samples/stylematters/

Caution

There is one word of warning, though. Enyo renders best on WebKit-based browsers. Some of the UI components render OK on my Windows Phone 7 test device, but not all of them. And unfortunately, the StyleMatters sample doesn’t render at all on my Windows Phone 7 device. I haven’t tested the StyleMatters sample with Firefox or Opera Mobile on an Android device, but I expect there to be significant rendering issues with these browsers, as well.  🙁

Advice for Using Enyo with MobileESP

If you decide to develop a web site or application with the Enyo JS UI framework, remember that it works best with WebKit-based browsers. As of today, it’s probably not reliable with Internet Explorer, Firefox, or Opera, whether mobile or desktop browsers.

You would also want to limit your Enyo-based web app to the iPhone Tier devices and perhaps also Tablet Tier. This means that you might consider making a different mobile version of your site available to devices using non-WebKit browsers (e.g., on Android, Windows Phone, or BlackBerry), even if they’re in the iPhone or Tablet tiers.

Your Enyo web development strategy might look something like this:

• Tablet Tier, WebKit Only: Enyo OK
• Non-WebKit Browsers: Mobile-friendly desktop or generic mobile site
• iPhone Tier, WebKit Only: Enyo OK
• Non-WebKit Browsers: Generic mobile site
• All Other Mobile Devices: Provide the generic mobile site.

Therefore, you would want to determine whether to serve an Enyo-built site using the iPhone or Tablet Tier API calls with the WebKit calls. Here is a pseudo-code example:

if (DetectMobileQuick() == true)

{

if ((DetectTierIphone() == true) && (DetectWebkit() == true))

//Serve the Enyo-built phone screensize-optimized site

else

//Serve the generic mobile phone site with no JavaScript and extremely simple CSS

}

(What do we mean by “iPhone Tier,” “Rich CSS” or “Generic Mobile” devices? You may wish to refresh your memory by reviewing this blog article we wrote.)

Summary

If you’re looking for a beautiful UI framework as an alternative to jQuery Mobile, Sencha Touch, and a few others out there, then Enyo is worth your consideration. You’ll also be happy to hear that Enyo is object-oriented and now totally free and open source. Thanks, Palm!

– Anthony