Runtime Based Hybrid Apps
Ruben Smeets Kris Aerts ES&S 26/04/2016 Agenda
• Hybrid Approaches • Runtime Based CPT Candidates • Comparison of Titanium / React Native / NativeScript o Architecture o Developer Experience o Future goals • Conclusions Hybrid Approaches
WebView Based Runtime Based
WebView Container JavaScript Runtime
Web Code JavaScript HTML CSS
JS
Native UI + Device APIs Device APIs Hybrid Approaches WebView Based
Web Code
UI frameworks & libs DOM - based WebGL - based
React Canvas
Famo.us +
Architectural frameworks
Combined frameworks Hybrid Approaches WebView Based
Web Code Pure Hybrid Apps Tools Properties UI frameworks & libs • Single WebView • Content & navigation DOM - based WebGL - based in HTML5 • Thin native wrapper
React Canvas
Famo.us +
Architectural frameworks
Combined frameworks Hybrid Approaches WebView Based
Web Code Pure Hybrid Apps Tools Properties UI frameworks & libs • Single WebView • Content & navigation DOM - based WebGL - based in HTML5 • Thin native wrapper
React Canvas Mixed hybrid Apps Pattern Tools Properties • Multiple WebViews Famo.us Blended • Native navigation • E.g.: Apple Store
+ • WebViews for later stages of Architectural Mullet user flow frameworks • E.g.: Walmart
• WebViews for little used or frequently Combined frameworks Fallback changing content • E.g.: Instagram Hybrid Approaches Runtime Based
WebView Based Runtime Based
WebView Container JavaScript Runtime
Web Code JavaScript HTML CSS
JS
Native UI + Device APIs Device APIs Hybrid Approaches Runtime Based – The “WHY”
• Consistent with platform • Fast and responsive • Complex gestures and smooth animations
• No knowledge & code sharing • Different technology stacks • Slow iteration speeds* • Hard to scale
*Android Instant Run Hybrid Approaches Runtime Based – The “WHY” continued
• HTML / CSS / JavaScript • Same code and technologies • Frameworks provide scaling • F5 / ⌘+R
• Very hard to provide smooth experiences • Not designed for complex interactions • Feel out of place with the platform Hybrid Approaches Runtime Based – The “WHY” continued
Web advantages • JSX / XML / CSS / JavaScript • Same code and technologies • Frameworks provide scaling • Live-reload
Native advantages • Consistent with platform • Fast and responsive UI • Complex gestures and smooth 60fps animations Hybrid Approaches Runtime Based – The “HOW”
JavaScript Runtime Composition • Native side JavaScript • JavaScript side • JS-to-native bridge
Key concepts Native UI • Proxy objects + Device APIs • Asynchronous calls Runtime Based CPT Candidates
Titanium React Native Nativescript Fusetools TabrisJS Smartface
Announced 2008 2015 2014 2015 2014 2011
Version V5.2.2 V0.24 V1.7 V0.12 V1.7 v4.5.0
Android Android Android Android Android Android 4.0.x – 6.0.x 4.1.x – 6.0.x 4.2.x – 6.0.x 4.2.x – 6.0.x 3.7.x - 5.x 4.2.x – 6.0.x Platforms iOS iOS iOS iOS iOS iOS 7.1.x – 9.2.x 7.0.x – 9.2.x 7.1.x – 9.2.x 7.1.x – 9.2.x 6.x - 8.x 7.1.x – 9.2.x WP8.1-UWP UWP (alpha) UWP (alpha) 11658 556 2300 5871 634 63 Popularity 23564 72340 7142 16028 252 1102 2063 30206 6393 / 384 / 2303 3439 259 1119 2 283
Popularity numbers are checked on 04/2016 Agenda
• Hybrid Approaches • Runtime Based CPT Candidates • Comparison of Titanium / React Native / NativeScript o Architecture o Developer Experience o Future goals • Conclusions Architecture Comparing Ti vs RN vs {N} Architecture – Used Technologies
Programming • JavaScript (ES5) • XML mark-up
• TSS styling (CSS-like styling)
Layout system • Relative to parent view Comparing Ti vs RN vs {N} Architecture – Used Technologies Examples
views/index.xml styles/index.tss
controllers/index.js Comparing Ti vs RN vs {N} Architecture – Used Technologies
Programming • JavaScript (ES5) • JavaScript (ES6+ES7 • XML mark-up using Babel transpiler) • JSX (XML like mark-up • TSS styling (CSS-like language) styling) • JavaScript “inline” styles • Flow (static type checker for JavaScript) Layout system • Relative to parent view • Flexbox Comparing Ti vs RN vs {N} Architecture – Used Technologies Examples
index.ios.js
• Mixing XML-like mark-up inside JavaScript • Inline styles Comparing Ti vs RN vs {N} Architecture – Used Technologies
Programming • JavaScript (ES5) • JavaScript (ES6+ES7 • JavaScript (ES5) or • XML mark-up using Babel transpiler) Typescript (ES6+ES7) • JSX (XML like mark-up • XML mark-up • TSS styling (CSS-like language) styling) • JavaScript “inline” • CSS styling styles • Flow (static type checker for JavaScript) Layout system • Relative to parent view • Flexbox • Native layout sys. Comparing Ti vs RN vs {N} Architecture – Used Technologies Examples
View/home/home.xml View/home/home.css
View/home/home.js Comparing Ti vs RN vs {N} Architecture – Application Structure
Design Pattern • MVC (using Alloy)
Additional concepts
Philosophy • Write once, adapt everywhere Comparing Ti vs RN vs {N} Architecture – Application Structure Comparing Ti vs RN vs {N} Architecture – Application Structure MVC
Data Package: uses BackboneJS models and collections Comparing Ti vs RN vs {N} Architecture – Application Structure
Design Pattern • MVC (using Alloy) • Flux or Redux (unidirectional data flow) Additional concepts • React Components • Virtual DOM • Used as part of app Philosophy • Write once, adapt • Learn once, write everywhere anywhere (changed to horizontal platform) Comparing Ti vs RN vs {N} Architecture – Application Structure Comparing Ti vs RN vs {N} Architecture – Application Structure ReactJS
One way data flow inside components
ReactJS: Keep Simple. Everything can be a component! – Pedro Nauck Comparing Ti vs RN vs {N} Architecture – Application Structure Flux Manage one-way dataflow inside the application
https://facebook.github.io/flux/docs/overview.html Comparing Ti vs RN vs {N} Architecture – Application Structure VirtualDOM
React Virtual DOM vs Incremental DOM vs Ember’s Glimmer: Fight - Sebastián Peyrott Comparing Ti vs RN vs {N} Architecture – Application Structure
Design Pattern • MVC (using Alloy) • Flux or Redux • MVC or MVVM (unidirectional data flow) Additional concepts • React Components • Virtual DOM • Used as part of app Philosophy • Write once, adapt • Learn once, write • Write once, run everywhere anywhere (changed to everywhere horizontal platform) Comparing Ti vs RN vs {N} Architecture – Application Structure Comparing Ti vs RN vs {N} Architecture – Application Structure MVVM
(View-Model) User-viewModel.js (Model) User.js (View) First Name Form.xml Last Name First Name: ... Last Name: …
Hotel (View-Model) Name: … Hotel-viewModel.js (Model) Name Hotel.js • Two-way data binding • Observables • Increased testability • Code reusability Comparing Ti vs RN vs {N} Architecture – Runtime Architecture
Properties • 2 Threads • Main UI thread • JS thread • Asynchronous • Serializable (iOS) • Spawn native threads for work offloading Comparing Ti vs RN vs {N} Architecture – Runtime Architecture
Various Proxies: • Proxy • Module • ViewProxy • View
Titanium documentation Comparing Ti vs RN vs {N} Architecture – Runtime Architecture
Properties • 2 Threads • 3 Threads • Main UI thread • Shadow thread • JS thread • Main UI thread • Asynchronous • JS thread • Serializable (iOS) • Asynchronous • Spawn native threads • Batched native calls for work offloading • Serializable Comparing Ti vs RN vs {N} Architecture – Runtime Architecture Native
1 Event 8 Update UI (touch, timer, networks, etc.) (if needed)
2 Collect data and notify JS 7 Process commands
3 Serialized payload 6 Serialized response
React Native Bridge
Call 0 - ∞ 4 Process event 5 Native methods JavaScriptCore Under the hood of React Native - Martin Konicek Comparing Ti vs RN vs {N} Architecture – Runtime Architecture Ex.
RN Worker UI Event Queue JS Event Queue Event Queue(s)
2 Handle Event 1 Touch Event àbridge à Runs JS
3 Dispatch View 4 Update UI Updates
Image decode, Disk I/O, Layout, Etc.
Under the hood of React Native - Martin Konicek Comparing Ti vs RN vs {N} Architecture – Runtime Architecture
Properties • 2 Threads • 3 Threads • 2 Threads • Main UI thread • Shadow thread • Main UI thread • JS thread • Main UI thread • JS thread • Asynchronous • JS thread • Asynchronous • Serializable (iOS) • Asynchronous • Direct native API • Spawn native threads • Batched native calls access for work offloading • Serializable
Note: every bridge has a type conversion mechanism Comparing Ti vs RN vs {N} Architecture – Runtime Architecture Native Native APIs
Call Dispatcher
Type-conversion marshalling service
Calls JavaScript functions Meta-data NativeScript runtime Bindings Calls native API using JavaScript App Code JavaScript (JS ES5 & Libraries Typescript) JavaScript VM How NativeScript Works - Te l e ri k Comparing Ti vs RN vs {N} Architecture – Runtime Architecture Ex.
V8 JavaScript Engine var file = new java.io.File( path ); File = FileProxy
Native Type conversion Service Android java.lang.String
Metadata java.io.File()
Call dispatcher java.io.File()
How NativeScript Works - Te l e ri k Comparing Ti vs RN vs {N} Architecture – Modularity
Options • Titanium modules • React Native modules • NativeScript • Built-in (100+) • Build-in (60+) modules • gitTrio community • JS Coach (1000+) • Build-in (54) modules and widgets • Cordova plugin • Community (1351) + (674) integration NPM (198) • Appcelerator modules • CocoaPods/ Java • Verified (open source) (27) marketplace (13) JAR integration • Marketplace (383) • Telerik UI for • NPM JS libraries • NPM JS libraries (no DOM reliance) NativeScript (4) through titaniumifier • CocoaPods/ Java (no DOM reliance) JAR integration • NPM JS libraries (no DOM reliance) Comparing Ti vs RN vs {N} Architecture – Modularity
var fileModule = require( "file-system" ); new fileModule.File( path );
At runtime executed on the JS engine
new java.io.File( path );
NSFileManager.defaultManager(); fileManager.createFileAtPathContentsAttributes( path ); Comparing Ti vs RN vs {N} Architecture – Modularity
NativeScript File System UI Abstraction Device sensors Local Storage Modules Abstraction (JavaScript) Launchers, Localization, Push Notifications Other… Choosers Globalizations
Runtime Native UI JavaScript User Interaction Hardware Access Handled by Native Handled by Native Components Running on VM platform platform
Native Android Native iOS application Native WP application application
How NativeScript Works - Te l e ri k Comparing Ti vs RN vs {N} Architecture – Conclusion
Titanium • Titanium is mature with many modules • Titanium’s bridging architecture allows for high performance apps by spawning native threads • Source-code is obfuscated+minified • 100% business logic shared • Up to 90% view logic (depending on developer)
• Architecture does not scale that well for larger applications (MVC) • Higher entry level and learning curve due to framework specific coding style and APIs. • No support for ES6 Comparing Ti vs RN vs {N} Architecture – Conclusion Continued
React Native • React Native has the lowest entry level for web developers • React Native’s app arhitecture is considered to scale well with high complexity apps and large development teams • React Native can be used as a part of an application • Source-code is obfuscated+minified • React Native’s bridging architecture allows for higher performance apps by using multiple threads for offloading work • 85% code sharing achieved with Facebook’s Ads manager App (First iOS version à 3 months later Android version)
• React Native has a higher entry level for beginning developers due to complex development stack (React, Flux, GraphQL, Relay, Babel,etc..) • Still in it’s early stages Comparing Ti vs RN vs {N} Architecture – Conclusion Continued
NativeScript • NativeScript has the lowest entry level for developers coming from strongly typed languages (TypeScript) • Catch errors at build time (TypeScript) • NativeScript provides the easiest way of integrating native features • NativeScript supports both write once, run everywhere and platform specific UI • 0-day support for new features
• Has smaller community, fewer contributors • Custom runtime introduces performance penalty and size implications (+20MB) • No code obfuscation out-of-the-box (Paid community tool) Agenda
• Hybrid Approaches • Runtime Based CPT Candidates • Comparison of Titanium / React Native / NativeScript o Architecture o Developer Experience o Future goals • Conclusions Developer Experience Comparing Ti vs RN vs {N} Developer Experience – Tools
IDE • Appcelerator Studio • Any IDE* • Any IDE (based on Eclipse), • Nuclide Atom (free) • Visual studio code (paid) • Deco IDE (paid?) extension (free) • Visual studio code • Telerik Platform (paid) extension (free) Build/Deploy/Debug • CLI tool (paid) • CLI tool • CLI tool • LiveView • Live reload • Live sync • Unit test • Performance debug • Node-inspector debug • Build/Deploy/Publish • Build/Deploy • Unit testing • Etc.. • Build/Deploy/Publish OverTheAir JS updates • Siphon, Codepush,.. • Telerik Platform
* With JSX support Comparing Ti vs RN vs {N} Developer Experience – Tools IDE
Appcelerator Studio
What is Appcelerator (Titanium) Studio – jvl-services Comparing Ti vs RN vs {N} Developer Experience – Tools IDE
Deco IDE Comparing Ti vs RN vs {N} Developer Experience – Tools IDE
Telerik Platform (SaaS) NativeScript VScode
• Design • Deploy • Build • Test • Connect • Manage • Measure Comparing Ti vs RN vs {N} Developer Experience – Community
Support • Official Docs • Official Docs • Official Docs • Slack channel • Reactiflux (channel) • Slack channel • JIRA Tickets • Product Pains • Github issues • Stack Overflow • Stack Overflow • Stack Overflow • Developer Blogs • Developer Blogs • Developer Blogs • Paid support News • Official Blog • Official Blog • Official Blogs • Twitter • Twitter • Twitter • React News letter Contribution • Github (160) • Github (704) • Github (51) • JIRA Tickets • Product Pains • NativeScript Ideas Comparing Ti vs RN vs {N} Developer Experience – Community JIRA Tickets Comparing Ti vs RN vs {N} Developer Experience – Community Product Pains Comparing Ti vs RN vs {N} Developer Experience – Community NativeScript Ideas Comparing Ti vs RN vs {N} Developer Experience – Conclusion
Titanium • Complete app life cycle solution with Appcelerator studio • Titanium has high quality documentation • Large active community for feedback and news (slack, blog)
• LiveView is very brittle • IDE is not very customizable • Fewer community examples • No over the air JavaScript update support Comparing Ti vs RN vs {N} Developer Experience – Conclusion
React Native • React Native has a very large active community o Many examples / sample apps o Fast responses • Many tools are being created for different purposes (designing, performance!!!, updates, etc..) • Very good error reporting • Powerful hot reloading
• Tools are still in active development • Documentation is good, but lacks structure Comparing Ti vs RN vs {N} Developer Experience – Conclusion
NativeScript • Telerik platform supports the complete app life cycle • Good documentation • Many sample applications and examples • Fast responding community
• Tools are still in active development • Has smaller community and fewer contributors à slower feature support, fixes, etc.. Agenda
• Hybrid Approaches • Runtime Based CPT Candidates • Comparison of Titanium / React Native / NativeScript o Architecture o Developer Experience o Future goals • Conclusions Future Goals
“The Web is for audience reach and native apps are for rich experiences. Both are strategic. Both are valuable. So when it comes to mobile, it’s not Web vs. Native. It’s both.”
Mobile Web vs. Native Apps or Why You Want Both - Luke Wroblewski Comparing Ti vs RN vs {N} Future Goals – HAL and Ti.Next
Hyperloop Abstraction Layer (HAL): cross-platform, object-oriented C++ runtime library is the foundation for the Hyperloop and Ti.Next initiative. It provides seamless integration between C++ (i.e. native) and JavaScript languages.
Hyperloop – Conny Svensson Comparing Ti vs RN vs {N} Future Goals – The Horizontal Platform
React
React Native
iOS Android … Web
Desktop, UWP
React.js Conf2016 - Nick Schrock - Keynote Comparing Ti vs RN vs {N} Future Goals – NativeScript + Angular 2
Building native mobile apps with Angular 2 0 and NativeScript - Sebastian Witalec Comparing Ti vs RN vs {N} Future Goals – NativeScript + Angular 2
Building Mobile Apps with Angular 2 and NativeScript – Angular 2 Blog Conclusion
React Native brings React further than the browser
Titanium Appcelerator is still a viable and stable runtime based solution
NativeScript is easiest to start with and has 0-day support for new features Thank You
Questions? Appendix Embedded WebView traffic Appendix Developer Experience – Tools LiveSync
LiveSync both ios and Android titanium React native EVALUATION