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.

Transcript

1. MOBILE DEVELOPMENT WITH
   react native
   

   View Slide

2. Rodrigo boniatti
   Developer at Codeminer 42
   Student at Universidade Feevale
   Github: boniattirodrigo
   Twitter: @boniattirodrigo
   Website: rodrigoboniatti.com
   

   View Slide

3. View Slide

4. Mobile applications
   using javascript
   and react
   

   View Slide

5. IT’S REALLY NATIVE
   

   View Slide

6. Your code
   

   View Slide

7. from React Native: Under the hood slides
   

   View Slide

8. it isn’t a web
   view
   

   View Slide

9. Hybrid
   Native
   

   View Slide

10. View Slide

11. Developer
    environment
    

    View Slide

12. use your favorite
    editor
    

    View Slide

13. use your device
    or simulator
    

    View Slide

14. View Slide

15. View Slide

16. debug in the
    browser
    

    View Slide

17. View Slide

18. Friendly error
    messages
    

    View Slide

19. View Slide

20. let’s get started
    

    View Slide

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

    View Slide

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

    View Slide

23. Components
    

    View Slide

24. →
    , →
    →
    , →
    

    View Slide

25. import React, { Component } from 'react';
    import {
    AppRegistry,
    Text,
    View
    } from 'react-native';
    class MyComponent extends Component {
    render() {
    return (
    
    Hello World
    
    );
    }
    }
    AppRegistry.registerComponent(
    'AwesomeProject', () => MyComponent);
    

    View Slide

26. Button ListView MapView Navigator
    Picker ScrollView Slider StatusBar
    Switch Text TextInput View
    

    View Slide

27. How to use a
    component?
    

    View Slide

28. import {
    Text,
    View,
    ListView,
    ScrollView,
    Image,
    // . . .
    } from 'react-native';
    

    View Slide

29. import {
    Text,
    ScrollView,
    } from 'react-native';
    class Carousel extends Component {
    render() {
    return (
    
    Lorem ipsum...
    Lorem ipsum...
    Lorem ipsum...
    Lorem ipsum...
    
    );
    }
    }
    

    View Slide

30. View Slide

31. backgroundColor: 'red',
    padding: 20,
    fontSize: 16,
    }}>
    

    View Slide

32. View Slide

33. usIng props
    

    View Slide

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

    View Slide

35. View Slide

36. using methods
    

    View Slide

37. View Slide

38. You can use the
    native code too
    

    View Slide

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

    View Slide

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

    View Slide

41. Style
    

    View Slide

42. class MyTextComponent extends Component {
    render() {
    return (
    Lorem ipsum ...
    )
    }
    }
    const styles = StyleSheet.create({
    text: {
    padding: 20,
    fontSize: 16,
    backgroundColor: 'red',
    },
    });
    

    View Slide

43. it uses flex-box
    

    View Slide

44. Separation of
    concerns
    

    View Slide

45. Architecture
    

    View Slide

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

    View Slide

47. from React Native: Under the hood slides
    

    View Slide

48. from React Native: Under the hood slides
    

    View Slide

49. from React Native: Under the hood slides
    

    View Slide

50. View Slide

51. View Slide

52. 60 FPS
    

    View Slide

53. 16.6 MS/FRAME
    

    View Slide

54. showcases
    

    View Slide

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

    View Slide

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

    View Slide

57. Advantages
    

    View Slide

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

    View Slide

59. VIBRANT
    ECOSYSTEM
    

    View Slide

60. Learn once
    write anywhere
    

    View Slide

61. Don't Waste Time
    Recompiling
    

    View Slide

62. some bad points
    

    View Slide

63. it’s a new
    technology
    

    View Slide

64. short
    documentation
    

    View Slide

65. stranger bugs
    

    View Slide

66. conclusion
    

    View Slide

67. questions?
    

    View Slide

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

    View Slide