JSNation US

JSNation US 2024

In this talk, you'll learn about the problem with internationalizing software and how the Lake Exchange Control System solves it. Internationalizing software involves adapting it for different markets and demographics, which includes design, translations, and currencies. The goal is to enable any software company to go global in a day. The challenge lies in the coordination required among developers, designers, translators, and other stakeholders. The current process involves a complex pipeline and manual processes for translation hand-off. The key to solving this challenge is an interoperable file format and a change control system called Lix, which allows for collaboration and automation. Lix will have a public pre-release on December 16th, followed by the .inlang file specification in Q1 2025.

Every developer knows that i18n is painful. We found the curing pill in the form of version control.  We'll talk about:  - what's the *actual* problem with i18n? - how to solve the orchestration problem? - demo e2e collabroation between devs, designers, and translators

inlang - Using Version Control to Solve i18n

Samuel Stroschein

React Advanced

React Advanced 2024

Cedric van Poethe from Expo talks about breaking through the browser barrier and shares the success story of Rosebud, an app that transitioned from a web app to a Native app using Expo. Chris Bader explains the concept of the browser barrier, the limitations of web-only growth, and the benefits of transitioning from web to Native. The Talk discusses using DOM components to make web apps work natively, implementing a basic navigational pattern using the tabs navigator in Expo, and using Expo Atlas to inspect the bundle and see the HTML elements bundled inside the app. It also explores using DOM components strategically in React Native apps and highlights examples of apps using DOM components. The Talk mentions the similarities between DOM components and RSC in terms of API design, and recommends a step-by-step migration approach for large apps. It also discusses interacting with native APIs from DOM components and the benefits of using React Native for greenfield projects.

With over 1.13 billion websites worldwide, itʼs clear that cross-platform development is popular. However, with 60.74% of people preferring mobile devices over desktops for internet access, providing a polished UX can be challenging when using only websites. In this talk, Iʼll demonstrate how developers can use Expo to bring their web-only products closer to their users. Starting with a fictional web-only product, Iʼll incrementally reuse the code and run it on iOS and Android using both the existing web code and platform-native elements. Depending on our demo readiness during the conference, this may include a new experimental feature of the Expo Router called DOM Routes that helps developers in this process.

Breaking through the Browser Barrier (With Expo)

Cedric van Putten

React Summit US

React Summit US 2023

This Talk explores the journey of a software developer in unraveling the mysteries of Netflix TV UI. It emphasizes the importance of continuous learning in TV UI development and discusses the use of React and the TV signup process. The Talk also highlights the significance of widgets, navigation, and the TVUI Explorer app in building TV UI. It delves into the TVUI dev process, testing layers, and the value of continuous learning and fresh perspectives in the tech industry. The Talk concludes with insights on job opportunities, resources for TV development, and the Netflix hiring process.

At Netflix, millions of our users watch Netflix on TV Devices. How do we develop the UI for all of the different types of devices? That's exactly what I wanted to know!
I'll be sharing why it's important to take on new growth opportunities, how to navigate the difficulties of learning a whole new platform at a new company, and some of the things I've learned about how we use React to bring Netflix to your TV!

Journey Into the Unknown: My Adventure Unravelling the Mysteries of the Netflix TVUI Universe

Kaleb McKelvey

TS Congress

TypeScript Congress 2023

The speaker discusses the benefits of replacing shell scripts with TypeScript, highlighting the limitations of shell scripts and the advantages of TypeScript such as cross-platform compatibility and better tooling. Deno is presented as the ideal platform for single file scripting, with its built-in support for TypeScript, automatic dependency installation, and sandboxing. The dax library is mentioned as a useful tool for scripting, providing a cross-platform shell and other APIs. Overall, the Talk emphasizes the power and flexibility of using TypeScript and Deno for scripting purposes.

Shell scripts serve a useful purpose, but they have some downsides. What if we could overcome these issues and make our scripts more powerful by utilizing familiar cross-platform TypeScript? In this talk, we'll discuss why you should switch your shell scripts to TypeScript and demonstrate a possible approach.

Replacing Shell Scripts with Cross-Platform TypeScript

David Sherret

React Summit

React Summit 2023

Cross-platform development allows you to build apps compatible with multiple devices or operating systems, reusing 50 to 80 percent of your code. React Native has a wide range of third-party libraries for using APIs. Code examples cover React Native standalone case and with content management system, exploring built-in core components and third-party library APIs. Content management systems simplify content editing and asset swapping, allowing real-time editing and easy asset uploads. The importance of knowing built-in APIs for mastering cross-platform technologies and building scalable, easy-to-maintain applications is highlighted.

We know if we have the fundamental of JavaScript and React knowledge, we can build cross-platform apps. But how many of you have tried out? Learning once and shipping for several operating systems sounds so cool. Don’t you want to experience how it’s easy to transfer your JS &amp; React knowledge and powerful built-in APIs to extend your dev skills? In this talk, we’ll see some facts from a developer perspective and a few examples of how you can transfer your JS &amp; React knowledge.

Go From Zero To Hero: Be Cross-Platform Devs With React Native

Arisa Fukuzaki

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

JS Nation

JSNation 2023

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

Mike Hartington

React Day Berlin

React Day Berlin 2022

React Native Web allows for building mobile and web apps with one code base. The workshop covers setting up an app skeleton, configuring navigation, implementing responsive design, and adding custom styling with React Native Paper. It also discusses platform-specific functionality and the trade-offs between React Native Web and separate apps. The workshop provides insights into internationalization, secure storage, and choosing the right tools for app development. Overall, React Native Web and its abstractions make development more efficient and enable building for multiple platforms.

We know that React is for the web and React Native is for Android and iOS. But have you heard of react-native-web—for writing an app for Android, iOS, and the web in one codebase? Just like React Native abstracts away the details of iOS and Android, React Native Web extracts away the details of the browser as well. This opens up the possibility of even more code sharing across platforms. In this workshop you’ll walk through setting up the skeleton for a React Native Web app that works great and looks awesome. You can use the resulting codebase as a foundation to build whatever app you like on top of it, using the React paradigms and many JavaScript libraries you’re used to. You might be surprised how many types of app don’t really require a separate mobile and web codebase! What's included1. Setting up drawer and stack navigators with React Navigation, including responsiveness2. Configuring React Navigation with URLs3. Setting up React Native Paper including styling the React Navigation drawer and headers4. Setting up a custom color theme that supports dark mode5. Configuring favicons/app icons and metadata6. What to do when you can’t or don’t want to provide the same functionality on web and mobile Prerequisites- Familiarity with building applications with either React or React Native. You do not need to know both.- Machine setup: Node LTS, Yarn, be able to successfully create and run a new Expo app following the instructions on <a href="https://docs.expo.dev/get-started/create-a-new-app/">https://docs.expo.dev/get-started/create-a-new-app/</a>

Building for Web & Mobile with Expo

Josh Justice

React Summit 2022

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

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

React Native Everywhere enables code sharing and platform individuality, responsive composition and navigation are key focus areas, the React Bangalore community has played a role in the development of React Native design systems, React Native URL Router provides a native feel with drag-from-edge navigation, collaboration with Software Mansion has been beneficial, and token-based centralization is important for consistent adaptation of design systems.

Developing for each platform individually is so 2010s. These days, with React Native’s component system providing base-level UI constructs, we can efficiently develop for every platform while not sacrificing any particular platform’s uniqueness. Taz will review the approach they’ve taken while developing Guild, and the creation of their Mondrian cross-platform responsive design system as well as how they’ve accommodated the differences in navigational experiences across platforms to accomplish a codebase that can be 95+% shared across every platform.

React Native Everywhere

Taz Singh

React Advanced 2021

This Talk discusses building cross-platform component libraries for React and React Native, based on a successful project with a large government-owned news organization. It covers the requirements for React Native knowledge, building cross-platform components, platform-specific components, styling, and the tools used. The Talk also highlights the challenges of implementing responsive design in React Native.

Building products for multiple platforms such as web and mobile often requires separate code-based despite most of the components being identical in look and feel. Is there a way where we could use shared React component library on different platforms and save time? In this presentation I'll demonstrate one way to build truly cross-platform component library with a unique approach of using React &amp; React Native in combination. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building Cross-Platform Component Libraries for Web and Native with React

Perttu Lähteenlahti

React Summit Remote Edition

React Summit Remote Edition 2020

Ionic React is a framework for building cross-platform apps using HTML, CSS, and JavaScript. It has hit its stable release and brings Ionic to even more developers. The Q&A session covers topics like the target market for Mux and the use of div as a button in React Native web. Ionic supports native apps and allows for a mix of web UI and custom native views.

Ionic is a framework for building fast and powerful mobile, desktop, and web apps with web technology. Traditionally, Ionic has been built on top of one framework: Angular. But recently, Ionic added support for React, and aims to bring the same great development experience to the React ecosystem. In this talk, we’ll look at how an Ionic React app works and how this changes the React ecosystem (surprise, it's because of Web Components). <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#cross-platform