Rompiendo la Barrera del Navegador (Con Expo)

Rate this content
Bookmark

Con más de 1.13 mil millones de sitios web en todo el mundo, está claro que el desarrollo multiplataforma es popular. Sin embargo, con el 60.74% de las personas prefiriendo dispositivos móviles sobre computadoras de escritorio para acceder a internet, proporcionar una UX pulida puede ser un desafío al usar solo sitios web.

En esta charla, demostraré cómo los desarrolladores pueden usar Expo para acercar sus productos solo web a sus usuarios. Comenzando con un producto ficticio solo web, reutilizaré el código de manera incremental y lo ejecutaré en iOS y Android usando tanto el código web existente como elementos nativos de la plataforma. Dependiendo de nuestra preparación para la demostración durante la conferencia, esto puede incluir una nueva función experimental del Expo Router llamada DOM Routes que ayuda a los desarrolladores en este proceso.

This talk has been presented at React Advanced 2024, check out the latest edition of this React Conference.

Cedric van Putten
Cedric van Putten
27 min
25 Oct, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Cedric van Poethe de Expo habla sobre romper la barrera del navegador y comparte la historia de éxito de Rosebud, una aplicación que pasó de ser una aplicación web a una aplicación Nativa usando Expo. Chris Bader explica el concepto de la barrera del navegador, las limitaciones del crecimiento solo web y los beneficios de pasar de web a Nativa. La charla discute el uso de componentes DOM para hacer que las aplicaciones web funcionen de manera nativa, implementando un patrón de navegación básico usando el tabs navigator en Expo, y usando Expo Atlas para inspeccionar el bundle y ver los elementos HTML empaquetados dentro de la aplicación. También explora el uso estratégico de componentes DOM en aplicaciones React Native y destaca ejemplos de aplicaciones que usan componentes DOM. La charla menciona las similitudes entre los componentes DOM y RSC en términos de diseño de API, y recomienda un enfoque de migración paso a paso para aplicaciones grandes. También discute la interacción con APIs nativas desde componentes DOM y los beneficios de usar React Native para proyectos greenfield.
Video transcription and chapters available for users with access.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Construyendo Bibliotecas de Componentes Multiplataforma para Web y Nativo con React
React Advanced 2021React Advanced 2021
21 min
Construyendo Bibliotecas de Componentes Multiplataforma para Web y Nativo con React
Top Content
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.
Cómo compartir código entre una aplicación web de React y una aplicación móvil de React Native en Monorepo
React Summit 2022React Summit 2022
7 min
Cómo compartir código entre una aplicación web de React y una aplicación móvil de React Native en Monorepo
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.
Reemplazando Scripts de Shell con TypeScript Multiplataforma
TypeScript Congress 2023TypeScript Congress 2023
8 min
Reemplazando Scripts de Shell con TypeScript Multiplataforma
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.
React Native en todas partes
React Summit 2022React Summit 2022
22 min
React Native en todas partes
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.
Viaje al desconocido: Mi aventura desentrañando los misterios del universo TVUI de Netflix
React Summit US 2023React Summit US 2023
30 min
Viaje al desconocido: Mi aventura desentrañando los misterios del universo TVUI de Netflix
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.
Conviértete en un Desarrollador Cross-Platform con React Native
React Summit 2023React Summit 2023
10 min
Conviértete en un Desarrollador Cross-Platform con React Native
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.

Workshops on related topic

Llevando tu aplicación web a nativa con Capacitor
JSNation 2023JSNation 2023
111 min
Llevando tu aplicación web a nativa con Capacitor
WorkshopFree
Mike Hartington
Mike Hartington
Entonces, tienes una increíble aplicación web que has construido y quieres llevarla de tu navegador web a la App Store. Seguro, hay muchas opciones aquí, pero la mayoría requerirá que mantengas aplicaciones separadas para cada plataforma. Quieres que tu código base sea lo más cercano posible en la Web, Android e iOS. Afortunadamente, con Capacitor, puedes tomar tu aplicación web existente y crear rápidamente aplicaciones nativas para iOS y Android para distribuir en tu App Store favorita.
Contenido: Este masterclass está dirigido a desarrolladores principiantes que tienen una aplicación web existente o están interesados en el desarrollo móvil. Repasaremos:- ¿Qué es Capacitor?- ¿Cómo se compara con otras soluciones multiplataforma?- Usando Capacitor para construir una aplicación nativa utilizando tu código web existente- Organizando nuestra aplicación para su distribución en tiendas de aplicaciones móviles con convenciones de nombres, iconos, pantallas de inicio y más
Llevando tu aplicación web de React a nativa con Capacitor
React Summit 2022React Summit 2022
92 min
Llevando tu aplicación web de React a nativa con Capacitor
WorkshopFree
Mike Hartington
Mike Hartington
Entonces, tienes una increíble aplicación de React que has construido y quieres llevarla de tu navegador web a la App Store. Seguro, hay muchas opciones aquí, pero la mayoría requerirá que mantengas aplicaciones separadas para cada plataforma. Quieres que tu base de código sea lo más cercana posible en la Web, Android e iOS. Afortunadamente, con Capacitor, ¡puedes tomar tu aplicación web existente y crear rápidamente aplicaciones nativas para iOS y Android para distribuirlas en tu App Store favorita!
Este masterclass está dirigido a desarrolladores intermedios que tienen una aplicación de React existente o están interesados en el desarrollo móvil con React. Repasaremos:
¿Qué es Capacitor?¿Cómo se compara con otras soluciones multiplataforma?Usando Capacitor para construir una aplicación nativa utilizando tu código web existenteMejorando nuestra aplicación para su distribución en las tiendas de aplicaciones móviles con convenciones de nombres, iconos, pantallas de inicio y más.
Creación para Web y Móvil con Expo
React Day Berlin 2022React Day Berlin 2022
155 min
Creación para Web y Móvil con Expo
Workshop
Josh Justice
Josh Justice
Sabemos que React es para la web y React Native es para Android e iOS. Pero ¿has oído hablar de react-native-web? ¡Para escribir una aplicación para Android, iOS y la web en un solo código base! Al igual que React Native abstrae los detalles de iOS y Android, React Native Web también abstrae los detalles del navegador. Esto abre la posibilidad de compartir aún más código entre plataformas.
En este masterclass, aprenderás a configurar el esqueleto de una aplicación React Native Web que funcione de manera excelente y se vea increíble. Puedes utilizar el código resultante como base para construir la aplicación que desees, utilizando los paradigmas de React y muchas bibliotecas de JavaScript a las que estás acostumbrado. ¡Te sorprenderá la cantidad de tipos de aplicaciones que realmente no requieren un código base separado para móvil y web!
Qué se incluye1. Configuración de navegadores de cajón y de pila con React Navigation, incluyendo la capacidad de respuesta2. Configuración de React Navigation con URLs3. Configuración de React Native Paper, incluyendo el estilo del cajón y los encabezados de React Navigation4. Configuración de un tema de color personalizado que admita el modo oscuro5. Configuración de favicons/iconos de aplicaciones y metadatos6. Qué hacer cuando no puedes o no quieres proporcionar la misma funcionalidad en la web y en el móvil
Requisitos previos- Familiaridad con la construcción de aplicaciones con React o React Native. No es necesario conocer ambos.- Configuración de la máquina: Node LTS, Yarn, ser capaz de crear y ejecutar correctamente una nueva aplicación Expo siguiendo las instrucciones en https://docs.expo.dev/get-started/create-a-new-app/