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

Alexey Kureev, Mike Grabowski, Publitas / Callstack.io, Amsterdam / Wroclaw — Solving a Tooling Problem For React Native

Alexey Kureev, Mike Grabowski, Publitas / Callstack.io, Amsterdam / Wroclaw — Solving a Tooling Problem For React Native

Alexey Kureev, Mike Grabowski, Publitas / Callstack.io, Amsterdam / Wroclaw — Solving a Tooling Problem For React Native

Unfortunately, React Native, being open-sourced last year, still suffers from the lack of great unified tooling. Managing native dependencies, adding custom fonts, just to name few, are the most common things that require you to know a lot of Objective-C and Java. This talk addresses to solve React Native tooling problems.

React Amsterdam

April 21, 2016
Tweet

More Decks by React Amsterdam

Other Decks in Technology

Transcript

  1. Solving a react-native tooling problem Mike Grabowski @grabbou Alexey Kureev

    @kureev React Amsterdam 2016
  2. Mike Grabowski @grabbou Alexey Kureev @kureev 2

  3. Tooling is important 3 Motivation The language or a framework

    is as good as it’s tooling and ecosystem. Without it - it’s worth nothing.
  4. Dependencies 4

  5. 5 $ react-native init MyApp

  6. $ npm install react-native-side-menu 1. Install package using npm: import

    SideMenu from ‘react-native-side-menu’; 2. Import package where it’s needed 3. Profit! Dependencies 6 Motivation
  7. 7

  8. $ npm install react-native-vector-icons 1. Install package using npm: import

    Icon from ‘react-native-vector-icons/FontAwesome’; 2. Import package where it’s needed Dependencies 8 Motivation
  9. 9

  10. 10 React Native modules are more complex than JavaScript modules

  11. 11 React Native module JS module

  12. 12 JS Platform code Assets react-native-side-menu or react-native-navbar react-native-blur or

    react-native-camera like react-native-vector-icons
  13. 13 JS Platform code Assets JS JavaScript Module React Native

    Module
  14. Platform code Assets This parts require a post-processing 14

  15. Platform code 15 Post-processing

  16. Platform code 16 Post-processing

  17. Platform code 17 Post-processing

  18. 18

  19. 19 https://github.com/rnpm/rnpm

  20. 20 $ rnpm install react-native-vector-icons

  21. 21

  22. Features 22

  23. High adoption 23 Features 1. No config required $ npm

    install -g rnpm 2. Codebase agnostic $ ls ./my-app $ // code structure is up to you
  24. Plugins 24 Features

  25. Parameters 25 Features

  26. Parameters 26 Features

  27. Unlink 27 Features

  28. What’s next? 28

  29. Linking core libraries 29 What’s next

  30. One tool to rule them all 30 What’s next

  31. Thank you 31

  32. Questions? 32 Also ask on twitter
 #reactamsterdam