View
13
Download
0
Category
Preview:
Citation preview
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
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
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
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 Browser engine
(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?
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
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?
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
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
Architecture Framework
Javascript UI
Framework
Native Portion Of App
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)
Recommended