React Native EU 2020 - Virtual Edition

Abstract: A lot is changing in the core of React Native. We’ve got Fabric, TurboModules, JSI, etc. We’ve also been working on how these systems interact with the JavaScript in React Native apps. This talk will be a deep dive into some of the expected JavaScript API changes, React Native’s JS internals, new startup performance improvements, codegen, and more! Eli White is a Software Engineer on the React Native core team at Facebook. Eli can live on ice cream, but thrives on pie.

Abstract: React Native isn't just for building mobile apps! Come learn from Microsoft engineers how you can use React Native to target Windows, Mac, and the new set of dual-screen devices including the Surface Duo and Surface Neo.

Abstract: React Native proves the success of running React other than browsers. The official supported frameworks from Facebook are only iOS and Android. There were some other platforms maintained by third-party developers, but these forks sometimes run with older React Native versions. The main reason is the difficulty to follow rapidly changed upstream code. From the upcoming React Native new architecture, there will be more platform-independent shared implementations and more abstraction layers. Let's see if we could extend React Native to some new platforms benefiting from the new architecture.

Abstract: Most people attending the conference use React Native, but not necessarily with any of the Expo libraries, tools, or services. I'll talk about what we have built, what we're working on, and what we're thinking about next to help everyone level up their React Native iOS, Android, and web app development experience.

Abstract: As React Native is being used to build many large scale mobile apps. It is important to profile performance to ensure a smooth user experience. Previously, Ram had written and spoken about adding instrumentation to understand the performance characteristics of the app. As the next step, he will explore the various optimizations that can be done in this talk. He will focus on the Javascript section, something where there are many more low hanging fruits to optimizie. Starting from React Dev Tools, he will look at how developers can leverage their existing knowledge of web performance to attack mobile perf. He will talk about understanding SysTrace and Sampling Profilers. He will also debunk common myths like the problems with measuring app performance using Chrome JS profiler, debug versions of the app, etc. In this talk, he will plan to outline a holistic approach that can be used to dive deeper into React Native performance.

Abstract: In the past 5 years, the Wix mobile app has gone through quite a bit - a brand new look was launched, a large number of features were added in a short period of time, and the number of our users tripled. Unfortunately, one implication of product growth, is a slower performance, especially when it came to things like seamless transition, fluent animations and general slickness of the app. Over the past year, we made a tremendous effort to improve these regressions. Our ongoing efforts have so far resulted in almost 60% cumulative improvement in all performance metrics. In this talk, I’ll deep into all of our secret ingredients for better performance in React Native applications, together with practical examples of: -Improving startup time -Responsive gestures -Preload prioritization Furthermore, I’ll outline some general work we’ve done that led us to these improvements, like the right way to measure and analyse your app performance on production, and how you can implement these tips and tricks.

Abstract: Our understanding of navigation in mobile stems from years of web usage. Our navigation is a tree and a page transition is an action. But this pattern couldn't be further from what is required by modern app UX standards. In this talk we will go through the required changes in our navigation architecture in order for it to reach its full potential.

Abstract: Animations in React Native apps can seem difficult and unnecessary. I will try to prove that they can be easy, achievable and necessary to make your app delightful.

Abstract: One of the most exciting apps genre today are Augmented Reality and Virtual Reality apps and boy it’s never been easy to build them with React Native. In this talk we will learn with practical example how to blend digital and physical world together using React Native. I'll take you to quick introduction to Augmented Reality and Virtual Reality. Fundamentals of ARKit for iOS which is one of biggest AR platform and ARcore for Android. Will use Viro React to do live coding and build an experience like never before for audience. My target for this talk is to make React Native devs familiarised with this world of AR/VR so that they take advantage of this new skill by going through practical example and see for themselves how easy it is with React Native.

Abstract: Visual Regression tests are essential for any type of UI development. With out it, you might ship an application after changing the looks of one page without knowing that you broke several other pages. If we can easily see the difference you made in UI for every single PR, it can make the life of reviewers and QAs much simpler. But how would we go about making visual regression test with react native projects? In this talk, I will be sharing what me and my team has been using to perform visual regression test on react native projects, including how components will look in light mode and dark mode.

Abstract: React empowered us to render user interfaces anywhere – in memory, browsers, mobile devices to name a few. Rendering in memory is cheap and fast compared to runtime environment, so in-memory UI testing libraries emerged. One of the most popular one now is React Testing Library. Soon after it went public, React Native Testing Library was created trying to implement their style of testing for React Native components. And a few months later another one came to light out of the blue, quickly becoming an official one. The community ended up with two almost identical libraries. Sounds confusing, huh? It was! This story is about all this drama, how it eventually turned out, how community and empathy wins, how businesses help sustain OSS, sprinkled with examples of how you can test your React Native components with just JavaScript.

Abstract: Talk Structure. Contributing to React Native 1) Set up the development environment 2) Understand React Native Project Structure 3) Finding an Issue to solve 4) Publishing Pull Request Contributing to react-native-camera 1) Set up the development environment 2) Understand the Project Structure 3) Finding an Issue to solve 4) Publishing Pull Request

Abstract: Xcode has been a big part of the difficulty users face when trying to upgrade React Native. We added CocoaPods to make linking in Xcode easier. We made upgrade-helper to document the changes in Xcode. We made upgrade-support to help users with their problems. Today, I'll show you how to make your Xcode problems go away.

Abstract: This talk aims to give a detailed walk through Bridging Native modules into React Native applications and, React Native's Logic that allows this capability.

Abstract: Mux maintains 22 SDKs for video players on various platforms: Web, iOS, Android, Apple TV, Roku, Samsung TV. In this talk I will discuss how I used the core web library and built a wrapper SDK around react-native-video. The challenges involved and the workflow for porting over an SDK to React Native world.

Abstract: When it comes to using GraphQL with React Native, urql is the new kid on the block. I've had some time to use urql with React Native in production, and I'd like to share my experience: how to handle authentication, code sharing, caching, debugging effectively, and when you might or might not want to consider using urql on your next project.

Abstract: SON patches can be used over JSON document for persistent storage that opens up the doors for realtime multi-user apps. They are serializable, small-sized, transferable between realms (threads and network); helps in multi-user implementation, easy to version with history (undo/redo), offline first (optimistic updates). Let's use JSON patches with React / React Native to build a framework for real-time multi-user apps.

Abstract: Case study of migrating a large scale application (200k+ weekly users) to using Apollo Client 3.0 for data layer and state management. Features covered include - New BE GraphQL API to replace multiple separate api calls - Local resolver for REST API without GraphQL endpoint - Type policies using custom keyFields and cache references - Local state management with reactive variables for cache - Cache updates with queries and cache.modify The end result turned out great, but the talk will also cover potential pitfalls and how those were able to be overcome.

Abstract: If we had the ability to read React Native blog posts from the future, it would be as useful as yesterday's lotto numbers. The technology paradigms change often and when you've been developing React Native for years, it's easy to find yourself doing the same old thing. I think the best way to test your practices, is to occasionally push yourself outside your comfort zone. This is my story of writing an app with something new and what I learned.

Abstract: We are developing an app based on ReactNative and Firebase for a customer. The app has around 1.8 million downloads and around 300k active users. We are running a three week release cycle with new A/B tests and new features in every release. The application has 99.8% sessions without crashes and a 4.6/4.7 star rating on the AppStores. All that is achieved with only two developers. I want to share some insights on how we are able to make this possible. We are able to focus most of the time on developing by automating all tasks which we are able to automate and have clear processes wherever possible. The talk will focus a lot on how to specifically automate task in the ReactNative environment. Some examples of things we automated: - PR quality checks - Unit testing (Jest) + Code styling (ESlint) + Typechecking - End user testing on real devices (AWS Device Farm + Appium) - Testing Builds + Shipment to customer - Production Builds + Shipment to stores - Integration of translation systems - Generation of sourcemaps and shipment to bug tracking system

Abstract: Feature flags allow development teams to separate code deployment from feature release. It has grown to be an essential tool for testing in production, A/B testing, and controlled rollout. Controlled rollout using feature flags is a way to deliver features to your users safely, but doing it on mobile comes with some challenges. How do you propagate feature flagging configuration to mobile devices that don’t always have a strong network? As a mobile developer, you want to be able to use the latest flag configuration, but you also don’t want to stop someone using the app just because you can’t load the feature flag config. In this talk, we'll start with why controlled rollout is important and how feature flags enable you to do it successfully, then we will talk about mobile specifics, and then a demo with React Native.

Abstract: In this talk, we'll go through the creation of gatsby-plugin-react-native-web, to more advanced cross-platform experiments I run on my static blog and my personal mobile app. We'll use technologies like Gatsby, MDX, React-Native-Web, Expo, React-Navigation, Netlify, and see how all these tools can enable CI automated cross-platform content authoring solutions.

Abstract: Upgrading dependencies can be a daunting experience. When dealing with numerous moving parts, diagnosing issues can demand a lot of patience. I recently had to upgrade a React Native app from 0.55.4 to 0.62.2 and learned some valuable lessons, which this talk aims to share.