$30 off During Our Annual Pro Sale. View Details »

From Native To React Native

From Native To React Native

Talk on ReactNotAConf 2018 Edition.

deVladinci

May 02, 2018
Tweet

Other Decks in Programming

Transcript

  1. FROM
    NSString *native
    TO

    28/04/2018

    View Slide

  2. @deVladinci

    View Slide

  3. View Slide

  4. 2015

    View Slide

  5. Version 2.0
    ✅ ❌

    View Slide

  6. 2016

    View Slide

  7. Version 3.0
    ✅ ❌

    View Slide

  8. You want to be on as
    many platforms as you
    can.

    View Slide

  9. ?

    View Slide

  10. 4%
    77%
    19%
    iOS Android Other
    Show how many users are on android
    mobile.

    View Slide

  11. Should we go Native
    or
    React Native?

    View Slide

  12. Pros
    1. The whole team can maintain the codebase and
    contribute

    2. Cross-platform

    3. Compiles to native code

    4. Reuse existing native and web logic

    5. Speed up development

    View Slide

  13. Cons
    1. Not a mature technology

    2. Smaller community

    3. Still need native devs at some point

    View Slide

  14. 0
    Lines
    of platform specific code

    View Slide

  15. View Slide

  16. Structuring the
    Project

    View Slide

  17. –W.Edwards Deming
    “If you can’t describe what you are doing as a
    process, you don’t know what you are doing”

    View Slide

  18. View Slide

  19. Components

    View Slide

  20. 1. General components

    View Slide

  21. View Slide

  22. 1. General components

    2. Wrap 3rd party libraries

    View Slide

  23. View Slide

  24. 1. General components

    2. Wrap 3rd party libraries

    3. Express domain concept

    View Slide

  25. View Slide

  26. 1. General components

    2. Wrap 3rd party libraries

    3. Express domain concept

    4. Handle platform specific UI

    View Slide

  27. 99% of the platform specific code is
    in Components

    View Slide

  28. View Slide

  29. View Slide

  30. Modules

    View Slide

  31. View Slide

  32. Screen
    Action
    Reducer
    Selector
    Constants

    View Slide

  33. Navigation
    is a module

    View Slide

  34. View Slide

  35. Navigation in Redux

    View Slide

  36. View Slide

  37. View Slide

  38. Thank you!

    View Slide