React Native is Ready for Prime TimeTeam TechnologyJames IdeExponent

Bio (James Ide)Open SourceCore contributor to React Native~150 commits, help with releases

Software DeveloperLibraries & systems for product development

Industry ExperienceGoogle, Microsoft, Facebook, ExponentWeb Mobile

For context, Id like to tell you a bit about myself. Im a core contributor to React Native, with about 150 commits to GitHub, and I help with releases.

By trade, Im a software developer and specifically am interested in libraries and systems for product development.

My industry experience includes working at Google, Microsoft, Facebook, and most recently Exponent. I was really lucky to see the engineering org in each company operates and this shaped my own opinions on engineering teams. The other thing about my industry experience is that for most of my career Ive done web development. It was only around 2.5 years ago that I shifted my focus to mobile, and Im going to talk about one reason for that change.

A New Era

In the past few years weve seen some significant changes in technology and I want to talk about two of those changes.

The first and most significant is mobile. Think about the next billion computers. Most of those computers are going to be mobile devices. And for many businesses, mobile revenue streams are growing faster than their desktop ones. In fact some multi-billion dollar businesses make more money from mobile than desktop. Mobile.

The second significant advance is React Native. On a technological level alone React Native makes several profound leaps forward. And it makes these leaps together, all at once. React Native is challenging conventional wisdom on all cylinders.

But React Natives effect extends beyond the code. React Native will change the way engineering teams are organized. So today, lets talk about teams and technology.

First I want to talk about React Native as a technology. Some of you dont need convincing that its an awesome technology. For the rest of you, let me tell you why React Native is awesome by starting off with how empowering it is.

A higher ceilingEx: native maps, camera, video

Extensible runtimeEx: custom layout algorithms

Mobile firstTouch & gesturesReact Native cf. DOM

Most of you watching this talk are web developers today. So I want to begin by contrasting React Native with the DOM.Higher ceiling: you can go further with React Native than you can with HTML-centric technologies. For example, want to embed Apple or Google Maps in the middle of your component hierarchy? Or a camera or inline video player? You can do that with React Native today and ship next week to all of your users on your own schedule.Part of what enables this is React Natives extensible runtime: The ability to add native capabilities to the React Native runtime is very powerful. Who remembers when browsers didnt support border radius, or flex box wasnt in every modern browser? We had to wait for browser vendors to agree upon a spec, implement the spec, for users to upgrade, and finally after a couple years could we reliably use these features. With React Native, you can fork the layout system and ship it right away. You could implement a new layout algorithm like grid layout and have it in your users hands next week instead of next year.Mobile first: React Native apps just feel better. More accommodating to touches and gestures. React Native components feel responsive by default.

But if you take a look at the most used mobile apps, most of them arent built with the DOM. Theyre built with native technologies.

App DevelopmentCross-platformFast feedbackContinuous deployment

PerformanceMultithreaded. P = CVf

React Natives DevelopmentOpen-sourceGuidedReact Native cf. Native

So lets compare React Native with Android and iOSs native SDKs.App development is great with React Native. Nick Schrock mentioned a lot of these points yesterday and hes right.Cross-platform: You can have a single code base for iOS and Android. At the same time, React Native embraces platform differences with platform-specific native modules.Fast feedback: the window of time from editing your code to seeing its effects in your app is significantly shorter than it has been with the native toolkits. Edit your code, boom, your app reloads its JavaScript.Continuous deployment: JavaScript deployment is much faster and less disruptive to your users than the App Stores. Yesterday we heard about Code Push and were fans of this idea at Exponent as well. Continuous deployment also has downstream effects on how people work. With continuous deployment, as a developer or a PM you worry a lot less about getting your code in before the next release.Mobile performance: React Native is multithreaded; in fact it currently uses three primary threads: the JS thread, the shadow thread and the native UI thread. Interestingly, it separates the notion of the main thread from the UI thread. In React Native, the main thread runs JavaScript, while the UI thread runs the native UI code as with purely native apps.Mobile processors especially want to conserve power to increase battery life and reduce heat output. Easier to add more cores than increase frequency and voltage.Open source: can read the source code to understand its behavior. Can modify the source code to meet your own needs. Can send pull requests if you believe youve met everyones needs.Guided: The core contributors of React Native are actually using it in their production apps that are important to their companies. This is huge. For example, at Exponent we noticed that our JavaScript animations sometimes stuttered a little bit and we worked together with Krzysztof Magiera, who is another core contributor, to build stutter-free, off-thread, native animations. We shaped the API and feature set based on real use cases like an image gallery and the new Navigation component coming to React Native that Eric Vicenti shared with us yesterday.

If you couldnt tell, I believe React Native is a total game-changer.

Choosing React Native is one of the most important technical decisions you will make.

But theres a big question in the room.

Is React Native ready for production?Yes

And by this I mean, is it possible to build solid, high-quality mobile apps using React Native?

Yes.

I want to show you why we believe this. But first, just a little context.

Mobile App: ExponentLets you get and use things people have madeReact Native

Developershttps://exponentjs.comExponent

I work on this product called Exponent. Its a mobile app that lets you get and use things people have made with React Native.With Exponent, you build things with pure JavaScript, publish your code to our servers, and then anyone with Exponent can use the thing you built. Visit our site at exponentjs.com to learn more.One thing Id like to highlight is that the roadmap of Exponent is guided by real use cases. We want to understand the needs of developers and we believe the best way for us to do that is to build real apps on it. Real apps that are high-quality and going out to production. Id like to share two of these with you today.

Make someones day with a compliment

Austin KevitchBrighten

A few years ago, Austins friend passed away in an accident. In their grieving, his friends began sharing positive memories and Austin wished his friend could have seen the outpouring of kind and heartfelt messages.Austin set up a compliment box for people to anonymously write something nice about a friend and drop it in the box. People appreciated not just reading notes about them, but also writing the notes as well.Austin turned the compliment box into an iPhone app and people started using it to brighten someones day. But only some of their friends could use it. Remember? One of the problems with the iOS SDK is that it generally works only on iPhone. We wanted to fix that.

Made for ExponentPure JavaScript

ComponentsInfinite feedList of phone contactsBrighten

Screen recording on a Nexus 5XInfinite feed. Each cell can be a different height.Screens pop up from the bottom. Feels like a mobile app.List of contacts contains cells that are all the same height. Nearly zero scroll jank at 60 frames per second.Can jump between sections.

Create and share lists about anything and everything

The List App

Dev FlahertyB.J. Novak

On the right is BJ Novak. BJ is an actor, producer, writer, and once was a temp at a paper company. One thing BJ did was keep a lot of lists on his phone his favorite restaurants, movies he wanted to watch and he wanted to see his friends lists like this. So to bring his idea to a bigger audience, BJ started looking into making an app about lists.Along the way, he was introduced to Dev Flaherty, who had helped lead user experience at fab.com and had the background to bring the app to fruition. So they built it for iPhone.The attention to detail is great. Dev especially cares deeply about the user experience and the List App is very high-quality. Its really well-built and set a high bar for its Android version.On iPhone only, and again, we fixed that.

Made for ExponentRaising the ceiling

ComponentsInfinite feedImage galleryThe List App

Made for Exponent: Pure JavaScript. Taught us what we needed to improve about Exponent in order to build a complex app. If we could build List App, we could build a lot of other apps and werent going to hit a ceiling.Infinite feed with photos high-performance, low-memory custom ListViewsTap into a listImage gallery native animations in the latest version of ExponentThe Android back button does what users expectThe tab bar lets you switch between sectionsThis is not a demo. This is a complete, production-quality app.

How did we take React Native all the way to production?

I want to shed some light on this: how did we take React Native all the way to production?

By this I dont mean simply publishing an app. I mean creating apps with the quality and complexity that people expect from mobile apps, regardless of the technology used to make them. Our users dont give us a free pass just because were using a new technology.

React Native is only part of the story for success.

One thing we learned is that React Native is only part of the story for success.

The other part was our team. I was really lucky to be working with some excellent people on Exponent and the React Native versions of Brighten and List App.

In yesterdays keynote, Nick Schrock described the characteristics of future mobile engineering teams. For the rest of this talk, I want to share with you the lessons we learned from implementationthe executionof assembling an engineering team with expertise in React Native.

Personal QualitiesOpen to React NativeReact Native is very nascent

Unafraid to look under the hoodControl our destiny

Relevant backgroundsMobile. Games.

Lets start with the qualities in an engineer we found to be important.

Its so key that your team members are open to React Native. React Native is a new technology and does things differently than HTML or native iOS and Android. At the same time your team should choose React Native because they see its potential, and not to shy away learning native mobile development.

Theres a certain quality of being unafraid to look under the hood. Important to take initiative. React Native covers a lot of surface area because mobile APIs are huge! Understand how React Native works. You will need to write custom components that work well with the architecture of React Native. Youll need to diagnose performance issues at several levels of the client-side stack.

One of the best pieces of engineering advice Ive received is, the code is the documentation. This is especially true with React Native for several reasons, and that mindset has served us very well.

Sometimes you will need to fork and modify React Native we do it all the time. The React Native roadmap may differ from your own needs. By being proactive and able to address your own needs, you can take fate into your own hands instead of waiting for someone to implement features or fix bugs for you.

We also learned that experience with mobile or games is helpful. Games are interesting because of their tight resource constraints and emphasis on animations and share some similarities with mobile. For example, reusing views is a technique common to game development and high-performance React components.

But one thing we found that wasnt so important: is experience with React. People can learn React so quickly.

Success with React Native came from a hustler mindset, not experience with React

Mobile ExperienceNative developmentUnderstand capabilities and trade-offsExpectations

UX and designTouch & gesturesUser habits & behavior

With React Native, its really valuable to understand mobile development. For many years, I did mostly web development and it took me at least a year to become capable at mobile. I already had significant experience with Java, and Objective-C builds upon C, so learning the programming languages wasnt the hard part at all.

What is hard is learning how the various features of mobile apps are built. The iOS and Android SDKs are huge: for UIs alone, they each have their own system for views, gestures, and rendering. The way screens are organized into ViewControllers and Activities is different on each, with different life cycles, adding even more complexity because you have to think about *when* parts of your code are going to run. And of course, some features are easy to build with the native APIs and some are very hard so experience with mobile teaches you the trade-offs. It calibrates your expectations.

Similarly, mobile experience helps you critically reason about your apps UX and design. For example, a mobile developer is keenly in tune with the gesture handling that users expect from apps. At Exponent, one feature we added to React Native is called hit-test slop factor, which is a way to increase the hit boxes of buttons so that people can comfortably tap them with their fingers without the precision of a mouse.

So understanding what the native platforms do is super helpful when developing apps with React Native. If you have mobile experience yourself, we want those of you excited about and believe in React Native to contribute to the technology and push it forward.

If you dont have mobile experience, I believe youll be more successful by working with someone who does. Theyll bring valuable wisdom to the table.

Experience with mobile was more important than experience with web

So those are some lessons we learned about qualities and skills to look for in individuals. Now, Id like to share with you our lessons about teams.

How to Structure Team?Cross-platform responsibilitiesOwnership of features and APIsCoherence

Existing teamsConsider for new project

People are often responsible for work across both platforms. Lines of ownership are drawn between product features or APIs.

For example, one of our engineers, Brent, built our image gallery for both Android and iOS. One person, both platforms. At a product level, this meant that Brent was the owner of the image gallery user experience and had the agency to make changes as he saw fit.

We apply this to mobile APIs as well. Consider push notifications there are slight differences in capabilities across Android and iOS. By having one person take ownership of push notifications, we make it more likely that well create a consistent API across platforms. And as a cherry on top, since we use Node JS on the server, our engineers can work across stacks and up and down stacks.

We want product features, UI components, and APIs that are coherent, and its much easier to achieve that when one person is responsible for a given features vision.

This is primarily for new teams. If you have an existing org that is divided into iOS and Android subdivisions, you cant make this change overnight. This is partly due to people reasons and partly due to technical ones it will take time to build your cross-platform infrastructure and incrementally migrate your apps to a point where a re-org makes more sense.

Drawing lines of ownership between features instead of technologies encourages coherence across platforms

Cross-Stack EngineersStrengthsOrganizational liquidityEmpathy

ChallengesScope

SolutionStart small: pure JS one platform twoMindset. Hard work.

Up till now weve heard of full-stack engineers who work at various levels of your software stack. Id like to introduce the term cross-stack engineer. A cross-stack engineer is someone who works across stacks at the same level, notably Android and iOS. They have cross-platform responsibilities.

Organizational liquidity: how easy it is for people to switch responsibilities to satisfy their own interests and the needs of the team, and how easy it is for a company to reorganize its teams as needed. Weve found its much easier for someone to go from implementing a news feed to building user profiles than it is to go from Android to iOS or vice versa.

One of the downstream effects of cross-stack engineering is that people can more easily relate to each other about technical matters. This fosters a certain empathy, which is really nice.

Of course, cross-stack engineering is challenging because the scope of the underlying mobile platforms is huge. So my recommendation to you engineers watching this talk is to start with pure JS. You could try using Exponent. Then gradually work your way out to both platforms. And trust me, you will learn *a lot* at first.

And with that, again, the hustler mindset is so important. You have to want to do this and you want to work with people who are go-getters.

Cross-stack engineering is an opportunity that is blossoming with React Native

With React Native, it makes so much more sense for engineers to work across stacks. This is new on mobile. A new era.

This is our time.Thanks.James Ide / @jiExponent

React Native is a really special technology. Its influence extends beyond our code bases. React Native improves the way we work as mobile developers, and is changing the way we organize engineering teams.

And whats so exciting is that this tremendous opportunity is here today. React Native is ready for prime time. And all of us get to be the star.