Announcing Mobile Center for React Native

Posted by Parashuram on November 16, 2016

Today at Connect, we announced Visual Studio Mobile Center, a collection of free services designed to help iOS and Android developers deliver 5-star apps more quickly by automating all-the-things (e.g. builds, testing, distribution, codepush, crash reporting). On this blog, we’re pleased to announce that React Native is supported as a first-class citizen of Mobile Center, side-by-side with native languages like Objective-C, Swift and Java.

This is our first step toward realizing a vision that gives React Native developers an entire toolchain built around development velocity. Through shared code, test automation, web-like publishing, codepush-aware analytics and crash reporting, we want to bring React Native to the mainstream.

Principles

When our team first conceived Mobile Center, we wanted to deliver an experience that feels at-home with other iOS and Android development workflows. To that end, we established a set of six guiding principles that would shape our service:

  1. Great developer experiences. Docs, setup, onboarding and support should remove complexity and help you build great apps quickly.
  2. Public APIs for everything. All services should be accessible via APIs. Our CLI, SDK and dashboard are all consumers of the same APIs available to you as a developer
  3. Great UX, beautiful UI, very fast response times
  4. Unix-like philosophy of interoperable, single-purpose tools (“beacon services”)
  5. You own your data
  6. Every service should enable exemplary mobile experiences for your business

We hope you’ll find Mobile Center meets the spirit of these principles throughout the service. Let’s take a quick tour of what’s available today, as we embark on the journey to build a better experience for React Native developers everywhere.

React Native app in Mobile Center

Build & Continuous Integration

If your React Native application is hosted on Github, Mobile Center can be configured to automatically build and sign your React Native apps on every commit. Getting set up is very simple and most of the configuration is automatically detected.

Configuring React Native builds in Mobile Center

While only iOS continuous builds are supported today, we are planning to add support for Android builds soon. We are also working on adding support to run Jest tests during every commit for React Native applications.

Building React Native applications generate .ipa files in addition to artifacts like symbols and source maps that can be fed into the next steps of the pipeline. The .ipa files built using this continuous integration system can also be distributed to end users or beta testers using Mobile Center.

We are also working on better integration with the Code Push service. If the resulting build artifacts do not contain any native changes, you will be able to automatically upload them to the Code Push deployment service.

Support for building React Native Android apps will be available soon.

Crashes and Analytics

To get more out of the mobile apps, Mobile Center also offers two SDKs to collect application crash information and analytics about usage of the application.

Once added to the application, the Crashes SDKs can send both native and JavaScript stack traces to the server. Using source maps generated in the build step, the exact statement in the source files causing the application to crash can be identified. Even if you use any other build service, Source Maps can be uploaded and will show up alongside the Crash information.

We are also exploring the possibility to record other useful information, including the state of the JavaScript virtual machine when a JavaScript crash occurs. The crash information also has vital details, including device information and environment.

Crashes UI for React Native in Mobile Center

The Analytics SDK lets uses send events back to Mobile Center that can be visualized to assist vital business decisions. It also helps collecting information like device information, active users, session length, etc. We are also working on integrating the SDK with React Native navigators to enable advanced features like page tracking and user workflows.

Analytics UI for React Native in Mobile Center

What’s next

The features described above are just the start of the set of “DevOps” tools that we are building for React Native. Some of the other features planned include bringing Code Push experience into this single dashboard, and enabling analytics and crash tracking alongside Code Push versions.

Testing is a key part of ensuring the quality of React Native applications. We are exploring the possibility of using Jest to perform snapshot based, record/replay integration testing that can be run on multiple devices on the cloud. Using Enzyme and Jest would provide an integration testing API that is much more tailored for React Native than Appium.

We are already working with members in the community who are trying out these services. We would love to hear how we can make your React Native workflow more productive – please sign up for Mobile Center and we would love to work with you.

Come build with us: Request an Invite or talk to use on the #codepush channel on the React Native Discord.