Event March 14, 2018

React Native Academy: the recap

Thibault Maekelbergh

React Native & Full Stack Web developer

Last week, my colleagues Lode, Jonathan and I spearheaded our 2018 series of In The Pocket Academies. The topic? Our favourite tool of the trade, React Native, and how we build, shape, and deliver applications with it. The crowd (we were fully-booked!) streamed into our Arena, ready for an evening of knowledge-sharing among developers.


React under the hood

Jonathan Dierckens (React Native & Full-Stack developer) rocketed into our evening with a higher-level abstraction of our favourite framework. In his talk, he went in-depth on how React Native uses the Javascript runtime in combination with the native bridge to run & communicate to the applications we write. Some questions were investigated thoroughly:

  • How does the React Native bridge help us develop faster? 
  • Can we write our own and what does it bring for us performance wise? 
  • What's the link between the Animated API offered by React Native and performance?

After this first part of Jonathan's talk, he dove into another topic that causes developers frequent headaches: making choices.

We all know large applications require making the correct (hard) choices for the goal you want to pursue, if you want to succeed and deliver a great product. From an architecture point of view, there's a plethora of tools to consider when building modern React Native applications. How do we lint & format our code? Will we develop inside of a framework like Expo, which gives us extra features but also limitations or do we go for the native lower-level way? How do we manage state? Some cutting-edge APIs & tools, like Unstated & the new React Context API, really sparked the interest of our crowd. 

Want the full story? Check out Jonathan's slides & full-length presentation. The code that accompanied this presentation is also hosted on our Github.

The power of components

Lode (Solution Architect at In The Pocket) brought us valuable insights on how a component-first architecture helps you scale & power-up your application. In this talk, Lode outlined that using a component-based approach can help close the gap between design & dev.

Taking advantage of design systems -which are often based on components- both parties can centralise their UI in a single source of truth where all the guidelines, colours, layouts & icons are gathered and are kept consistent across usage in different tools like Sketch, Zeplin but of course also React or other web/native frameworks. 

By creating this kind of shared vocabulary:

  • Our applications cause less user confusion.
  • Developers & designers can iterate faster.
  • Onboarding for new collaborators or external parties is simpler.

To take this a step further, Lode introduced the concept of separating logic in React components between container & presentational components. This way of thinking moves our data logic to a container and uses presentational components for displaying data only. Effectively creating a separation of concerns, colocation of data, excludes dependencies for view-focused components and helps us reason about responsibilities.

As a cherry on the cake, Lode listed some tools like Storybook & React Sketchapp to give this component-based flow a kickstart. 

Check out the details in the slides or watch the recording of the presentation:

Bridging the gap between React & React Native

When React & React Native were released, they opened up new explorations, design patterns & possibilities for software engineers to create applications. With React ,we were able to very easily create UI applications that scale. However, one of the main gripes for building truly cross-platforms applications remained: shared components & codebase across React (web) & React Native applications.

With my background in web, I was seriously bothered by this issue. I outlined how, using components, we still duplicate our code across both platforms just because we use different naming conventions on both platforms (e.g.: <div /> vs <View />). If we start by boiling down what components we actually really need (these so-called 'primitives'), we can see that we really only need a subset of what React DOM & React Native give us.

With react-native-web, the excellent library created by Twitter developer Nicolas Gallagher, we can use these primitives to create platform-agnostic components that work on both platforms but have to be written only once.

You can already imagine the benefits: less code duplication, easy integrating, and shareable libraries distributed via npm modules that act like a single source of truth for components. An interesting route to explore could even be writing component libraries for the web & native that designers could use to prototype how their designs might look in code in favour of tools like Framer or Invision.

As a showcase for this talk, I made a repository that consists of 3 main parts:

  • Our component library, exporting components and leveraging the power of react-native-web
  • A react web application using the component library
  • A react native application using the same library

Interested in the complete talk? Be sure to check out the slides & presentation in full.

Thanks for listening, on to the the next one!

Sharing knowledge, having a drink, and networking among React Native enthusiasts, our Academy crew had a blast and we hope you did too. We're already looking forward to our next React Native Academy where we'll further explore React Native in production applications and discuss how we can leverage its powers.

Thank you to all who attended, we can't wait to see you at RN Academy #2! (Subscribe to our newsletter below, and we'll keep you in the loop!)