App.js Conf ‘23

Better apps, less code, more platforms

Choose two: multi-platform, write-once, native-feel. This "frontend trilemma" has been true, but is trending positively in the world of React Native. This talk covers how Tamagui and other libraries are making "write once, run anywhere" possible without the typical sacrifice of feeling and performance, the relationship between DX and UX, and how compilers can give us have simpler code while outputting even higher quality apps.

The long-tail of type safety

So you've added TypeScript to your codebase, tweaked your tsconfig file and you're flying high with the confidence of no more runtime exceptions and the joy of being able to confidently refactor your code, right? I've been there, it's a great feeling. But as you soon discover, adding TS to your code is only the first step towards true end-to-end type safety. In fact, it's arguably the easiest step. What about API calls, databases, parsed JSON, query string parameters, request and response bodies, session storage and all those third party libraries and SDKs? These are the I/O boundaries of your application and they can destroy your otherwise flawless type safety. In this talk I'll walk you through the long tail of type safety, approaches to implementing type-safety in the overlooked areas of your stack, and tools to help you do so. You'll come away from this talk well equipped to make your codebase more robust and resilient to runtime exceptions. And best of all you'll get that sweet TypeScript confidence back again!

Lighthouse for mobile apps

The web has Lighthouse, one of the tools available to measure web performance. Feed it any website, and it will print out a performance score. Wouldn’t it be grand if we had something similar for mobile apps? Imagine taking any app and being able to get its performance score! That’d be the dream, right? Well, maybe this dream is more realistic than you think...

The Performance Myths of React Native apps

While building a React Native app, you should think of scalability from the get-go. A native mobile app goes through many phases - deployment, internalization, component practices, handling assets, offline support, complex animations, and much more. In this talk, I will go through some of the best practices you should consider, from setting up a project and the challenges most react native app faces to scalability. At the end of this talk, you will go home with practices you can apply to your projects and feel more confident doing so. 🚀 When the react native app is small, we can manage it easily, but as it grows, that's when it gets complex. In this talk, I want to touch on some of the best practices that, when embedded in a react native project, will really help scale it well and avoid some of the common challenges.

How To Integrate Rust Into A React Native App

JSI has been a game changer for React Native apps. But C++ comes with many downsides, among them memory safety issues, lack of good package management, and a lack of compatibility with modern JS paradigms. Rust offers memory safety guarantees, a robust package manager, and more modern features like async/await and runtimes (akin to the JS event loop). But integrating it into a React Native project on both iOS and Android can be challenging. In this talk we discuss how to integrate Rust into a React Native app, ultimately implementing a JSI function that returns a Promise, which enqueues tasks to execute on an async Rust runtime. We then delve into more sophisticated use cases, including how Comm leverages Rust in our mobile app today.

How does Shopify changes and adapts to the new architecture changes in React Native?

This talk intends to share the process, the learnings and the advice we have from Shopify on how to effectively deal with mobile app "evolution" as new changes are introduced into React Native and other crucial frameworks. How do we manage to -seamlessly- integrate and deploy new RN versions, new features and new tools into our -already in production- apps while still keeping them functional and aiming to be fast to grow?

22 - A year in Review for React Native

2022, what a year it was! Over the last year we had the opportunity to ship 4 releases, with highly requested features and changes that bring innovation to our framework. We’re going to walk through crucial changes such as the New Architecture, Hermes, TypeScript and much more. But our changes go beyond just technical. This year we had the opportunity to see so much engagement from the community with contributions that ended up shaping the future of our ecosystem. Join me in this talk as I walk you through how we evolved in 2022, both as a framework and as a community. If you missed any of the React Native releases we shipped last year, you definitely don’t want to miss this talk!

React Native 2030

What should React Native look like in 2030? In this talk, we‘ll travel through time to explore the future of native development — including styling, animations, native modules, deployments, text inputs, web compatibility, and more.

Making videos in React Native

Advanced 2d graphics will add that "je ne sais quoi" factor to your app. Due to its declarative nature, React Native provides a unique opportunity to create fast, composable, and delightful graphics. Our goal is to explore how Skia, a powerful 2D graphics library, can be tightly integrated with React Native to create stunning UIs and visual effects.

Building a 5-star app

Reviews can be both a blessing and a curse. It's amazing to get direct user feedback that will help you improve your app! But it's less amazing to receive feedback for stuff you often have zero control over such as downtime for 3rd party services or just personal preferences. In this talk, we explore how to leverage tech, UX, and psychology to enhance your app and give it the best possible chance of reaching the top of the app stores!

Dark mode at scale with React Native

Dark mode may be easy to implement if you are building a brand new React Native app, but what if you already have a large codebase with many components and screens? In this session, we’ll talk about techniques you can use to implement dark mode at scale, including using a React Native feature you might not have heard of.

Taking React Native to macOS

One of the main potentials of react-native is the flexibility it provides in terms of native platforms the code can be ported to. At Microsoft, where desktop is a key part of our customers' experience, we took this opportunity to take cross-platform experiences to be used in our macOS apps. To do so, we had to embark on a journey of the scary "out of tree" platform, which had many challenges and still has! Come with me on this trip, where I'll share with you how we implement and maintain React Native macOS, and talk about what kind of apps can be built with it!

Metro and React Native DevX in 2023

If you're developing with React Native, you've likely been interacting with Metro — the tool that builds your JavaScript code, serves your changes rapidly during development, and more. 2022 was an exciting year for React Native. In particular, the team working on Metro grew. We began to tackle longstanding pain points and re-engaged with the community. At the same time, it was a year of progress in the JS bundler space, which inspires us to take Metro further in 2023. In this talk, we will share team updates, our design principles, and our vision for Metro. We will showcase innovations made over the last year, and share upcoming priorities. If you've ever asked, "Why is Metro the best choice for my team?", we hope you can take away not only this, but be excited for the future of Developer Experience in React Native.

React Native end-to-end testing with Maestro

So far every time I’ve e2e tested React Native apps it’s always been painful. I’ve worked extensively with Detox at multiple companies, and with Appium while at Amazon and Yonder. In 2023 we’ve chosen to bet on Maestro. This is an educational talk on E2E testing and why Maestro might be better for you. I will show you why I prefer to write Maestro tests and why its developer experience is far better than what existed before.

Building apps in Apps

Have you ever wondered how to run a React Native app inside another React Native app? In this talk, I’ll show you how we created a Developer Platform on top of a production React Native app and talk you through the problems and tradeoffs we had to overcome during development. To learn more about the platform ahead of the talk, check out shop.app/minis

Expo Application Services: Iterate with confidence

In this talk, you’ll learn how to use services that help you build, submit, and update your apps with your team. Want to share a build with your teammate? We’ve got you. Need to submit to an app store? Done. Our application services are built to help you and your team ship faster.

Write Once, Route Everywhere: File System-based Navigation for Native Apps

One of the hardest problems devs face when building a universal React app for iOS, Android, and the web, is navigation. Building native navigation is a manual, platform-specific, painstaking process that almost always falls short of its full potential. Whereas web routing is powerful, expressive, and easy to set up. Enter Expo Router; the first file system-based router for universal React apps. Effortlessly generate universal nested UIs, deep links, and dynamic routes by simply creating files and exporting React components. Leveraging the power of React Navigation, Expo Router renders truly native experiences on every platform.

Debugging should be easier

Expo is built with developer experience in mind, giving you access to a broad set of tooling, services, and libraries. With these, Expo can help make your dream a reality, and fast too. But, this dream can quickly become a temporary hell when running into unexpected issues. Debugging these unexpected issues can be daunting, especially without the right tools. And, with every moment you spend tracking down the problem, you can't make the app better for your users. Debugging your native app should be as easy as debugging on the web. That's why we are expanding the debugging capabilities. Let's find out together what this means for your future bugs.

React Native on Linux with the New Architecture

One major benefit of the React Native New Architecture (specifically, Fabric) is cross-platform support based on C++. As a result, extending a new out-of-tree platform like Windows and macOS would be easier than before. Three years ago, I presented react-native-skia project as a proof-of-concept of a new platform with New Architecture. This talk will walk through this project's current status. Now, running React Native on Linux or even an embedded Linux device would be possible.

Keynote

Collaboration and investment in the Expo developer community continues to grow. We’ll talk about joint efforts, open specifications, how “Expo and React Native” replaces “Expo vs React Native”, and how we can grow the community further by including all of React. We’ll also share several new additions to the app development workflow along your path from idea to a production app, with a focus on faster ways to share progress with and get feedback from your teammates.

The art of React Native: How to make your app stand out

Creating an engaging application is not an easy task. But sometimes even the best functionality has to be showed in glamorous manner to make it memorable. During the talk, we are going to take your React Native skills to the next level by showing you how to make your mobile apps stand out from the crowd with unique unforgettable features. You'll learn how to create eye-catching animations that not only captivate your users, but also add meaning to your app's functionality. With practical tips, real-world examples, and cutting-edge techniques, you'll discover how to make your app a true masterpiece of motion design.