Conviértete en un Desarrollador Cross-Platform con React Native

Rate this content
Bookmark
Slides

Sabemos que si tenemos los fundamentos de JavaScript y conocimientos de React, podemos construir aplicaciones cross-platform. Pero ¿cuántos de ustedes lo han intentado? Aprender una vez y lanzar para varios sistemas operativos suena genial. ¿No quieres experimentar lo fácil que es transferir tus conocimientos de JS y React y utilizar las poderosas APIs incorporadas para ampliar tus habilidades de desarrollo? En esta charla, veremos algunos hechos desde la perspectiva de un desarrollador y algunos ejemplos de cómo puedes transferir tus conocimientos de JS y React.

10 min
06 Jun, 2023

Video Summary and Transcription

El desarrollo cross-platform te permite construir aplicaciones compatibles con múltiples dispositivos o sistemas operativos, reutilizando entre el 50 y el 80 por ciento de tu código. React Native cuenta con una amplia gama de bibliotecas de terceros para utilizar APIs. Los ejemplos de código cubren casos de uso de React Native de forma independiente y con un sistema de gestión de contenido, explorando los componentes principales incorporados y las APIs de bibliotecas de terceros. Los sistemas de gestión de contenido simplifican la edición de contenido y el intercambio de activos, permitiendo la edición en tiempo real y la carga fácil de activos. Se destaca la importancia de conocer las APIs incorporadas para dominar las tecnologías cross-platform y construir aplicaciones escalables y fáciles de mantener.

Available in English

1. Introducción al Desarrollo Multiplataforma

Short description:

Hola a todos. Gracias por ver mi charla. Echemos un vistazo a Go From Zero to Hero, los desarrolladores multiplataforma con React Native. Hay tres puntos clave en mi charla: el potencial del desarrollo multiplataforma, el ecosistema y las tecnologías de desarrollo multiplataforma, y ejemplos de React Native. El desarrollo multiplataforma te permite construir aplicaciones compatibles con múltiples dispositivos o sistemas operativos. Puedes reutilizar del 50 al 80 por ciento de tu código. Aplicaciones multiplataforma como Discord tienen millones de descargas. Aprender JavaScript y React te brinda una base sólida para el desarrollo multiplataforma. El ecosistema multiplataforma incluye tecnologías basadas en JavaScript como React Native y Ionic Native scripts.

Gracias por ver mi charla. Y en menos de 10 minutos, echemos un vistazo a Go From Zero to Hero, los desarrolladores cross-platform con React Native. Mi nombre es Arisa, y soy una ingeniera de DevRel en Storyblock.

Así que hay tres puntos clave en mi charla. El primer punto clave es el potencial del desarrollo cross-platform. El segundo punto clave es el ecosistema y las tecnologías de desarrollo cross-platform. Y el tercer punto clave serán los ejemplos de React Native.

Hay algunas notas que quiero que tengas en cuenta. Esta charla es para principiantes en el desarrollo cross-platform y React Native. Y el objetivo es mostrar más posibilidades de tecnología front-end. Y por último, principalmente te mostraré ejemplos para la web y sistemas operativos móviles.

Entonces, ¿qué es el desarrollo cross-platform? En primer lugar, es una forma de construir aplicaciones compatibles con múltiples dispositivos o sistemas operativos. Permíteme decirte esto, si construyes aplicaciones con tecnologías cross-platform, puedes reutilizar del 50 al 80 por ciento de tu código. Y una aplicación cross-platform como Discord tiene 74 millones de descargas. Y no solo Discord. Hay múltiples aplicaciones construidas con tecnología cross-platform, pero aquí hay una pequeña comparación con las aplicaciones nativas. WhatsApp, Messenger, Snapchat, tienen números de descargas bastante similares. Pero puedes ver lo escalable que puede ser una aplicación cross-platform.

Ahora sabemos que el desarrollo cross-platform tiene números y efectos bastante buenos. Pero permíteme decirte esto, hay muchos frameworks HD para tecnologías cross-platform. Así que no puedes aprender todo en un día. Pero permíteme también decirte esto, si conoces JavaScript y React, ya tienes más que los fundamentos. Aquí tienes una comparación sobre el costo de aprendizaje. Mientras que las tecnologías de aplicaciones nativas requieren que estudies nuevos lenguajes de programación como Java, Swift, en realidad no necesitas aprender nuevos lenguajes de programación desde cero si eliges tecnologías de desarrollo cross-platform basadas en JavaScript. Hay muchas ventajas y desventajas, lo que es bueno y lo que puede no ser adecuado dependiendo de diferentes casos.

Hablemos un poco sobre el ecosistema cross-platform. Como dije al principio de esta charla, y como puedes ver en el título de esta charla, vamos a ver juntos las tecnologías basadas en JavaScript, como React Native, Ionic Native scripts. Y entre estas tecnologías, hay algunas diferencias. Como React Native y Native Script pueden venir con algunos preconstruidos.

2. Comparación de Ionic y React Native

Short description:

Ionic proporciona componentes totalmente adaptados, mientras que React Native tiene componentes parcialmente adaptados. El punto es elegir la mejor opción según tus casos. React Native tiene una amplia gama de bibliotecas de terceros para utilizar APIs. Realiza tu propia investigación para encontrar los mejores enfoques y tecnologías.

Por otro lado, Ionic se envía con una gran cantidad de componentes preconstruidos. La otra diferencia es que React Native tiene componentes parcialmente adaptados, mientras que Native Script puede proporcionar componentes mayormente adaptados. Además, Ionic también proporciona componentes totalmente adaptados. Si ves estas comparaciones, es posible que te preguntes por qué voy a hablar de React Native. No parece ser la mejor tecnología disponible. Pero el punto no es presionarte para que uses una tecnología en particular que me guste. Ese no es el punto. El punto es elegir la mejor opción según tus casos. Y los ejemplos, pros y contras que te mostré son solo una pequeña cantidad de información. Veremos que React Native tiene una cantidad destacada de bibliotecas de terceros para utilizar APIs sobre la marcha, etc. Te permitiré hacer tu propia investigación sobre cómo elegir los mejores enfoques y tecnologías disponibles.

3. Ejemplos de código y bibliotecas de terceros

Short description:

Pasemos a los ejemplos de código. Veremos dos ejemplos: React Native en caso independiente y con un sistema de gestión de contenido. Tenemos dos opciones para previsualizar nuestras aplicaciones: Snack, que funciona en el navegador, y X-Bot, una aplicación para previsualizar en un dispositivo físico. Cubriremos el uso de componentes principales incorporados como vista, imagen, hoja de estilos y presionable. El componente presionable es único y puede manejar varios eventos táctiles. También exploraremos las API de bibliotecas de terceros, centrándonos en la modificación de imágenes de la galería y su guardado en la biblioteca multimedia.

Pero pasemos a la parte divertida, los ejemplos de código. Vamos a ver dos ejemplos en esta charla. El primero será el caso independiente de React Native y el otro será con un sistema de gestión de contenido.

Primero, veamos las opciones para previsualizar nuestras aplicaciones. Hay dos opciones que me gustaría presentarte. La primera se llama Snack, que funciona en el navegador. Así que verás que con esta previsualización de Snack, dentro de diferentes sistemas operativos, en este caso al menos tres de ellos, puedes compartir un mismo código y tener la misma previsualización. Pasando al dispositivo físico, como opción de previsualización, en este caso instalé una aplicación llamada X-Bot, y por eso puedes ver mi dispositivo móvil en la pantalla, donde puedo tener una previsualización de la aplicación que estoy construyendo en este momento.

Continuando con el uso de los componentes principales incorporados, no te preocupes si no sabes nada sobre los componentes básicos o presionables que se mencionan aquí, vamos a cubrir lo necesario para que puedas entender el contenido que verás. Este componente de vista funcionará como un componente de referencia, y este componente de imagen representa lo que podrías imaginar para renderizar componentes de imagen. Esta hoja de estilos también representa, como podrás adivinar, hojas de estilo CSS. El componente presionable es un poco único porque es algo que probablemente no tuviste que considerar en aplicaciones web. Funciona como una alternativa al botón, pero detectará varios eventos táctiles como toque simple o presión prolongada. Aquí tienes un ejemplo del componente presionable basado en lo que aprendimos juntos junto con los otros componentes. Cuando elijas, al hacer clic en este texto de elegir foto, se mostrará una alerta y debería funcionar de la misma manera en los diferentes sistemas operativos, iOS, Android, web. Y el punto es que traje este componente de texto con el componente presionable que puedes llamar como una API. Y al hacerlo, puedes hacer lo mismo, aplicar las mismas funciones en los diferentes sistemas operativos.

Continuando con los ejemplos de las API de bibliotecas de terceros. En este caso, vamos a ver dos ejemplos. Pero como dije, React Native tiene una cantidad realmente destacada de API de bibliotecas de terceros disponibles. Pero para simplificar las cosas, vamos a ver dos API para modificar las imágenes que seleccionas de la galería, luego cambiar el tamaño o escalarlas desde el editor y guardarlas en la galería de la cámara. Pasando a la parte del flujo de trabajo, hay tres pasos. Primero, verifiquemos o solicitemos los permisos para acceder a la biblioteca multimedia. Para hacer eso, usemos una API, biblioteca multimedia. Y con una combinación del código de gancho usePermissions, podrás solicitar los permisos para acceder a la galería de la cámara. Pasando al segundo flujo de trabajo, que es guardar los archivos en la biblioteca multimedia del usuario. Y para hacer eso, nuevamente usa la API, biblioteca multimedia. Pero esta vez vamos a usar saveToLibraryAsync. Al llamar a esta funcionalidad, podrás guardar los archivos en la URI local proporcionada en la galería de la cámara del usuario.

4. Flujo de trabajo, Gestión de contenido y Resumen

Short description:

El último flujo de trabajo implica tomar una captura de pantalla de la vista utilizando el gancho useRef y la API capture ref. El desarrollo multiplataforma se basa en el enfoque basado en componentes con una sintaxis similar y API avanzadas listas para la aplicación. Los sistemas de gestión de contenido simplifican la edición de contenido e intercambio de activos, permitiendo la edición en tiempo real y la carga fácil de activos. La implementación de esta lógica implica inicializar la API, obtener el token de acceso y renderizar componentes dinámicos. El resumen de la charla destaca la importancia de conocer las API incorporadas para dominar las tecnologías multiplataforma y construir aplicaciones escalables y fáciles de mantener. Las URL para probar los ejemplos están disponibles en el informe de GitHub.

El último flujo de trabajo sería tomar una captura de pantalla de la vista y devolver la imagen. Y para hacer eso, podemos usar en realidad el gancho proporcionado por el sitio de React Native llamado useRef, por lo que este useRef sería capaz de devolver el objeto de referencia mutable. Y este objeto persistirá durante toda la vida útil. Y vamos a usarlo junto con la API capture ref para tomar la captura de pantalla de la vista y devolver la imagen para los usuarios.

Entonces, basándonos en lo que vimos juntos, recuerda lo que aprendimos. Casi todos ellos se basan en el enfoque basado en componentes. Por lo tanto, la sintaxis es casi la misma, y viste que las API avanzadas listas para la aplicación ya están preparadas para ti.

Continuando con el otro ejemplo junto con el sistema de gestión de contenido, necesito decirte que hasta ahora necesitabas ayuda para editar el contenido, lo cual es una pesadilla. Pero aquí tienes buenas noticias. No necesitas hacer eso. Si sirves el contenido desde el sistema de gestión de contenido, porque el CMS servirá el contenido en diferentes dispositivos y siempre desde un mismo lugar. Y aquí tienes el ejemplo, puedes ver eso. Tu editor de contenido podrá acceder, digamos, como en este caso, al Editor Visual en el bloque SOAR, y podrán editar el contenido en tiempo real. Por supuesto, intercambiar los activos también será muy fácil porque hay una interfaz de usuario lista para que los usuarios lo hagan. Pueden cargar cualquier tipo de activos si lo desean.

Para implementar este tipo de lógica, aquí están todos los secretos detrás. La configuración será un poco diferente dependiendo del sistema de gestión de contenido que elijas. Pero el ejemplo que viste con el bloque SOAR inicializaría la API proveniente del sistema de gestión de contenido, obtener el token de acceso y renderizar los componentes dinámicos.

Entonces, aquí está el resumen de mi charla. Conocer las API incorporadas te dará el atajo para dominar las tecnologías multiplataforma. Viste cómo puedes construir aplicaciones escalables y fáciles de mantener con tecnologías multiplataforma. Eso es todo en realidad sobre mi charla, y si estás interesado en probar algunos de los ejemplos que Vimo y te mostré, hay URL disponibles en el informe de GitHub. Espero que hayas disfrutado, y gracias por ver mi charla.

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

React Advanced Conference 2023React Advanced Conference 2023
29 min
Raising the Bar: Our Journey Making React Native a Preferred Choice
At Microsoft, we're committed to providing our teams with the best tools and technologies to build high-quality mobile applications. React Native has long been a preferred choice for its high performance and great user experience, but getting stakeholders on board can be a challenge. In this talk, we will share our journey of making React Native a preferred choice for stakeholders who prioritize ease of integration and developer experience. We'll discuss the specific strategies we used to achieve our goal and the results we achieved.
React Finland 2021React Finland 2021
27 min
Opensource Documentation—Tales from React and React Native
Documentation is often your community's first point of contact with your project and their daily companion at work. So why is documentation the last thing that gets done, and how can we do it better? This talk shares how important documentation is for React and React Native and how you can invest in or contribute to making your favourite project's docs to build a thriving community
React Day Berlin 2023React Day Berlin 2023
29 min
Bringing React Server Components to React Native
React Server Components are new topic in community, bunch of frameworks are implementing them, people are discussing around this topic. But what if we could use React Server Components in React Native? And bring all optimisation features that RSC allows to mobile apps? In this talk I would present what we are able to do with RSC in React Native!
React Advanced Conference 2021React Advanced Conference 2021
21 min
Building Cross-Platform Component Libraries for Web and Native with React
Top Content
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 & React Native in combination.

Workshops on related topic

React Advanced Conference 2022React Advanced Conference 2022
81 min
Introducing FlashList: Let's build a performant React Native list all together
Top Content
WorkshopFree
In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.You will know:- Quick presentation about what FlashList, why we built, etc.- Migrating from FlatList to FlashList- Teaching how to write a performant list- Utilizing the tools provided by FlashList library (mainly the useBenchmark hook)- Using the Flipper plugins (flame graph, our lists profiler, UI & JS FPS profiler, etc.)- Optimizing performance of FlashList by using more advanced props like `getType`- 5-6 sample tasks where we’ll uncover and fix issues together- Q&A with Shopify team
React Summit 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
Top Content
WorkshopFree
Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
React Summit Remote Edition 2021React Summit Remote Edition 2021
60 min
How to Build an Interactive “Wheel of Fortune” Animation with React Native
Top Content
Workshop
- Intro - Cleo & our mission- What we want to build, how it fits into our product & purpose, run through designs- Getting started with environment set up & “hello world”- Intro to React Native Animation- Step 1: Spinning the wheel on a button press- Step 2: Dragging the wheel to give it velocity- Step 3: Adding friction to the wheel to slow it down- Step 4 (stretch): Adding haptics for an immersive feel
React Advanced Conference 2023React Advanced Conference 2023
159 min
Effective Detox Testing
Workshop
So you’ve gotten Detox set up to test your React Native application. Good work! But you aren’t done yet: there are still a lot of questions you need to answer. How many tests do you write? When and where do you run them? How do you ensure there is test data available? What do you do about parts of your app that use mobile APIs that are difficult to automate? You could sink a lot of effort into these things—is the payoff worth it?
In this three-hour workshop we’ll address these questions by discussing how to integrate Detox into your development workflow. You’ll walk away with the skills and information you need to make Detox testing a natural and productive part of day-to-day development.
Table of contents:
- Deciding what to test with Detox vs React Native Testing Library vs manual testing- Setting up a fake API layer for testing- Getting Detox running on CI on GitHub Actions for free- Deciding how much of your app to test with Detox: a sliding scale- Fitting Detox into you local development workflow
Prerequisites
- Familiarity with building applications with React Native- Basic experience with Detox- Machine setup: a working React Native CLI development environment including either Xcode or Android Studio
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.
JSNation 2023JSNation 2023
111 min
Bringing Your Web App to Native With Capacitor
WorkshopFree
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