Hello, Jo! Introduction to this lightweight HTML5 mobile app framework

Hello, Jo!The Lightweight HTML5 Mobile App Framework Dave Balmer JSConf 2011 Portland

IntroductionThe “hello” part of my talk.

Who the Hell am I?• Programmer for 34 years• Occasional designer wanna-be• JavaScript freak (since 2004)• Open Source Community noob• Living proof that getting a little kid addicted to programming might not be a “good thing”

What the Hell is Jo?• JavaScript lovin’ mobile app framework• Touchable, tappable UI widgets• Simple data layer• Smallish footprint, ~12K gzipped• Plays with PhoneGap for iOS, Android, webOS, BlackBerry &

Jo with Browsers, Desktop Widgets, Your JS App Jo webkit• Works alongside other libs• Doesn’t force you to use it for everything

Jo with iOS/Android PhoneGap PhoneGap Your JS App Jo webkit• PhoneGap acts as a WebView wrapper• Your code is about the same

Jo & PhoneGap on webOS and Your JS App PhoneGap Jo webkit• PhoneGap acts as a compatibility layer• And your code is still about the

...And it’s Open Source (of course, of course)• FreeBSD license• Hosted on GitHub• Looking for more code contributors

PhilosophyJo is made from a few of my favorite things.

Jo’s Syntactic Sugar• Constructor nesting• Method chaining• Custom extend() method• Observer pattern• Supports either bind() or passing context

Jo’s Principles• Don’t try to “ﬁx” JavaScript• Let CSS3 do its job• Keep the code light

If Jo Were a Person...

If Jo Were a Person...Indiana Jones! • Smart • Flexible • Travels light • Can dress up (if he has to)

...OK, More Like Young Indy Today• Capable• Reeking with potential• A little rough around the edges (Did I mention I’m looking for more code contributors?)

ComparisonHow to spot Jo in a crowd of mobile frameworks.

Jo vs. The Volcanos Obligatory Size Comparison Jo 2 XUI 3 Zepto 5 SproutCore 10 Dojo Mobile 11Sencha Touch 12jQuery Mobile 13 0 3 6 9 12 15

Jo vs. The Volcanos Obligatory Size Comparison (using my favorite metric: bytes per framework name) Jo 2 XUI 3 Zepto 5 SproutCore 10 Dojo Mobile 11Sencha Touch 12jQuery Mobile 13 0 3 6 9 12 15

Jo’s Sweet Spot Minimal Zepto XUI JoHTML JS jQuery Mobile Sencha Touch Sprout Core Massive Dojo Mobile

Code ExamplesYadda yadda yadda... show me the code!

Hello, Jo! Sample<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="jo.css" type="text/css"></head><body><script src="jo.js"></script><script> var app = new joScreen(); app.alert(“Hello, Jo!”);</script></body></html>

More Samples.../* code > slides*/

Q&A SessionBecause every talk needs one.

Thank You!* Dave Balmer Twitter @Balmer http://joApp.com http://github.com/davebalmer/jo*see me after, I have Jo on ﬂash drives as well

http://lanyrd.com	20
http://www.linkedin.com	4
http://twitter.com	1

Hello, Jo! Introduction to this lightweight HTML5 mobile app framework

by Dave Balmer

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 25

Statistics