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 Comm...
What the Hell is Jo?• JavaScript lovin’ mobile app  framework• Touchable, tappable UI widgets• Simple data layer• Smallish...
Jo with Browsers, Desktop         Widgets,               Your JS App                   Jo                 webkit• Works al...
Jo with iOS/Android        PhoneGap             PhoneGap            Your JS App                Jo              webkit• Pho...
Jo & PhoneGap on webOS          and             Your JS App          PhoneGap      Jo               webkit• PhoneGap acts ...
...And it’s Open Source         (of course, of course)• FreeBSD license• Hosted on GitHub• Looking for more code contribut...
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...
Jo’s Principles• Don’t try to “fix” 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   ...
...OK, More Like Young        Indy Today• Capable• Reeking with potential• A little rough around the edges (Did I mention ...
ComparisonHow to spot Jo in a crowd of mobile          frameworks.
Jo vs. The Volcanos                    Obligatory Size Comparison           Jo          2         XUI               3     ...
Jo vs. The Volcanos                    Obligatory Size Comparison           (using my favorite metric: bytes per framework...
Jo’s Sweet Spot               Minimal       Zepto         XUI                   JoHTML                             JS   jQ...
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><...
More Samples.../*     code > slides*/
Q&A SessionBecause every talk needs one.
Thank You!*                Dave Balmer               Twitter @Balmer              http://joApp.com      http://github.com/...
Upcoming SlideShare
Loading in …5
×

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

6,174 views

Published on

Jo is a small (~12K gzipped) JavaScript framework for making cross-platform mobile apps. It supports iOS, Android, webOS, BlackBerry, Symbian, Adobe Air, and even OSX Dashboard apps. It is compatible with PhoneGap, fast, and easy to learn.

Published in: Technology, Education
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
6,174
On SlideShare
0
From Embeds
0
Number of Embeds
31
Actions
Shares
0
Downloads
63
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Hello, Jo! Introduction to this lightweight HTML5 mobile app framework

    1. 1. Hello, Jo!The Lightweight HTML5 Mobile App Framework Dave Balmer JSConf 2011 Portland
    2. 2. IntroductionThe “hello” part of my talk.
    3. 3. 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”
    4. 4. 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 &
    5. 5. Jo with Browsers, Desktop Widgets, Your JS App Jo webkit• Works alongside other libs• Doesn’t force you to use it for everything
    6. 6. Jo with iOS/Android PhoneGap PhoneGap Your JS App Jo webkit• PhoneGap acts as a WebView wrapper• Your code is about the same
    7. 7. Jo & PhoneGap on webOS and Your JS App PhoneGap Jo webkit• PhoneGap acts as a compatibility layer• And your code is still about the
    8. 8. ...And it’s Open Source (of course, of course)• FreeBSD license• Hosted on GitHub• Looking for more code contributors
    9. 9. PhilosophyJo is made from a few of my favorite things.
    10. 10. Jo’s Syntactic Sugar• Constructor nesting• Method chaining• Custom extend() method• Observer pattern• Supports either bind() or passing context
    11. 11. Jo’s Principles• Don’t try to “fix” JavaScript• Let CSS3 do its job• Keep the code light
    12. 12. If Jo Were a Person...
    13. 13. If Jo Were a Person...Indiana Jones! • Smart • Flexible • Travels light • Can dress up (if he has to)
    14. 14. ...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?)
    15. 15. ComparisonHow to spot Jo in a crowd of mobile frameworks.
    16. 16. 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
    17. 17. 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
    18. 18. Jo’s Sweet Spot Minimal Zepto XUI JoHTML JS jQuery Mobile Sencha Touch Sprout Core Massive Dojo Mobile
    19. 19. Code ExamplesYadda yadda yadda... show me the code!
    20. 20. 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>
    21. 21. More Samples.../* code > slides*/
    22. 22. Q&A SessionBecause every talk needs one.
    23. 23. Thank You!* Dave Balmer Twitter @Balmer http://joApp.com http://github.com/davebalmer/jo*see me after, I have Jo on flash drives as well

    ×