React Native

That Conference 2017 – The Rise of JavaScript-Driven Native App Development

Posted by

0

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

 

That Conference 2017 – React Native: The Good Parts

Posted by

0

That Conference 2017, Kalahari Resort, Lake Delton, WI
React Native: The Good Parts – Stan Bershadskiy

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

  • Native app is a very different experience than web app
  • You get way better performance with native app
  • You get better development experience when working in React
  • React Native gives you best of both worlds–good development experience and best performance


Stan Bershadskiy

  • Architect at Modus Create
  • Author of React Native Cookbook
  • Working with React Native >1.5 yrs


React Native Cookbook

  • From UI to deployment
  • Not just “how”, but “why”


Modus

  • Product Studio
    • Consulting company
    • Specializing in mobile and web apps
    • Globally distributed agile teams
  • Community leaders
    • Published authors and conference speakers
    • Partners with GitHub et al


Mobile Apps Today

  • Split into three groups
    • Native
      • Excellent performance, slow development
    • Web/Hybrid – PhoneGap, Cordoba, Ionic
      • Easy development, terrible performance
      • HTML5/JS is not the solution for fast native apps
    • Cross Compiled – Xamarin, Titanium
      • Meh, dinosaur
      • Most people moving away from this world

We want, of course, good performance, quick development


React Native

  • A framework for building native mobile apps using JavaScript
  • JavaScript runs in interpreter on the platform
  • Different from cross-compiled, which compiles down to native


React’s Core Dependency

  • React.js


React.js

  • Parts
    • JSX – Describe the UI
    • Virtual DOM – Efficiently batch and schedule rendering
    • Lifecycle – Control how components render


How Does React Work?

  • View Declaration (JSX) -> Virtual DOM -> Target Platform
  • Initial phase – componentWillMount, render, componentDidMount
  • Update phase – shouldComponentUpdate, render, componentDidUpdate


React’s New Core Algorithm

  • Fiber – will also be in React Native (next version)


React Native

  • Parts
    • React – declarative goodness
    • Bridge – communication between JavaScript and native threads
    • Native UI SDK – Render Native UI elements on the main thread


How Does React Native Work?

  • JavaScript thread
    • Has event loop (60 fps)
    • JS Call – delegates to main thread, which does Native Call
  • Main thread
    • Renders to the UI
    • Main thread is never blocked, so UI responsive


The Good Parts


Layout System

  • Yoga
  • Flexbox and Absolute positioned layout system written in C++ to achieve maximum performance
  • Some parts written in assembly
  • Similar to web standards


Animated API

  • 60 fps goodness
  • Create Animated Values of a type that wrap components
  • Values can be composed in parallel, sequence or other variations
  • Animations can be executed on the native thread for increased performance
  • Native thread can kick off sub-thread on which to do the animation calculations. So UI isn’t blocked


Animated API Examples

  • React-Native-Foldview
  • Twitter Exploding Hearts
  • Can now export Adobe (something) Effects into React Native


Native Module Bridge

  • Native Made Easy
  • Easily expose native functionality and native UI components to be used by React Native


It’s Just JavaScript

  • Answer to anything is probably on Stack Overflow
  • All your business logic likely going to be implemented in JavaScript


Commonly Used JS Modules

  • Redux – state container
  • Lodash – looping
  • Moment – simple date manipulation


Community

  • This is the most important thing
  • Facebook and the Community as a whole work hand in hand to further the development of React native.
  • >50% of commits come from the community


Community Contributions

  • Expo(nent) – app development platform
  • React Navigation – navigation made simple (finally)
  • RNPM – Simple linking of native modules


The Not-So-Good Parts


Upgrading

  • “Hope you like reading diffs”
  • But it’s not critical that you upgrade immediately
  • If you’re actively developing, you could keep up with latest versions
  • But if further into lifecycle, don’t need to upgrade constantly


Android

  • Dealing with Native Android code is no fun
  • Device and version fragmentation cripples the development experience
  • Tons of devices, tons of Android versions
  • “Tread lightly”
  • Suggested starting with Android first, since once it works there, you know it will work on iOS


Development Mode

  • Apps work much slower in development mode, especially Android
  • But much faster in production mode


Where does React Native Belong?

  • Target platforms
    • iOS
    • Android
    • Apple TV
  • More
    • Universal Windows Platform – Surface tablets, Xbox One
    • Mac OS
    • Linux
  • Few more
    • Virtual Reality – Oculus (React VR)
    • Web – but Stan doesn’t recommend it
    • Other–just needs to run JavaScript interpreter in C++


React Native in the Wild

  • Skype
  • AirBnb
  • Instagram – recently switched over to React Native – claimed better velocity


Building Your Next App


Resources

  • Stan’s book
  • React Native Docs
  • GitHub issues page


Create React Native App

  • Simple platform-independent way to get up and running
  • Can push updates to your app while in production (if JavaScript)
    • e.g. Microsoft CodePush


Standard Way

  • Start with native IDE
    • Xcode
    • Android Studio
    • javaScript IDE
  • Still need to know how to go through deployment cycle on each platform


Best Practices

  • Render() – keep as lean as possible
  • Bridge – be mindful of data you send across bridge
    • Bridge has to serialize the types, so be careful of large blobs of data going across
    • To do complicated data manipulation, e.g. transfer megabytes, do this on the native side


First Use of React Native in Production

  • Facebook Groups
  • Ads Manager 2nd