iTranslated by AI
React Native Matsuri 2021 Recap
Overview
Hello!
I usually post tips-style articles about React Native, but today I'd like to publish a conference report as a part of my own learning notes.
The conference I attended was React Native Matsuri 2021, held on Saturday, October 2, 2021, which is when I am writing this article.
The following is an overview from the top of the official website.
Japan's first technical conference with React Native as the main theme, held in 2021.
React Native and React developers with deep expertise will provide sessions and panel discussions.
It was organized by React Native Japan, the largest React Native community in Japan, and featured speakers from both Japan and overseas.
There were people whose technical articles I have been following for a long time, and since opportunities to hear from top runners in the field are rare, it was a very meaningful time.
Event Overview
- Venue: Online (Hopin), Q&A via Discord
- Participation Fee: Free or Paid ticket with a Novelty Box
- Talk: Day Session Talk (30 min), Night Session LT (10 min)
The tickets with novelty goods (1,000 yen and 1,800 yen) were very attractive, so I purchased one.
*The 1,800 yen one was already sold out, so I bought the 1,000 yen one.
I bought it around the first half of September, and after waiting a while, a variety of wonderful items arrived at my home...!
I received a masu (wooden cup), a T-shirt, snacks, and more.
Now, let's take a look at the timetable for the day.
Timetable
The timetable was as follows.
*Breaks, etc., have been omitted.
| Time | Title |
|---|---|
| 10:00 - 10:10 | Opening |
| 10:10 - 10:50 | How Mercari US is rebuilding its mobile app with React Native |
| 10:55 - 11:25 | Dream real-time audio streaming achieved with ReactNative and Kotlin |
| 11:30 - 11:40 | stand.fm's recent efforts: Improving app launch speed |
| 11:45 - 12:15 | Accelerating organization and product development using React Native |
| 12:45 - 13:15 | React Native in Nature |
| 13:20 - 13:50 | React Native: Re-architecture |
| 13:55 - 14:25 | Setting up environment for Yarn Workspace × React Native |
| 14:30 - 14:40 | React Native in Medical and Healthcare apps |
| 14:55 - 15:25 | Understanding the future of React GUI from the history of React Native for Web |
| 15:30 - 16:00 | Development of real-time streaming services using React Native |
| 16:05 - 16:45 | Kanmu and React Native |
| 17:10 - 17:20 | Understanding Expo EAS in 10 minutes |
| 17:20 - 17:30 | react-native-web shines even in web-only products |
| 17:30 - 17:40 | React Native Petit Code Reading |
| 17:40 - 17:50 | Reducing JS thread load using TurboModule and Multi-processing Main thread using Folly |
| 17:50 - 18:00 | Messing around with videos using react-native-ffmpeg |
| 18:10 - 18:20 | Scraping data from WebView |
| 18:20 - 18:30 | What I did to make a long-running legacy React Native app team-developable |
| 18:30 - 18:40 | Design system operation for strategic laziness |
| 18:40 - 18:50 | React Native and State Management Library |
| 18:50 - 19:00 | First personal development of an Expo app |
| 19:00 - 19:10 | Library bar crawl |
All the topics were very intriguing.
Although I had to leave my seat occasionally for snacks or deliveries, I enjoyed it very much from morning till night.
Content
Next, I will summarize the content of each session along with my thoughts.
The names in parentheses are the speakers (titles omitted).
*While some speakers may have published their presentation materials, I wasn't sure if I should post them here, so for now, I will focus mainly on my own impressions.
How Mercari US is rebuilding its mobile app with React Native (Takeru Chuganji)
I knew that Mercari was expanding overseas, but I was surprised to learn that it has become something completely different from the Japanese version. They had originally introduced React Native partially and decided to adopt a rewriting approach using React Native to keep up with business scaling.
However, rewriting isn't always straightforward, and it was mentioned that parts involving special animations are particularly challenging.
Dream real-time audio streaming achieved with ReactNative and Kotlin (Yu Mitsuhori)
This was a code-walkthrough session on implementing a simplified version of the audio streaming app stand.fm, including explanations of Native Modules, Kotlin, etc. I used to think that fields like audio streaming, which involve heavy native interaction, might be difficult with React Native, so I was genuinely impressed that they built an app of that quality.
Throughout this entire conference, many speakers mentioned native-related architecture and implementation. I felt that no matter how much React Native has the characteristic of "allowing you to build apps without knowing much about native," it is an unavoidable field once you push the boundaries of what you want to achieve.
stand.fm's recent efforts: Improving app launch speed (Toshihisa Tomatsu)
Following the previous LT, this talk focused on stand.fm from the perspective of performance improvement. Processing overhead at startup is a common development issue, not just in native apps, but the way they followed clear steps of "measurement," "analysis," and "resolution" was very helpful.
Many people across the event seemed to be using Sentry, and I felt it might be a step ahead when it comes to monitoring with React Native.
Also, although I haven't used it myself, I felt like I'd want to try react-native-shimmer-placeholder.
Accelerating organization and product development using React Native (Takagi Kensuke)
The speaker is the author of the following technical book for beginners in React Native, which I have also read before.
The session explored the question, "There are many options, but how is React Native for app development?" by looking at the results of its introduction in various domestic and international companies.
While it had some usability issues early on, it is stable now, and I agree that working on multiple platforms with a single source leads to improved development efficiency. I also understood the point that "Green Field" (new development using React Native) is important, while "Brown Field" (integrating into existing apps) is closer to an anti-pattern.
React Native in Nature (Soh Kitahara)
This session covered insights from using React Native for the Nature Remo app, a product that allows you to control home appliances from your smartphone. Since they have been using it since the v0.5 era, I imagine development was quite tough without features like AutoLinking.
Currently, almost all View-related parts are successfully shared, but there are still areas like widgets where React Native alone isn't enough. There were also many useful tips shared, such as display bugs in Text on specific devices due to font issues. I found myself nodding in agreement when they talked about the struggle of updating react-navigation from v4 to v5.
React Native: Re-architecture (Jesse Katsumata)
This talk was by Jesse, also known as Naturalclar, who is actively involved in the React Native Community. I have referred to his articles many times back when I primarily wrote on Qiita.
The content focused on how the architecture for connecting React Native with native code is evolving. I was very grateful for information on JSI, TurboModule, and other concepts that were new to me. The era when these become the default is just around the corner, and things are expected to accelerate rapidly once the Facebook app migrates to the new architecture.
Performance issues have been pointed out for a long time, so I felt that once they are resolved, more companies might start adopting React Native again.
Setting up environment for Yarn Workspace × React Native (Ryoichi Kaida)
This was a hands-on style session on how to resolve common errors when using React Native in a monorepo configuration. It was extremely practical, and I felt that if I had tried the same thing without knowing anything, I would have been stuck for a very long time. That’s how cryptic React Native errors (especially during build) can be for beginners.
I hadn't tried a monorepo configuration for React Native before, so I'd like to refer to this content if I ever have the chance.
React Native in Medical and Healthcare apps (Yuki Kondo)
This session provided tips on implementing video calls (using amazon-chime-sdk) with React Native in a healthcare app. Nowadays, features that heavily utilize native capabilities—like video streaming and calls—are becoming standard in many apps, so hearing that similar things can be achieved with React Native was very helpful. The comment about the official samples not being perfect and causing trouble was a very relatable "developer reality."
Understanding the future of React GUI from the history of React Native for Web (Yukiya Nakagawa)
This was a must-see for anyone whose understanding of React Native for Web is limited to "it's just for making existing React Native apps run on the Web."
The speaker shared a passionate message: since the React Native API set is so exceptionally well-designed, let's make it possible to build for the Web with the same implementation feel! It seems hard to convey this because the name includes React Native.
With the emergence of things like react-gui, it’s hard to predict where the ultimate form of GUI will settle, but I think this is a field to keep a close eye on.
Personally, I was shocked to learn that Twitter Lite had been replaced by twitter.com without me even noticing.
Development of real-time streaming services using React Native (Junichi Sato)
These are the insights and realizations from using React Native in an online fitness app called Bakoon. They built an incredibly interesting-looking app using trending services like agora, firebase, and posenet. I really related to the realization mentioned: "Workload became insane after adding features just because they seemed like a good idea."
Kanmu and React Native (Yuki Ito)
This was a talk about using React Native for the development of the Vandle Card app. I was genuinely impressed that they chose React Native during its early days when even the Android builds didn't run properly. However, it seems they faced many struggles after that, and I deeply sympathized with the difficulty of keeping up with updates.
Understanding Expo EAS in 10 minutes (Takahiro Sugiura)
This session was about the newly added features in Expo, EAS Build and EAS Submit. I was surprised to see that you can now build in the cloud and submit directly to the stores with Expo, making me honestly think, "Wait, isn't Expo perfectly fine for everything now?" While people used to say Eject was difficult or that native modules couldn't be used, I felt that with its current usability, it's definitely worth a try.
Also, I'd like to try out react-native-blurhash.
react-native-web shines even in web-only products (Takayoshi Sawada)
These are some tips from extensively using React Native for Web. As mentioned earlier, people tend to think it's irrelevant unless you're developing native apps, but I felt it is genuinely excellent as a web library. For those heavily involved in web development, things like pseudo-classes or position: fixed; might make you think, "Wait, you can't do that?", but there are proper workarounds, so I think it's perfectly usable.
React Native Petit Code Reading (Shoken Fujisaki)
This was an explanation of how JSI (mentioned earlier) works while following its implementation details.
To be honest, since I only learned about JSI today, the source code was all Greek to me... but the feeling that something incredibly amazing is happening was clearly conveyed, so I felt like I should go back and look at it again!
Reducing JS thread load using TurboModule and Multi-processing Main thread using Folly (Sponsor Session: BluAge Inc.)
This was a hands-on session about generating TurboModule and multi-threading Folly.
The talk about how it might eventually surpass the original native implementation in the future was very visionary, and I truly felt that such a day might actually come.
Messing around with videos using react-native-ffmpeg (Yu Watanabe)
This session was about why they chose react-native-ffmpeg from several libraries when building a video editing app, along with its actual usage.
react-native-ffmpeg was incredibly interesting, as it essentially allowed you to run ffmpeg commands directly within React Native.
However, since there are points to keep in mind, such as the required binary size and codec considerations for Web use, I found it very helpful that these key takeaways were explained clearly.
Scraping data from WebView (Tatsunori Nakano)
These were tips on extracting Kindle highlights using react-native-webview.
While I have used react-native-webview, injectedScript, and postMessage before, the idea of using them for scraping was something I hadn't thought of—it felt like a "Columbus's egg" moment.
What I did to make a long-running legacy React Native app team-developable (Shinnosuke Yamamoto)
This was a story about making an old-school Redux setup—where components and actions were lined up in the root, which feels quite nostalgic now—suitable for team development within a healthcare service app called Pep Up.
I could really relate to the process of modernizing their "secret sauce" by introducing Atomic Design, TypeScript, and error tracking.
Design system operation for strategic laziness (Kazushi Hara)
Also related to Pep Up development, these were tips on using a design system. They used Figma and Storybook, and it gave the impression of being a model for design system operation. It seems that things don't go well without pre-determined rules, and they were operating efficiently by making clear trade-offs, such as avoiding unification with the Web version and not applying it to all screens.
React Native and State Management Library (Shinji Kurosawa)
These were insights from using Recoil with React Native. Since I had been vaguely thinking about how Recoil has been gaining traction lately, this was very timely. However, there seem to be some things to watch out for, such as avoiding its use in controlled components or cases where State updates might fail in release builds. Overall, it seems perfectly usable with React Native, so I felt that Recoil is a solid option for state management when starting new app development.
First personal development of an Expo app (Teruhisa Yamamoto)
This talk provided tips on using Expo for a workout timer app developed personally since July. I strongly agreed with the sentiment that in personal development, prioritizing release above all else is key. Also, they seemed to be using Jotai, which was inspired by Recoil, leading me to feel that Redux might indeed be overkill for relatively small-scale products like personal projects.
Library bar crawl (Yutama Kotaro)
The React Native app I am currently developing for work uses a somewhat niche? DB library called Watermelon, and the speaker, Yutama-san, is actually the author of the article that introduced me to it.
He picked out several libraries from three categories—routing, camera, and storage—and provided reviews on which one is ultimately the best.
His cheerful and precise reviews were a pleasure to watch, and his conclusions were very convincing.
Among them, I was personally very interested in react-native-vision-camera for cameras and react-native-mmkv for storage.
Summary
This was my first time attending a conference dedicated to React Native, and it was very fulfilling. I was highly satisfied to hear presentations from so many different perspectives.
Having been primarily developing with React Native for over two years, I had a certain level of confidence, but this event made me acutely aware that there is still so much I don't know and that I need to keep studying.
I feel like I've gained a general sense of recent trends and upcoming hot topics, so I plan to delve deeper into what I learned today and write separate articles for them.
If React Native Matsuri is held again next year, I hope to write another participation report. At that time, I look forward to comparing it with this article and seeing how much "React Native trends can change in just one year."
I hope this article was helpful to you in some way.
Discussion