Solving a react-native tooling problem

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

E568ea5f2735715aa668253c1698a35c?s=128

Mike Grabowski

April 16, 2016
Tweet

Transcript

  1. 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. 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. 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. 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.

    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. 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.

    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. 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.

    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.

    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.

    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.

    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.

    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. 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. 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. 16.

    Platform code 16 Post-processing Then - you have to add

    in a static library that project defines to your build steps
  17. 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.

    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.

    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. 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?
  21. 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.
  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 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…
  23. 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.
  24. 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
  25. 26.

    Plugins 26 Features As you can see, after `npm install`

    finished, rnpm —help now prints our new command
  26. 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…
  27. 28.

    Parameters 28 Features with `rnpm` - you can just answer

    some interactive questions prepared by the package author and forget about the rest!
  28. 29.

    Parameters 29 Features As you can see from the git

    diff - MyAwesomeToken has been inserted for you by RNPM
  29. 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.
  30. 31.

    What’s next? 31 What’s next, then? Well.. that’s a good

    question! Alexey - what’s yet to come?
  31. 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:
  32. 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…