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

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.

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.

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.

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.