Overview
Today I’ll do a quick highlight of an impressive tool to help with React Native development. Created by the group at Exponent.js, this tool helps you kick the wheels with React Native. While it is still in early development, what it provides is very promising and can help existing React Native developers.
React Native
If you are not familiar with React Native, it is a cross platform tool from Facebook to build native apps. Not hybrid apps, not web apps, but native apps for iOS and Android. Your UI are native components for the OS with your business logic code running in JavaScript Core. The main difference between a React.js app and a React Native app is your render function. You can reuse most of your code between the two platforms. Visit the official site to learn more about React Native.
React Native gotchas
You do need a Mac to build iOS apps, along with XCode. Android support is available on Windows.
Exponent XDE
The XDE is a tool from Exponent JS to help you develop React Native applications. iOS development is supported with plans for adding Android support in the future. Head on over to exponentjs.com to learn more and download the XDE. The XDE only supports Mac with plans to extend support to Windows and Linux. The XDE has a companion app to run on your iPhone. This app allows you to develop your React Native app without ever building it. If your app uses custom modules or extensions, you cannot use the XDE companion app to test your application.
The tool
The XDE provides a wide array of features to help with your development. When you create a new project a simple template that showcases some of the features of React Native. It provides the bare bones files your project needs; it does not include the whole project that React Native gives you when you use the CLI tool. This allows you to develop your project only editing the JS code. The XDE is not an “IDE”, but a helper tool for developing your React Native app. It lets you use any editor you want and piggy backs on the React Native debugging already provided. The power is the companion app and extra magic the XDE provides.
The basics
At a low level (not really), the XDE handles most of the overhead for React Native development. When you open a project it starts the React Packager for your application. This will serve up the webpack JS code for the Expononet companion application. You can serve your code via LAN, localhost, or using ngrok which is provided for you. Ngrok handles any proxy and firewall issues for you. You use the URL provided in the companion app and it will let you test outside your LAN, regardless of any settings you have.
The project management is extremely lightweight. They store global settings inside a $HOME/.exponent directory and do not clutter your project with additional files. Additionally, they will launch the terminal or a code editor of your choice. If you have Atom installed, it kicks out to that first (or it did for me) regardless of your default.
The Cloud
Exponent also provides a service called exp.host. This allows you to push your project assets up for anyone to test anywhere. Each project is stored under your account and accessible with a known URL. Projects pushed up are available in the companion app for testing. You can also send a link to email or your phone for testing on device. It will launch the companion app via the exp:// protocol handler.
The Companion app
This is a key tool to help with development. You can install it on the iOS simulator or get it from the store for your iPhone. You can pick a URL to launch inside the app which points to your JavaScript bundle from webpack. This can be your local machine from the XDE or a hosted document in the exp cloud. Anyone can install the companion app from the store, which is great when working with remote parties. You can send them a link to launch and they can run your code without having to build an IPA.
Debugging
The companion app has debugging enabled by default. Simply shake your device to bring up the React Native developer menu. This is an amazing tool for working with React Native. This feature is available in the companion app from the store; no need to build your own custom version with certificates. The React Native site goes into great detail about debugging, so head on over to the docs to learn more.
The Future
The future for the XDE and React Native look great. The team has a slack channel to interact with users and are looking for feedback. I’m anticipating their Android release to help speed up development of cross platform applications. They’ve also stated they may look into cloud build solutions, which puts the XDE and React Native against some other great tools (Phonegap Build/Intel XDK).