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

OS

-Spe

cific

AP

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

Pho

nega

p JS

AP

I

Hybrid Mobile App Patterns Blended Pattern

Hybrid App

API

API

Mobile Operating System

OS

-Spe

cific

AP

Is

Wide Range of Services

Web Portion of App

HTML, CSS, JS


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


HTML API

Calls

Web Portion of App

HTML, CSS, JS


HTML API

Calls

Pho

nega

p JS

AP

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

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


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


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


(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


(Android.webkit.webview)

Default Browser Application

Browser Engine

2.2 (Froyo, 8) 0,3% 100%

Android Default (webkit)

Android Default (webkit) + carrier-specific replacements

2.3.3 (Gingerbread, 10) 5,6% 99,7%

4.03 (ICSandwich, 15) 5,1% 94,1%

4.1 (Jelly Bean, 16) 14,7% 89%

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)

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 Chromium (Blink)

Hybrid App Web Portion Architecture Android Webview Overview – continued

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 Browser

engine (Android.webkit.webview)

Custom Webview Engine

(Crosswalk)

Default Browser Application

Browser Engine

2.2 (Froyo, 8) 0,3% 100%

Android Default (webkit)

Android Default (webkit) + carrier-specific replacements

2.3.3 (Gingerbread, 10) 5,6% 99,7%

4.03 (ICSandwich, 15) 5,1% 94,1%

Crosswalk (Blink) + update every 6 weeks

4.1 (Jelly Bean, 16) 14,7% 89%

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)

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 Chromium (Blink)

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 •  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

How Simple?

http://www.getelastic.com/mobile-web-native-or-hybrid-app-decision-chart/

Choosing a Hybrid App Approach

•  General decision criteria o  Budget o  Time frame o  Target audience o  In-house skill and infrastructure

•  Mostly web developers? •  Existing back-end infrastructure?

o  Functionality requirements o  Multi-platform support

•  Additional decision criteria o  Highly interactive user experience? o  Importance of collaborative community o  Frequently updating app features?

+ +

Pure Pattern Blended Pattern

Mullet Pattern Fallback Pattern

Choosing a Hybrid App Approach Decision Criteria

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?

o  React Native from Facebook à Native UI framework using Javascript (Alpha)

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

Worth investigating?

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

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

Secure – Deploy – Analyze

What is the Sencha Platform? Product Mapping

Manage

Develop

Design

SDKs

Sencha Space

Prototype – Design

Combined in Ext JS 6

Ext JS Touch GXT

Test – Tools

Web Browser Sencha CMD Architect

Architect

What is the Sencha Platform? Pricing – Ext JS 6

http://www.sencha.com/products/extjs/newpkg/

Sencha GPL License

Sencha Ext JS and Touch SDks

Where does Sencha fit in?

•  Sencha touch framework includes o  Javascript UI framework o  Custom MVC architecture

framework

•  Integrated Phonegap/Cordova Packaging through Sencha CMD

•  Sencha Space Client o  Custom native container o  Isolated device APIs o  Security features o  Etc.

Hybrid App

Web Portion of App

CSS UI Framework

HTML5 Hybrid tool


Javascript UI

Framework


Combined Framework

Developing with Sencha Sencha Architect

IDE

Sencha Eclipse Plugin

Sencha JetBrains Plugin

+ +

High Level

Low Level

Sencha CMD

Config Package Build Watch

Utilities Compiler Ant Tasks

Ext JS 6 SDK

Web Apps Hybrid Apps (Pure Pattern)

Web server for Testing

Browser developer

tools

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

SDK in Ext JS 6 •  Views

o  Classic for desktop o  Modern for mobile

•  Utilities o  Sorters, Filters, etc.

•  MVC / MVVM o  1-way or 2-way data binding o  Routing support

•  Data o  Proxies, Stores (Model Lists) Class / Loader

DOM

Data

MVC / MVVM

Utilities

Classic Views (Components)

Modern Views (Components)

Core

Framework Stack

SenchaCon Roadshow 2015 - Sencha Ext JS 6

Sencha Framework Features Feature Overview Interface Elements Layouts Themes

•  Basic Widgets •  (buttons, bars, etc.)

•  Compound widgets •  (grids, trees, etc.)

•  Containers & windows •  (panels, cards, etc.)

•  Visualizations •  (charts, infographics)

•  Optimized for screen size independence

•  Hbox •  Vbox •  Fit •  Card •  Docking

•  Mimicking native OS themes

•  iOS •  Android •  Windows Phone •  BlackBerry

•  Custom themes

Logic & Data Device Profiles Modularity •  Strong MVC / MVVM

architecture •  Loading remote data

•  YQL •  Ajax •  JSONP

•  Define different views and functionality for Tablet/Phone/Desktop

•  Share underlying logic between profiles

•  Extend existing components

•  Create custom components

•  Component marketplace

Sencha Market Sencha Kitchen Sink

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

o  Well documented o  High code reusability o  Many UI components o  Big community o  Complete framework o  Mature framework

•  Cons o  Steep learning curve o  Open Source community neglection o  Poor performance** o  Expensive license à 5 developers min. o  Unannounced product discontinuation

https://docs.sencha.com/ http://www.sencha.com/resources/ https://www.youtube.com/user/SenchaInc https://vimeo.com/sencha http://www.sencha.com/ à search for ‘Book’

https://www.sencha.com/forum/ http://miamicoder.com/ http://alvinalexander.com/sencha http://www.joshmorony.com/category/sencha-touch-tutorials/

•  Buggy early releases •  No patches for Open Source

SDKs •  Hard to find Open Source SDK •  No public bug tracking

•  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?

Questions? templehealthcare.wordpress.com

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)

crossmos hybrid mobile web-apps & sencha platform meeting...hybrid vs native vs web native apps...

Documents