Could you introduce your app in a few sentences?
The App was the 2017 Chain React Conference app. Its audience was to show off our React Native Conference, as well as open source a very friendly and usable app. Most of our consulting code never gets to be seen by others, it was a real treat to build an app from scratch to show people what we love to do. It’s a tradition we’ll probably do every year!
The app isn’t as interesting when the conference isn’t happening, but during the actual conference, each cell would animate and show the users what’s going on. Design had a field day coming up with features, and we enjoyed rushing to put them all together.
What made you decide to use/switch to React Native?
Fortunately, I’m old enough to have used many programming languages, and seen the evolution of quite a few more. After using something as developer friendly as Rails, I think the ecosystem had an audible and defining shift. People started to look for new ways to manage their projects. Humans need scalable solutions or else they’ll be swallowed by this ever-growing domain of software.
Fortunately we tried lots of different solutions, and though native has always remained an option, it’s been key for us to identify multipliers like React Native. When Facebook announced that React Native would work on Android, we knew we had to really check React Native out. After a month of R&D, we began the full switchover to delivering React Native apps as the facto tech stack. My only regret was not knowing about this sooner!
Our switch to React Native was about 2 or so years ago. React Native had been out for a year.
How did you transition to React Native?
Transitioning to React Native was easy because it was JavaScript and it was hard because we were early. We jumped in with both feet, but there wasn’t very much example code laying around. We had found some great code by Brian Leonard at Taskrabbit, and spent an entire day breaking dissecting and analyzing it. The concepts seemed quite clear, but it took us a long time to harness our boilerplate. That’s why we open-sourced it with Ignite, so we could help those after us by leaving markings of what worked when we shipped apps. We continue to release updates of our learnings in both blog and boilerplates by Infinite Red.
We had used a lot of RubyMotion before, to blunt the rough edges of native code, and though ES6 has come a long way, it felt very rough working in JavaScript. I had even written an article about the lessons I hoped JS could learn from Ruby. The community felt very bleak at first. Fortunately, we’ve cultivated a community of our own, and the React Native world has really found its groove.
Have your tried other cross platform technologies before using React Native?
Yes, after spending a bit of time learning Android and Objective-C, it was only natural that I was drawn towards cross-platform tech. My first app was on PhoneGap, and though I was proud to have an app on each store, it was a terrible app! Besides pride, there was no reason for you to download my app over simply connecting to the website I also made. This resonated with me. I didn’t bridge the gap by bringing technology further, I did it by making my app worse. And so I continued my journey into RubyMotion. There I built several apps for iOS, but failed consistently to bring the experience to Android. It's because of those two languages that I really respected React Native, and adopted it as our tool of choice at Infinite Red.
What has your experience been working with React Native in terms of app performance, have you noticed any impacts?
React Native has been very performant. The underlying structure has given native developers a run for their money. It’s nice to setup a structure everyone uses, because then it’s easy to optimize it. But not even React Native can protect you from something you do that’s just not performant, or is simply dumb. The React diffing engine is smart, not omniscient. Whenever I’ve seen a performance problem, it’s always been a glaring mistake in the code by the programmer. The app simply does what it’s told. That’s why it’s important to criticize every dependency you include in your app. Each library is made by a person or people, and as you add them, you add chances for poorly written code.
How has adopting React Native affected developer productivity?
I’ve never seen junior developers contribute faster. With amazing libraries like Storybook, developers can build components in clear and presentable ways with little to no concern for how to properly make that component “fit” the app. That sounds like a bad thing, but it’s not. Developers have to think critically. Too often people insert code with only considering a “happy path”, but in the void of the context, a composition has to stand from a multitude of angles. Better components in shorter amount of time makes everyone happy, and it’s just JavaScript (or TypeScript if we have our say on the project)!
We started off using Flow, but it felt rough. Flow would complain about external libraries, felt like a strange bolt-on that didn’t quite fit. Our TypeScript story is just like every other TypeScript story, we tried the other things and everything finally clicked when we hit TypeScript. The OOP and functional fit is air tight, and it gives a superior development experience. You can slowly turn the TypeScript experience from merely suggestions all the way to rigid static ruling. It’s a friendly add, and once you’ve worked in a project that has a premium TypeScript experience, you don’t want to go back.
Which tools, libraries and frameworks are part of your development process with React Native?
TypeScript to help us feel comfortable while developing, and so we can sleep at night after we’ve shipped. Reactotron is amazing for feedback while developing. Especially if you’re using Redux or MobX-State-Tree. VSCode has surprised us as the best editor. Mobile Center for analytics, and bugs. Fastlane for shipping the finalized product to App/Play stores. Solidarity for every project, to protect environment differences (big issue in React Native). Jest for testing. Husky for automatic test on push. Detox for integration tests. Storybook for component dev. I’m sure I’m missing something, but it’s an ever-changing world.
What resources have you used to learn React Native? Books, tutorials, courses etc. Anything you can recommend?
When we started, there wasn’t anything but Open Source. So huge kudos to Open Source! That’s always a great way to see what’s hot. Now there are books and blog articles on medium. For people starting out, I recommend the book by my buddy Vlad. For blogs shift.infinite.red is where we post info, and other great companies like Callstack and Formidable Labs have excellent blog posts. I know there are more videos every day, some of which I’ve made! The community is starting to mature, and we plan on providing some resources to help the community as they do. Stay tuned to the IR community community.infinite.red for questions and updates on that.
What are some things that you don’t like about React Native or that need to be improved?
Crazy successful tech will always have the biggest whiplash. The same thing that happens to any shipped product that needs to grow quickly. We see projects bubble and burst all around React Native. Half the modules I used last year are modules I won’t use going forward. The effects aren’t even limited to dependencies. We have 2 new conferences open up, but the React JS conf is postponed. New metro packager 0.52 changes their transform interface, and now sourcemaps are broken for anyone using TypeScript. Every “wait what?” I’ve had on the bleeding edge of React Native is because it’s iterating and growing so fast. Such a bitter sweet technology stack.
Anything else you would like to mention?
I’ll be speaking at lots of conferences, and would love to meet people who’ve read this post. I have remoted in to Meetups to give presentations, and I’m always happy to work with and integrate feedback from the community. Check out my speaking gigs here and please follow on the usual tech things, Twitter/GitHub/Medium/LinkedIn etc. We’re always working on ourselves at Infinite Red, so the coolest thing you can do, is just to let us know how we’re doing.