HTML5 vs Native apps 

second round


Last update: April, 2014

marc rovira vall

36 years old, from Vic (Catalonia, Spain)

Multimedia Engineer

PM | Agile Lead | Mobile App Dev @ Medialab Barcelona



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
HTML 5.2

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:

html5 - minimum boilerplate

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

    <!-- content of the document -->

html5 - browser support

Just check it out yourself:

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) 
            QML, HTML5
            QML, Java (Android), WebView, HTML5

            mobile programming types


            /                     \
            Web (HTML5)    Hybrid

            : )

            native apps

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

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

            NATIVE apps


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

            NATIVE apps


            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
                               \                                 /

            web apps


            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)

            web apps


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

            Side by Side, iOS vs HTML5

              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


                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


                Decreases performance
                Hard to Publish
                Creates Friction

                cross-platform mobile frameworks

                Intel App Framework
                jQuery Mobile
                Kendo UI
                Sencha Touch 2
                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


                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.


                Project description

                " 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. 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:

                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





                ANIMATION ENGINE



                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.

                Black box
                Native only
                2007 technology
                Web + [UI]WebView
                2014 technology


                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


                AND MUCH MORE...

                Integrates with third-party libraries

                Cordova-based wrapper to be released soon

                Low battery life impact

       can do about 80% of what native can do
                Native can do about 50% of what can do

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


                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)


                  html5 vs. native apps

                  second round


                  use case

                  v2.0 > +

                  BuonJobs v1.0 (beta):

                  Front-End Back-End
                  JS Libs
                  PG Build plugins
                  PG Build wrapper
                  Django framework

                  so much from me...

                  The End

                  :|      or     : )       or


                  HTML5 vs Native: Second Round

                  By Marc Rovira Vall

                  HTML5 vs Native: Second Round

                  • 1,463
                  Loading comments...

                  More from Marc Rovira Vall