React native - React(ive) Way To Build Native Mobile Apps
- 1. React(ive) Way To Build Native Mobile Apps
- 2. Some Background on React Native • Open Sourced by Facebook in March 2015 • Initially was available on iOS only, Later launched on android • Over 30+ Stars and 600+ contributors on github • Currently the fastest growing mobile app platform (even more popular than swift) • Native approach results into much powerful performance than hybrid framework like ionic • Supports android >4.1 and iOS >7 • Companies are already using it in production
- 3. React Native Architecture React-Native architecture is like running an app inside an app
- 4. React Native Architecture ates an asynchronous bridge between javascript interpreter runni
- 5. React Native Architecture React Native also creates worker thread if CPU intensive work like layout, image decoding etc is required.
- 6. React Native Architecture Layout and Styling • React Native uses css inside javascript for styling And internet reacted like this……..
- 7. React Native Architecture Layout and Styling There are several issues with CSS • Global Namespace • Dead Code • Non-deterministic Resolution Thats why CSS in Javascript • All styles are local variables in javascript • No dead code • Deterministic Resolution because of local scope
- 8. React Native Architecture Layout and Styling React uses flexbox for layout Calm Down
- 9. React Native Architecture css-layout Reimplementation of CSS layout using pure JavaScript https://github.com/facebook/css-layout • Implementation of Flexbox into pure javascript • Transpiled version available in Java, c# and C • For react native, It provides the required layout parameter like Height, Width to native platform using the async bridge
- 10. Benefits of Architecture • Truly native performance • Threads can take benefits of multi core CPU • Uses the react’s battle proven virtual DOM but instead of updating browser DOM it updates native component if change is detected. • Abstracts away the layout from native to CSS Flexbox Layout • Super fast turn around time • If are familiar with react then you can leverage that to make mobile apps
- 11. To Get Started You will Need • OS X if you are developing for iOS • Node 4.0 (or) greater • watchman and flow tool from facebook Quick Start Guide • “npm install -g react-native-cli” • “react-native init MyBrandNewApp” to start new app • Open the Xcode project in Xcode and run from there for iOS • “react-native run-android” for running android version
- 12. Demo Time
- 13. Cautions • React Native is cutting edge technology and There’s nothing similar to like this in market. So it might break for some edge cases. • There might not be all native modules available but eco system is growing and its growing super fast. • The same code might not work across both android and iOS. Some tweaking might be required because of native implementation
- 14. Go build your next dream app with React Native and make world a better place