Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile development with React Native

Mobile development with React Native

Slide about React Native at RSJS 2017 talk. The main goal of this presentation was to show the difference between React Native and hybrid applications, as well, how it works under the hood.

B5dce3bdf38e652f73ee65ffe25d7931?s=128

Rodrigo Boniatti

April 08, 2017
Tweet

Transcript

  1. MOBILE DEVELOPMENT WITH react native

  2. Rodrigo boniatti Developer at Codeminer 42 Student at Universidade Feevale

    Github: boniattirodrigo Twitter: @boniattirodrigo Website: rodrigoboniatti.com
  3. None
  4. Mobile applications using javascript and react

  5. IT’S REALLY NATIVE

  6. Your code

  7. from React Native: Under the hood slides

  8. it isn’t a web view

  9. Hybrid Native

  10. None
  11. Developer environment

  12. use your favorite editor

  13. use your device or simulator

  14. None
  15. None
  16. debug in the browser

  17. None
  18. Friendly error messages

  19. None
  20. let’s get started

  21. react-native init AwesomeProject cd AwesomeProject react-native run-ios

  22. __tests__ android index.android.js index.ios.js ios node_modules package.json

  23. Components

  24. <div> → <View> <p>, <span> → <Text> <img> → <Image>

    <ul>, <li> → <ListView>
  25. import React, { Component } from 'react'; import { AppRegistry,

    Text, View } from 'react-native'; class MyComponent extends Component { render() { return ( <View> <Text>Hello World</Text> </View> ); } } AppRegistry.registerComponent( 'AwesomeProject', () => MyComponent);
  26. Button ListView MapView Navigator Picker ScrollView Slider StatusBar Switch Text

    TextInput View
  27. How to use a component?

  28. import { Text, View, ListView, ScrollView, Image, // . .

    . } from 'react-native';
  29. import { Text, ScrollView, } from 'react-native'; class Carousel extends

    Component { render() { return ( <ScrollView> <Text>Lorem ipsum...</Text> <Text>Lorem ipsum...</Text> <Text>Lorem ipsum...</Text> <Text>Lorem ipsum...</Text> </ScrollView> ); } }
  30. None
  31. <Text style={{ backgroundColor: 'red', padding: 20, fontSize: 16, }}>

  32. None
  33. usIng props

  34. <ScrollView horizontal={true} pagingEnabled={true} >

  35. None
  36. using methods

  37. None
  38. You can use the native code too

  39. also, you can have two different files for each o.s.

  40. carousel.ios.js carousel.android.js

  41. Style

  42. class MyTextComponent extends Component { render() { return ( <Text

    style={styles.text}>Lorem ipsum ...</Text> ) } } const styles = StyleSheet.create({ text: { padding: 20, fontSize: 16, backgroundColor: 'red', }, });
  43. it uses flex-box

  44. Separation of concerns

  45. Architecture

  46. Shadow queue (Native UI) Main thread (Bridge) JS thread (JS

    Code)
  47. from React Native: Under the hood slides

  48. from React Native: Under the hood slides

  49. from React Native: Under the hood slides

  50. None
  51. None
  52. 60 FPS

  53. 16.6 MS/FRAME

  54. showcases

  55. Myntra Facebook Ads Manager See more showcases: https://facebook.github.io/react-native/showcase.html

  56. Checkout: //engineering.instagram.com/react-native-at-instagram- dd828a9a90c7

  57. Advantages

  58. If you know React, you can easily catch that

  59. VIBRANT ECOSYSTEM

  60. Learn once write anywhere

  61. Don't Waste Time Recompiling

  62. some bad points

  63. it’s a new technology

  64. short documentation

  65. stranger bugs

  66. conclusion

  67. questions?

  68. thanks Speaker Deck https://speakerdeck.com/boniatti/mobile-development- with-react-native