Download to read offline
Rise of the hybrids
- 1. Rise of theHybrids and intro to React Native
- 2. What is ahybrid 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 outof 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.
- 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 aspecific 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 onlywith 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 isthe 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 • Nearlyevery 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 • Depictedas “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 • Therecipe: • 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.
- 17. What is ReactNative? • 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 ReactNative? • 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: varReact = 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 gonext? • 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