React Summit US

React Summit US 2024

In this talk, the speaker discusses the process of building C++ native modules for React Native. They explain that native modules allow for tighter platform integration and access to platform-independent performance code, but come with trade-offs such as increased build times and potential issues with crashes and package dependencies. The speaker clarifies the differences between the old and new architecture of React Native, highlighting the introduction of the JavaScript interface (JSI) and its benefits. They also explore alternative React Native architecture options, including TurboNativeModules and LegacyNativeModules. The speaker discusses the challenges of working with legacy native modules and the benefits of using NitroModules and pre-building native code. They conclude with recommendations for using Nitro modules, pre-building, and utilizing a compiler cache to optimize build times.

Building C++ modules for React Native is easier than you might think (if you know how). In this talk I’ll be sharing the current state best practices on bootstrapping of native C++ modules for React Native!

Building C++ / JSI Native Modules for React Native in 2024

Kræn Hansen

React Day Berlin

React Day Berlin 2023

Today's Talk explores mobile DevOps and how React Native simplifies mobile releases. Key metrics for DevOps performance include deployment frequency, lead time for changes, time to restore service, and change failure rate. React Native allows over-the-air updates, eliminating the need for resubmission. Overdue updates offer advantages like bypassing app store validations and quick updates, but have limitations. Other options to consider are in-app models for forced upgrades, EAS Build and Submit, Repack for micro-frontends, and upcoming server components in React Native.

In the dynamic realm of software development, successful industry leaders share a common proficiency in four pivotal metrics: Deployment Frequency, Lead Time for Changes, Time to Restore Service, and Change Failure Rate. Yet, achieving high performance in these areas within the mobile world presents unique challenges. This talk delves into the depth of best practices and innovative technologies within React Native and mobile DevOps ecosystems, all aimed at our ultimate goal: the continuous delivery of value to our users.

Mastering Mobile DevOps: Leveraging React Native for High Performance

 Cyril Bonaccini

TestJS Summit

TestJS Summit 2023

This Talk discusses cross-platform mobile testing, including the challenges it presents and the types of devices and builds that can be used for testing. It explores manual testing, automated testing, and the use of tools like Appium and SOS Labs for running tests on real devices. The Talk also touches on PWA automation, the choice between mobile apps and PWAs, and different testing approaches and performance considerations.

Testing your React Native, Capacitor, or other cross-platform apps on mobile devices is a critical but complex step of deployment. If you’re used to web testing, navigating the options for iOS and Android can be daunting. This session will cover virtual &amp; real device options, native build types for test deployments, how to deliver apps to testers, and even how to run automated tests against real devices.

Mobile Device Testing for Cross-Platform Apps

Cecelia Martinez

JS Nation

JSNation 2023

Building an app can be challenging, but Capacitor allows code sharing across web, iOS, and Android. Packaging an app involves configuring plugins and modifying the project in Xcode. The app can be deployed to an iPhone and access typical dev servers.

Quick, what is the quickest way to bring your product to the app stores? In today's landscape, trying to get into the app store can mean spending weeks deciding what tool to use and then rewriting your entire app. But the web, and mainly Capacitor, can simplify that. Take your existing web app, add Capacitor to the mix, and you have a native app that's ready for the stores! Let's see what's possible Capacitor and why it can help you ship faster.

Maximum Efficiency: A Primer on Capacitor

Mike Hartington

Mobile deployments are crucial for web developers due to the increasing number of users on mobile devices. Cross-platform development and web to mobile migrations are on the rise with tools like React Native, Ionic, Capacitor, and Native Script. Mobile testing requires native binary compilation and testing on real devices. Google Play and iOS have specific methods for releasing apps to testers, while web development allows for dynamic updates and quick deployment. Mobile app building and deployment require specific infrastructure and code signing processes. App store approval guidelines and versioning updates pose challenges in mobile app deployment.

It's easier than ever to use JavaScript to build native mobile applications. But for web developers building in the mobile ecosystem for the first time, deploying cross-platform apps built with tools like Capacitor or React Native can be complex. Learn about the mobile-specific deployment considerations through the lens of a web developer, including the key differences between mobile and web, how to develop a deployment strategy, and how to evaluate tooling options.

Mobile Deployments for Web Developers

React Summit

React Summit 2023

The Talk discusses communication between React apps/web apps and native applications/SDKs. It explores the challenges of embedding web code in a WebView and proposes running the browser in an embedded mode. The use of deep links and the Pixie protocol is highlighted as a solution for securely exchanging data between the web code and native applications. The Pixie protocol involves generating an authorization code and comparing it with the original key for secure data exchange.

It’s important to have a frictionless, secure, and performant authentication system for any app, be it web or mobile. In this lightning talk, Itai Hanski covers the importance of authentication and how the Descope team used PKCE to communicate between their React web app and native mobile SDKs.

Using PKCE to Communicate Between React and Native Mobile SDKs

Itai Hanski

Cross-platform development with Cordova paved the way for a vibrant ecosystem of plugins, but had limitations. React Native provides a core library for building apps, but rewriting an app to work in React Native can be challenging. Flutter may mislead developers into thinking they are creating truly native apps. Capacitor offers a solution that combines the benefits of a native app with access to native APIs while remaining pure web. Capacitor allows you to build a full native app that can access APIs through JavaScript.

So, you have a killer web app you've built and want to take it from your web browser to the App Store. Sure, there are a lot of options here, but most will require you to maintain separate apps for each platform. You want your codebase to be as close as possible across Web, Android, and iOS. Thankfully, with Capacitor, you can take your existing web app and quickly create native iOS and Android apps for distribution on your favorite App Store! Contents: This workshop is aimed at beginner developers that have an existing web application, or are interested in mobile development. We will go over:- What is Capacitor- How does it compare to other cross-platform solutions- Using Capacitor to build a native application using your existing web code- Tidying up our application for distribution on mobile app stores with naming conventions, icons, splash screens and more

Bringing Your Web App to Native With Capacitor

GraphQL Galaxy

GraphQL Galaxy 2022

Today's Workshop focused on building native iOS applications using SwiftUI and GraphQL, with a database powered by Neo4j. The Neo4j GraphQL library reduces boilerplate code and offers performance advantages. SwiftUI allows for building declarative UIs and includes a preview functionality. Cypher and GraphQL are both used to query and interact with graph data, with Cypher being more focused on graph databases and GraphQL being more versatile. The workshop also covered topics like building a GraphQL API, configuring the Neo4j GraphQL library, and using Apollo iOS for GraphQL data fetching in iOS apps.

Bring the power of graphs to iOS mobile app development in this hands-on workshop. We will explore how to use the Neo4j GraphQL Library to build GraphQL APIs backed by Neo4j AuraDB and how to integrate GraphQL into an iOS app using SwiftUI and the Apollo iOS GraphQL library as we build a news reader mobile app. Table of contents:- Intro to Neo4j AuraDB- Building GraphQL APIs with the Neo4j GraphQL Library- Intro to SwiftUI- SwiftUI + GraphQL PrerequisitesTo follow along during the workshop attendees will need a Mac laptop with a recent version of Xcode installed. Some familiarity with Swift and iOS app development will be helpful, although not required.

Hands-On With SwiftUI, GraphQL, & Neo4j AuraDB

William Lyon

React Day Berlin 2022

This talk explores mobile accessibility, including the different types of disabilities and how they affect app usage. It emphasizes the importance of making apps usable for as many people as possible and highlights the challenges faced by individuals with visual impairments. The talk also covers the principles of mobile accessibility, such as scaling the font size, supporting dark mode, and ensuring readable text. External tools and resources, like the Accessibility Inspector and Accessibility Scanner, are recommended for analyzing app accessibility. Various platforms and communities, such as Mobile Ally, Twitter, and React Native AMA, provide valuable resources for learning about mobile accessibility.

We want to learn about mobile accessibility to build an accessible mobile app, but where do we start? What does making an app accessible mean? What should we developers do? We will answer that by deep diving into the fundamentals of accessibility and assistive technologies.

How to Start Your Journey Into Mobile Accessibility?

Alessandro Senese

React Advanced

React Advanced 2022

Building an accessible app can be time-consuming but can be divided into two parts: making an existing app accessible and starting an accessible app from scratch. React Native Armour can help with accessibility fixes, but manual checks are still necessary. Accessibility best practices include focusing elements in the correct order, announcing UI changes to screen reader users, and ensuring consistency in behavior and appearance. Building accessible components can streamline the process of making an app accessible.

The most common misconceptions about accessibility are that it is time-consuming or can be easily left as the last thing to be added. But, of course, this is not the case. We’ll look at how easy and quick adopting accessibility as a First-Class Citizen and, on the contrary, how difficult and time-consuming it is to add accessibility to an existing project.

How Time-Consuming Is It to Build an Accessible Mobile App?

The Talk discusses the new architecture in React Native, highlighting its benefits such as native interoperability, concurrency, faster startup, better memory management, and improved code quality. The migration process to the new architecture involves refactoring, codegen, and extending native interfaces. Challenges include typing, configuration, and migrating third-party libraries. React 18 introduces automatic batching and compatibility with the new architecture. Microsoft is expanding React Native to target desktop platforms and has a dedicated open-source tooling repository. The Talk emphasizes the importance of open-source contribution and setting healthy boundaries.

The React Native new architecture has been "coming next year!" since 2019 - but, this time, it’s actually here! So… what now? What do we actually need to do, to benefit from this all new shiny tech? In this talk, I want to provide some insights and in-depth analysis of the current state of the migration path to the new architecture, to help you and your team evaluate and estimate when and how and how long it will take you to get to the next level! <a href="https://www.froala.com/wysiwyg-editor?pb=1"></a>

The New Architecture Is Here… What Now?

Lorenzo Sciandra

React Summit 2022

Vodafone uses React technologies at scale to transform into a tech comms provider. They emphasize co-creation, reuse, and standardization. Challenges in transitioning to React Native were addressed through retraining and optimization efforts. Vodafone's web development in React focuses on building to share, inner sourcing, and standards. They have developed a component library and an App Builder ecosystem for faster development and standardization. Integration with Contentful and the use of microcontainers for React-Angular integration were also discussed. The Marketplace project in Turkey utilizes React-JS and WebView technology. Vodafone Italy showcased their architecture transformation using React and TypeScript, emphasizing code quality, standardization, and performance optimization.

React at scale with Vodafone

This workshop introduces bringing React web apps to native using Capacitor, a cross-platform development approach. Cordova and React Native are compared in terms of their features and limitations. Capacitor is highlighted as a solution that bridges the native development life cycle while allowing developers to write HTML, CSS, and JavaScript. The performance difference between Cordova and Capacitor is discussed, along with the process of installing and configuring platforms. The benefits of using Capacitor for development, including faster development cycles and easy deployment, are emphasized.

So, you have a killer React app you've built and want to take it from your web browser to the App Store. Sure, there are a lot of options here, but most will require you to maintain separate apps for each platform. You want your codebase to be as close as possible across Web, Android, and iOS. Thankfully, with Capacitor, you can take your existing web app and quickly create native iOS and Android apps for distribution on your favorite App Store! This workshop is aimed at intermediate developers that have an existing React application, or are interested in mobile development with React. We will go over: What is CapacitorHow does it compare to other cross-platform solutionsUsing Capacitor to build a native application using your existing web codeTidying up our application for distribution on mobile app stores with naming conventions, icons, splashscreens and more.

Bringing your React Web App to native with Capacitor

React Summit 2020

Capacitor is a powerful tool built by Ionic that allows web applications to be compiled into native iOS and Android projects. It comes with a set of plugins, including the camera plugin, and has a React hooks package for seamless integration with React applications. The Talk includes a demo showcasing the camera hook button and the rendering of selected photos. The presenter emphasizes the use of useEffect and useState for additional functionality. The Talk concludes with a mention of the Capacitor community and gratitude for attending.

Using Capacitor, you can easily create native mobile iOS and Android applications using all of the React web tools you know and love. But how do we access the native APIs? With the @capacitor-community/react-hooks package, we can quickly and easily access native device APIs, like Camera, Filesystem, and Geolocation, using React Hooks!

Using React Hooks + Capacitor to Access Native Mobile APIs

Thomas Vidas

Today's Talk introduces the new React Native architecture and its rollout to the open-source community. The new architecture eliminates the bridge component, improves performance, and enhances the developer experience. It includes features such as Fabric, Turbo Module, and Cogent component. The architecture also supports modern languages like TypeScript and Kotlin. Upgrading to the new architecture enables the use of React 18's concurrent features and new APIs. Proper documentation and a new architecture section on the website provide valuable resources for contributors and advanced developers.

At the end of 2021, we successfully rolled out the New React Native Architecture in the Facebook app.Now, it’s time to empower every React Native developer on the globe to use the New React Native Architecture, both the new Fabric renderer and the new TurboModule system.But migrating an entire ecosystem to a New Architecture is no easy task.To support the whole community in this endeavor, we lined up a set of tools and materials that will help both app and library developers to join us in this journey.In the talk, we will present how the New React Native Architecture looks in the OSS space. We will discuss the impact this will have on developing React Native projects. Lastly, we will cover what we learned from the React Native New Architecture migration at Meta, and how you can tackle your migration in your organization.

Bringing the New React Native Architecture to the OSS community

Nicola Corti

This presentation focuses on sharing code between React web and React native mobile apps. The speaker demonstrates how to achieve feature parity using a Monorepo with NX. They highlight the importance of sharing non-UI code, such as business logic and state management, through shared libraries. This approach allows the apps to focus on UI code while keeping non-UI code separate. For more details, refer to the speaker's blog post.

Usually creating web and mobile apps require different tech stacks, and it is pretty hard to share code. This talk will show how I added a React web app and a React Native mobile app in the same monorepo using Nx, and how I optimized codeshare between react web app and react native mobile app.

How to Share Code between React Web App and React Native Mobile App in Monorepo

Emily Xiong

GraphQL Galaxy 2021

Enhost provides a simple and accessible GraphQL backend for web and mobile apps. They offer a serverless infrastructure, taking care of setup and configuration, allowing developers to focus on app development. Enhost's stack includes a Postgres database, a Hasura-powered GraphQL API, Hasura Auth for authentication, Hasura Storage for file uploads, and support for functions in Node.js and Go. The backend is 100% open-source and includes features like event triggers, a CLI for local development, and GitHub integration. With Enhost, there are no excuses not to use GraphQL and build apps that users will love.

Building web and mobile apps with GraphQL should be simple. With Nhost, developers build web and mobile apps with automatically generated GraphQL APIs. In this talk, we'll show you how this is ideal for developers who want to boost productivity without worrying about infrastructure. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

GraphQL for Web and Mobile Apps Made Simple

Johan Eliasson

React Advanced 2021

Today's Talk discussed building cross-platform apps with React Native and Expo, addressing challenges such as setting up the native runtime and managing dependencies. Expo provides a pre-built runtime, native APIs, fast iteration speed, and integrated cloud services. EAS build simplifies app deployment by handling native code signing and validation. Over-the-air updates allow instant updates to JS and assets. Custom native code can be added using auto-linking and config plugins, and Expo supports both Managed and Bare workflows.

App development is hard, React and Expo make it easy!It's never been simpler to build and deploy powerful mobile apps with incredible features to both Android and iOS users all over the world.We’ll discuss building and deploying mobile apps seamlessly from the cloud using EAS, creating powerful dev clients (like browsers but for mobile app development) for testing your app, pushing OTA updates instantly to users, and much more — no native experience required! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Limitless App Development with Expo and React Native

Evan Bacon

React Summit Remote Edition

React Summit Remote Edition 2021

This talk provides an overview of building React Native apps with Expo and Xcode. It covers Expo managed projects, XO, Turtle, customizing runtime, Expo Development Client, and EAS. The talk also mentions the advantages of Expo Updates, the focus on a customizable runtime, and adding native libraries. Favorite React Native apps and libraries are recommended, and the future goals include enhancing performance and improving the development experience through EAS.

It has never been easier for React developers to build native iOS and Android apps. In this talk, we'll see how quickly you can ship your app with Expo open source tools, Expo Application Services (EAS), and React Native. We'll also discuss some of the recent improvements we've made and what's coming up next. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building a Mobile App with Expo, EAS, and React Native

Brent Vatne

The speaker discusses their React Native architecture and how they structured their app, choosing React Native over native development due to limited resources and the need for UI experimentation. The architecture consists of support, components, and screens, with a focus on code organization and extensibility. The speaker explains the screen creation process, including the use of React Native Navigation and a state machine pattern. They also highlight the use of GraphQL for data retrieval and navigation between screens. The talk covers the structure of common components, utilities for styling, and support for dark mode. Overall, the speaker emphasizes the importance of isolating dependencies and utilizing a directory structure approach.

I'm going to showcase the React Native architecture we use in our new mobile app at Product Hunt. What we learned, among the way. How we moved what we know from web to mobile. Topics will be designing reusable React components, GraphQL, routing in the app, application lifecycle, keyboard controls, toast messages, and others. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#mobile apps