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

5,936 views
5,629 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
5,936
On SlideShare
0
From Embeds
0
Number of Embeds
31
Actions
Shares
0
Downloads
61
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

    ×