React Native

What to (re)watch from React Native Europe 2020

This year was the year of the first entirely online and free React Native Europe Conference ?! I was a bit disappointed not to travel to Poland but instead I got the chance to watch the whole conference with my cat by my side (that's her in the picture), which is actually a pretty good way to spend two days.

In case you missed it, or you want to refresh your memory, here is what it was about and what you should (re)watch from React Native Europe 2020:

At the time of writing the streams for Day 1 and Day 2 are still available on YouTube.

Cool libraries to try out

Expo

When starting a React Native application, you may wonder whether you should start with Expo or React Native. Brent Vatne argued that the question is rather Expo Managed Workflow or React Native. Indeed there are many parts of Expo that you can (and should!) use, even if you don't use the managed workflow.

You can use Expo web to deploy your React Native web application.

Or Expo Updates for over-the-air updates, as an alternative to CodePush. Bonus: you can even host your own updates, and that's very convenient for many companies who legally can't have part of their app updated by a Microsoft server. Another really cool feature is that you can do progressive rollouts, deploying your app user by user to check its crash rate.

Finally, the Expo team has been working recently on Expo notifications, a tool to send push notifications. They're planning to release a dashboard website to watch your analytics, so keep looking at their website :)

NoNav

On a bit more conceptual talk, Yann Leflour went back a few decades ago to find out why web and mobile navigation is still very much imperative today.

He shared an experiment to implement a declarative navigation in React Native, that is react-nonav. If you are tired of pulling your hair at stack resets when your app starts, you will surely be interested in this!

SyncState

Sanket Sahu came with a surprise! SyncState is yet another React state library, but with an interesting philosophy. You might find Redux event-based, but it actually stores snapshots of your state. SyncState goes one step further on the Event Sourcing path by actually storing the events.

Globally it looks a bit lighter than Redux to write, plus it looks really convincing for a multi-user real-time application!

URQL

GraphQL has been around for a few years now, so there was no introductory talk to GraphQL this year. But, fellow GraphQL enthusiasts can rejoice as we were blessed by two talks on the topic.

Kadi Kraman introduced us to URQL, a GraphQL client developed by Formidable Labs. If you are looking for a simpler and more extensible alternative to Apollo Client, this may be worth a look at.

Also, if you are contemplating rewriting your REST app with GraphQL, Juha Linnanen will certainly help you avoid some pitfalls he faced while GraphQLifying his React Native app.

Measure and solve your performance issues

Performance matters to your users. Omri Bruchim shared some interesting numbers to support it :

  • Every 1% decrease in startup time > increases 0.27% in visitation
  • Mobile delays are more stressful than horror movies!
  • 35% of the Wix app users use a phone that is more than 2 years old

He also shared some very useful libraries to investigate your performance issues, all listed in this twitter thread which is pure gold ?.

After a talk focused on reducing your app's starting time last year, N Parashuram discussed how to improve your javascript to reduce lags.

He introduced a new profiler that will enable React Native developers to show Hermes call stack in the Chrome profiler. It has since been merged into the React Native CLI, so you will be able to use this soon :)

You can also find a recap about how to debug performance in our article: Debug your React Native performance issues.

Testing your application even further

Jesse Katsumata introduced us to visual regression tests with reg-suit. I am really really excited to try it on my next project as it looks really easy to put in place. If so are you, check out his talk!

Michal Pierzchala and Maria Marchenkova walked us through the history of react-native-testing-library and its rival native-testing-library. This library is much loved by everyone I know that ever used it, but we've always wondered why there were two of them ?. So it was interesting to finally know how the two came to be and finally became one.

 

Getting comfortable with the Native part

Pavlos Vinieratos introduced us to the magic of XCodeGen, a powerful tool that transforms your convoluted xcodeproj file into a simple and understandable YAML file. Don't hesitate to check out his repo to integrate it on your app and give him feedback so we can add it to React Native core.

If you've never felt very comfortable with the Bridge, then Monica Restrepo's talk is for you! It's also a good recap of what Fabric, TurboModules, JSI and CodeGen are and why they're going to be an important part of React Native.

Getting comfortable with the internals

If you want to dig further into the internals of React Native, then the two first talks of the conference are what you are looking for.

Eli White told us a bit more about CodeGen, and what it is going to change for us. Basically, CodeGen will reverse the responsibility for the types of native components. Official docs are on the way,  but in the meantime you can check the dedicated discussion on Github.

Kudo Chien explained the hurdles he faced while building a react-native app that runs SKIA, a 2D graphics library. We'll see how this experiment turns out, but it could be a huge breakthrough in terms of performance for React Native applications! And if you want to dive deep into the internals of React Native, extending it to a new platform seems to be a good idea!

And also

Here are a few other talks worth the watch if you are looking for something in particular.

React Native at Microsoft

You need to quickly build an app on Windows desktop and you are hesitating between Electron or React Native? Steven Moyes will reassure you and show you all the hard work Microsoft has put into making React Native work on macOS and Windows, including dual-screen devices.

Build at the speed of light with AWS Amplify

Gant Laborde showcased an app he built in an insanely short amount of time thanks to AWS Amplify and UI Kitten. If you are in a rush or want to cut down your developing time, this talk will give you some interesting tools.

Automate your process to spend more time on actual production

Alexander Kuttig found out that his team was spending only 30% of their time on new feature. He increased it to 50% with a lot of automation, and in the meantime increased his product quality.

Ship with confidence with feature flags

Feature flags are easy, right? Well, have you thought about Apple regulations? About users with no connection? Take it easy, Talia Nassi got it all covered for you.

Animations showcase

If you are looking to animate your application and make it more user-friendly, Aleksandra Desmurs-Linczewska will show you the way.

Adding React Native in MDX and vice-versa

Sébastien Lorber explained how he built his blog and integrated React Native code into Gatsby with MDX, and rendered MDX in React Native. If you are building a website showing React Native code, it will blow your mind!

Upgrading React Native

If you have ever done a massive React Native update, you will relate to what Ramón Huidobro told us in the very uplifting final talk of this year's conference.

 

Well, that's it! That is what caught my attention this year, and if you think I've missed something, please do tell me on twitter at @zawadzkil :)

Développeur mobile ?

Rejoins nos équipes