SlideShare una empresa de Scribd logo
1 de 23
Hello, Jo!
The Lightweight HTML5 Mobile App
            Framework
           Dave Balmer
       JSConf 2011 Portland
Introduction
The “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
Philosophy
Jo 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 “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
                 • 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?)
Comparison
How 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                                    11


Sencha Touch                                         12


jQuery 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                                         11


Sencha Touch                                              12


jQuery Mobile                                                  13


                0          3       6       9          12            15
Jo’s Sweet Spot
               Minimal
       Zepto
         XUI

                   Jo
HTML                             JS
   jQuery
   Mobile                  Sencha
                           Touch
                         Sprout
                          Core
               Massive          Dojo
                               Mobile
Code Examples
Yadda 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 Session
Because 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 flash drives as well

Más contenido relacionado

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

PhoneGap - What It Actually Is
PhoneGap - What It Actually IsPhoneGap - What It Actually Is
PhoneGap - What It Actually IsMarkiyan Matsekh
 
From React to React Native
From React to React NativeFrom React to React Native
From React to React NativeAxel Delafosse
 
JavaScript Library Overview
JavaScript Library OverviewJavaScript Library Overview
JavaScript Library Overviewjeresig
 
Do you need jQuery in 2019?
Do you need jQuery in 2019?Do you need jQuery in 2019?
Do you need jQuery in 2019?LindaHsu19
 
Gianluca Esposito - It's time to go Native! (with JavaScript and React Native...
Gianluca Esposito - It's time to go Native! (with JavaScript and React Native...Gianluca Esposito - It's time to go Native! (with JavaScript and React Native...
Gianluca Esposito - It's time to go Native! (with JavaScript and React Native...Codemotion
 
Organized web app development using backbone.js
Organized web app development using backbone.jsOrganized web app development using backbone.js
Organized web app development using backbone.jsShakti Shrestha
 
Paris Web - Javascript as a programming language
Paris Web - Javascript as a programming languageParis Web - Javascript as a programming language
Paris Web - Javascript as a programming languageMarco Cedaro
 
Intro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate JavascriptIntro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate JavascriptAndrew Lovett-Barron
 
DevChatt 2011 - PhoneGap: For Fun and Science
DevChatt 2011 - PhoneGap: For Fun and ScienceDevChatt 2011 - PhoneGap: For Fun and Science
DevChatt 2011 - PhoneGap: For Fun and ScienceCameron Kilgore
 
The State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistThe State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistMark Fayngersh
 
CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES
CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICESCROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES
CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICESwe20
 
Key Differences Between Node JS vs JavaScript.pdf
Key Differences Between Node JS vs JavaScript.pdfKey Differences Between Node JS vs JavaScript.pdf
Key Differences Between Node JS vs JavaScript.pdfTemok IT Services
 
Javascript Apps at Build Artifacts
Javascript Apps at Build ArtifactsJavascript Apps at Build Artifacts
Javascript Apps at Build ArtifactsClay Smith
 
Mobile cross platform development with Dojo
Mobile cross platform development with DojoMobile cross platform development with Dojo
Mobile cross platform development with DojoNikolai Onken
 
Phonegap for Engineers
Phonegap for EngineersPhonegap for Engineers
Phonegap for EngineersBrian LeRoux
 
Workshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General OverviewWorkshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General OverviewVisual Engineering
 

Similar a Hello, Jo! Introduction to this lightweight HTML5 mobile app framework (20)

PhoneGap - What It Actually Is
PhoneGap - What It Actually IsPhoneGap - What It Actually Is
PhoneGap - What It Actually Is
 
From React to React Native
From React to React NativeFrom React to React Native
From React to React Native
 
JavaScript Library Overview
JavaScript Library OverviewJavaScript Library Overview
JavaScript Library Overview
 
Jquery react angular
Jquery react angularJquery react angular
Jquery react angular
 
Do you need jQuery in 2019?
Do you need jQuery in 2019?Do you need jQuery in 2019?
Do you need jQuery in 2019?
 
Gianluca Esposito - It's time to go Native! (with JavaScript and React Native...
Gianluca Esposito - It's time to go Native! (with JavaScript and React Native...Gianluca Esposito - It's time to go Native! (with JavaScript and React Native...
Gianluca Esposito - It's time to go Native! (with JavaScript and React Native...
 
Organized web app development using backbone.js
Organized web app development using backbone.jsOrganized web app development using backbone.js
Organized web app development using backbone.js
 
Paris Web - Javascript as a programming language
Paris Web - Javascript as a programming languageParis Web - Javascript as a programming language
Paris Web - Javascript as a programming language
 
Intro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate JavascriptIntro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate Javascript
 
DevChatt 2011 - PhoneGap: For Fun and Science
DevChatt 2011 - PhoneGap: For Fun and ScienceDevChatt 2011 - PhoneGap: For Fun and Science
DevChatt 2011 - PhoneGap: For Fun and Science
 
The State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistThe State of Front-end At CrowdTwist
The State of Front-end At CrowdTwist
 
CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES
CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICESCROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES
CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES
 
Node @ flipkart
Node @ flipkartNode @ flipkart
Node @ flipkart
 
1_mockito
1_mockito1_mockito
1_mockito
 
Key Differences Between Node JS vs JavaScript.pdf
Key Differences Between Node JS vs JavaScript.pdfKey Differences Between Node JS vs JavaScript.pdf
Key Differences Between Node JS vs JavaScript.pdf
 
Javascript Apps at Build Artifacts
Javascript Apps at Build ArtifactsJavascript Apps at Build Artifacts
Javascript Apps at Build Artifacts
 
Mobile cross platform development with Dojo
Mobile cross platform development with DojoMobile cross platform development with Dojo
Mobile cross platform development with Dojo
 
Phonegap for Engineers
Phonegap for EngineersPhonegap for Engineers
Phonegap for Engineers
 
Dojo tutorial
Dojo tutorialDojo tutorial
Dojo tutorial
 
Workshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General OverviewWorkshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General Overview
 

Último

Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxBkGupta21
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 

Último (20)

Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 

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

  • 1. Hello, Jo! The Lightweight HTML5 Mobile App Framework Dave Balmer JSConf 2011 Portland
  • 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. 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. Jo with Browsers, Desktop Widgets, Your JS App Jo webkit • Works alongside other libs • Doesn’t force you to use it for everything
  • 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. 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. ...And it’s Open Source (of course, of course) • FreeBSD license • Hosted on GitHub • Looking for more code contributors
  • 9. Philosophy Jo is made from a few of my favorite things.
  • 10. Jo’s Syntactic Sugar • Constructor nesting • Method chaining • Custom extend() method • Observer pattern • Supports either bind() or passing context
  • 11. Jo’s Principles • Don’t try to “fix” JavaScript • Let CSS3 do its job • Keep the code light
  • 12. If Jo Were a Person...
  • 13. If Jo Were a Person... Indiana Jones! • Smart • Flexible • Travels light • Can dress up (if he has to)
  • 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. Comparison How to spot Jo in a crowd of mobile frameworks.
  • 16. Jo vs. The Volcanos Obligatory Size Comparison Jo 2 XUI 3 Zepto 5 SproutCore 10 Dojo Mobile 11 Sencha Touch 12 jQuery Mobile 13 0 3 6 9 12 15
  • 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 11 Sencha Touch 12 jQuery Mobile 13 0 3 6 9 12 15
  • 18. Jo’s Sweet Spot Minimal Zepto XUI Jo HTML JS jQuery Mobile Sencha Touch Sprout Core Massive Dojo Mobile
  • 19. Code Examples Yadda yadda yadda... show me the code!
  • 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. More Samples... /* code > slides */
  • 22. Q&A Session Because every talk needs one.
  • 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

Notas del editor

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n