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.
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.
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…
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…
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`.
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
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!
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.
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!
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:
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:
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…
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?
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
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”
16. Platform code 16 Post-processing Then - you have to add in a static library that project defines to your build steps
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?

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…
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:
20. 20 $ rnpm install react-native-vector-icons <click and talk as video progresses>
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?
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.
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…
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.
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
26. Plugins 26 Features As you can see, after `npm install` finished, rnpm —help now prints our new command
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…
28. Parameters 28 Features with `rnpm` - you can just answer some interactive questions prepared by the package author and forget about the rest!
29. Parameters 29 Features As you can see from the git diff - MyAwesomeToken has been inserted for you by RNPM
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.
31. What’s next? 31 What’s next, then? Well.. that’s a good question! Alexey - what’s yet to come?
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:
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…
34. Thank you 34 Thank you!
35. Questions? 35 Also ask on twitter
 #reactamsterdam Okay, I think time for questions :D