Rapid iOS Prototyping with React Native at Codecademy
Codecademy switched to using ReactJS in mid-2014, and it’s been a great experience so far; all of our new frontend development is in React. In January, I headed out to California to speak about our experiences at ReactJS Conf. All the talks were great, but the keynote, in which the React team announced React Native, was particularly exciting. Writing native iOS and Android apps using ReactJS? Given our excellent experience with using React for the web, I was excited to see what it would look like on mobile.
Happily, our engineering team budgets time to focus on “Dev Days”: dedicated space for the engineering team to improve our existing codebase and experiment with new technologies. For my Dev Days project I decided to give React Native a spin. We don’t have any mobile engineers, despite having a successful iOS application. Wouldn’t it be awesome if we could take our frontend team’s knowledge of ReactJS and apply it to mobile development? I decided to find out what that might be like.
A Two-Day Prototype
A few months ago, two of my coworkers had proposed a mobile app, and even done some designs and user testing. I wanted to build out a prototype that represented a working version of that app, and time myself. What kind of resourcing requirements would we need to consider, if we built an app with React Native?
I spent two days on it. React Native is surprisingly easy to use, even in its current, sparsely-documented state.
(I have access to React Native because I attended the conference. The “code drop” is more of an alpha release though, and it’s being actively improved day by day. I won’t be sharing code samples or diving into details because it’s not really an appropriate time— that can wait til Native is actually open-sourced!)
The final result? Well, I didn’t achieve total fidelity to the mocks, but that’s okay. It works!
The prototype app is a simple HTML quiz; nothing fancy.
Working with React Native was interesting, to say the least. In many ways, it feels just like ReactJS for web. You open XCode and hit ‘run,’ but after that you can switch back into your usual text editor and work with ordinary Javascript files. One of the main pain points of developing for mobile is also eliminated. Instead of rebuilding your application to experiment with changes, just hit CMD+R, and the app refreshes almost instantly. The React team has also added some useful error messages and the ability to use Safari developer tools to debug your Native application.
Basically, it feels like web development, just targeting a different platform.
Using Facebook’s approach to CSS on Native was probably the most significantly different piece of the project. Everything in React Native uses a flexbox implementation for layout. Additionally, you have to use inline styles; your CSS becomes a collection of Javascript objects, essentially. I don’t mind this approach, but it did take some getting used to, and I’ll have to spend more time pondering best practices.
React Native is Important.
I’m a big fan of React’s approach to building user interfaces, so I’m happy to see React on mobile. I like that components are just little state machines, built one on top of the other; I like that it pressures you into writing better, more modular code.
For a small startup like Codecademy, being able to share expertise between frontend and mobile developers is also an intriguing opportunity. We currently have nine engineers, so our resourcing constraints are quite different from a company the size of Facebook. I don’t know if we’ll be using React Native for our next mobile offering, but it’s definitely a possibility that I’m excited about.
React Native has a lot of potential to change the way we think about a lot of things: how we write applications for multiple platforms, how we handle styling, what it means to prototype applications.
All in all? I’d call this experiment a definite success, and I’m excited to see what happens with React Native from here.
PS: Want to come work with me? We’re hiring.
