Crossmos Hybrid Mobile Web-apps & Sencha Platform meeting... Hybrid vs Native vs Web Native apps Hybrid

  • View
    0

  • Download
    0

Embed Size (px)

Text of Crossmos Hybrid Mobile Web-apps & Sencha Platform meeting... Hybrid vs Native vs Web Native apps...

  • Crossmos Hybrid Mobile Web-apps & Sencha Platform Ruben Smeets Kris Aerts 17/06/2015

  • Agenda •  Hybrid App Technology

    o  Hybrid vs Native vs Web o  Patterns o  Web portion architecture o  Common pitfalls and best practices

    •  Choosing a hybrid app approach •  Latest developments •  Sencha platform hands-on experience

  • Hybrid vs Native vs Web Native apps Hybrid apps Web apps

    Ease of discovery Through native app stores Search on referrals (Facebook, twitter, etc.)

    Reach Fragmented across multiple platorms Works on almost all devices

    Depth of experience

    Full acces to platform resources

    Access to native API at the expense of UI

    Limited by browser sandbox

    Customer ownership & terms

    Apple Appstore enforce onerous terms

    Complete ownership of customer

    Engagement and recurring use

    Notifications and home screen icon

    No notifications, difficult to get user to save the link

    Monetisation potential

    High through Appstores

    No accepted method of payment (Chrome web- store)

    Ease of cross- platform development

    Replication developing for multiple platforms

    Significant fragmentation for advanced apps

    Low Ranking

    High Ranking

    VisionMobile Cross-Platform Developer Tools 2012

  • Hybrid vs Native vs Web Continued

    Native apps Hybrid apps Web apps

    Upgradebility & updates

    Through native app stores **

    Web content updates require no approval

    No approval needed

    Debugging & testing

    Full support by native development tools

    Browser debugging tools automated testing tools

    Vendor lock-in (framework)

    No code sharing between platforms

    Limited to no code sharing between frameworks

    Multi-platform build support

    Local build for each platform seperately

    Cloud-based build tools offered by frameworks

    No cross-platform building required

    Low Ranking

    High Ranking

    **Enterprise app stores require no update approval. They set their own terms.

  • Hybrid Mobile App Patterns

    Native vs Hybrid vs Web – Kinvey & MOOVWEB ebook

    Pure pattern

    Blended pattern

    Mullet pattern

    Fallback pattern

    Properties •  Single webview for

    entire screen

    •  Content & navigation done in HTML5

    •  Thin native wrapper exposing native APIs

    •  Use native components for the main navigation UI (e.g. Tab bar)

    •  Use multiple webviews with content

    •  Native transition animations

    •  Fully native for early parts of a user flow within the app (product browsing)

    •  Web based for later parts like checkout

    •  Mostly native app

    •  Uses hybrid webviews for little used or frequently changing content

    Example Apps •  Lokale Politie

    Antwerpen app •  Apples’s App store app •  Google’s Gmail app •  Autosalon 2015 Brussel

    •  Walmart apps •  Belk apps

    •  Facebook app

    + +

  • Hybrid Mobile App Patterns Pure Pattern

    Native, Web or Hybrid Mobile App Development – IBM Worklight webinar

    Hybrid App

    Mobile Operating System

    O S

    -S pe

    ci fic

    A P

    Is

    Wide Range of Services

    Web Portion of App

    HTML, CSS, JS

    Rendering Engine (webview)

    HTML API

    Calls

    API

    Native Portion Of App

    API Calls

    API Calls

    Graphics

    Audio

    Activation

    Audio

    Touch Events

    Image,Video

    Location

    Data

    Calls, Data

    Touch Screen, Keyboard

    Wifi

    GSM Network

    Microphone

    Speaker

    Camera

    Vibration

    GPS

    Storage Data

    Phonegap Bridge

    P ho

    ne ga

    p JS

    A P

    I

  • Hybrid Mobile App Patterns Blended Pattern

    Hybrid App

    API

    API

    Mobile Operating System

    O S

    -S pe

    ci fic

    A P

    Is

    Wide Range of Services

    Web Portion of App

    HTML, CSS, JS

    Rendering Engine (webview)

    HTML API

    Calls

    API

    Native App Portion

    API Calls

    API Calls

    Graphics

    Audio

    Activation

    Audio

    Touch Events

    Image,Video

    Location

    Data

    Calls, Data

    Data

    Web Portion of App

    HTML, CSS, JS

    Rendering Engine (webview)

    HTML API

    Calls

    Web Portion of App

    HTML, CSS, JS

    Rendering Engine (webview)

    HTML API

    Calls

    P ho

    ne ga

    p JS

    A P

    I

    Native Header

    API Native Tab Bar and Navigation

  • Hybrid Mobile App Patterns Mullet and Fallback Pattern

    •  Similar development process o  Mostly native development

    •  Webview portion not necessarily implemented using custom wrapper (e.g. Phonegap)

    •  Difference between two patterns is size and location of web portion o  Mullet: full screen webview o  Fallback: portion of screen webview

    Webview Container

    Web code

    Checkout Products 1

    Tab Bar Tab Bar

    BUY Native

    UI

    2

    Products

    Tab Bar

    Native UI

    Native UI

    Webview Container

    Web code

    Mullet

    Fallback

  • Hybrid Mobile App Patterns Examples

    Pure Pattern (Single Page)

    Blended Pattern (Multi Page)

    Fallback Pattern Mullet Pattern

    Facebook Walmart Apple App Store Politie Antwerpen

  • Agenda •  Hybrid App Technology

    o  Hybrid vs Native vs Web o  Patterns o  Web portion architecture o  Common pitfalls and best practices

    •  Choosing a hybrid app approach •  Latest developments •  Sencha platform hands-on experience

  • Hybrid App

    Hybrid App Web Portion Architecture •  CSS UI frameworks

    o  Implement web-app UI in CSS/HTML o  E.g.: Bootstrap, Ionic

    •  Javascript UI frameworks o  Implement web-app UI in Javascript o  E.g.: jQuery, Enyo

    •  Architecture frameworks o  Provide modularity with MV*

    architecture o  E.g.: AngularJS, BackboneJS

    •  Combined frameworks o  Combine CSS UI or Javascript UI with

    architecture framework o  E.g.: Sencha Touch, Kendo UI

    Web Portion of App

    CSS UI Framework

    HTML5 Hybrid tool

    Architecture Framework

    Javascript UI

    Framework

    Native Portion Of App

    Combined Framework

  • Hybrid App Web Portion Architecture HTML5 Hybrid Tool Topology

    •  HTML5 Hybrid tools o  Package web app in native wrapper

    using webviews o  Provide APIs for access to device

    features o  E.g.: Phonegap/Cordova

    •  Enterprise mobile platform HTML5 hybrid tools o  Custom native containers with

    enterprise features o  Standard container extends Phonegap/

    Cordova o  E.g.: IBM MobileFirst

    Hybrid App

    Web Portion of App

    CSS UI Framework

    HTML5 Hybrid tool

    Architecture Framework

    Javascript UI Framework

    Native Portion of App

    Combined Framework

    Webview (rendering

    engine) Custom JS API

    Phonegap JS API

    Phonegap Plugins

    www.appeariq.com

    Secure Storage Context

    App Mngmt.

    Communi- cations Authen-

    tication

    Push Notifications

  • Hybrid App Web Portion Architecture iOS – Windows Phone Webview Overview

    iOS version

    User Coverage

    Webview Browser engine

    Default Browser Application Browser

    Engine

    Earlier 2% 100% UIWebView (standard Javascript Interpreter) Safari

    (Nitro JIT engine) iOS7 16% 98%

    iOS8 82% 82% WKWebView (Nitro JIT engine)

    Active devices May 25th 2015 as measured by the App Store

    Windows Phone version

    User Coverage

    Webview Browser engine

    (WebViewClass)

    Default Browser Application Browser Engine

    7.x 7,5% 100% Same as default browser Internet Explorer Mobile version 9

    8.0 16% 92,5% Same as default browser Internet Explorer Mobile version 10

    8.1 74,2% 76,5% Same as default browser Internet Explorer Mobile version 11

    Windows 10 mobile 2,3% 2,3% Same as default browser Microsoft Edge (Chakra engine)

    Windows Phone device statistics for May, 2015 from AdDuplex

  • Hybrid App Web Portion Architecture Android Webview Overview

    Active devices January 7th 2015 as measured by the Google Play Store excluding devices under Android version 2.2

    Android version Codename/API User Coverage

    Webview Bro