JavaScript conferences

Vue.js London Live 2021

Vue.js London Live 2021

Versión en Español

Construyendo para Web y Nativo con Ionic & Vue

Mike Hartington

Mike Hartington

Recording available for Multipass and Full ticket holders

Please login if you have one.

Cuando se construye una aplicación, hay muchas opciones que los desarrolladores deben tomar. ¿Es una aplicación web? ¿Debe ser una aplicación nativa? ¿Qué debo usar para la interfaz de usuario? En este masterclass veremos cómo aprovechar Ionic para construir tu aplicación y cómo implementarla no solo en la web, sino también en nativo.

FAQ

Ionic es una plataforma para construir aplicaciones móviles utilizando una colección de componentes que facilitan un diseño visual multiplataforma compatible con iOS y Android. Permite crear aplicaciones móviles reutilizando tecnologías como HTML, CSS y JavaScript.

Vue es un framework de JavaScript que se utiliza para construir interfaces de usuario y aplicaciones de una sola página. En el contexto de Ionic, Vue se integra a través de su enrutador y CLI para mejorar el desarrollo de aplicaciones móviles con componentes estándar de Vue y transiciones automáticas adaptadas a la plataforma.

Ionic maneja automáticamente los estilos y animaciones según la plataforma en la que se encuentre la aplicación (iOS o Android). Los componentes de Ionic detectan el tipo de dispositivo y aplican estilos y animaciones apropiados. Además, se pueden personalizar estas configuraciones mediante variables CSS y propiedades personalizadas.

Sí, Ionic admite la escritura de derecha a izquierda. Al agregar la dirección RTL en la etiqueta HTML, todos los componentes de Ionic se actualizarán automáticamente para soportar este formato, incluyendo las animaciones para los cambios de ruta.

Sí, Ionic permite y recomienda el uso de TypeScript para desarrollar aplicaciones. TypeScript ofrece ventajas como el tipado estático y las herramientas de seguridad de tipos, y es el predeterminado en los proyectos de inicio de Ionic.

Para iniciar un proyecto de Ionic con Vue, se necesita instalar la CLI de Ionic y luego ejecutar el comando 'ionic start'. Durante el proceso, se puede elegir Vue como el framework y seleccionar una plantilla de inicio. Ionic también facilita la integración con la CLI de Vue para gestionar el proyecto.

react native ionic web apps vue

Mike Hartington

Mike Hartington

89 min

18 Oct, 2021

Comments

Sign in or register to post your comment.

Video transcription, chapters and summary available for users with access.

Watch more workshops on topic

Vue3: Desarrollo Moderno de Aplicaciones Frontend

Vue.js London Live 2021

169 min

Vue3: Desarrollo Moderno de Aplicaciones Frontend

Top Content

Featured WorkshopFree

Mikhail Kuznetcov

Mikhail Kuznetcov

Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.

Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.

Tabla de contenidos:
- Introducción a Vue3
- API de Composición
- Bibliotecas principales
- Ecosistema Vue3

Requisitos previos:
IDE de elección (Inellij o VSC) instalado
Nodejs + NPM

web development vue vue composition api vue 3

Presentando FlashList: Construyamos juntos una lista performante en React Native

React Advanced Conference 2022

81 min

Presentando FlashList: Construyamos juntos una lista performante en React Native

Top Content

WorkshopFree

David Cortés Fulla

Marek Fořt

Talha Naqvi

3 authors

En esta masterclass aprenderás por qué creamos FlashList en Shopify y cómo puedes usarlo en tu código hoy. Te mostraremos cómo tomar una lista que no es performante en FlatList y hacerla performante usando FlashList con mínimo esfuerzo. Usaremos herramientas como Flipper, nuestro propio código de benchmarking, y te enseñaremos cómo la API de FlashList puede cubrir casos de uso más complejos y aún así mantener un rendimiento de primera categoría.Sabrás:- Breve presentación sobre qué es FlashList, por qué lo construimos, etc.- Migrando de FlatList a FlashList- Enseñando cómo escribir una lista performante- Utilizando las herramientas proporcionadas por la biblioteca FlashList (principalmente el hook useBenchmark)- Usando los plugins de Flipper (gráfico de llamas, nuestro perfilador de listas, perfilador de UI & JS FPS, etc.)- Optimizando el rendimiento de FlashList utilizando props más avanzados como `getType`- 5-6 tareas de muestra donde descubriremos y solucionaremos problemas juntos- Preguntas y respuestas con el equipo de Shopify

react native react

Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native

React Summit 2022

117 min

Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native

Top Content

WorkshopFree

Yevheniia Hlovatska

Yevheniia Hlovatska

A diferencia de las pruebas unitarias, las pruebas de extremo a extremo buscan interactuar con su aplicación tal como lo haría un usuario real. Y como todos sabemos, puede ser bastante desafiante. Especialmente cuando hablamos de aplicaciones móviles.
Las pruebas dependen de muchas condiciones y se consideran lentas e inestables. Por otro lado, las pruebas de extremo a extremo pueden dar la mayor confianza de que su aplicación está funcionando. Y si se hace correctamente, puede convertirse en una herramienta increíble para aumentar la velocidad del desarrollador.
Detox es un marco de pruebas de extremo a extremo en caja gris para aplicaciones móviles. Desarrollado por Wix para resolver el problema de la lentitud e inestabilidad y utilizado por React Native en sí como su herramienta de pruebas E2E.
Únete a mí en esta masterclass para aprender cómo hacer que tus pruebas de extremo a extremo móviles con Detox sean excelentes.
Prerrequisitos- iOS/Android: MacOS Catalina o más reciente- Solo Android: Linux- Instalar antes de la masterclass

e2e testing react native testing beginner friendly

Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt

Vue.js London Live 2021

117 min

Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt

Top Content

Workshop

Daniel Roe

Construiremos un proyecto Nuxt juntos desde cero usando Nitro, el nuevo motor de renderizado de Nuxt, y Nuxt Bridge. Exploraremos algunas de las formas en que puedes usar y desplegar Nitro, mientras construimos una aplicación juntos con algunas de las restricciones del mundo real que enfrentarías al desplegar una aplicación para tu empresa. En el camino, dispara tus preguntas hacia mí y haré lo mejor para responderlas.

Cómo construir una animación interactiva de “Rueda de la Fortuna” con React Native

React Summit Remote Edition 2021

60 min

Cómo construir una animación interactiva de “Rueda de la Fortuna” con React Native

Top Content

Workshop

Oli Bates

- Introducción - Cleo & nuestra misión- Lo que queremos construir, cómo encaja en nuestro producto & propósito, revisar los diseños- Comenzando con la configuración del entorno & “hola mundo”- Introducción a la animación de React Native- Paso 1: Hacer girar la rueda al presionar un botón- Paso 2: Arrastrar la rueda para darle velocidad- Paso 3: Agregar fricción a la rueda para frenarla- Paso 4 (extra): Agregar hápticos para una sensación inmersiva

Pruebas Efectivas con Detox

React Advanced Conference 2023

159 min

Pruebas Efectivas con Detox

Workshop

Josh Justice

Así que has configurado Detox para probar tu aplicación React Native. ¡Buen trabajo! Pero aún no has terminado: todavía hay muchas preguntas que necesitas responder. ¿Cuántas pruebas escribes? ¿Cuándo y dónde las ejecutas? ¿Cómo te aseguras de que hay datos de prueba disponibles? ¿Qué haces con partes de tu aplicación que utilizan APIs móviles que son difíciles de automatizar? Podrías invertir mucho esfuerzo en estas cosas, ¿vale la pena?
En esta masterclass de tres horas abordaremos estas preguntas discutiendo cómo integrar Detox en tu flujo de trabajo de desarrollo. Saldrás con las habilidades e información que necesitas para hacer de las pruebas Detox una parte natural y productiva del desarrollo diario.
Tabla de contenidos:
- Decidir qué probar con Detox vs React Native Testing Library vs pruebas manuales- Configuración de una capa de API falsa para pruebas- Cómo hacer que Detox funcione en CI en GitHub Actions de forma gratuita- Decidir cuánto de tu aplicación probar con Detox: una escala móvil- Integración de Detox en tu flujo de trabajo de desarrollo local
Prerrequisitos
- Familiaridad con la construcción de aplicaciones con React Native- Experiencia básica con Detox- Configuración de la máquina: un entorno de desarrollo CLI de React Native en funcionamiento que incluye Xcode o Android Studio

react native testing

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

Todo Más Allá de la Gestión de Estado en Tiendas con Pinia

Vue.js London Live 2021

34 min

Todo Más Allá de la Gestión de Estado en Tiendas con Pinia

Top Content

Eduardo San Martin Morote

Eduardo San Martin Morote

Vue.js Core Team

Cuando pensamos en Vuex, Pinia, o tiendas en general, a menudo pensamos en la gestión de estado y los patrones Flux, pero no solo las tiendas no siempre siguen el patrón Flux, ¡hay mucho más en las tiendas que las hace valer la pena usar! Plugins, Devtools, renderizado en el lado del servidor, integraciones TypeScript... Vamos a sumergirnos en todo más allá de la gestión de estado con Pinia con ejemplos prácticos sobre plugins y Devtools para sacar el máximo provecho de tus tiendas.

state management vue

Bienvenido a Nuxt 3

Vue.js London Live 2021

29 min

Bienvenido a Nuxt 3

Top Content

Alexandre Chopin

Alexandre Chopin

Explica sobre la refactorización del código base de NuxtJS y los desafíos que enfrenta para implementar Vue 3, Vite y otros paquetes.

vite vue nuxt.js

Un Año en Vue 3

Vue.js London Live 2021

20 min

Un Año en Vue 3

Top Content

Evan You

Vue.js & Vite Creator

Vue 3 puede sonar aún nuevo para muchos usuarios, pero en realidad ya ha sido lanzado hace más de un año. ¿Cómo evolucionó Vue 3 durante este período? ¿Por qué tardó tanto en ponerse al día el ecosistema? ¿Qué aprendimos de este proceso? ¿Qué viene después? ¡Discutiremos estas preguntas en esta charla!

Utilizando Rust desde Vue con WebAssembly

Vue.js London Live 2021

8 min

Utilizando Rust desde Vue con WebAssembly

Top Content

Joe Lenton

Rust es un nuevo lenguaje para escribir código de alto rendimiento, que puede ser compilado a WebAssembly, y ejecutado dentro del navegador. En esta charla se te guiará sobre cómo puedes integrar Rust, dentro de una aplicación Vue, de una manera que es sencilla y fácil. Con ejemplos de cómo interactuar con Rust desde JavaScript, y algunas de las trampas a tener en cuenta.

vue webassembly rust

Vue: Actualizaciones de Características

Vue.js London 2023

44 min

Vue: Actualizaciones de Características

Top Content

Evan You

Vue.js & Vite Creator

El creador de Vue js da una actualización sobre las nuevas características de la tecnología.

frontend vue vue 3

Estado Local y Caché del Servidor: Encontrando un Equilibrio

Vue.js London Live 2021

24 min

Estado Local y Caché del Servidor: Encontrando un Equilibrio

Top Content

Natalia Tepluhina

Natalia Tepluhina

¿Cuántas veces has implementado el mismo flujo en tu aplicación: verificar si los datos ya se han obtenido del servidor, si es así - renderizar los datos, si no - obtener estos datos y luego renderizarlos? Creo que lo he hecho más de diez veces yo mismo y he visto la pregunta sobre este flujo más de cincuenta veces. Desafortunadamente, nuestra biblioteca de gestión de estado predeterminada, Vuex, no proporciona ninguna solución para esto.Para la aplicación basada en GraphQL, había una alternativa para usar el cliente Apollo que proporcionaba herramientas para trabajar con la caché. Pero, ¿qué pasa si usas REST? Afortunadamente, ahora tenemos una alternativa de Vue a una biblioteca de react-query que proporciona una buena solución para trabajar con la caché del servidor. En esta charla, explicaré la distinción entre el estado de la aplicación local y la caché del servidor local y haré algo de codificación en vivo para mostrar cómo trabajar con este último.

graphql vue server cache