1. Rise of the Hybrids
and intro to React Native

2. 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

3. 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

4. Hybrids
Are we there yet?

5. 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?

6. 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?

7. 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

8. Honorable Mention
• Topcoat (UI)
• Reapp (ReactJS, UI)
• jqmobile (eww)
• jquery ui (eww)

9. 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

10. Performance
• Click latency (even after 300ms removed)
• Scroll jitter, janking
• Memory leaks (Android webviews)
• View layouting

11. 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

12. 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.

13. 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 (?)

14. 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

15. 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...

16. React Native
Introduction

17. 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.

18. 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?)

19. 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>
);
},
});

21. 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