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
Solving a react-native
React Amsterdam 2016
Hey, so today we are here to talk about tools and how that speciﬁcally relates to React Native.
But ﬁrst, 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
Tooling is important
The language or a framework is as good as it’s tooling
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
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…
Nowadays, react-native app mostly consists of two key parts - a third party modules that we use to optimize our own eﬀorts and a business logic of the app itself.
We already have a very good tool in place…
$ react-native init MyApp
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 ﬂow with a main screen and a simple
As a starting point, let’s scaﬀold an empty app with `$ react-native init`.
$ 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
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
And that’s probably your desired eﬀect. 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!
$ 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
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.
…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!
React Native modules
are more complex than
That happens because some react-native modules are more complex than a JS ones. Let me try to illustrate this:
And here is a react-native module:
react-native module structure:
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 speciﬁc code.
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 ﬁnal 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…
This parts require a post-processing
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 ﬁgure 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
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”
Then - you have to add in a static library that project deﬁnes to your build steps
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?
Yeah Mike, for me it was a pain to ﬁgure 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 ﬁgure out how to link a react-native module with platform-speciﬁc code
for a ﬁrst time.
And to improve this experience, we made an…
RNPM stands for improving our developer experience by automating a management process of react-native modules.
But enough of theoretical stuﬀ 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:
$ rnpm install react-native-vector-icons
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?
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 ﬁrst place.
1. No conﬁg 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 conﬁg - that means there are no `rc` ﬁles 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…
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.
You can install any 3rd party plugin, in this case - we are going to install an app hub to ship our OTA update
As you can see, after `npm install` ﬁnished, rnpm —help now prints our new command
Sometimes after installing a module, you have to set up an API token or some sort of conﬁg required.
Take a look at the example above - we have installed two modules - Google Analytics and AdPackage - both require diﬀerent 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…
with `rnpm` - you can just answer some interactive questions prepared by the package author and forget about the rest!
As you can see from the git diﬀ - MyAwesomeToken has been inserted for you by RNPM
Sometimes you probably wanted to try out a module, spent few times installing it and then - realised it’s no longer a good ﬁt 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.
What’s next, then?
Well.. that’s a good question! Alexey - what’s yet to come?
Linking core libraries
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:
One tool to rule them all
Currently, every react-native developer have at least 2 command-line tools:
- 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 oﬀer 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 oﬀ and say…
Also ask on twitter
Okay, I think time for questions :D