HTML5 vs Native apps 

second round

 
By @cramrov
marcrvall@gmail.com

Last update: April, 2014

marc rovira vall


36 years old, from Vic (Catalonia, Spain)

Multimedia Engineer

PM | Agile Lead | Mobile App Dev @ Medialab Barcelona

agenda


HTML5

Developing Apps

First Round Winner




Second Round Winner

BuonJobs Use Case



what is html5?

Hyper Text Markup Language
An W3C/ WHATWG Standard
Previous version: HTML 4.01 (1999)

HTML5 is a family of technologies and specifications:
  • HTML: structure
  • CSS: styles
  • Javascript: interactivity 

Specially designed to:
  • Replace both HTML 4, XHTML, and the HTML DOM Level 2
  • Deliver rich content without the need for additional plugins
  • Be Cross-Platform

html5 - roadmap

 

2012 2013 2014 2015 2016
HTML 5.0 Candidate Rec Call for Review Recommendation

HTML 5.1 1st Working Draft
Last Call Candidate Rec
Recommendation
HTML 5.2


1st
Working Draft

HTML5 - New Features


  • The <canvas> element for 2D drawing
  • The <video> and <audio> elements for media playback
  • Support for local storage
  • New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>
  • New form controls, like calendar, date, time, email, url, search

  • CSS3 Transforms and Opacity properties are hardware accelerated

The Web platform: http://platform.html5.org/

html5 - minimum boilerplate


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
  </head>

  <body>
    <!-- content of the document -->
  </body>
</html>

html5 - browser support


Just check it out yourself:
http://caniuse.com/
http://mobilehtml5.org/

html5 - What people say

“I think the biggest mistake that we made, as a company, is betting too much on HTML5 as opposed to native… Because it just wasn't there…”  (Mark Zuckerberg, September 2012)
“Hybrid mobile apps are the future of app development” (Nick Heath in CIO Insight, February 2013) 
“Mobile apps will soon be dead.” (Brian Kennish, former Google engineer, May 2011)
“Native Apps are dead, long live Native apps!” 
(Dan Yoder, CTO at Border Stylo in Slashdot, June 2011)
“All the problems [of mobile web] can be solved if Apple, Google, Microsoft and the rest will just stop shutting out HTML5″ (Dan Rowinski at Mozilla, November 2012)
“HTML 5 is the way almost all applications will be built, including for phones.” 
(Eric Schmidt, February 2011)

examples among big brands and media


    Facebook rebuilt their apps from scratch as native apps.

      Linkedin had a HTML5 hybrid approach and recently went native for its mobile apps.

        Twitter had fully native apps from the start.

          Instagram is a native app that wouldn't work otherwise.

            ESPN builds all their apps with native because they consider it a requirement for great sport apps.

            developing apps for mobile devices


            mobile oses


            Current Mobile OSes
            		Programming Languages
            Android (Samsung, Sony, HTC, LG,...)
            iOS (Apple)
            Blackberry 10 (BB)
            Windows Phone 7, 8 (Microsoft, Nokia) 
            Java, Adobe AIR, WebView
            Objective-C, Adobe AIR, UIWebView
            C/C++/Qt, Adobe AIR, Java (Android), HTML5
            C#, Visual Basic, WebBrowser

            Mobile OSes coming this year (2014)               
                         		Programming Languages 
            FirefoxOS (Alcatel, LG, ZTE, Huawei)
            Ubuntu mobile OS (bq, Meizu)
            TizenOS (Linux, Samsung, Intel, Huawei...)
            SailfishOS (Jolla) 
            HTML5
            QML, HTML5
            HTML5
            QML, Java (Android), WebView, HTML5

            mobile programming types

            Native  
            :|


            Nonnative
            /                     \
            Web (HTML5)    Hybrid

            : )

            native apps


            Are specific to a given mobile platform using the development tools and language that the respective platform supports.

            iOS
                         		Xcode and Objective-C
            Android
            		  Eclipse/Android Studio and Java for Android
            Windows Phone
            		 Visual Studio .NET and C#

            NATIVE apps


            benefit


            Best Performance
            Work in Offline mode
            Access to the latest APIs, Releases on that Platform
            IDEs, Debugging Tools, Emulators
            App Stores

            NATIVE apps


            Disadvantages


            Slow, Hard to Develop
            Hard to Publish
            Creates Friction

            web/html5 apps

            Use standard web technologies—typically HTML5, JavaScript and CSS . This write-once-run-anywhere approach to mobile development creates cross-platform mobile applications that work on multiple devices (mostly run on browsers ).

            Web Apps vs. Web Sites
            /                                            \
            Based on User Interaction (SPAs)                          Based on Content
                               \                                 /
             RWD

            web apps


            benefit

            For all platforms simultaneously 
            Speed of Development
            Very Good UI Frameworks, Tools and Libraries
            Same Appearance on all Platforms
            Only need 1 team, who can also do desktop site
            10's of millions of web developers, easy to hire
            Perfect for rapid prototyping
            Easy Distribution (web server)
            Frictionless

            web apps


            disadvantages


            Performance
            Native "uncanny valley"
            Mobile browser limitations/differences
            Limited Access to Native APIs
            No App Stores

            Side by Side, iOS vs HTML5


            iOS
              1. Sign up for a developer account (fees)
              2. Buy a Mac
              3. Set up XCode
              4. Configure project/team settings
              5. Request development certificate
              6. Register Devices
              7. Develop, Test, Debug
              8. Request production certificate
              9. Upload to iTunes, submit for approval
              10. Wait...

                SIDE BY SIDE, IOS VS HTML5


                Web (HTML5)

                1. Develop, Test, Debug
                2. Push to host


                :)

                hybrid apps

                Make it possible to embed Web Apps inside a thin native container (WebView, UIWebView...), combining the best (and worst) elements of Native and Web apps.
                Apps are packaged natively,  so has access to native APIs.

                hybrid apps


                benefit


                Faster, Cheaper to Develop 
                Small amount of native coding
                Near to ‘Write Once, Run Anywhere’
                Deployment on App Stores
                Access the Native Layers
                Can work in Offline mode
                Access to 3rd Party Code

                hybrid apps


                disadvantages


                Decreases performance
                Hard to Publish
                Creates Friction

                cross-platform mobile frameworks




                Air
                Delphi
                Emy
                Enyo
                Intel App Framework
                Ionic
                jQTouch
                jQuery Mobile
                Kendo UI
                Lungo
                mgwt
                NeoMAD
                PhoneJS
                RhoMobile
                Sencha Touch 2
                Titanium
                Xamarin
                Xamarin MvvmCross

                CROSS-PLATFORM packaging







                app development - summary


                so which one to choose?


                Rule of thumb:

                Games or Photos, Videos related Apps 
                > Native Apps

                 Work in real time, which doesn't need access to 
                the native layer and is not performance stressed 
                > Web Apps

                Productivity Apps , Utility Apps or Enterprise Apps 
                > Hybrid Apps

                html5 vs. native apps




                first round



                Reasons:

                HTML5 failed as a way to develop high-quality consumer Apps
                People really, really want the web to win
                shows the first real glimmers of hope


                .The ultimate javascript development platform.




                https://angel.co/famo-us

                Project description



                "Famo.us is a powerful JavaScript framework designed to build rich, interactive web applications. It is the only framework that provides an open source 3D layout engine fully integrated with a 3D physics-based animation engine that can render to DOM, Canvas, or WebGL. Famo.us is currently in public beta."

                demo 1 - periodic table



                Open challenge to rebuild that in iOS.
                There have been no takers yet.

                demo 2 - facebook paper app rebuilt


                demo 3 - rise app rebuilt



                More demos and videos:
                Youtube
                Vimeo  

                paradigm shift



                layout engine


                animation engine


                gesture engine


                multi-view engine

                layout ENGINE


                NO install

                NO download

                NO plugin

                PURE JavaScript

                SMALL footprint (require.js)

                60 fps

                layout ENGINE


                3D

                DOM

                Canvas

                WebGL


                ANIMATION ENGINE


                3D

                Physics

                31 curve primitives (CSS3 has 4)

                Physics-based responsive design

                Integrated into layout engine

                Pure JavaScript

                ANIMATION ENGINE


                Browsers use CSS3 as their animation engine.


                Apple Famo.us
                2D
                Physics
                Black box
                De-coupled
                Native only
                2007 technology
                		 3D
                Physics
                Open
                Integrated
                Web + [UI]WebView
                2014 technology

                more...
                Open source under MPLv2 (Mozilla Public License v2)

                Cloud services will be PAID but OPTIONAL

                App complexity:
                >= native iOS
                > native Android

                Easier to learn than native development

                Efficient

                AND MUCH MORE...


                Integrates with third-party libraries

                Cordova-based wrapper to be released soon

                Low battery life impact

                Famo.us can do about 80% of what native can do
                Native can do about 50% of what Famo.us can do

                iOS 4.3+/Android JellyBean+/Kindle/FirefoxOS
                Tizen/WebOS (works but unsupported)
                (Microsoft devices coming soon)

                DISADVANTAGE


                Tiny issues in IE

                Difficult to tweak using Dev Tools

                Difficult to pass on knowledge of existing project

                Unsupported data visualization (coming soon)

                Still has bugs

                In public beta (starting April 9th, 2014)

                  resources


                  html5 vs. native apps




                  second round



                  buonjobs

                  use case







                  v2.0 > +

                  BuonJobs v1.0 (beta):

                  Front-End Back-End
                  JS Libs
                  Backbone.js
                  PG Build plugins
                  PG Build wrapper                  		 Django framework
                  PostgreSQL

                  so much from me...






                  The End


                  :|      or     : )       or


                  Questions?



                  marcrvall@gmail.com
                  Made with Slides.com