React native introduction

A simple rn introduction

Transcript

1. REACT NATIVE
2. CROSS-PLATFORM NATIVE APP
3. 3 Facts • Mobile development is a complex business : - With multiple platforms (iOS, Android, Windows) - Many frameworks
4. 4 Hybrid ? - Allow to write applications iOS and Android (no windows) apps with native UIs using a common codebase - Have to construct separate iOS and Android UIs (which is a good thing!)
5. 5 Language - Created in March 2015 - Open sourced
6. 6 Learn once, build everywhere - React Native is a platform - Build native UI’s with React components - Create application logic with javascript (just like web)
7. 7 React components - View encapsulation - Separation of concern - Modular - JSX
8. 8 React Native - Bridges native and JS development (literally) - Expose native modules to JS - Cross platform - Brings some of the good parts of the web to mobile
9. 9 Pros - Higher ceiling (Ex: native maps, camera, video) - Extensible runtime (Ex: custom layout) - Mobile first (Touch & gestures) - Continuous deployment
10. 10 Development tools - Live Reload : Refresh browser and get IMMEDIATE Feedback - Even better, you can use Cmd+D to launch the Chrome Developer Tools
11. Hot reload ! HOT RELOAD
12. 12 Error reporting - Constructing and informative error reporting - Suggestions regarding how you might fix it ES6 - Writing code for a single JavaScript runtime - You can use modern features such as arrow functions and destructing
13. 13 Virtual DOM - Make efficient updates to the UI when the application state changes CSS Flexbox - Very natural fit for mobile application development
14. 14 It is an abstraction - You might have to delve into the implementation and fix it yourself - You are dependant on a third party not just for bug fixes, but to keep their framework up-to-date
15. 15 Sources Retrospective on Developing an application with React Native React Native Review React.js Conf 2016 An iOS Developer on React Native React May Have Just Ended The Native Vs. Web Debate The dawn of React Native
16. THANK YOU Damien Lamoureux damien.lamoureux@capgemini.com Twitter : @damienlamoureux https://github.com/dlamoureux