Patrones para Aplicaciones Vue.js a Gran Escala

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

¿Cuál es la mejor manera de estructurar una aplicación Vue.js para que pueda escalar y satisfacer todas las necesidades de tus usuarios? Existen múltiples patrones establecidos por la comunidad Vue y la comunidad de programación en general que se pueden adoptar para hacer tus bases de código más predecibles, mantenibles y extensibles.

This talk has been presented at Vue.js London 2023, check out the latest edition of this JavaScript Conference.

FAQ

Daniel Kelly es el instructor principal en la escuela y ha sido desarrollador full-stack durante los últimos 10 años, especializándose en tecnologías como Wearable en el backend y Vue.js en el frontend.

El objetivo de la sesión es examinar algunos patrones para el desarrollo de aplicaciones Vue.js a gran escala y determinar la mejor manera de estructurar una aplicación Vue.js para que sea mantenible y escalable.

La guía de estilo de Vue.js es crucial porque establece estándares de estilo para el framework, ayudando a los desarrolladores a mantener un código predecible y organizado, facilitando así la colaboración y el mantenimiento del código.

Daniel Kelly recomienda utilizar herramientas como Volar y ESLint, las cuales están integradas en los IDEs y ayudan a detectar errores de forma eficiente, mejorando la calidad del código y el flujo de trabajo de desarrollo.

TypeScript es importante en proyectos a gran escala porque mejora el conocimiento del IDE sobre el código, ayuda a prevenir errores, hace las refactorizaciones menos arriesgadas y mejora la experiencia de autocompletado.

Nuxt 3 ofrece una estructura de archivos predeterminada, importación automática de componentes, y viene con TypeScript instalado por defecto, lo que facilita la gestión de proyectos y mejora la experiencia de desarrollo.

Envolver código de terceros facilita la sustitución de dependencias y la implementación de funcionalidades específicas, como manejo de errores o almacenamiento en caché, sin afectar el resto del proyecto.

Un SDK es un conjunto de herramientas que facilita la comunicación con backends al encapsular la lógica de las solicitudes, lo que reduce errores y permite normalizar y optimizar la manipulación de datos.

Daniel Kelly
Daniel Kelly
24 min
15 May, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
En esta charla, Daniel Kelly discute patrones para el desarrollo de aplicaciones Vue.js a gran escala, enfatizando la importancia de seguir los estándares y utilizar las herramientas oficialmente recomendadas. Destaca la guía de estilo de Vue.js como un recurso valioso para los estándares de estilo y sugiere usar TypeScript y Nuxt 3 para mejorar las capacidades de desarrollo. También menciona los beneficios de tener una convención de nombres para las rutas y el concepto de envolver las dependencias de terceros para mayor flexibilidad. Además, menciona el componente app-icon para una solución de icono genérico y las ventajas de interactuar con los backends a través de un SDK.

1. Introducción al desarrollo de aplicaciones Vue.js a gran escala

Short description:

¡Hola! Mi nombre es Daniel Kelly, y soy el instructor principal en la escuela. Hoy, discutiremos patrones para el desarrollo de aplicaciones Vue.js a gran escala y la importancia de estructurar una aplicación mantenible y extensible. Un consejo clave es hacer que tu base de código sea predecible siguiendo estándares. La guía de estilo de Vue.js es el recurso oficial para los estándares de estilo en la comunidad de Vue.js. Proporciona pautas para el nombramiento de componentes, como el uso de Pascal case y el prefijo de los componentes base con 'app' o 'base'. Los componentes de instancia única deben tener el prefijo 'the', y los componentes hijos estrechamente acoplados deben tener nombres con prefijo. Seguir estos estándares ayuda a garantizar la claridad y prevenir conflictos. Esto es solo una muestra de las pautas disponibles en la guía de estilo.

¡Hola! Mi nombre es Daniel Kelly, y soy el instructor principal en la escuela. Estoy muy emocionado de estar con todos ustedes aquí hoy. He sido un desarrollador full-stack durante los últimos 10 años, trabajé con tecnologías como Wearable en el back end, y por supuesto, Vue.js en el front end. Pero eso es suficiente sobre mí. Solo quería informarte rápidamente con quién estás tratando, pero ahora pasemos al tema de hoy, ¿de acuerdo?

Y eso es mirar algunos patrones para el desarrollo de aplicaciones Vue.js a gran escala, ¿verdad? Entonces, nuestro objetivo durante esta sesión es responder a esta pregunta, ¿cuál es la mejor manera de estructurar una aplicación Vue.js para que pueda seguir siendo mantenible y extensible, incluso cuando llega a un tamaño muy grande, ¿verdad? ¿Por qué es importante esta pregunta? Porque probablemente todos hemos recibido una tarea para una aplicación en particular antes y hemos tenido este mismo sentimiento. Simplemente no sabemos por dónde empezar, ni siquiera sabemos cómo abordar el problema, tal vez porque las cosas están un poco desordenadas. Entonces, nuestro objetivo es eliminar este sentimiento aquí tanto como humanamente sea posible. Está bien, todos queremos disfrutar de nuestros trabajos y estar menos frustrados.

Bueno, voy a comenzar con este consejo clave para hacer una aplicación a gran escala, que es hacer que tu base de código sea predecible. Este primer consejo realmente no es tan emocionante, realmente no es tan llamativo, pero para ser honesto, esta es una de las claves, en mi opinión, para construir una aplicación mantenible. Hazlo lo más predecible posible siguiendo estándares, para que todos sepan dónde buscar y cómo funcionan ciertas cosas. Entonces, esto plantea la pregunta, ¿dónde existen los estándares para la comunidad de Vue.js? El primer lugar que me viene a la mente es la guía de estilo de Vue.js. Este es el lugar oficial para los estándares de estilo para el marco de Vue. Aquí hay un ejemplo de algunos estándares designados dentro del documento. Cuando se trata de nombrar tus componentes, en primer lugar, dice que todos tus componentes deben estar en Pascal case. También menciona que debes prefijar tus componentes base con la palabra, app, o base. Entonces, estos son todos esos componentes que vas a utilizar en toda tu aplicación, y son de uso más general, ¿verdad? Estas son cosas como AppButton, AppTable, AppModal, cosas así. Cosas que aceptan props hacia abajo y eventos hacia arriba, y probablemente no dependen de ningún estado global, ¿de acuerdo? En realidad, prefiero usar App en este caso porque siempre pone mis componentes base en la parte superior de mi directorio de componentes. También menciona que debes tener nombres de varias palabras para tus componentes. Esto es en realidad más que solo una cosa de estilo, también es para prevenir conflictos entre los elementos HTML existentes o futuros y tus nuevos componentes. Otro estándar es prefijar todos tus componentes de instancia única con la palabra, the. Estos son cualquier componente que solo se va a utilizar en la página una sola vez. Ahora, absolutamente podrían usarse en varias páginas, pero solo aparecen en una sola instancia de una página a la vez. Por lo general, estos son componentes de tipo diseño, cosas como el encabezado, el pie de página, la barra lateral, y así sucesivamente. También se menciona que debes prefijar los componentes hijos estrechamente acoplados. Por ejemplo, si tuvieras un componente para un artículo que siempre existía dentro de una lista de tareas, prefijarías ese nombre de componente con la lista de tareas, y luego el artículo. Una aplicación real de esto que utilicé en una base de código en mi trabajo anterior fue que tenía un componente de formulario de trabajo, y luego había un campo especial para elegir la ubicación donde se debería anunciar un trabajo llamado campo de mapa de ubicación de formulario de trabajo. Entonces, esto le dice a cualquier otro desarrollador dentro del proyecto que este componente realmente solo está destinado a ser utilizado en el contexto del formulario de trabajo. Y pueden obtener eso solo mirando el nombre del componente. Está bien, esto es genial, y hay otros consejos sobre cómo estilizar los nombres de tus componentes dentro de la guía de estilo también, pero esto es solo una buena muestra, y ciertamente hay mucho más disponible en la guía de estilo además de solo el nombramiento de componentes.

2. Estándares, Herramientas e IDE

Short description:

Implementar estándares en su proyecto reduce la carga cognitiva para los nuevos miembros del equipo. La guía de estilo de Vue.js proporciona pautas para el nombramiento de componentes y otros estándares de estilo. La guía está actualmente desactualizada pero sigue siendo valiosa. Las herramientas oficialmente recomendadas para Vue.js, como Vite y Opinion, proporcionan recursos útiles. Evite soluciones personalizadas cuando existen las oficialmente recomendadas. NUX3 es una fuente confiable de previsibilidad debido a sus convenciones y popularidad. Aprovechar al máximo su IDE, instalando Volar y ESLint, ayuda a detectar errores y mejora la experiencia de desarrollo. El formateo del IDE, ya sea con ESLint o Prettier, garantiza un estilo de código consistente.

Pero esto es solo una buena muestra para mostrarte, oye, si implementas estos estándares, es una cosa cognitiva menos que las personas que se incorporan a tu proyecto tienen que pensar, porque son estándares que todos ya conocen, ¿vale?

Por cierto, justo en el momento de esta charla, es importante tener en cuenta esta advertencia en la parte superior de la guía de estilo, y es que actualmente está un poco desactualizada. La mayoría de los ejemplos están solo en la API de opciones, y no hay reglas con respecto a Script Setup y la Composition API. Sin embargo, como acabas de ver, muchas de las cosas para el estilo ni siquiera necesariamente tienen que ver con una API u otra. Todas las cosas de nombramiento de componentes podrían aplicarse a cualquier API. Así que esto sigue siendo un gran recurso, pero espera que se actualice en el futuro, ¿vale?

Otro recurso realmente excelente para los estándares es la tooling oficialmente recomendada para Vue.js, ¿de acuerdo? Se encuentra en la página de tooling de la documentación oficial de Vue.js. Proporciona referencia a cosas como Vite para tu servidor de desarrollo y Opinion para la gestión global del estado. Esto puede parecer que se da por sentado, pero tal vez he ignorado algunos de mis propios consejos en el pasado y quiero asegurarme de que no hagas lo mismo. ¿A qué me refiero? Bueno, uno de los proyectos en los que estaba trabajando antes de unirme a la escuela Vue, por supuesto, necesitaba una gestión global del estado. Bueno, no estaba emocionado con la DX que proporcionaba Vuex, y así que se me ocurrió mi propia solución de gestión global del estado basada en la API Vue.Observable en Vue 2. La historia corta es que, sí, hubo algunas mejoras en DX. Sin embargo, hubo más desventajas que ventajas. Hubo problemas de caché que no manejé que Vuex ya habría manejado por mí bajo el capó. Hubo problemas de incorporación cuando se trataba de mover a nuevas personas al proyecto a quienes tuve que explicarles esta solución personalizada que si solo hubiera usado Vuex ya estarían familiarizados con ella o al menos podría haberlos apuntado en la dirección de la documentación de Vuex, ¿verdad? Así que la clave aquí es si hay una solución oficialmente recomendada para tu problema, definitivamente piensa mucho antes de usar cualquier otra cosa, ¿vale?

Así que previsibilidad de la guía de estilo, previsibilidad de la tooling oficialmente recomendada, y finalmente otra gran fuente, creo, de previsibilidad es el metaframework NUX3, ¿vale? Toma muchas decisiones basadas en opiniones y es un gran jugador en la community de Vue.js, muchas personas estarán familiarizadas con las convenciones que proporciona. Así que definitivamente recomiendo tomar indicaciones de NUX3 cuando se trata de estructurar tu aplicación o simplemente usar NUX3 para empezar. Por cierto, verás que NUX3 aparece algunas veces más en esta charla porque creo que es un excelente software. Bueno, entonces el consejo número dos es aprovechar al máximo tu IDE. Después de todo, este es el software que vas a usar más para desarrollar tu aplicación. En primer lugar, eso significa asegurarte de instalar Volar, eso es probablemente bastante obvio. Sin embargo, el número dos también es asegurarte de que tienes ESLint instalado en todos tus proyectos. He trabajado en proyectos antes donde no hicimos esto. Déjame decirte, fue un dolor absoluto porque ESLint te ayudará a detectar elementos directamente dentro de tu IDE sin tener que esperar para descubrirlos en tiempo de ejecución. De hecho, te mostrará errores en tu IDE que incluso podrías no obtener errores duros para dentro del navegador, ¿vale?

Entonces, por ejemplo, en este pequeño fragmento de código, estamos usando un V4 para recorrer item en items pero hemos dejado la clave. Esto no daría error en el navegador pero mi IDE sabe ahora gracias a ESLint que realmente debería agregar esta clave a mi V4. Y lo mismo aquí abajo para este componente Hello World. Se está importando y registrando. Sin embargo, no se está utilizando en ninguna parte dentro de mi plantilla. Así que ESLint está salvando a mi usuario final de tener que descargar este código extra que nunca se utiliza. Correcto, obtengo esto esencialmente gratis solo instalando ESLint, ¿vale? Es una decisión absolutamente obvia. Similar a esto es asegurarte de que el formateo de tu IDE esté configurado adecuadamente.

3. Configuración del IDE, TypeScript y Nuxt 3

Short description:

Asegúrate de que tu IDE esté configurado para formatear automáticamente tu código. Consulta el curso 'Visual Studio Code para desarrolladores de Vue.js' para obtener más consejos. Considera usar TypeScript en tus proyectos Vue.js a gran escala para mejorar las capacidades de tu IDE. Vue School ofrece cursos sobre TypeScript para proyectos Vue.js. Nuxt 3 tiene TypeScript instalado por defecto, lo que lo convierte en una excelente manera de comenzar con TypeScript. Nuxt también proporciona excelentes convenciones de estructura de archivos y funcionalidades, como la auto-importación de componentes y el enrutamiento basado en archivos.

Bueno, este podría ser el formateo que viene integrado con ESLint o podría ser un formateador más opinado como Prettier. Pero no importa qué, asegúrate de que tu IDE esté configurado para hacer este formateo automáticamente por ti, ya sea al guardar el archivo o lo que sea, solo asegúrate de no tener que cargar con esa carga cognitiva tú mismo. Simplemente no es necesario. La tooling puede hacerlo por ti, ¿vale?

Si te gustaría obtener más tips y trucos sobre cómo aprovechar al máximo tu IDE en el contexto de un proyecto de Vue.js, te recomiendo encarecidamente que eches un vistazo a este curso muy valorado que tenemos en Vue School. Mucha gente me ha dado muy buenos comentarios de que esto les ha ayudado a optimizar su flujo de trabajo. Vale, se llama Visual Studio Code para desarrolladores de Vue.js. Y en él, repasamos algunas de las cosas de las que acabo de hablar, pero también nos adentramos en cosas como utilizar los snippets de Vue.js que proporciona la community, crear tus propios snippets de Vue.js, optimizar tu flujo de trabajo para Git en términos de usar tu IDE, y mucho más. Así que definitivamente echa un vistazo a eso si Visual Studio Code es tu IDE de elección.

Por último, realmente, realmente, realmente recomiendo que consideres usar TypeScript en tus proyectos de Vue.js a gran escala. Van a llevar el conocimiento de tu IDE del código a un nivel absolutamente otro que simplemente no es posible sin TypeScript, ¿vale? Esto te ayudará a prevenir errores mientras estás desarrollando tu código, hará que tus refactorizaciones sean menos estresantes y menos riesgosas, y ayudará a dar a tu autocompletado superpoderes. Si no estás familiarizado con el uso de TypeScript en el contexto de un proyecto de Vue.js, en Vue School, sí, también tenemos un curso para ti allí. Te enseñaremos cómo escribir prompts de componentes, escribir eventos de componentes, escribir refs de plantillas, y mucho más, ¿vale? Y aunque seas completamente nuevo en TypeScript y no conozcas solo los conceptos básicos, tenemos un curso de Fundamentos de TypeScript para ti. ¿Vale? Simplemente no tengo tiempo para entrar en todos los detalles de esas cosas durante esta charla, pero quiero darte los recursos. Finalmente, Nuxt 3, nota, tiene TypeScript instalado por defecto. Y si eres completamente nuevo en TypeScript, realmente creo que usar Nuxt 3 es una excelente manera de experimentar y simplemente jugar y acostumbrarte a usar TypeScript en un nuevo proyecto. ¿Por qué? Bueno, porque simplemente está instalado por defecto. Puedes usar JavaScript todo lo que quieras. Puedes usar componentes regulares de JavaScript, y luego, según lo veas necesario, implementar un componente de TypeScript aquí y allá y espolvorearlo en tu proyecto progresivamente a medida que te acostumbras a él. ¿Vale? Realmente una excelente manera de empezar con TypeScript. Y por cierto, en el contexto de un proyecto de Nuxt, incluso obtienes algunos tipos especiales generados para ti sobre la marcha por el framework. Así que, por ejemplo, si tienes algunos puntos finales de API configurados internamente dentro del proyecto basados en una convención de archivos especial, el Nuxt especifica, puedes obtener autocompletado cada vez que llamas a fetch en cualquiera de esos puntos finales de API porque genera estos tipos sobre la marcha basados en las convenciones de la estructura de archivos. Así que eso es realmente genial. Hablando de estructura de archivos, siempre me hacen esta pregunta, ¿cómo debería organizar mis archivos para mi proyecto a gran escala? Y mi respuesta simple hoy en día es simplemente usar los estándares que proporciona Nuxt. Y de hecho, simplemente adelante y usa los estándares que están realmente dentro del proyecto. De hecho, comienza tu proyecto con Nuxt3 porque no solo obtienes los grandes estándares, sino que obtienes algo de magia genial encima de esos estándares. Por ejemplo, cualquier componente que se crea dentro del directorio de componentes se auto-importa para ti. No tienes que importarlos manualmente a lo largo de tu proyecto. Lo mismo ocurre con los composables, ¿vale? Los plugins también se auto-registran y las páginas dentro del directorio de páginas se convierten automáticamente en rutas. Esto se llama enrutamiento basado en archivos. Así que hay muchas cosas buenas allí cuando se trata de la estructura de archivos de Nuxt, ¿vale? Grandes convenciones pero también gran funcionalidad.

4. Convención de Nomenclatura para Rutas

Short description:

Elabore una convención de nomenclatura para sus rutas, aunque no esté oficialmente especificado en Vue.js. Otros frameworks tienen convenciones de nomenclatura de rutas, como la de Laravel. Tener una convención en vigor garantiza la previsibilidad y la colaboración dentro del equipo.

El consejo número cuatro es elaborar una convención de nomenclatura para sus rutas. Esto no es algo que esté especificado oficialmente para Vue.js en ningún lugar. Sin embargo, muchos otros frameworks por ahí sí tienen convenciones de nomenclatura de rutas. Y la que ves en la pantalla frente a ti ahora se ha tomado directamente de los docs de Laravel. Así que podría estar trabajando en un frontend de Vue.js y otros desarrolladores que están en mi equipo que están familiarizados con Laravel también podrían estar trabajando en este frontend y podrían tener una forma predecible de trabajar con rutas si sigo la misma convención para mi frontend. Así que tu equipo podría no usar Laravel. Eso está perfectamente bien. Mi punto es tener algún tipo de convención en su lugar. Y si necesitas inspiration para una, definitivamente te sugiero que revises los docs de Laravel porque esta convención es realmente genial. ¿De acuerdo? El consejo número cinco es envolver tu código de terceros.

5. Envolver Dependencias de Terceros para Mayor Flexibilidad

Short description:

Josh Deltner explica el concepto de envolver dependencias de terceros para disminuir la posibilidad de inicio de sesión de terceros y aumentar las optimizaciones específicas de la aplicación. Envolver dependencias permite un fácil reemplazo en un solo lugar, sin afectar a toda la base de código. También permite extender la funcionalidad para casos de uso específicos de la aplicación. Este enfoque funciona tanto para bibliotecas funcionales como para componentes, proporcionando una forma conveniente de implementar y gestionar código de terceros.

Este es un concepto que Josh Deltner explica muy bien en su artículo titulado Nuxt Enterprise Patterns Provider Abstractions. ¿De acuerdo? ¿Por qué deberíamos hacer esto? Bueno, disminuye nuestra posibilidad de inicio de sesión de terceros y aumenta el área de superficie para optimizaciones específicas de la aplicación. Es posible que en realidad no entiendas lo que eso significa. Así que permíteme mostrarte con un pequeño ejemplo de código.

¿De acuerdo? Así que vamos a suponer que estamos usando Axios en nuestro proyecto para hacer nuestras solicitudes AJAX. Ahora, Axios es lo suficientemente popular como para que yo no sugiera envolver Axios. Yo sugeriría usarlo directamente. Sin embargo, es una biblioteca buena y común que creo que ayuda a las personas a entender este patrón. Así que no envolvería esto en tus aplicaciones, pero lo haría para dependencias de terceros similares.

Bueno, digamos que tienes Axios. Para envolver Axios, podrías crear una clase llamada HTTP y luego definir un método get en esa clase. Bajo el capó, todo lo que realmente estás haciendo es llamar al método get de Axios. Y luego podrías hacer lo mismo para los otros tipos de métodos y así sucesivamente. Pero, ¿por qué en el mundo querría hacer esto, Daniel? Quiero decir, no me pagan por línea, ¿verdad? Bueno, la ventaja aquí es que si, por alguna razón, alguna vez tuviéramos que reemplazar esa dependencia por algo más, podría hacerlo muy fácilmente en un solo lugar. Así que, aquí, hemos cambiado Axios por la función nativa del navegador fetch. Y lo hermoso es que solo hemos tenido que cambiarlo en un lugar, es decir, en nuestra clase HTTP. No tuvimos que buscar en toda la base de código, hacer un montón de búsquedas y reemplazos desordenados, solo tuvimos que centrarnos en este único archivo. Y lo otro hermoso de esto es que todos los demás desarrolladores que trabajan en el proyecto que están usando esta clase HTTP en todo el proyecto, ni siquiera tienen que saber que he actualizado la dependencia. Simplemente siguen usando la clase HTTP como de costumbre, ¿de acuerdo?

Así que, esta es una solución realmente genial cuando se trata de dependencias de las que tal vez no estés tan seguro, que piensas que podrían no tener la longevidad. Podrías ser reemplazado más adelante por algo más. Así que, no estoy diciendo que envuelvas todo tu código de terceros, pero sé selectivo y sí envuelve algo de tu código de terceros, ¿de acuerdo? Otro gran beneficio de envolver este código de terceros es que se presentan oportunidades para extender la funcionalidad para casos de uso específicos de la aplicación. Así que, por ejemplo, digamos que quería manejar todos mis errores HTTP de una manera particular en mi aplicación. Bueno, en ese punto, es tan fácil como añadir un try-catch dentro de mi única clase. Ahora, por supuesto, esta experiencia de usuario no es genial, pero entiendes la idea. Puedo tener estas optimizaciones específicas de la aplicación todas envueltas en mi clase. Y luego, cuando voy a usar la clase en toda la aplicación, no tengo que preocuparme por informar de estos errores al usuario o lo que sea. Lo mismo podría aplicarse a un mecanismo de caché. Bueno, creo que entiendes la idea. Por cierto, esto también funciona para componentes y no solo para bibliotecas de ayuda funcionales. Así que, por ejemplo, este componente app-icon que tengo aquí está hecho para hacer mi solución de iconos de mi aplicación genérica e incluso extenderla para que pueda usar dos soluciones de iconos diferentes a la vez, así que ves aquí mi app-icon envuelve font awesome así como los iconos de design material, y he proporcionado una única interfaz que es el componente app-icon para implementar los iconos en toda mi aplicación.

6. Componente App Icon y SDKs de Backend

Short description:

El componente app-icon permite una solución de iconos genérica y extensible en tu aplicación Vue.js. Interactuar con los backends a través de un SDK ofrece ventajas como prevenir errores tipográficos, normalización de datos en el lado del cliente, detección de errores y seguridad de tipo. Los cursos recomendados de Vue School incluyen TypeScript con Vue JS 3, Pina la tienda Vue agradable, y pruebas rápidas con V-test. Vue School también ofrece el curso AI Chatbot con Vue JS y GPT-4 y la certificación oficial de Vue JS.

Por ejemplo, este componente app-icon que tengo aquí está hecho para hacer mi solución de iconos de mi aplicación genérica e incluso extenderla para que pueda usar dos soluciones de iconos diferentes a la vez, así que ves aquí mi app-icon envuelve font awesome así como los iconos de diseño material, y he proporcionado una única interfaz que es el componente app-icon para implementar los iconos en toda mi aplicación.

Genial. Bueno, entonces el consejo número seis es interactuar con tus backends a través de un SDK. Bien, echa un vistazo a estas dos líneas aquí. ¿Cuál de estas preferirías escribir? ¿Preferirías escribir la solicitud completa, algo así, o preferirías escribir algo corto y simple, como esto? Para mí, la respuesta es clara. Quieres hacer la opción número dos, ¿verdad? Bueno, hay varias ventajas diferentes si eliges esta opción. Número uno, y más simplistamente, te ayuda a prevenir errores tipográficos, ¿vale? No tendrás que preocuparte por los errores tipográficos en la ruta de tu punto final de API. Pero también te proporciona la oportunidad de hacer la normalización de datos del lado del cliente en un solo lugar. Piensa en convertir todas tus cadenas de fecha que vienen del backend a objetos de fecha reales en JavaScript, o cualquier otro dato derivado tal vez, como cosas calculadas que necesitas hacer, o algo así. Vale, eso puede ser envuelto en el SDK real, y tu código cliente real no tiene que pensar en ello, ¿vale? También es más fácil con los SDKs detectar errores y proporcionar seguridad de tipo. Por cierto, no tienes que escribir estos SDKs por ti mismo. Hay muchas soluciones por ahí que vienen con SDKs de JavaScript ya construidos para ti. Así que cosas como Firebase son realmente geniales para esto, que por cierto, usamos en la masterclass de Vue.js 3 como backend, y Superbase, que se autodenomina alternativa de código abierto a Firebase, es una solución que realmente me gusta, donde incluso proporcionan un comando para generar automáticamente tus tipos de TypeScript basados en la estructura de tu base de datos. Y esto hace que sea realmente, realmente genial trabajar con ello, ¿vale? Por cierto, si te gusta Laravel, también hay esta biblioteca de consultas de Laravel, biblioteca de generación de consultas que hace mucho lo mismo que algunas de estas otras dos de las que acabo de hablar. Así que te sugeriría que lo revisaras si te gusta Laravel.

Genial, ese es mi tiempo contigo hoy. Quería dejarte con solo unas pocas recomendaciones para algunos cursos de Vue School que creo que te ayudarán a construir mejores aplicaciones a gran escala. El número uno es el curso de TypeScript con Vue JS 3, del que ya hemos hablado un poco. El siguiente es nuestro curso Pina la tienda Vue agradable. Esto te ayudará a tener una gran comprensión de la solución oficial de gestión de estado Pina para Vue, y por último está envolviendo pruebas rápidas con V-test. Por cierto, también acabamos de terminar de lanzar este gran nuevo curso llamado Chatbot AI con Vue JS y GPT-4. Si estás interesado en implementar AI en tus aplicaciones, tus aplicaciones Vue JS, definitivamente te sugiero que lo revises. Y la certificación oficial de Vue JS se ha lanzado y se están aceptando pre-órdenes. Así que esto es algo que el equipo de Vue School está haciendo en colaboración con el equipo central de Vue. Si te gustaría demostrar tus habilidades de desarrollo de Vue JS a posibles empleadores o posibles clientes, esta es una gran manera de hacerlo. Muchas gracias a todos por su tiempo. Y espero que hayan obtenido algunos conocimientos valiosos de la charla de hoy. Todos ustedes tengan un maravilloso día y sigan programando. Gracias. ______________________________________________________________________________________________________ __________________________________________________________________ ______________________________________________________________________ __________________________________________________ __________________________________________________________

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 2021Vue.js London Live 2021
34 min
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Bienvenido a Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Bienvenido a Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
Un Año en Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
Un Año en Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Utilizando Rust desde Vue con WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilizando Rust desde Vue con WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Actualizaciones de Características
Vue.js London 2023Vue.js London 2023
44 min
Vue: Actualizaciones de Características
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Vue.js London Live 2021Vue.js London Live 2021
24 min
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.

Workshops on related topic

Monitoreo 101 para Desarrolladores de React
React Summit US 2023React Summit US 2023
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Vue.js London Live 2021Vue.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
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.
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Workshop
Mikhail Kuznetsov
Mikhail Kuznetsov
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
Embarcándonos en una aventura con Nuxt 3, Motion UI y Azure
JSNation 2022JSNation 2022
141 min
Embarcándonos en una aventura con Nuxt 3, Motion UI y Azure
Workshop
Melanie de Leeuw
Melanie de Leeuw
¡Nos encantan las aplicaciones web fáciles de crear y desplegar! Entonces, veamos qué puede hacer una pila tecnológica muy actual como Nuxt 3, Motion UI y Azure Static Web Apps. Podría ser perfectamente un trío de oro en el desarrollo web moderno. O podría ser una hoguera de errores y problemas. De cualquier manera, será una aventura de aprendizaje para todos nosotros. Nuxt 3 se lanzó hace apenas unos meses y no podemos esperar más para explorar sus nuevas características, como su compatibilidad con Vue 3 y el Motor Nitro. Agregamos un poco de estilo a nuestra aplicación con la biblioteca Sass Motion UI, porque el diseño estático está pasado de moda y las animaciones vuelven a estar de moda.Nuestra fuerza impulsora de la pila será Azure. Las aplicaciones web estáticas de Azure son nuevas, casi listas para producción y una forma ingeniosa y rápida para que los desarrolladores desplieguen sus sitios web. Así que, por supuesto, debemos probar esto.Con algunas Azure Functions esparcidas por encima, exploraremos lo que puede hacer el desarrollo web en 2022.
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Vue.js London 2023Vue.js London 2023
137 min
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Workshop
Alvaro Saburido
Alvaro Saburido
- Introducción a 3D- Introducción a WebGL- ThreeJS- Por qué TresJS- Instalación o configuración de Stackblitz- Conceptos básicos- Configuración del lienzo- Escena- Cámara- Agregar un objeto- Geometrías- Argumentos- Props- Slots- El bucle- Composable UseRenderLoop- Callbacks antes y después de la renderización- Animaciones básicas- Materiales- Material básico- Material normal- Material Toon- Material Lambert- Material estándar y físico- Metalness, roughness- Luces- Luz ambiental- Luz direccional- Luces puntuales- Sombras- Texturas- Cargar texturas con useTextures- Consejos y trucos- Misceláneo- Controles de órbita- Cargar modelos con Cientos- Depuración de tu escena- Rendimiento
Construyendo formularios Vue con VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Construyendo formularios Vue con VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
En este masterclass, aprenderás cómo usar vee-validate para manejar la validación de formularios, gestionar los valores de los formularios y manejar las presentaciones de manera efectiva. Comenzaremos desde lo básico con un formulario de inicio de sesión simple hasta el uso de la API de composición y la construcción de formularios repetibles y de múltiples pasos.

Tabla de contenidos:
- Introducción a vee-validate
- Construcción de un formulario básico con componentes vee-validate
- Manejo de validación y presentaciones de formularios
- Construcción de componentes de entrada validables con la API de composición
- Arrays de campos e inputs repetibles
- Construcción de un formulario de múltiples pasos
Prerrequisitos:
Configuración de VSCode y un proyecto Vite + Vue vacío.