SlideShare a Scribd company logo
1 of 52
Making Cross Platform
Apps Suck Less
James Hugman
I am…


   • an engineer at Future Platforms
   • We make apps for clients
   • We’re technology agnostic. i.e. Web,
     Native, Whatever.



@jhugman
Story Arc

   • A public service announcement
   • A big client, a big job
   • A painful flashback
   • Experiments yield a surprising result
   • The future looks bright.
@jhugman
Web v Native
      is a
 False Dilemma

Web        Native
Reality
Reality?




ft.com   LinkedIn                 Guardian
                                             Angry
     PhoneGap              Titanium
                Appstore                     Birds
Reality?
         native                      Guardian
                                                    Profanisaurus


                    Facebook
         UI                                Gmail
                  LinkedIn
                                      Appstore

ft.com
                                 Plugins
         web




                    PhoneGap
                  web        Logic         native
Glastonbury 2011


• “…we want users to love us…”
• iPhone, Android, Nokia
• Hostile terrain
Consequences



   • UI should feel native and platform
     specific

   • Assume offline

@jhugman
Technology Options


   • HTML app
   • Something else
   • Three native apps

@jhugman
Approach 1
HTML5 is coming!
The promise




@jhugman
Executive Summary




@jhugman
Executive Summary


             Bu y o ne
               g et
            n FREE! ! !


@jhugman
Fundamental problems



   • Native is closest to native
   • Different platform metaphors.


@jhugman
Webkit
              Fragmentation


   • Webkit is everywhere
   • “No two implementations are alike”
     — @ppk

   • Different platform half-lives
@jhugman
Lots of work



   • Developer time getting it just right.
   • CPU is spent doing UI, not your app.


@jhugman
Developer happiness


   • Endless browser bugs
   • Less time building features
   • #ifdef code

@jhugman
Addendum



    • Clients love to pay for web-technologies
    • but hate the quality


@jhugman
Approach 2
Something else
What’s left
  native



                 ?     Too expensive


  UI

                 Not there yet
  web




           web       Logic       native
App Architectures

       Presentation Layer


     Application Logic Layer


     Platform Services Layer
App Architectures

           Presentation Layer
         (Sencha, JS, SASS, CSS, HTML)



       Application Logic Layer
   (Javascript, requirejs, Backbone, SQL, HTTP)



       Platform Services Layer
     Webview               Native PhoneGap plugins



             PhoneGap App
App Architectures

        Presentation Layer
      (written in JS, rendered natively)



     Application Logic Layer
          (Javascript, SQL, HTTP)



     Platform Services Layer
                  (Native)



     “Something Else” app
Titanium
“a cross platform
operating system”
The Pitch


   • Write UI in Javascript
   • Native widgets are generated at
     runtime

   • iOS & Android

@jhugman
JS/Native Bridge
Performance is I/O Bound

        Native Button

          To Native
              setText()
           setTextColor()
       setBackgroundColor()

       From Javascript
          onTouchDown
           onTouchUp
             onClick
No UI Tooling



   • No development tooling
   • No runtime tools


@jhugman
Other significant
     problems


   • Porting by framework’s best effort
   • Difficult to take advantage of
     unsupported API




@jhugman
DOM-less Game Libraries
Canvas APIs implemented
with OpenGL
Examples


   • Game Closure
   • Impact for iOS
   • appMobi’s DirectCanvas

@jhugman
Observations



   • Game UI is not Platform UI
     •   also see: Web UI is not Platform UI




@jhugman
UI Performance is I/O
     Bound



   • Each bundles its own Javascript
     engine




@jhugman
Introducing Kirin
A new platform
Requirements


   • Maximise code re-use
   • Native, platform appropriate UIs
   • Happy developers & designers
   • Minimal runtime to download

@jhugman
Idealised Architecture

       Presentation Layer
          (written in Native)



     Application Logic Layer
        (Javascript, SQL, HTTP)



     Platform Services Layer
               (Native)



            Kirin App
Consequences


   • Platform appropriate UX
   • Better tooling
   • Fewer compromises

@jhugman
Fewer JS/Native function
calls

                Activity
    configureSpecificButtonWithData_(data)




               To Native
    configureSpecificButtonWithData_(data)

           From Javascript
            onSpecificButtonClick
Consequences



   • Can use existing JS Engine in an
     invisible WebView




@jhugman
Priorities

   • Great performance
   • Easy to grow
   • Modular
   • Easy-to-use Foreign Function
     Interface


@jhugman
Super easy FFI

Native to Javascript:
// In MyScreenActivity.java
mScreenProxy.onButtonClick();


// In MyScreenUIViewController.m
[KIRIN fireEventIntoJS:
              @”native2jsScreenProxy.onButtonClick()”];


// In MyScreen.js
exports.onButtonClick = function () {
   // do some logic.
}
Super easy FFI

Javascript to Native:
// In MyScreen.js
kirin.js2nativeScreenProxy.setText_andSize_(“Hello world”, 15);


// In MyScreenActivity.java
public void setText_andSize_(String message, int size) {
   // do the thing
}

// In MyScreenUIViewController.m
-(void) setText:(NSString*) message andSize:(NSInteger)size {
   // do the thing
}
Inspired by node.js



   • CommonJS Modules
   • Transparent threading


@jhugman
Hello World
Would you like to see a
demo?
Back to Glastonbury


• What we shipped:
 • iOS, native only
 • Qt in JS/QML, with Kirin
 • Android with Kirin
Outcome



• Two apps with Kirin (Android & Qt)
• Android app was built in half (50%)
  the time of either Qt or iOS apps.
Outcome

• 100,000+ downloads
• Featured in all three app stores
• Lots of great reviews
• Very happy client
• Winning awards
But that’s not all…
Open Sourcing Kirin


   • Apache Licence
   • Release early, release often
   • Looking for feedback
   • Looking for feature requests

@jhugman
Current Status

   • iOS and Android on Github
   • Coming…
    • Android Fragments
    • Windows Phone 7
    • Qt (already implemented)
@jhugman
Thanks
@jhugman
github.com/kirinjs
Follow @KirinJS
http://github.com/kirinjs




                   @jhugman

More Related Content

What's hot

Phonegap for Engineers
Phonegap for EngineersPhonegap for Engineers
Phonegap for EngineersBrian LeRoux
 
Workshop on Hybrid App Development with Ionic Framework
Workshop on Hybrid App Development with Ionic FrameworkWorkshop on Hybrid App Development with Ionic Framework
Workshop on Hybrid App Development with Ionic FrameworkAayush Shrestha
 
Web fundamental 4 developers
Web fundamental 4 developersWeb fundamental 4 developers
Web fundamental 4 developersIdo Green
 
Creating books app with react native
Creating books app with react nativeCreating books app with react native
Creating books app with react nativeAli Sa'o
 
Titanium - A js based platform for building mobile apps
Titanium - A js based platform for building mobile appsTitanium - A js based platform for building mobile apps
Titanium - A js based platform for building mobile appscallmejoe
 
Appium: Prime Cuts
Appium: Prime CutsAppium: Prime Cuts
Appium: Prime CutsSauce Labs
 
Android development war stories
Android development war storiesAndroid development war stories
Android development war storiesLope Emano
 
PhoneGap in a Day
PhoneGap in a DayPhoneGap in a Day
PhoneGap in a DayTroy Miles
 
OSCON Titanium Tutorial
OSCON Titanium TutorialOSCON Titanium Tutorial
OSCON Titanium TutorialKevin Whinnery
 
Hybrid Mobile Development
Hybrid Mobile DevelopmentHybrid Mobile Development
Hybrid Mobile DevelopmentShai Raiten
 
Native vs hybrid approach Mobile App Development
Native vs hybrid approach Mobile App DevelopmentNative vs hybrid approach Mobile App Development
Native vs hybrid approach Mobile App DevelopmentSenthil Kumar Kaliathan
 
Ember Conf 2016: Building Mobile Apps with Ember
Ember Conf 2016: Building Mobile Apps with EmberEmber Conf 2016: Building Mobile Apps with Ember
Ember Conf 2016: Building Mobile Apps with EmberAlex Blom
 
React Native for ReactJS Devs
React Native for ReactJS DevsReact Native for ReactJS Devs
React Native for ReactJS DevsBarak Cohen
 
Introduction to React Native & Rendering Charts / Graphs
Introduction to React Native & Rendering Charts / GraphsIntroduction to React Native & Rendering Charts / Graphs
Introduction to React Native & Rendering Charts / GraphsRahat Khanna a.k.a mAppMechanic
 
Write Better JavaScript
Write Better JavaScriptWrite Better JavaScript
Write Better JavaScriptKevin Whinnery
 
Utilizing HTML5 APIs
Utilizing HTML5 APIsUtilizing HTML5 APIs
Utilizing HTML5 APIsIdo Green
 
Modern Web Applications Utilizing HTML5 APIs
Modern Web Applications Utilizing HTML5 APIsModern Web Applications Utilizing HTML5 APIs
Modern Web Applications Utilizing HTML5 APIsIdo Green
 

What's hot (20)

Phonegap for Engineers
Phonegap for EngineersPhonegap for Engineers
Phonegap for Engineers
 
Workshop on Hybrid App Development with Ionic Framework
Workshop on Hybrid App Development with Ionic FrameworkWorkshop on Hybrid App Development with Ionic Framework
Workshop on Hybrid App Development with Ionic Framework
 
Web fundamental 4 developers
Web fundamental 4 developersWeb fundamental 4 developers
Web fundamental 4 developers
 
Creating books app with react native
Creating books app with react nativeCreating books app with react native
Creating books app with react native
 
Titanium - A js based platform for building mobile apps
Titanium - A js based platform for building mobile appsTitanium - A js based platform for building mobile apps
Titanium - A js based platform for building mobile apps
 
Appium: Prime Cuts
Appium: Prime CutsAppium: Prime Cuts
Appium: Prime Cuts
 
Android development war stories
Android development war storiesAndroid development war stories
Android development war stories
 
PhoneGap in a Day
PhoneGap in a DayPhoneGap in a Day
PhoneGap in a Day
 
OSCON Titanium Tutorial
OSCON Titanium TutorialOSCON Titanium Tutorial
OSCON Titanium Tutorial
 
Hybrid Mobile Development
Hybrid Mobile DevelopmentHybrid Mobile Development
Hybrid Mobile Development
 
Native vs hybrid approach Mobile App Development
Native vs hybrid approach Mobile App DevelopmentNative vs hybrid approach Mobile App Development
Native vs hybrid approach Mobile App Development
 
Ember Conf 2016: Building Mobile Apps with Ember
Ember Conf 2016: Building Mobile Apps with EmberEmber Conf 2016: Building Mobile Apps with Ember
Ember Conf 2016: Building Mobile Apps with Ember
 
DjangoSki
DjangoSkiDjangoSki
DjangoSki
 
React Native for ReactJS Devs
React Native for ReactJS DevsReact Native for ReactJS Devs
React Native for ReactJS Devs
 
Introduction to React Native & Rendering Charts / Graphs
Introduction to React Native & Rendering Charts / GraphsIntroduction to React Native & Rendering Charts / Graphs
Introduction to React Native & Rendering Charts / Graphs
 
Write Better JavaScript
Write Better JavaScriptWrite Better JavaScript
Write Better JavaScript
 
Introduction to Mobile Development
Introduction to Mobile DevelopmentIntroduction to Mobile Development
Introduction to Mobile Development
 
Utilizing HTML5 APIs
Utilizing HTML5 APIsUtilizing HTML5 APIs
Utilizing HTML5 APIs
 
Modern Web Applications Utilizing HTML5 APIs
Modern Web Applications Utilizing HTML5 APIsModern Web Applications Utilizing HTML5 APIs
Modern Web Applications Utilizing HTML5 APIs
 
Future of Mobile
Future of MobileFuture of Mobile
Future of Mobile
 

Viewers also liked

Environmental science.traceypercifield.unit1ip
Environmental science.traceypercifield.unit1ipEnvironmental science.traceypercifield.unit1ip
Environmental science.traceypercifield.unit1ipTpeisi Nesby
 
BioMedic hair loss treatment results
BioMedic hair loss treatment resultsBioMedic hair loss treatment results
BioMedic hair loss treatment resultsBioMedic
 
Til.tracey percifield.unit1ip
Til.tracey percifield.unit1ipTil.tracey percifield.unit1ip
Til.tracey percifield.unit1ipTpeisi Nesby
 
MASINT and Global War on Terror
MASINT and Global War on TerrorMASINT and Global War on Terror
MASINT and Global War on TerrorTpeisi Nesby
 
One year Marketing plan for Glite
One year Marketing plan for GliteOne year Marketing plan for Glite
One year Marketing plan for GlitePrasad Venky
 
How to use e mail for beginners
How to use e mail for beginnersHow to use e mail for beginners
How to use e mail for beginnersMohamed Ismail
 

Viewers also liked (7)

Environmental science.traceypercifield.unit1ip
Environmental science.traceypercifield.unit1ipEnvironmental science.traceypercifield.unit1ip
Environmental science.traceypercifield.unit1ip
 
Risk Adverse
Risk AdverseRisk Adverse
Risk Adverse
 
BioMedic hair loss treatment results
BioMedic hair loss treatment resultsBioMedic hair loss treatment results
BioMedic hair loss treatment results
 
Til.tracey percifield.unit1ip
Til.tracey percifield.unit1ipTil.tracey percifield.unit1ip
Til.tracey percifield.unit1ip
 
MASINT and Global War on Terror
MASINT and Global War on TerrorMASINT and Global War on Terror
MASINT and Global War on Terror
 
One year Marketing plan for Glite
One year Marketing plan for GliteOne year Marketing plan for Glite
One year Marketing plan for Glite
 
How to use e mail for beginners
How to use e mail for beginnersHow to use e mail for beginners
How to use e mail for beginners
 

Similar to Make Cross Platform Apps that Suck Less

Web and Native in 2012
Web and Native in 2012Web and Native in 2012
Web and Native in 2012jhugman
 
Kirin - Making Single Page Web Apps with a Native UI
Kirin - Making Single Page Web Apps with a Native UIKirin - Making Single Page Web Apps with a Native UI
Kirin - Making Single Page Web Apps with a Native UIjhugman
 
Chrome Dev Summit Summary 2013 part 1 - what’s hot ?
Chrome Dev Summit Summary 2013 part 1 - what’s hot ?Chrome Dev Summit Summary 2013 part 1 - what’s hot ?
Chrome Dev Summit Summary 2013 part 1 - what’s hot ?Sacha Leprêtre
 
2011 code camp
2011 code camp2011 code camp
2011 code campimranq2
 
Xamarin COE by Mukteswar Patnaik
Xamarin COE by Mukteswar PatnaikXamarin COE by Mukteswar Patnaik
Xamarin COE by Mukteswar PatnaikMukteswar Patnaik
 
Mobile ECM with JavaScript - JSE 2011
Mobile ECM with JavaScript - JSE 2011Mobile ECM with JavaScript - JSE 2011
Mobile ECM with JavaScript - JSE 2011Nuxeo
 
Programming for the Internet of Things
Programming for the Internet of ThingsProgramming for the Internet of Things
Programming for the Internet of ThingsKinoma
 
Hardware Prototyping for Software Developers
Hardware Prototyping for Software DevelopersHardware Prototyping for Software Developers
Hardware Prototyping for Software DevelopersKinoma
 
Mobile tech strategies
Mobile tech strategiesMobile tech strategies
Mobile tech strategiesIan Morrison
 
Mobile Tech Strategies - 4 Sept 2016 V6
Mobile Tech Strategies - 4 Sept 2016 V6Mobile Tech Strategies - 4 Sept 2016 V6
Mobile Tech Strategies - 4 Sept 2016 V6Ian Morrison
 
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web SimulatorOSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web SimulatorGail Frederick
 
Introduction to hybrid application development
Introduction to hybrid application developmentIntroduction to hybrid application development
Introduction to hybrid application developmentKunjan Thakkar
 
Forge - DevCon 2016: Implementing Rich Applications in the Browser
Forge - DevCon 2016: Implementing Rich Applications in the BrowserForge - DevCon 2016: Implementing Rich Applications in the Browser
Forge - DevCon 2016: Implementing Rich Applications in the BrowserAutodesk
 
Evolving Mobile Architectures
Evolving Mobile ArchitecturesEvolving Mobile Architectures
Evolving Mobile Architecturessgleadow
 
Hybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic FrameworkHybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic FrameworkCihad Horuzoğlu
 
What is cool with Domino V10, Proton and Node.JS, and why would I use it in ...
What is cool with Domino V10, Proton and Node.JS, and why would I use it in ...What is cool with Domino V10, Proton and Node.JS, and why would I use it in ...
What is cool with Domino V10, Proton and Node.JS, and why would I use it in ...Heiko Voigt
 
Griffon for the Enterprise
Griffon for the EnterpriseGriffon for the Enterprise
Griffon for the EnterpriseJames Williams
 
Cross platform mobile approaches
Cross platform mobile approachesCross platform mobile approaches
Cross platform mobile approachesPhuong Hoang Vu
 

Similar to Make Cross Platform Apps that Suck Less (20)

Web and Native in 2012
Web and Native in 2012Web and Native in 2012
Web and Native in 2012
 
Kirin - Making Single Page Web Apps with a Native UI
Kirin - Making Single Page Web Apps with a Native UIKirin - Making Single Page Web Apps with a Native UI
Kirin - Making Single Page Web Apps with a Native UI
 
Chrome Dev Summit Summary 2013 part 1 - what’s hot ?
Chrome Dev Summit Summary 2013 part 1 - what’s hot ?Chrome Dev Summit Summary 2013 part 1 - what’s hot ?
Chrome Dev Summit Summary 2013 part 1 - what’s hot ?
 
Mobile native-hacks
Mobile native-hacksMobile native-hacks
Mobile native-hacks
 
2011 code camp
2011 code camp2011 code camp
2011 code camp
 
Xamarin COE by Mukteswar Patnaik
Xamarin COE by Mukteswar PatnaikXamarin COE by Mukteswar Patnaik
Xamarin COE by Mukteswar Patnaik
 
Mobile ECM with JavaScript - JSE 2011
Mobile ECM with JavaScript - JSE 2011Mobile ECM with JavaScript - JSE 2011
Mobile ECM with JavaScript - JSE 2011
 
Programming for the Internet of Things
Programming for the Internet of ThingsProgramming for the Internet of Things
Programming for the Internet of Things
 
Hardware Prototyping for Software Developers
Hardware Prototyping for Software DevelopersHardware Prototyping for Software Developers
Hardware Prototyping for Software Developers
 
Mobile tech strategies
Mobile tech strategiesMobile tech strategies
Mobile tech strategies
 
Mobile Tech Strategies - 4 Sept 2016 V6
Mobile Tech Strategies - 4 Sept 2016 V6Mobile Tech Strategies - 4 Sept 2016 V6
Mobile Tech Strategies - 4 Sept 2016 V6
 
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web SimulatorOSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
 
Introduction to hybrid application development
Introduction to hybrid application developmentIntroduction to hybrid application development
Introduction to hybrid application development
 
Forge - DevCon 2016: Implementing Rich Applications in the Browser
Forge - DevCon 2016: Implementing Rich Applications in the BrowserForge - DevCon 2016: Implementing Rich Applications in the Browser
Forge - DevCon 2016: Implementing Rich Applications in the Browser
 
Evolving Mobile Architectures
Evolving Mobile ArchitecturesEvolving Mobile Architectures
Evolving Mobile Architectures
 
Hybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic FrameworkHybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic Framework
 
What is cool with Domino V10, Proton and Node.JS, and why would I use it in ...
What is cool with Domino V10, Proton and Node.JS, and why would I use it in ...What is cool with Domino V10, Proton and Node.JS, and why would I use it in ...
What is cool with Domino V10, Proton and Node.JS, and why would I use it in ...
 
Griffon for the Enterprise
Griffon for the EnterpriseGriffon for the Enterprise
Griffon for the Enterprise
 
Cross platform mobile approaches
Cross platform mobile approachesCross platform mobile approaches
Cross platform mobile approaches
 
Mobile for the rest of us
Mobile for the rest of usMobile for the rest of us
Mobile for the rest of us
 

Recently uploaded

Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructureitnewsafrica
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 
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
 
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
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationKnoldus Inc.
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 

Recently uploaded (20)

Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 
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
 
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
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog Presentation
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 

Make Cross Platform Apps that Suck Less

  • 1. Making Cross Platform Apps Suck Less James Hugman
  • 2. I am… • an engineer at Future Platforms • We make apps for clients • We’re technology agnostic. i.e. Web, Native, Whatever. @jhugman
  • 3. Story Arc • A public service announcement • A big client, a big job • A painful flashback • Experiments yield a surprising result • The future looks bright. @jhugman
  • 4. Web v Native is a False Dilemma Web Native
  • 6. Reality? ft.com LinkedIn Guardian Angry PhoneGap Titanium Appstore Birds
  • 7. Reality? native Guardian Profanisaurus Facebook UI Gmail LinkedIn Appstore ft.com Plugins web PhoneGap web Logic native
  • 8. Glastonbury 2011 • “…we want users to love us…” • iPhone, Android, Nokia • Hostile terrain
  • 9. Consequences • UI should feel native and platform specific • Assume offline @jhugman
  • 10. Technology Options • HTML app • Something else • Three native apps @jhugman
  • 14. Executive Summary Bu y o ne g et n FREE! ! ! @jhugman
  • 15. Fundamental problems • Native is closest to native • Different platform metaphors. @jhugman
  • 16. Webkit Fragmentation • Webkit is everywhere • “No two implementations are alike” — @ppk • Different platform half-lives @jhugman
  • 17. Lots of work • Developer time getting it just right. • CPU is spent doing UI, not your app. @jhugman
  • 18. Developer happiness • Endless browser bugs • Less time building features • #ifdef code @jhugman
  • 19. Addendum • Clients love to pay for web-technologies • but hate the quality @jhugman
  • 21. What’s left native ? Too expensive UI Not there yet web web Logic native
  • 22. App Architectures Presentation Layer Application Logic Layer Platform Services Layer
  • 23. App Architectures Presentation Layer (Sencha, JS, SASS, CSS, HTML) Application Logic Layer (Javascript, requirejs, Backbone, SQL, HTTP) Platform Services Layer Webview Native PhoneGap plugins PhoneGap App
  • 24. App Architectures Presentation Layer (written in JS, rendered natively) Application Logic Layer (Javascript, SQL, HTTP) Platform Services Layer (Native) “Something Else” app
  • 26. The Pitch • Write UI in Javascript • Native widgets are generated at runtime • iOS & Android @jhugman
  • 27. JS/Native Bridge Performance is I/O Bound Native Button To Native setText() setTextColor() setBackgroundColor() From Javascript onTouchDown onTouchUp onClick
  • 28. No UI Tooling • No development tooling • No runtime tools @jhugman
  • 29. Other significant problems • Porting by framework’s best effort • Difficult to take advantage of unsupported API @jhugman
  • 30. DOM-less Game Libraries Canvas APIs implemented with OpenGL
  • 31. Examples • Game Closure • Impact for iOS • appMobi’s DirectCanvas @jhugman
  • 32. Observations • Game UI is not Platform UI • also see: Web UI is not Platform UI @jhugman
  • 33. UI Performance is I/O Bound • Each bundles its own Javascript engine @jhugman
  • 35. Requirements • Maximise code re-use • Native, platform appropriate UIs • Happy developers & designers • Minimal runtime to download @jhugman
  • 36. Idealised Architecture Presentation Layer (written in Native) Application Logic Layer (Javascript, SQL, HTTP) Platform Services Layer (Native) Kirin App
  • 37. Consequences • Platform appropriate UX • Better tooling • Fewer compromises @jhugman
  • 38. Fewer JS/Native function calls Activity configureSpecificButtonWithData_(data) To Native configureSpecificButtonWithData_(data) From Javascript onSpecificButtonClick
  • 39. Consequences • Can use existing JS Engine in an invisible WebView @jhugman
  • 40. Priorities • Great performance • Easy to grow • Modular • Easy-to-use Foreign Function Interface @jhugman
  • 41. Super easy FFI Native to Javascript: // In MyScreenActivity.java mScreenProxy.onButtonClick(); // In MyScreenUIViewController.m [KIRIN fireEventIntoJS: @”native2jsScreenProxy.onButtonClick()”]; // In MyScreen.js exports.onButtonClick = function () { // do some logic. }
  • 42. Super easy FFI Javascript to Native: // In MyScreen.js kirin.js2nativeScreenProxy.setText_andSize_(“Hello world”, 15); // In MyScreenActivity.java public void setText_andSize_(String message, int size) { // do the thing } // In MyScreenUIViewController.m -(void) setText:(NSString*) message andSize:(NSInteger)size { // do the thing }
  • 43. Inspired by node.js • CommonJS Modules • Transparent threading @jhugman
  • 44. Hello World Would you like to see a demo?
  • 45. Back to Glastonbury • What we shipped: • iOS, native only • Qt in JS/QML, with Kirin • Android with Kirin
  • 46. Outcome • Two apps with Kirin (Android & Qt) • Android app was built in half (50%) the time of either Qt or iOS apps.
  • 47. Outcome • 100,000+ downloads • Featured in all three app stores • Lots of great reviews • Very happy client • Winning awards
  • 49. Open Sourcing Kirin • Apache Licence • Release early, release often • Looking for feedback • Looking for feature requests @jhugman
  • 50. Current Status • iOS and Android on Github • Coming… • Android Fragments • Windows Phone 7 • Qt (already implemented) @jhugman

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. Even this is a simplification\n
  7. \n
  8. http://www.flickr.com/photos/fussyonion/5880808440\n\nBy definition: great utility, great UX \n12 Square Kilometers\n140 thousand people\n65 stages\n1800 acts\n5 days\n
  9. \n
  10. 3 Native apps ruled out for cost reasons.\n
  11. As is the year of the linux desktop\n
  12. Reproduced with permission\nhttp://www.flickr.com/photos/twhume/4483467749/sizes/l/in/photostream/\n
  13. http://www.flickr.com/photos/calliope/4220716666/sizes/o/in/photostream/\n\nThe “HTML5” marketing message is getting through. “The Web is already cross platform”\n
  14. Nearly right may not be good enough.\nUncanny Valley.\n
  15. There is no release cycle, or version numbers. OEMs take a snapshot, then fix the bugs.\n\nWebKit is not the solution to every problem.\nWe focus on web content, not complete solutions to every imaginable technology need.\n\n
  16. Joe Hewitt’s scrollability\nDavid Kaneda boasting that they spent three weeks getting the scrolling right\nFT.com re-implemented it anyway.\n
  17. \n
  18. http://www.flickr.com/photos/diversey/4246410590/sizes/o/in/photostream/\n\nBut also great for prototyping.\nNot commissioned with the users in mind.\n
  19. \n
  20. \n
  21. \nPlatform Services layer is not application specific.\n
  22. A Familiar web stack.\n
  23. A Familiar web stack.\n
  24. \n
  25. * provides Javascript wrappers around native widgets\n * minimal differences in APIs between platforms\n * good device APIs.\n
  26. ListViews / UITableViewControllers\nMemory Leaks\nDifferent to get right. \n
  27. * Interface Builder, or layout editors.\n* No resource selection framework, no 9-patches/slices. No auto selecting retina images\n* Layout is all calculated by the developer using widths and heights.\n\nNot good enough, but great for internal enterprise apps (like Swing)\n
  28. The design of the app is compromised, “an app you won’t be proud of”.\n\nYou end up writing lots of native code anyway\n\n(Like any cross platform UI solution) there is always a lead handset. Almost always this is iOS.\n\nSometimes this “best effort” isn’t always appreciated by Android users.\nUnsupported API e.g. quite a lot of the CoreAnimation, because it is difficult to replicate on Android.\n\n\n
  29. Quick on this section.\n
  30. Impact is a proprietary game engine.\nExperiment was successful, but abandoned, and now uses the appMobi Direct Canvas.\n\n
  31. Getting around the uncanny valley problem.\nThe web did a very similar thing when browser meant desktop.\nCurrent winds seem to be shifting in this direction. (i.e. html apps not being native)\n
  32. Enormous runtime overhead. Hello World on Titanium 5+ megabytes. Kitchen Sink is 12M\n10% of Android owner will balk at 0.5 meg.\n\nFUNDAMENTAL PROBLEM\n
  33. \n
  34. \n
  35. The presentation layer is written per app, per platform.\nThe application logic is written once per app.\n\nThe native presentation layer talks to JS logic layer only when necessary.\n
  36. \n
  37. Fewer, fatter calls through the FFI\nThis is a deliberately trivial example. setListData would be a better example.\nRaw events are processed natively\nApp Specific events\n
  38. \n
  39. \n
  40. \n
  41. \n
  42. Modular javascript good for memory, performance and testing.\nNative Screen Lifecycle events are sent to the screen module.\nThe JS assembly is packaged by a nice build script.\n
  43. \n
  44. http://www.flickr.com/photos/fussyonion/5880610940/sizes/o/in/photostream/\nKirin was tested on the iOS, and performed well.\nDeveloper weren’t comfortable with JS.\n\n
  45. http://www.flickr.com/photos/rightee/4359372/sizes/l/in/photostream/\nFor glastonbury, with a few large custom components, \nBuy 1, get next ones half price.\n\nWe only have data for Glastonbury 2011.\n
  46. http://www.flickr.com/photos/twak/5882259852/sizes/o/in/photostream/\n\n
  47. \n
  48. Version 0.5\nDocs and demos are not upto scratch\nNot enough services for iOS.\nAlso looking for contrib.\nVery early: little or no documentation other than the source code, and a demo app. \nExpect this to change.\n
  49. Qt may come later (depending on demand).\nAndroid much more mature, more services too.\nWindows Phone 7 will almost certainly be targeted.\n\n\n\n
  50. \n
  51. \n