Could you introduce your app in a few sentences?
Our app is a way to help people discover and buy Art online. The app provides a way to access hundreds of thousands of artworks from the world's top galleries, fairs and all major auction houses.
We've had a team working on it since 2012, and we open-sourced it at the end of 2014.
... there is 160 people at Artsy, roughly 30 developers ( Artsy tech stack )
We have both been working at Artsy for a while now.
What made you decide to switch to React Native?
- We want to support other future platforms such as Android without creating more teams.
- We want different business teams to work on the app without disrupting each other.
- We want our architecture to evolve in order to increase programmer efficiency.
The functional model that React introduces that allows you to reason about the state of your views in much simpler ways has for us been a welcome change that should make it much easier to write decoupled code going forward.
We knew we needed to renew our approach to building a maintainable app, as the large objc codebase was getting harder to keep in good shape over time and with a larger team. When we would make that change, it also made change to us to improve in other aspects, such as improved networking (because our app relies on that for every screen), and developer happiness, and ideally keeping in mind moving to other platforms in the future.
Swift was an easy choice to consider, but it quickly became apperant that it didn’t really help in any of our considerations, it was only a different language.
(We also had a considerate amount of experience with Swift and our conclusion was that it wan’t the right time yet for us to use any more Swift.)
We then considered making our own component based version of React / ComponentKit, but it meant we would have to maintain that and it didn’t yet help us in networking, developer happiness, or portability.
While we were hesitant to adopt JS because of its ‘fragile’ nature (no typing / compile time catching of errors) and its somewhat wild-west community (e.g. the insane amount of dependencies that React/Native have), our experience when we gave React Native + Relay a try was so amazing and ticked all the boxes of our needs that we decided to give it a real try.
There’s a non-significant amount of time that goes into making sure that React Native works for us as it should, but overall the team has been very happy with the new way of working and the React paradigm.
Since then we’ve also started using React/Relay on web, in the future we’ll look at making the two codebases portable and shareable
To us, the developer happiness aspect isn’t limited to e.g. React hot module replacement, but also very much the OSS nature of all the tooling. We do not like dictated how to work but prefer to shape our own workflow and env, that’s something that’s extremely hard to do within the confines of Apple options
How did you transition to React Native?
We added React Native to a large existing codebase, we wanted to be able to test it safely in a sandboxed environment. This gave us the chance that if React Native didn't work out for us, we could remove it easily. So, our app is a native app which can consume React Native components. These components are created in a separate app and then are consumed by our main app as a library via CocoaPods. This means we can safely version it, the React Native components can have their own process and build environment. To the host app, it's just another library that provides some views.
To the app, it's no different than if they were built in Objective-C or Swift.
I think Airbnb are doing the same thing FWIW, and Uber too - I think its the sort of thing you do when you have a native app already, and are adding RN to enhance it, rather than replacing it.
Artsy blog post about integrating React Native
Have your tried other cross platform technologies before using React Native?
Cross platform wasn't really something we were looking for, so no. On the native side we only have an iOS app, the cross platorm aspects are interesting - but are not something that we've ever really pushed for. As native devs we've cared about being a good platform citizen, and React Native doesn't let us give up on that ideal.
The closest we get to cross platform is exploring similar processes with the web team, in terms of things like React, TypeScript, Relay, GraphQL and Storybooks.
Developers can share ideas, and jump between projects because they are familar with how they all work. They just might not have the deep expertise in the platform.
What has your experience been working with React Native in terms of app performance, have you noticed any impacts?
I feel like app performance has increased - but our usage of React Native also correlates with our usage of GraphQL. As our app is API-driven the speed increases in terms of data received due to GraphQL is pretty drastic. We don't have screens full of complicated animations, or too many moving parts. It's for showcasing the Art of other people, so it shouldn't get in the way. In that sense, the app is a pretty great use-case for React Native.
Artsy blog post about 1 year of React Native
How has adopting React Native affected developer productivity?
Our developer productivity is a mixed-bag at the minute.
No-one on the native side enjoys working on the native parts of the codebase, because it's such a chore. The iteration cycle for our native side is extremely long, and will only get worse. Testing is time-consuming and hard. Tooling is closed source. Not a great environment to work in.
However, React Native is a really new propect. We had to find, incubate and improve so many JS tools in order to get back to the same level of tooling quality that we came to expect as native developers.
We're probably about there now, but there has been a lot of churn in the last year as we found and improved our tooling to get to a great place.
So today the developer experience is pretty solid, but it took us a year to get there.
In terms of the experience of working with React and Relay though, it's been a dream. Full page rewrites have been drastically fewer lines of code, and considerably simpler.
The React pattern is really well built for building API driven apps.
Which tools, libraries and frameworks are part of your development process with React Native?
We're big users of VS Code and TypeScript. I think TypeScript has really come into its a solid mature place since 2.0, and working in VS Code is an experience similar to Xcode.
I think Jest is also really worth mentioning, it's easily the best testing framework I've seen in any programming eco-systen, and I've been helping out there since I discovered it.
VS Code's extensibility made it possible for me to build Jest into our editor too. Which says a lot about how easy it is to go the last mile with respect to plugging all the disparate JavaScript tools together.
We've been really interested in how React Storybooks work out too, in our Web perspective they've been a great way to work and to build out re-usable components.
The limitations of having to run your code in a simulator makes it a bit harder of a sell in React Native.
We also had to port some of our existing infrastructure like Danger, a team process tool, to JavaScript so that all tooling fits the envirtonment it's being worked in.
What resource have you used to learn React Native? Books, tutorials, courses etc. Anything you can recommend?
I learned JavaScript by watching most JS/Node/React videos at Egghead
from there I used Flexbox Froggy to learn the layout engine in React Native, I still get thrown by this
Learn GraphQL and Learn Relay taught me GraphQL and Relay.
Then, as a native developer, reading the source code for React Native really helped set cement the foundations of how it works. I did the same for Relay and TypeScript.
Anything else you would like to mention?
If it's not been mentioned enough, it's definitely worth stressing that all of our work here is OSS - so you can clone our RN components to understand how we did something, and read the PRs for the whys.
as well as the massive list of blog posts, this is generally the best overview page:
React Native at Artsy