Solving a react-native tooling problem

React Native itself is relatively young, especially when compared to native SDKs and tooling around them like Android Studio or Xcode just to name few. As a result, we are often forced to do a lot of repetitive tasks all over the codebase, just to deal with non-Javascript code.

During our talk, we will show you the tool we have build and called `RNPM` that is to solve these problems. We will also explore the future of tooling in React Native itself

Transcript

1. Solving a react-native
   tooling problem
   Mike Grabowski
   @grabbou
   Alexey Kureev
   @kureev
   React Amsterdam 2016
   Hey, so today we are here to talk about tools and how that specifically relates to React Native.
   

   View Slide

2. Mike Grabowski
   @grabbou
   Alexey Kureev
   @kureev
   2
   But first, let us introduce ourselves:
   
   I’m Mike, I am a developer from Poland, a part-time student, I work with React Native full-time and work in the open source with Alexey…
   
   And, as you could guess, I’m Alexey. I’m a Russian spy living in Amsterdam, working as a software engineer for Publitas by day and contributing awesome OS projects
   by night.
   

   View Slide

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.
   So, we chose a «react-native tooling» as a topic of our talk. React-native as itself is a pretty new technology and we experience a gap between community needs and an
   actual tooling that we have nowadays.
   
   But why tooling is important?
   
   Because that’s one of the key factors that makes languages and frameworks go mainstream. Think Meteor and it’s ecosystem, or Java and powerful IDEs. That’s what
   matters.
   
   We know that tooling in general is a very big area and it’s impossible to cover in 20 mins. So today we’re going to tackle only one part of it…
   

   View Slide

4. Dependencies
   4
   … dependencies!
   
   Nowadays, react-native app mostly consists of two key parts - a third party modules that we use to optimize our own efforts and a business logic of the app itself.
   
   We already have a very good tool in place…
   

   View Slide

5. 5
   $ react-native init MyApp
   …npm!
   
   So, let’s try to go forward using it and build a simple sample app. Do you guys use Slack? Our application will consists of the similar flow with a main screen and a simple
   side-menu.
   
   As a starting point, let’s scaffold an empty app with `$ react-native init`.
   
   

   View Slide

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
   Let’s start from installing a side-menu component:
   
   1. We run npm install as usual
   
   2. Import module in the code where we need it
   
   3. We’re ready to go
   

   View Slide

7. 7
   And that’s probably your desired effect. On the left side, there’s our menu.
   
   But what if you wanted to add a vector icon to your app, so users can open menu by tapping a hamburger icon?
   
   Sounds good so let’s add it!
   

   View Slide

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
   We are going to install an awesome `react-native-vector-icons` module by doing exactly the same steps as with side-menu.
   
   We install, import - let’s reload the app.
   

   View Slide

9. 9
   …and you see a red screen!
   
   The question is `why` ? Didn’t we just install two packages from npm registry? Is that a developer error? 

   

   I believe Alexey might have a good explanation for that!
   

   View Slide

10. 10
    React Native modules
    are more complex than
    JavaScript modules
    That happens because some react-native modules are more complex than a JS ones. Let me try to illustrate this:
    

    View Slide

11. 11
    React Native
    module
    JS
    module
    … this is a JavaScript module. It consists of plain JavaScript code and maybe other JavaScript modules, but that’s besides the point.
    
    And here is a react-native module:
    
    We see that JavaScript is a part of react-native module, but the module itself may contain a way more different stuff in it. To figure it out, let’s take a look on an average
    react-native module structure:
    

    View Slide

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
    First of all it’s a JS code. Sometimes JS is the only part of the react-native module. These kind of modules can be installed using an npm (like react-native side menu or a
    navbar). These modules are built on top of the react-native platform components and they’re literally nothing else but a custom composition of standard elements that we
    have out of box.
    
    The next part of react-native module is a platform specific code.
    
    Here we’re talking about Obj-C, Swift or Java code. It interacts with a platform API to expose some new functionality to JavaScript.
    
    A good example here would be a react-native-camera or blur module. For instance camera one: we don’t have an access to device camera out-of-box with react-native.
    But this third part module actually bridges this gap. And that’s why we need a platform code here - it actually do the trick by exposing a native platform functionality to
    the JS interface.
    
    And a final part - assets. It can be anything: images, audio, video, fonts - depends by the plugin. A good example would be a react-native-vector-icons. It use vector-font
    assets to expose you some icons by default.
    
    Now, we can draw a line…
    

    View Slide

13. 13
    JS Platform
    code
    Assets
    JS
    JavaScript Module React Native Module
    …between pure javascript and react-native modules. But why am I telling you this?
    

    View Slide

14. Platform
    code
    Assets
    This parts require a post-processing
    14
    These parts of the react native module requires some additional steps after npm install. npm doesn’t care about the package’s content. I mean it will download a package
    for you and resolve its dependencies, but nothing else. So, let’s figure out what actually needs to be done there!
    
    We don’t want to go deep into this, but just for a quick overview, Mike will tell you how to link a dependency on iOS
    

    View Slide

15. Platform code
    15
    Post-processing
    Mike: So on iOS, there’s quite a lot going on. The way we are adding dependencies is the old-school way - or, in other words - the way we used to link modules before
    CocoaPods arrived back in the day.

    

    First thing you do is you drag `xcodeproj` you want to add to your group, in this case “Libraries”
    

    View Slide

16. Platform code
    16
    Post-processing
    Then - you have to add in a static library that project defines to your build steps
    

    View Slide

17. Platform code
    17
    Post-processing
    And… of course - update header search paths, so you can actually reference native code that module exports in your code.
    
    So, how do you like it, Alexey?

    

    View Slide

18. 18
    Alexey:
    
    Yeah Mike, for me it was a pain to figure out how to link those modules. No, really, if for iOS you have at least a guide (as mike showed), then for Android you literally have
    nothing. That’s not a DX we want! You may think I’m a dumb, but it took me over 30 minutes to figure out how to link a react-native module with platform-specific code
    for a first time.
    
    And to improve this experience, we made an…
    

    View Slide

19. 19
    https://github.com/rnpm/rnpm
    …RNPM!
    
    RNPM stands for improving our developer experience by automating a management process of react-native modules.
    
    But enough of theoretical stuff for now, let’s take a look on some examples.
    
    Do you remember the red screen we had with vector-icons? Last time we used `npm install` and it failed - see how `rnpm` can help here:
    

    View Slide

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

    View Slide

21. 21
    RNPM took care about all these manual steps we were talking above!
    
    So now, when we know something about our RNPM I think it’s a good time to tell you about features RNPM has. Would you mind, Mike?
    

    View Slide

22. Features
    22
    Thanks Alexey!

    

    So - `rnpm` has a bunch of features - it was built by developers for developers.
    
    Today, we are going to discuss only key points of `rnpm` to give you a better idea what was our motivation in first place.
    

    View Slide

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
    In order to make `rnpm` popular - we wanted it to be as easy to install as possible. 

    

    That involves these two important steps:
    
    1. No config - that means there are no `rc` files nor custom settings you have to specify. You just need to install it with `npm` and it’s ready to use!
    
    2. Codebase agnostic - the issue we often had with e.g. react-native run-ios was that it assumed my project was in `ios` folder. We wanted to leave code up to you - as
    long as you have Xcode project somewhere in any of the folders, we will detect it & work as is.
    
    Back to the videos…
    

    View Slide

24. Plugins
    24
    Features
    Important part of a stable project is its core - we wanted it to be as minimal as possible leaving further customisation up to users!
    
    That’s why we only ship with `link` command by default.
    

    View Slide

25. Plugins
    25
    Features
    You can install any 3rd party plugin, in this case - we are going to install an app hub to ship our OTA update
    

    View Slide

26. Plugins
    26
    Features
    As you can see, after `npm install` finished, rnpm —help now prints our new command
    

    View Slide

27. Parameters
    27
    Features
    Sometimes after installing a module, you have to set up an API token or some sort of config required.
    
    Take a look at the example above - we have installed two modules - Google Analytics and AdPackage - both require different set of parameters.

    

    The Google Analytics requires you to provide a Google UA code whereas the AdPackage expects Activity instance.
    
    

    Normally, you’d go to your native code and specify that manually, as in this example, however…
    

    View Slide

28. Parameters
    28
    Features
    with `rnpm` - you can just answer some interactive questions prepared by the package author and forget about the rest!
    

    View Slide

29. Parameters
    29
    Features
    As you can see from the git diff - MyAwesomeToken has been inserted for you by RNPM
    

    View Slide

30. Unlink
    30
    Features
    Sometimes you probably wanted to try out a module, spent few times installing it and then - realised it’s no longer a good fit for your project?

    

    In this case, `rnpm` also has a solution! It provides a special `unlink` command that can remove any previously linked module for you.
    
    

    View Slide

31. What’s next?
    31
    What’s next, then?
    
    Well.. that’s a good question! Alexey - what’s yet to come?
    

    View Slide

32. Linking core libraries
    32
    What’s next
    One of the big features we are currently preparing for you is - linking core libraries & frameworks for iOS.
    
    

    If you ever used any complex native module for iOS, like a code-push, you have seen in their guides a special step asking you to add these extra libraries.

    

    This is not only highly repetitive but also hard to keep well organized when you remove modules in the future - hard to see at a glance who is using what.
    
    We want this to be a part of `link` pipeline and happen automatically.
    
    But that’s not the only feature in our roadmap! We have one more exciting thing for you today:
    

    View Slide

33. One tool to rule them all
    33
    What’s next
    Currently, every react-native developer have at least 2 command-line tools:
    
    - npm
    
    - react-native cli
    
    And now we’re introducing a third one. In my opinion, that sucks. Nobody wants to have tons of tools. And we’re glad that some guys from the react-native core team
    share our opinions on this.
    
    Recently we received an offer to merge rnpm into react-native core. And I’m really excited to tell you about it! Because that means that you’ll have the whole functionality
    we described above right out-of-box by using react-native cli, without any additional installations. Cool, right?
    
    So, on this positive note I think we need to round off and say…
    

    View Slide

34. Thank you
    34
    Thank you!
    

    View Slide

35. Questions?
    35
    Also ask on twitter

    #reactamsterdam
    Okay, I think time for questions :D
    

    View Slide