React Native at Codecademy
In the spring of 2018, we started thinking about the importance of daily practice when learning to code. How can you learn anything if you don’t think about it most days, especially something as complex and intricate as a programming language? We started thinking of practice as a kind of daily meditation, but instead of taking 10 minutes to find inner balance, we wanted learners to take time to review and practice coding every day.
So, we started building a coding practice app. The only issue was that I am not a Swift or Java engineer; I only have experience with JavaScript and React. With limited resources, we began prototyping with React Native. I have never been more impressed with a framework, its community, and what it can do.
What we built
We built an iOS and Android app that:
- Allows learners to log in with their Codecademy account, including third-party services like Facebook and Google.
- Shows a learner review and practice packs every day.
- Presents multiple choice quiz questions and fill-in-the-code questions where learners have to choose the right code for a collection of blanks.
- Tracks when a learner completes a practice and builds up a streak of completed days.
We developed all of the above features with React Native and Expo. (We love Expo; their tools are superb)
How long did it take?
Our app started as a side project by a designer and myself in February. We worked on the ideas and user stories for a few months in our free time while I built low-quality prototypes. Since we had full sprints during our days, we worked slowly and whenever we could. It meant working on nights, weekends, and early mornings.
Finally in April, we took off with an Alpha version. We found learners liked what we built, so in late May I began working full time on getting the app to Beta. Over the course of 2 months, we were able to ship a dual-platform (iOS and Android) app.
Toward mid-July, we added one more engineer to help with some of our authentication backend part-time.
It took us two engineers, one designer, and one PM two months to create our version 1.0.
Who is React Native for?
Recently we’ve read about Airbnb and Udacity removing React Native from their mobile applications. Both companies have dedicated native mobile teams and when they tried to incorporate React Native, it created complexity, issues, and development time. As they included more people and technologies, their process slowed and became more complicated. In addition, React Native focuses on lower level application features, like navigation, toggles, buttons, etc. A native team will be able to add those features easily, which left React Native to more complex features.
React Native occupies much of the same space that native development accomplishes. Using both equally means combining two solutions when only one is needed.
With the above, React Native has a huge upside for companies and people who have no native team and no preexisting app: resource costs.
Imagine you need to build a performant app in the span of a few months. You could assemble a team of 2–3 engineers to build iOS and Android versions natively. A team of multiple engineers across platforms will require more resources since those developers must constantly be in sync with each other. Additionally, the team would need more time to plan tasks with a PM and more time clarifying with a designer. All in all, building a native mobile app is an expensive company initiative. It requires a significant amount of people and time resources.
Instead, you could take one web engineer, a designer, and a PM, and let them loose on React Native. Since React Native targets both iOS and Android, all features on one platform are already on the other.
As a concrete example, Udacity stated that it took them 3–7 engineers over 18 months to build their app (they don’t specify when they reached 1.0 in their timeline). They had mainly native engineers who were learning React Native. In comparison, it took us 2 months with 1–2 engineers, a designer, and a PM to get to our version 1.0.
While our apps don’t do the same things, they are similar. For a company like us which has many projects and constrained resources, React Native made creating a mobile app possible.
How to get the most from React Native
React Native is amazing for people and companies who don’t have native experience and who don’t have preexisting native teams. It turns web developers into mobile developers like magic, allowing a web-focused team to expand their product borders.
For companies like Airbnb and Udacity who already have native teams, React Native seemed to add complexity and issues, leading to them removing it from their workflows and codebases.
If you’re starting a new project and only have web developer resources, React Native is a solid choice that will get you up and going fast. You can read how to get started here.
