Building 3 React Native Apps in One Summer
TL;DR React Native allowed our team the ability to pivot into a mobile solution that we’re proud to have built. It’s easy to learn, has a growing community of supporters, and is itself agile with it’s component-based hierarchy.
Adaptability is Key
The web is about learning & adapting. This holds true both as web surfer & web developer. As a surfer, you adapt to every device, watch, car, & who know what that the “web” is increasingly available on these days.
As developers we’re agile and always changing. Nothing is meant to last. We program using technologies that aren’t going to be “best practiced” for another 3 years, and we thrive on that.
Facebook is that. Or the opposite of that. I’m not sure which… I signed up for “The Facebook” in 2004 when I was in college. I thought for sure it’d be gone one day, like MySpace or AOL before it. People have been saying for years it’ll go away. But it never goes away. Not even when it’s so common that your grandma has a Facebook account.
It’s because they adapt. They’re agile. And they go against the grain to solve the large-scale hard problems.
My Background in “Native vs Hybrid”
Previously, we had a Facebook-esque experience writing a hybrid mobile app. The development cycle was easy & quick enough. The problem was with the application itself. It didn’t look native. It didn’t act native. And it was riddled with inconsistencies and bugs (many “unfixable” within the given framework). The end result was an application we weren’t proud of enough to promote.
As an early stage startup, you always face running out of money. And for us, avoiding that meant proving we have a mobile presence. We weren’t able to accomplish that with our previous hybrid PhoneGap app. In the spring, we started investing native solutions. We decided to focus on iPhone only to start and even lined-up a native developer to build an app for us. Even though we employed two full-time, highly capable developers, this was necessary because we were unversed in native iOS development. And frankly, we couldn’t risk building it ourselves because of time, resources, the unknowns, & the learning curve of Objective-C programming.
React Native is so 🔥
React Native was open-sourced on March 26 and we got to work immediately, building three React Native apps over the summer.
First, I will note that we did look into other solutions, such as NativeScript. We went with React Native because it’s truly easy to learn. Along with a handful of other reasons (see Further Reading).
On April 1st, we started developing a live video streaming app similar to Periscope, which had coincidentally launched the same week. This app was ultimately not the right direction for us but it did allow us to get our feet wet, developing our first “native” app with React Native to 80% completion.
Initial Impressions: The app operated smoothly. Simple concepts, like page transitions which were previously very difficult, became easy if not “free”. And it was truly easy to learn.
“We can build an app in one week”
In mid-June our strategic focus shifted towards a companion chat app that would accompany our existing website application, Tackk.com. The only reason we even entertained the idea was because in 2 months time our comfort & confidence level in building with React Native allowed us to confidently say, “we can build that in a week or two”. And we did.
This was a simple chat application that communicated with an existing API, but it proved that we could move very quickly with React Native.
Neither of these application have made it to the App Store yet because in mid-July all our focus was turned to the 3rd app of the summer, Squad.
Squad Development & Take-aways
Thanks in part to React Native, we now had the confidence in strategy aligned with the confidence in technology.
SQUAD is a social group app that allows you to request an update from your closest group of friends (you typically get updates on their time elsewhere). Here are my main take-aways from these 3 building experiences:
The Learning Curve: AKA: What curve? … Neither developer on these projects had previously used ReactJS. The only prior experience necessary was HTML, CSS, and of course JavaScript (you could even use ES6). Although, you will likely get your feet wet in native Objective-C or Java sooner or later.
React Components: Some call React’s approach unorthodox (see Further Reading). My thoughts here are: To each, their own. React’s structure & component lifecycle makes complete sense to me. It feels natural to put all the code (template, logic, & styles) for a component together in one place. This goes against conventional code separation practices. But in my experiences this summer, this structure allowed us to be more agile in development & maintenance. A number of components from the original app started in April were placed seamlessly into the final production app.
The Cross-Platform Promise: “Learn once, write everywhere” … I believe it is a bit unrealistic to “write once, deploy everywhere”. It’s even tough to do that for a web browser let alone apps on an endless amount of devices.
We have just released our iOS app and will likely be exploring Android very soon. My sense is that most of the app will be very similar. However, there are a few instances where we used native Obj-C that bridges to React Native and those components would require some Java development to replicate.
The Bridge: A lot of app frameworks make the promise (if not, silently) that you won’t need to write native code. While that is highly appealing, I think we’ve already proved that native wins over hybrid (at least for now, probably always). This is a huge win for React Native because, yes, you can write an app without having to write your own native code but it’s also provides a great opportunity to get your feet wet. We’ve written numerous bridges to native APIs for importing contacts, image choosing, listening for screenshots, etc.
The Community: It’s full of early adapters + cutting edge developers. As far as I’m concerned Facebook developers are the cream of the crop, by the nature of their business. They’re running the worlds largest website, the worlds most used app, AND the worlds most used chat app… and oh yeah, Instagram. Actually, I believe React came about as a collaborative effort with Instagram (Update: Instagram did play a pivotal role in the open-sourcing of React, though it was originally conceived internally at Facebook). The community is also growing… You will be able to find solutions by Googling for them and you can also talk with other RN devs numerous ways, including the Reactiflux Discord channel.
Update: The Not-So-Good…
After I published this, I was reminded by Vjeux that it is still super early & it’s helpful to talk about that… Here are a few things that didn’t go so well:
- Animations are not easy (especially if you’re used to jQuery & desktop websites). They have improved a lot already. And, it is a bit fun after you get the hang of it, but after 4 months I’m still trying to get the hang of it!
- Text Inputs can be tricky. Centering text, customizing the font, auto-growing the input, limiting the input… All things that caused head-aches at one point.
- Originally there were a bunch of missing features that were documented but not in the open-source version of React Native. This is improving.
- No first class support for some common things apps use/need, e.g. Camera, AV Player, etc
- Borders certainly have some issues, but I think they’re working on it.
- Upgrades are not terribly fun, but that’s mainly due to 3rd party modules & their dependencies.
A Final Thought: 👍👍
I now have an iOS app & a tiny bit of native Objective-C programming on my résumé. And I’ve started using React for website projects as well. The pros definitely out-weight the cons here.
Further Reading:
- Why React Native might become the first multi-platform framework that actually works: https://medium.com/@skvarekm/whyreact-native-might-become-the-first-multi-platform-framework-that-actually-works-ae819bf32721#.u226wehm6
- Haters gonna hate: https://twitter.com/vjeux/status/655128064754499588
