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 Low Ranking Hybrid vs Native vs Web High Ranking Native apps Hybrid apps Web apps Through native app Search on referrals Ease of discovery stores (Facebook, twitter, etc.) Fragmented across Reach Works on almost all devices multiple platorms Access to Depth of Full acces to platform native API at Limited by browser experience resources the expense of sandbox UI Customer Apple Appstore Complete ownership of ownership & terms enforce onerous terms customer Engagement and Notifications and home No notifications, difficult to recurring use screen icon get user to save the link No accepted method of Monetisation High through payment (Chrome web- potential Appstores store) Ease of cross- Replication developing Significant fragmentation platform for multiple platforms for advanced apps development VisionMobile Cross-Platform Developer Tools 2012 Hybrid vs Native vs Web Low Ranking Continued High Ranking Native apps Hybrid apps Web apps Web content Upgradebility & Through native app updates require No approval needed updates stores ** no approval Debugging & Full support by native Browser debugging tools testing development tools automated testing tools Vendor lock-in No code sharing Limited to no code sharing (framework) between platforms between frameworks Cloud-based Multi-platform Local build for each build tools No cross-platform building build support platform seperately offered by required frameworks **Enterprise app stores require no update approval. They set their own terms. Hybrid Mobile App Patterns Pure Blended Mullet Fallback pattern pattern pattern pattern + + Properties • Single webview for • Use native components • Fully native for early • Mostly native app entire screen for the main navigation parts of a user flow UI (e.g. Tab bar) within the app • Uses hybrid webviews • Content & navigation (product browsing) for little used or done in HTML5 • Use multiple webviews frequently changing with content • Web based for later content • Thin native wrapper parts like checkout exposing native APIs • Native transition animations Example Apps • Lokale Politie • Apples’s App store app • Walmart apps • Facebook app Antwerpen app • Google’s Gmail app • Belk apps • Autosalon 2015 Brussel Native vs Hybrid vs Web – Kinvey & MOOVWEB ebook Hybrid Mobile App Patterns Pure Pattern Hybrid App Mobile Operating Graphics Touch Screen, Keyboard System Touch Events Web Portion of App Data Wifi HTML, CSS, JS Calls, Data GSM Network HTML API Audio Microphone APIs JS API JS Calls Phonegap Wide Audio Speaker Range of Rendering Engine API Calls Services Image,Video Camera (webview) Specific Phonegap OS- Activation Vibration API Bridge Location GPS Native Portion API Calls Of App Data Storage Native, Web or Hybrid Mobile App Development – IBM Worklight webinar Hybrid Mobile App Patterns Blended Pattern Hybrid App Graphics Mobile Operating Native Header System Touch Events Web Portion Data ofWeb App Portion HTML, CSS, JS ofWeb App Portion Calls, Data of App HTML,HTML CSS, JS API Audio CallsHTML,HTML CSS, JS API APIs Audio Calls Rendering Engine HTML Wide API Range of (webview )API JS Calls Image,Video RenderingPhonegap Engine Services (webview ) Specific Activation RenderingAPI Engine API Calls OS- (webview ) Location Native APITab BarAPI and APINavigation Data Native App Portion API Calls Hybrid Mobile App Patterns Mullet and Fallback Pattern 1 2 Products Checkout • Similar development process Webview o Mostly native development Container Native UI BUY Web code • Webview portion not necessarily Tab Bar Tab Bar implemented using custom wrapper Mullet (e.g. Phonegap) Fallback Products • Difference between two patterns is Native size and location of web portion UI Webview o Mullet: full screen webview Container Web code o Fallback: portion of screen webview Native UI Tab Bar Hybrid Mobile App Patterns Examples Politie Antwerpen Apple App Store Walmart Facebook Pure Pattern Blended Pattern Mullet Pattern Fallback Pattern (Single Page) (Multi Page) 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 Web Portion Architecture Hybrid App • CSS UI frameworks o Implement web-app UI in CSS/HTML Web Portion of App o E.g.: Bootstrap, Ionic • Javascript UI frameworks Javascript CSS UI UI o Implement web-app UI in Javascript Framework Combined Framework o E.g.: jQuery, Enyo Framework Architecture Framework • Architecture frameworks o Provide modularity with MV* architecture HTML5 Hybrid tool o E.g.: AngularJS, BackboneJS • Combined frameworks Native Portion o Combine CSS UI or Javascript UI with Of App architecture framework o E.g.: Sencha Touch, Kendo UI Hybrid App Web Portion Architecture HTML5 Hybrid Tool Topology Hybrid App • HTML5 Hybrid tools Web Portion of App o Package web app in native wrapper CSS UI Javascript UI using webviews Framework Framework Combined Framework Architecture Framework o Provide APIs for access to device features HTML5 Hybrid tool o E.g.: Phonegap/Cordova Native Portion of App • Enterprise mobile platform HTML5 hybrid tools o Custom native containers with Communi- cations Authen- enterprise features Webview tication (rendering Custom Secure App o Standard container extends Phonegap/ Context engine) JS API Storage Mngmt. Cordova Push Phonegap Phonegap Notifications o E.g.: IBM MobileFirst JS API Plugins www.appeariq.com Hybrid App Web Portion Architecture iOS – Windows Phone Webview Overview Default Browser iOS User Webview Browser Application Browser version Coverage engine Engine Earlier 2% 100% UIWebView (standard Javascript Interpreter) iOS7 16% 98% Safari (Nitro JIT engine) WKWebView iOS8 82% 82% (Nitro JIT engine) Active devices May 25th 2015 as measured by the App Store Windows User Webview Browser Default Browser Application Phone Coverage engine Browser Engine version (WebViewClass) 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 2,3% 2,3% Same as default browser Microsoft Edge (Chakra engine) mobile Windows Phone device statistics for May, 2015 from AdDuplex Hybrid App Web Portion Architecture Android Webview Overview Default Browser Android Webview Browser Codename/API User Coverage Application version engine (Android.webkit.webview) Browser Engine 2.2 (Froyo, 8) 0,3% 100% 2.3.3 (Gingerbread, 10) 5,6% 99,7% 4.03 (ICSandwich, 15) 5,1% 94,1% Android Default Android Default (webkit) + carrier- (webkit) 4.1 (Jelly Bean, 16) 14,7% 89% specific replacements 4.2 (Jelly Bean, 17) 17,5% 74,3% 4.3 (Jelly Bean, 18) 5,2% 56,8% 4.4 (KitKat, 19) 39,2% 51,6% Chromium (Blink) Chromium (Blink) Chromium (Blink) + 5.0 (Lollipop, 21) 11,6% 12,4% Chromium (Blink) Independent updates Chromium (Blink) + 5.1 (Lollipop, 22) 0,8% 0,8% Chromium (Blink) Independent updates Active devices January 7th 2015 as measured by the Google Play Store excluding devices under Android version 2.2 Hybrid App Web Portion Architecture Android Webview Overview – continued Default Browser Android User Webview Browser Custom Codename/API Application version Coverage engine Webview Engine (Android.webkit.webview) (Crosswalk) Browser Engine 2.2 (Froyo, 8) 0,3% 100% 2.3.3 (Gingerbread, 10) 5,6% 99,7% 4.03 (ICSandwich, 15) 5,1% 94,1% Android Default Android Default (webkit) + carrier- (webkit) 4.1 (Jelly Bean, 16) 14,7% 89% specific replacements 4.2 (Jelly Bean, 17) 17,5% 74,3% 4.3 (Jelly Bean, 18) 5,2% 56,8% Crosswalk (Blink) + update every 6 4.4 (KitKat, 19) 39,2% 51,6% Chromium (Blink) weeks Chromium (Blink) Chromium (Blink) + 5.0 (Lollipop, 21) 11,6% 12,4% Chromium (Blink) Independed updates Chromium (Blink) + 5.1 (Lollipop, 22) 0,8% 0,8% Chromium (Blink) Independed updates Active devices January 7th 2015 as measured by the Google Play Store excluding devices under Android version 2.2 Hybrid App Web Portion Architecture General WebView Concerns • WebView capabilities vary as a function of o The mobile OS o The version of the mobile OS o The device manufacturer (e.g.: Android: google, samsung, etc.) • Less access to advanced HTML5 features for security reasons o Websites providing features overview • http://caniuse.com/ • http://mobilehtml5.org/ • Developer agreement compliance o Restrictions imposed by marketplaces on web-content can cause app rejection or your app being pulled o E.g.: Simply wrap your mobile website into a native container without added functionality Hybrid App Web Portion Architecture General WebView Concerns – continued • Performance of bridging calls between web and native is not optimal o E.g. sub-second requests were discouraged in 2013 o Apple streamlined bridging interface in WKWebView • Difference in scrolling behavior between WebView and native o Can be mitigated in new versions of web-kit • webkit-overflow-scrolling: touch CSS property o CSS/JS libraries like FTScroller/iScroll (for older versions) • Complexity of native mixed with web introduces more points of failure o Backwards compatibility issues • Security threats against WebViews can cause unwanted behaviour o