Crossmos Hybrid Mobile Web-Apps & Sencha Platform

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 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 HTML, CSS,of App JS HTML API Audio CallsHTML,HTML CSS, JS API

APIs

Audio Calls Rendering Engine HTML Wide API Range of (webview ) API JS Calls Image,Video Rendering Phonegap 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 • 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 E.g.: AngularJS, BackboneJS o • 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 Use standard web security practices to minimize the risk o Only expose those portions of your native code that are truly required for interaction with the web layer Common Pitfalls & Best Practices

• Browser / Platform combinations causing fragmentation o Use tools like Modernizr to gracefully degrade UX on older browsers, while at least supporting a usable UX • JANK or stuttering animations o Leave out animations or adjust if they are lagging • Irregular WebView o Remove headers and footers o Remove tap highlights and callouts o Remove external links

o Fix tap delay (300 ms delay response) à fastClick library o Use CSS3 effects (no javascript, CSS3 transform for hardware acc.)

o Change scrolling properties (WebView is different from native) • Self-mimicking native UI o Time consuming and user will usually notice Common Pitfalls & Best Practices Continued • Use of heavy libraries, frameworks or plug-ins o Avoid using them. E.g. jQuery Mobile imposes a lot of rigidness • Use of HTML5 for multi-purpose or complex apps o Concept should be simple How Simple? • Loading views all at once o If view is mix of text and graphics à load text first and graphics as seperate data calls that load sequentially • Expect your app to run perfectly on all platforms out of the gate o Prepare to spend time adjusting CSS and other formatting to accommodate each OS • Other best practices: o Use Javascript MVC and UI frameworks o Crunch all your graphics à Tinypng.com o Test for performance à browser-perf or New Relic monitoring

The Do’s and Don’ts of Building HTML5 Hybrid Apps – David Albert Agenda

http://www.getelastic.com/mobile-web-native-or-hybrid-app-decision-chart/ Choosing a Hybrid App Approach Decision Criteria

• General decision criteria o Budget o Time frame o Target audience + + o In-house skill and infrastructure • Mostly web developers? Mullet Pattern Fallback Pattern • Existing back-end infrastructure?

o Functionality requirements o Multi-platform support • Additional decision criteria o Highly interactive user experience? Pure Pattern Blended Pattern o Importance of collaborative community o Frequently updating app features? Latest Developments

• Hybrid Tools o Cordova/Phonegap Tooling • Support for Crosswalk WebView added • Whitelist functionality is updated à Content Security Policy • Plugins moved to NPM à improved readability and better integration o Cordova/Phonegap plugins • Plugin-push à register and receive push notifications • Plugin-contentSync à update application after release • Plugin-flurry à Flurry mobile analytics

• Native Platforms o Android • Transistion from Dalvik VM (JIT) to Android Runtime (AOT) (Lollipop) • Updatable WebView through Play Store Latest Developments Continued

o iOS • WKWebView with NITRO JIT Javascript engine (2014) • Unwanted scrolling behaviour • Cannot load files using file:// URL à work around available • Can cause app freezing when returning from background • Full list of issues available at: https://www.bipsync.com/blog/three-things-wed-love-to-see-in-ios-9/

o Windows 10 Mobile • Visual Studio has integrated Cordova hybrid app support in their tooling • Visual Studio allows porting of existing Android/iOS apps to Windows 10 Mobile apps • Future of hybrid app development? Worth investigating? o React Native from Facebook à Native UI framework using Javascript (Alpha)

o NativeScript from Telerik à source code translater and Runtime (Bèta) Agenda

• What is the Sencha Platform? o Products o Pricing • Where does Sencha fit in? • Developing with Sencha • Sencha framework features • Demonstration • Personal experience What is the Sencha Platform?

• Platform for web application lifecycle management and creating high-impact cross-platform web applications

SenchaCon Roadshow 2015 - Sencha Ext JS 6 What is the Sencha Platform? Product Mapping

Secure – Deploy – Analyze

Manage

Sencha Space

SDKs Test – Tools

Develop

Touch GXT Ext JS Web Browser Sencha CMD Architect

Combined in Ext JS 6

Prototype – Design

Design

Architect What is the Sencha Platform? Pricing – Ext JS 6

Sencha GPL License

Sencha Ext JS and Touch SDks

http://www.sencha.com/products/extjs/newpkg/ Where does Sencha fit in?

Hybrid App • Sencha touch framework

Web Portion of App includes

o Javascript UI framework Javascript CSS UI o Custom MVC architecture UI Framework Framework Combined framework Framework Architecture Framework

• Integrated Phonegap/Cordova Packaging through Sencha CMD HTML5 Hybrid tool • Sencha Space Client o Custom native container Native Portion o Isolated device APIs Of App o Security features o Etc. Developing with Sencha

Sencha Architect Sencha Sencha Web server for IDE Eclipse Plugin JetBrains Plugin Testing

+ +

Browser developer tools

Ext JS 6 SDK High Level Watch Build Package Config

Sencha CMD Ant Tasks Compiler Utilities Low Level

Web Apps Hybrid Apps (Pure Pattern) Sencha Platform hands-on experience

• What is the Sencha Platform? o Products o Pricing • Where does Sencha fit in? • Developing with Sencha • Sencha framework features • Demonstration • Personal experience Sencha Framework Features

• Merging of Ext JS and Touch Framework Stack SDK in Ext JS 6 • Views o Classic for desktop Classic Views Modern Views (Components) (Components) o Modern for mobile • Utilities o Sorters, Filters, etc. Utilities • MVC / MVVM MVC / MVVM o 1-way or 2-way data binding Core Data o Routing support DOM • Data Class / Loader o Proxies, Stores (Model Lists)

SenchaCon Roadshow 2015 - Sencha Ext JS 6 Sencha Framework Features Feature Overview

Interface Elements Layouts Themes • Basic Widgets • Optimized for screen • Mimicking native OS • (buttons, bars, etc.) size independence themes • Compound widgets • Hbox • iOS • (grids, trees, etc.) • Vbox • Android • Containers & windows • Fit • Windows Phone • (panels, cards, etc.) • Card • BlackBerry • Visualizations • Docking • Custom themes • (charts, infographics)

Logic & Data Device Profiles Modularity • Strong MVC / MVVM • Define different views • Extend existing architecture and functionality for components • Loading remote data Tablet/Phone/Desktop • Create custom • YQL • Share underlying components • Ajax logic between profiles • Component marketplace • JSONP

Sencha Kitchen Sink Sencha Market Sencha Framework Features Sencha CMD Overview

• Current version CMD 5.x à (CMD 6 bèta) • Features o Project scaffolding and code generation

o JS-to-JS compiler + Fashion Sass (replacement for Compass) o Web server

o Workspaces o Package Management (create and maintain components) o Build options • Production build (minimal code size) • Test build (debugging)

o Native packaging • Phonegap local • Cordova local • Phonegap Build (Cloud build)

o Full list available at: http://docs.sencha.com/cmd/5.x/intro_to_cmd.html Demonstration Personal Experience

• Pros https://docs.sencha.com/ http://www.sencha.com/resources/ o Well documented https://www.youtube.com/user/SenchaInc https://vimeo.com/sencha o High code reusability http://www.sencha.com/ à search for ‘Book’ o Many UI components https://www.sencha.com/forum/ o Big community http://miamicoder.com/ http://alvinalexander.com/sencha o Complete framework http://www.joshmorony.com/category/ sencha-touch-tutorials/ o Mature framework • Cons • Buggy early releases o Steep learning curve • No patches for Open Source o Open Source community neglection SDKs • Hard to find Open Source SDK o Poor performance** • No public bug tracking o Expensive license à 5 developers min.

o Unannounced product discontinuation • Sencha Animator • Sencha.io à BaaS Personal Experience Poor Performance

• Easy to write code that imposes performance penalty o Complex layouts created with their layout system generate heavy DOM structures

o Lacking documentation on best practices for performance improvements

• Tap-delay with the Android platform makes the app feel slow à FastClick library does not provide a solution here

o Problem with framework? o Problem with WebView? templehealthcare.wordpress.com Questions? Appendix

sencha-byod-sencha-space – Mirae Web Inc. Developer Conference (2014) Appendix Sencha Space Architecture

sencha-byod-sencha-space – Mirae Web Inc. Developer Conference (2014)