Chain React 2018 — Day 1

A few years ago I attended the DIBI conference in Edinburgh and found the experience to be invaluable. I’m a huge fan of digital conferences especially when the speakers include practical examples of the features, tools, processes and systems they’re talking about. Whilst theoretical talks can be great, there is nothing better than seeing a real-world example of new and cutting edge technology that I can use today, especially when it will delight users.

This year I’ve been lucky enough to attend Chain React 2018 in Portland and with the first-day coming to a close I thought it would be good to reflect on all of the different things discussed and showcased.

Reactotron & React Native Debugging

At 8 am this morning, after reaching the conference venue and signing in, I sat down for breakfast near the entrance to the conference hall. Unbeknownst to me I had sat next to Richard Evans, one of the main contributors on the Reactotron project (a fantastic tool you should be used to help debug your react and react native apps).

I talked with Richard about Reactotron and what we were using it for here at Komodo. He gave me the first insight of many from throughout the day, telling me about how, when running a react native app in “debug JS remotely” mode, the application is actually executed in Chrome’s JavaScript environment rather than JavaScriptCore in iOS or Android. In summary, the React Native debugger is not a perfect representation of how your app may behave in the wild – hence the need for a tool like Reactotron.

Adoption of React Native

The first talk of the day was from Kent Dodds. Kent described the compositional model he uses for building react components, especially when components are reused for more and more use cases. He talked about the concept of inversion of control, providing a real-world example of refactoring a component to make it easier to maintain and reuse by third parties. Check out his blog article and shout out to downshift – a package Kent actively contributes to at PayPal.

Following Kent’s talk, TC Davies presented a talk about React Native and its current ecosystem and adoption – something very relevant to KOMODO at present. Whilst we at KOMODO have seen the huge benefits of React Native – we’ve also encountered some of its issues and its limitations. Indeed recent blog posts by Airbnb and Udacity have challenged us to question when and where might be the best places to use react native.

TC discussed React Native adoption within business and what leads to the success of a programming language using Java as a real-world example. He broke down the categories of success, including adoption, ease-of-use and public perception/marketability. He highlighted that React Native does have something of a perception problem and developers need to advocate more for the platform and help contribute through open source. TC works on the Expo project, and in particular Snack – a great online tool for writing and live testing react native code entirely on the web.

After a quick coffee break, it was back to the conference room to hear Darin Wilson talking about Reactotron, the project I mentioned above. Darin discussed some of the new features in the app including ones that we had not encountered before. Check out Reactotron. Facebook themselves are working on a similar product specifically for native apps called sentry.

Improving Test Ability

Code and asset re-use is something we always strive for in our industry but at times is difficult to achieve. Samantha Bretous was the next speaker offering a great talk on how to build a component kit to maximise code reuse and improve test ability. She also discussed how design and development teams can collaborate – something we at KOMODO are always working to improve. The TL/DR – use React Storybook (see https://github.com/storybooks/storybook) and a tool like Zepplin or InVision together with a smart design and development life-cycle.

Having been a developer for a fair few years now I’ve tried a number of UI testing tools for mobile apps including calabash and Appium. Detox is another React Native testing tool, that Rotem Mizrachi-Meidan and the team at Wix have used for a year now in a “gray box” style. Rotem discussed the most successful ways to test as well as potential pitfalls and gotchas. Detox is definitely something we will look out for in the future at KOMODO.

Machine Learning, AR and Accessibility

After lunch, there were a series of lightning talks which were designed to provide a quick insight into their various discussion points. Of particular interest to me was Ray Deck’s discussion on using machine learning within react native and some of the strengths of the React Native platform in delivering machine learning experiences. This is definitely something I will explore further in my own time.

Augmented reality is one of the buzzwords of today particularly in the mobile space and Vladimir Novick presented a talk on how to utilise it in React native apps. Doing a fantastic demo on stage of stepping through a portal into another world, he really opened my eyes to the possibilities of this technology. I’d love to use AR in the future if I can find a good use case for it. Vladimir provided some sample code to help everyone in the room get started.

Jen Lucker provided the penultimate talk of the day – outlining how and why we as react native developers should add accessibility features to our mobile apps. Jen even provided the business case for this noting that conservatively 15% of app users could be classified as disabled. Therefore effectively supporting these users could in fact generate an additional 15% of revenue from applications.

Jen provided real-world examples of how to add accessibility support for both iOS and Android and even announced support for an ESLint package that will automatically check for accessibility mark up in react native apps.

Effective Code Reuse

The final talk of the day came from Robert Scarano and as he eloquently put in his slides it was about effective code reuse across web and mobile. Robert discussed Squarespace’s approach and about how they feel they’ve achieved a “write 1.5 times, reuse on 3 platforms” solution which still offered truly bespoke, native and web UI experiences. Robert provided insights on how to integrate into both entirely react native and hybrid apps – again demonstrating sample code to help illustrate the solution.

Beyond listening to the speakers at Chain React, I found it invaluable talking with some of the wider community. I could write pages and pages about what was discussed but instead, I will simply link you to some of their Twitter accounts. Talk to these guys if you want intelligent insights into React Native or its wider ecosystem: @realasa@dabit3@browniefed@EricVicenti