Rise of the Hybridsand intro to React Native

What is a hybrid application?

• A hybrid application is built with web development skills: HTML5, CSS and JavaScript that packages into a native container like Cordova or PhoneGap

Why?

• Cross-platform out of the box, write once run anywhere

• Develop your crazy ideas fast, real fast

• Any web developer can become an app developer

• Workflow + tooling = win

HybridsAre we there yet?

Ionic Framework• Psuedo-commercial (or soon to be?) backing

• Feature complete (1.0)

• Components, transitions, animations and gestures

• Framework doesn't encourage customization

• Powerful tools: ionic-cli, ng-cordova, ionic-view, ionic-creator, ionic-box, ionic-push

• Easy to learn, great documentation

• Build on Angular 1.x, but what about 2.0?

famo.us• Targets a specific need: performance

• GPU accelerated, JavaScript and DOM rendering engine. claims for 60 fps animations

• Seamless integration with AngularJS

• Zero components, you must build everything on your own

• Steep lurning curve, documentation is lacking

• Old news?

F7

• iOS only with complete suite of components and native feel

• Own MVC framework / DOM library (Dom7), hard to integrate with AngularJS

• Very good for creating iOS app prototypes

• Extensive mileage

Honorable Mention

• Topcoat (UI)

• Reapp (ReactJS, UI)

• jqmobile (eww)

• jquery ui (eww)

Performance• Performance is the natural discriminator

• iOS webkit + Apple hardware + Apple OS - great fit. Great performance, no brainer.

• Android device fragmentation

• Crap webviews on older devices

• Crap hardware/os vendors

• Broken framework, in general (Android)

• Alas: shitty performance

Performance

• Click latency (even after 300ms removed)

• Scroll jitter, janking

• Memory leaks (Android webviews)

• View layouting

Performance• Android

• Nearly every framework but Ionic has crap performance

• Use alternative webview engines

• Be ready for supporting and maintaining them

• Test on devices, or:

• Go from Nexus 5 upwards

• iOS

• Be happy, pick a framework and move along

Browser Standards• Desktop

• First, we weren’t there

• Then we felt like we’re there

• Then we realized we arent

• 3-4 years forward

• We’re sort of there

• Mobile

• We’re feeling like we’re there

• Screw it. When in doubt, use native bridges and Cordova plugins.

Native Wrappers• Depicted as “Hybrids done right”

• Xamarin, AppCelerator Titanium, Telerik…

• Avoid browser wars, crappy webviews

• UI glitches (keyboards)

• Save a ton of time: use native styling, controls vs. rebuilding them with hybrids

• Use your own workflow

• Better performance (?)

Native Wrappers• The recipe:

• Wrap every native framework element in JS / C# / Ruby / Etc.

• Make bad compromises for API design, support all platforms

• Embed an engine (therefore: JS, C#, Ruby.. where’s Lua?)

• Fix bridging bugs

• Fix performance bugs due to bridging

• Always be behind the host and take heat from developers

• Always break when Apple releases new stuff

Native Wrappers• Verdict:

• No time/focus for thought behind UI, no paradigm shift

• If you only have C# devs, do Xamarin, JS, do Titanium, and so on.

• Be ready to compromise on features, time to market and performance.

• If only Native Wrappers were done right...

React NativeIntroduction

What is React Native?

• React/ReactJS

• A paradigm shift in UI engineering on the Web

• MAJOR investment from Facebook (React all over your FB page)

• Wrappers done right: React brought to native.

• Runs on JavaScriptCore (iOS)

• Not a write once, run anywhere solution

• Learn once, write anywhere

• Native iOS components

• Will kill other “Native Wrapper” frameworks.

Why choose React Native?

• Workflow. Same productivity as in Hybrids, minus all the bad parts.

• (React) Declarative UI, functional, immutable = quality

• Extensible, reuse anything you’ve already built and use your favourite native libraries

• CSS styling using and embracing flexbox

• Performance happy

• Integrate with existing apps natively (see what I did there?)

• Facebook: in production in several major apps.

• Android coming soon… (summer?)

React Native Component Example:

var React = require('react-native');var { ScrollView, TouchableHighlight, Text } = React;

var TouchDemo = React.createClass({ render: function() { return ( <ScrollView> <TouchableHighlight onPress={() => console.log('pressed')}> <Text>Proper Touch Handling</Text> </TouchableHighlight> </ScrollView> ); },});

Where to go next?

• https://github.com/jondot/awesome-react-native

• https://facebook.github.io/react-native/

• http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript

• https://egghead.io/series/react-native-fundamentals