That Conference 2017, Kalahari Resort, Lake Delton, WI
The Rise of JavaScript-Driven Native App Development – Rob Lauer
Day 1, 7 Aug 2017
Disclaimer: This post contains my own thoughts and notes based on attending That Conference 2017 presentations. Some content maps directly to what was originally presented. Other content is paraphrased or represents my own thoughts and opinions and should not be construed as reflecting the opinion of the speakers.
Executive Summary
- Web apps not performant enough, native apps too hard to implement
- Hybrid apps too much of a compromise
- Xamarin just “1st-gen”
- Move toward React Native / NativeScript
- NativeScript comes with a bit more “out of the box”
Rob Lauer – @RobLauer
- Senior Manager, Developer Relations
- Progress (Telerik)
Two things
- JavaScript-Drive Native
- NativeScript
Covering today
- Rise of “JavaScript-driven Native”
- Intro to NativeScript
- NativeScript core concepts
Environment for apps
- Native apps are in silos, for the various platforms
Cross platform options
- Mobile Web – PWA (Progressive Web Apps)
- Mobile-first web site, or mobile variant
- Hybrid – leveraging web view on device (e.g. Chromeless browser)
- 1st gen X-Plat Native
- e.g. Xamarin
- Native
Not available to web app
- Offline support
- Device APIs
- Home screen availability
Hybrid Promise
- In between native and full web
- Reuse web skills
- Rich UI
- Supposed to be best of both worlds
- It’s basically a set of compromises
Hybrid Problems
- Lots of press talking hybrid apps down
Hybrid Reality
- 50% dev time doing first 80%
- Another 50% doing final 20%
- Need to tweak things because of bad performance
Binary choice
- Hybrid vs. Native
- Hybrid
- Fast to market
- Compromise on UX
- Native
- Best experience
- One platform at a time
Pie chart
- How important is mobile app performance
- 80% somewhat/very important
If user perceives poor performance
- Switch to another app, etc.
Third choice
- Native JavaScript
- Native UI driven by JavaScript
- App runs in JavaScript engine, bridge to native
Biggest JavaScript Native
- React Native
- NativeScript (Progress)
- Other smaller ones
- Weex
- FuseTools
- Flutter
React Native vs. NativeScript
- Both work in similar way
- Native UI, Native APIs running on JavaScript engine
- NativeScript – write once
- Plugins created with JS/TypeScript
- On Day 0, NativeScript ready to go
- Single-threaded (UI thread)
- React Native – write API wrapper for each platform
- React support
- API access via native modules (you write)
- UI Thread vs. JavaScript Thread
- Performance between the two is very similar
{N} vs RN
- React vs. Angular/Vue/Vanilla
- Progress vs. Facebook
- BSD (RN) vs. Apache
- Community – RN community is bigger
JavaScript-Driven Native
- Faster to market
- Reuse existing skills
- Reuse existing libraries
- Best experience
- True native UI
Xamarin
- Progress/Telerik still supporting the idea of Xamarin and cross-compiled web apps
- e.g. telerik.com/xamarin-ui
Intro to NativeScript
- Timeline – 2013 to 2017 (mass adoption)
- npm downloads going up
- Ionic still dominant
- RN and {N} battling it out
What is NativeScript?
- Open source framework
- Native mobile for iOS, Android (eventually Windows 10)
- Use web skills
- Write once, run everywhere
- Share 100% code between iOS/Android
- Share 80% code with web – can easily port Angular, but just rewrite view
Differentiators
- No compromise UI
- Measurable native UI performance
- Maximum code and skill reusability
- Reuse existing native libraries
How Does NativeScript Work?
NativeScript Module Layer (NML)
- Abstractions on top of native APIs
- Dozens available out of the box
- All native APIs still available at JavaScript layer
Architecture
- Application Code (can occasionally hit NativeScript Runtime)
- NativeScript Modules
- NativeScript Runtime
- iOS / Android at bottom
Putting It All Together
- Define UI with Markup
- Back-end logic is JavaScript
- CSS
Architecture choice
- JavaScript
- TypeScript
- Angular
First App
- npm install
- tns run iOS
- tns run android
NativeScript LiveSync
- Refresh app with latest changes to JS, CSS, XML
- No re-build
- Works with emulators and devices
Demo – Simple NativeScript App
- tns create myapp
- main-page.xml
- A few HTML elements, though custom Telerik
Pages/Views
- XML markup structure
- Elements (<Page>, <Label>) are NativeScript modules
- Cross-platform abstractions
- E.g. <switch>
- Lots of UI Widgets out of the box
Layouts (Traditional)
- Layout containers
- Absolute
- Dock
- Grid
- Stack
- Wrap
- Power comes from when you start nesting layout containers inside of each other
- Also provide Flexbox
Custom XML Components
- Custom controls
- Encapsulate reusable UI in components
- Can be JS only or XML + CSS + JS
Platform-Specific Capabilities
- File naming: xxx.android, xxx.ios
- Markup: chunks – <android>,
- Attributes: android:blah, ios:blah
- Write once by default
- But can customize per target
Styling with CSS
- Conventions
- App.css
- Myview.css
- Myview.ios.css
Supported Selectors
- Element Type, class, id
Sass and LESS Available
UI Components
- Nativescript-ui
JavaScript Code Behind
- Vanilla JavaScript
- Built-in MVVM pattern
- Angular support
- TypeScript support
Handling Events
- Create event handlers in JavaScript
Navigating Views
Basics
- Navigating with topmost
View Transitions
- Standard, e.g. curl
Data Binding
- Available out of the box
- Two-way
Animations
- Animate – various properties
- Configured – props
- Chain animations
- Animate multiple properties and elements
Custom Fonts
- TTF or OTF
- Drop-in
Debugging Strategies
- Console.log
- Developer Tools – e.g. Chrome DevTools
- IDE – e.g. Visual Studio and Visual Studio Code
- Free extension for Visual Studio Code
Anything Else?
Two Ways to use
- Command Line Interface (CLI)
- NativeScript Sidekick
- Builds on top of CLI
- Services like cloud-based builds
- Cross-platform
- Starter kits, app templates
- Plug-ins management
- Visual Studio integration coming
What about Angular?
- Unified app concepts across web and native mobile
Community
- Plugins.nativescript.org
- Forum.nativescript.org
Bottom Line
- No web views (platform native UI)
- Use JavaScript (or TypeScript)
- 100% access to all native APIs
- Made for web devs (JS, CSS, XML)
- Use Angular for web and ntive mobile
- Reuse thousands of libraries from Node/iOS/Android/Web