Llevando Ionic (y Componentes Web) a React

Hola a todos. Mi nombre es Mike Artington. Soy un desarrollador en Ionic, y quiero hablarles sobre cómo llevar Ionic a React, y luego repasar algunos de los desafíos divertidos que enfrentamos en el camino. Si tienen alguna pregunta, no duden en comunicarse después.

Para aquellos que no lo saben, Ionic es un framework para construir aplicaciones multiplataforma utilizando HTML, CSS y JavaScript. Escriben su aplicación utilizando nuestros componentes, y obtienen una aplicación nativa para iOS, una aplicación nativa para Android o una aplicación de escritorio, o una aplicación web progresiva, todo desde la misma base de código. Aproximadamente el 20% de todas las aplicaciones en las tiendas de aplicaciones utilizan Ionic en cierto grado.

Ahora, eso es un poco una métrica de vanidad. No significa realmente nada. Solo que las personas están utilizando Ionic y teniendo mucho éxito. Además de ser utilizado dentro de las tiendas de aplicaciones, hay millones de desarrolladores en todo el mundo que utilizan Ionic hoy en día y tienen mucho éxito.

Ahora, una pequeña lección de historia. Ionic ha estado históricamente vinculado a un framework específico desde sus inicios. Y a medida que los frameworks van y vienen, y JavaScript como un ecosistema madura, constantemente escuchamos de nuestros desarrolladores que querían utilizar más que solo ese framework. Y para ser honestos, estábamos interesados en ver, ¿podemos llevar Ionic a otros frameworks también? Pero constantemente teníamos miedo de tener que construir teníamos miedo de tener que reescribir nuestros componentes a otro framework que podría o no podría durar durante los próximos cinco años.

Ahora, avancemos rápidamente hasta el año pasado en 2019, Ionic había tenido años de versiones estables. Y JavaScript como un ecosistema había madurado hasta un punto donde había mucho menos cambio entre diferentes frameworks y diferentes estándares. Y nos sentíamos bastante ambiciosos de que podríamos crear otro enlace para un framework diferente y admitir algo más que lo que estábamos históricamente vinculados. Así que en aproximadamente seis meses, terminamos creando una colección completa de componentes de React basados en nuestro conjunto de componentes original de Ionic. Estos eran todos componentes que pueden importar y agregar a su proyecto estándar de React. y seguían las mejores prácticas de React internamente para cómo administrar el estado del componente y proporcionar todas las diferentes interacciones que las personas esperarían. Más interesante aún, pudimos integrarnos con React Router y comenzar a crear un componente de orden superior que podía crear animaciones y transiciones automáticamente para usted sin que los desarrolladores tuvieran que configurarlo ellos mismos. Ahora, eso nos lleva a Ionic React, que ha alcanzado su versión estable hace unos meses, pero lleva Ionic a aún más desarrolladores allá afuera. Así que echemos un vistazo a cómo se ve Ionic React. Aquí en mi editor, solo tengo un proyecto estándar de React, y voy a abrir mi componente de aplicación principal. Ahora, tenemos una colección de diferentes componentes que estamos importando de Ionic React, así como un envoltorio para React Router y nuestros diferentes componentes a los que podemos enrutar. También incluimos el CSS principal de Ionic, así como nuestro propio tema personalizado en variables.css. Ahora, más abajo en nuestra aplicación, tenemos nuestro componente de aplicación principal con un Ion Router Outlet, que actúa como un marcador de posición para todas nuestras diferentes rutas. Por ejemplo, podríamos enrutar a la pestaña uno, pestaña dos, pestaña dos detalle, así como pestaña tres. Podemos configurar cómo nos dirigimos a esos componentes al observar los diferentes botones de pestaña dentro de nuestra aplicación. Así que abramos uno de los componentes para esta interfaz de pestaña.

Aquí en la pestaña dos, tenemos otro componente estándar de React. Si has estado usando React durante algún tiempo, esto debería resultarte bastante familiar. Una parte que destaca es este botón Ion en la línea 28. Aquí, estamos conectando un enlace de ruta utilizando la propiedad de enlace del enrutador. En nuestra aplicación, podemos navegar a la pestaña dos haciendo clic en el botón de la pestaña dos, y luego hacer clic en ir a la página de detalle para navegar a los detalles. Lo interesante aquí es que la pestaña dos ahora es independiente de todas las otras pestañas individuales, creando una navegación de pila que se puede mantener a través de diferentes cambios de pestañas.

En otro ejemplo, tenemos lo que llamamos navegación lineal, donde hay un lugar para que tu aplicación cargue rutas. Aquí, tenemos una aplicación de reproductor de música que carga canciones y álbumes de Apple Music. E incluso podemos buscar en Apple Music utilizando nuestro componente de página de búsqueda y escribiendo una consulta. Ahora, esta aplicación es un ejemplo de una aplicación web progresiva implementada en un navegador. Si quisiéramos una aplicación nativa de iOS, la misma base de código se puede implementar en un proyecto nativo de iOS y ejecutarlo en tu teléfono o simulador. Si esto te parece interesante y quieres probarlo tú mismo, simplemente puedes instalar el Ionic CLI utilizando NPM o Yarn y luego ejecutar Ionic start para crear tu aplicación. Nuestro CLI te pedirá un nombre para la aplicación y luego tu framework de elección así como una plantilla de inicio para comenzar.

En resumen, Ionic y React son una gran combinación. Obtienes la simplicidad de construir aplicaciones con React, además de los componentes de alta calidad que obtienes de Ionic. Puedes enviarlo como una aplicación web progresiva y luego, cuando quieras dirigirte a iOS o Android, puedes agregar esos proyectos nativos según los necesites. Esto realmente te brinda la capacidad de reutilizar tus habilidades web existentes y aprender una vez para escribir para cualquier plataforma. Gracias.

Bueno, eso es mucho conocimiento en solo 20 o 28 minutos. Cuatro temas geniales.

Me gustaría invitar a todos los oradores de las charlas rápidas conmigo al escenario para la última ronda de preguntas y respuestas del día.

Hola a todos. Hola. Hola. Buenos días, tardes, noches, lo que sea para ustedes. Sí, voy a ir directo a las preguntas. Voy a empezar con la primera pregunta para Matt y Claire. ¿A qué mercado se dirigen, y por qué alguien usaría Mux en lugar de Twitch o YouTube? Sí, es una pregunta válida. Somos un producto orientado a los desarrolladores, por lo que somos simplemente APIs para que los desarrolladores las integren en su plataforma, a diferencia de Twitch y YouTube, que son productos más orientados al consumidor. Entonces, si eres un streamer que solo quiere transmitir en vivo, sin escribir ningún código, esas son excelentes plataformas que probablemente deberías usar. Si estás tratando de construir una plataforma, probablemente seamos una mejor opción. Bueno, entonces se trata más del público objetivo, supongo, y de que tienes más control sobre lo que estás haciendo. Sí, lo pensaría un poco como... Una mala analogía que mencioné en Slack es, son más como PayPal o Venmo, nosotros somos más como Stripe, si lo piensas en términos de APIs de pago. De acuerdo, gracias.

La siguiente pregunta es para Jen. ¿Cuáles son las razones por las que a alguien del equipo de React Native web le gustaría usar un div como botón? La razón es que poner HTML dentro de un botón no es realmente HTML semántico. Por lo tanto, pueden querer envolver ese contenido, por ejemplo, una tarjeta o un bloque de imagen y texto, en un div y convertirlo en un botón accesible en lugar de poner un botón alrededor de él. Sí. Entonces, si tienes una tarjeta completamente clickable con diferentes elementos dentro, no puedes hacerlo de forma semántica dentro de un botón. Correcto. En ese caso, querrás hacer un div accesible. Pero al menos deberías querer hacerlo. Quizás. Dije que si no lo haces, Jan vendrá a buscarte. Te tocaré amablemente en el hombro y te haré sugerencias. ¿Qué tal eso? Sí, pero tocar no funciona. Entonces, tal vez lo haga.

Sí, sí. No es una pregunta, pero solo para ti, un amable toque en el hombro de Martin Van Houten. No es realmente una pregunta. Solo quería decir que Match se ve increíble. Bueno, siempre es agradable escuchar eso. Muchas gracias. Espero que después de probarlo, sientas lo mismo y no me odies. Bueno, en realidad, en la empresa para la que trabajo, Albert Heijn, lo estamos usando. Y debo decir que ha sido un placer, así que muchas gracias.

Oh, eres mi vecino. Puedo ir a visitarte. Eso sería agradable. Mike, ¿Ionic admite aplicaciones nativas, al igual que React Native? ¿O es como una aplicación estándar de Cordova donde es una interfaz de usuario web en lugar de una aplicación nativa? Es una mezcla de ambas cosas. La mayoría de la interfaz de usuario se muestra en una vista web, pero puedes integrarte con vistas nativas personalizadas o actividades en Android y mezclar cuál se muestra en la vista web o la vista nativa o incluso superponer la vista nativa sobre la vista web. Así que obtienes lo mejor de ambos mundos. Eso se siente poderoso.

De acuerdo, gracias chicos y señorita, por estas excelentes charlas. Para las personas que están viendo, también estarán en las salas de Zoom para preguntas, pero la parte formal ha terminado. Me voy a despedir por un rato. Así que gracias por unirse. Gracias. Gracias. Adiós.