Formularios escalables en Vue

Rate this content
Bookmark

Descubre el arte de crear formularios escalables en Vue utilizando FormKit, ideal para equipos con proyectos complejos y centrados en formularios. Esta charla explora estrategias para descomponer formularios en componentes más pequeños y componibles, simplificando el desarrollo y mejorando la eficiencia del equipo.

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

Justin Schroeder
Justin Schroeder
23 min
25 Apr, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Formularios escalables en Vue, accesibles para todos los niveles de habilidad, con reutilización de código y mejores prácticas. Los front-ends se dividen en sitios web y aplicaciones, con formularios altamente interactivos y con mucha lógica. Los componentes de formulario en Vue proporcionan una marcación accesible, validación encantadora y props personalizables. El uso de vModeling fomenta la reutilización de código y la colaboración. FormKit ofrece una solución integral a los problemas de formulario, incluyendo datos estructurados, claves de formulario únicas y una sólida experiencia de validación. Simplifica la creación de formularios, admite experiencias similares a un CMS y proporciona funciones avanzadas y soporte para TypeScript.
Available in English: Scalable Forms in Vue

1. Introducción a los Formularios Escalables en Vue

Short description:

Formularios escalables en Vue. Escalabilidad en el lado del cliente. Reutilización de código y tamaño de la organización como métricas. Problemas de escalabilidad en Vue 2. Extraer y reutilizar componentes. Rúbrica para medir la escalabilidad: reutilización de código y mejores prácticas. Accesible para todos los niveles de habilidad.

Hola, soy UJSlive, y muchas gracias por venir a mi charla, Formularios escalables en Vue. Ahora, la escalabilidad plantea una pregunta de inmediato. ¿Qué es la escalabilidad? Y generalmente cuando pensamos en escalabilidad, pensamos en herramientas de backend, ¿verdad? Desde el lado del servidor, podría parecer como balanceadores de carga y escalabilidad horizontal versus vertical. Tal vez las solicitudes por segundo en una aplicación web tradicional sean la forma en que piensas en la escalabilidad, escalabilidad horizontal versus vertical, cosas así.

Pero hoy quiero hablar de un tipo diferente de escalabilidad. Y eso es en el lado del cliente. ¿Qué significa la escalabilidad en tu código del lado del cliente? En tu código de Vue, ¿qué significa la escalabilidad? Bueno, significa cosas como la reutilización de código y el tamaño de tu organización juega un papel, qué tan grande puede ser una organización que use tu código del frontend y el número de desarrolladores por proyecto podría ser una buena métrica clave para poder medir tu escalabilidad. ¿Funciona este código del frontend genial para un equipo de cinco personas? ¿Y para un equipo de 100 personas? Y este es uno de los impulsores clave detrás de Vue 3. Recientemente, en un podcast, Evan Yu dijo que Vue 2 tiene problemas de escalabilidad. Tenemos un producto Vue enorme y tenemos estos componentes enormes que nadie quiere tocar más. No sabemos cómo extraer y reutilizar las cosas. Interesante.

Entonces, usemos lo que Evan está diciendo. Pero primero, rápidamente, ¿quién soy yo? Mi nombre es Justin Schrader. Puedes seguirme en las redes sociales en JPSchrader. Y si me conoces, probablemente sea por una de estas herramientas de código abierto en las que he creado o en las que estoy involucrado, FormKit, Arrow.js, AutoAnimate, Tempo y Drag'n'Drop. Las últimas dos, Tempo y Drag'n'Drop, son completamente nuevas. Si no las has probado, deberías echarles un vistazo. Tempo es una especie de alternativa a Day.js o Date.fns y Drag'n'Drop es una biblioteca muy fácil de usar para arrastrar y soltar. Pero eso es suficiente sobre mí. Volvamos a lo que Evan estaba diciendo. Frontends escalables. Básicamente, creo que si destilamos lo que Evan está diciendo sobre un frontend escalable y lo que sabemos intuitivamente, podemos llegar a una especie de rúbrica para medir la escalabilidad. En primer lugar, creo que debería permitir la reutilización de código, una buena reutilización de código. Todos sabemos que esto es algo cierto. Cuando escribes código, deberías poder reutilizarlo de manera efectiva y eficiente en todo tu equipo, y eso es parte de lo que hace que el código sea escalable. Además, debería fomentar las mejores prácticas. Los frontends escalables deberían fomentar las mejores prácticas. Tu código no es muy escalable si, para agregar accesibilidad, requiere una reescritura completa. También debería ser accesible para todos los niveles de habilidad.

2. Escalabilidad y Diversidad de Habilidades

Short description:

Escalabilidad con diversos niveles de habilidad. Accesible para todos los desarrolladores. La escalabilidad de Tailwind se debe a un conjunto estandarizado de nombres de clases.

Esto es realmente importante cuando lo piensas, especialmente con un equipo grande. Cuanto más grande sea tu equipo, es más probable que no solo esté compuesto por un grupo de ingenieros front-end súper senior. No, es más probable que haya una gran diversidad de niveles de habilidad. Algunas personas son completamente nuevas y otras pueden llevar mucho tiempo haciéndolo. Un buen front-end escalable debería funcionar bien para todas esas personas. Todos deberían encontrarlo accesible.

Y finalmente, ¿es propicio para un equipo de desarrolladores? Esto es un resumen de lo que estamos diciendo aquí. ¿Cuántas personas puedes tener en los front-end para que sigan funcionando eficientemente? Creo que esto es quizás uno de los principales impulsores detrás del éxito de Tailwind, es el hecho de que cualquiera puede usar Tailwind y no tienes que volver a aprender todos los nombres de clases que existen en un proyecto existente. Puede haber miles de ellos. Tienes un conjunto estandarizado. Cualquiera puede entrar y hacer modificaciones. Saben que las modificaciones se limitan a algo local, y así sucesivamente. Esta charla no trata sobre Tailwind, pero quiero decir que creo que esa es una de las razones por las que se puede afirmar que Tailwind es escalable.

QnA

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.
Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia
React Advanced Conference 2021React Advanced Conference 2021
47 min
Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia
Top Content
The Talk discusses the balance between flexibility and consistency in design systems. It explores the API design of the ActionList component and the customization options it offers. The use of component-based APIs and composability is emphasized for flexibility and customization. The Talk also touches on the ActionMenu component and the concept of building for people. The Q&A session covers topics such as component inclusion in design systems, API complexity, and the decision between creating a custom design system or using a component library.
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.

Workshops on related topic

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
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
Construye un Tablero Rico en Datos y Hermoso con la Rejilla de Datos de MUI X y Joy UI
React Summit 2023React Summit 2023
137 min
Construye un Tablero Rico en Datos y Hermoso con la Rejilla de Datos de MUI X y Joy UI
Top Content
WorkshopFree
Sam Sycamore
Siriwat (Jun) Kunaporn
2 authors
Aprende cómo utilizar el ecosistema completo de MUI para construir un tablero de gestión de proyectos hermoso y sofisticado en una fracción del tiempo que tomaría construirlo desde cero. En particular, veremos cómo integrar la Rejilla de Datos de MUI X con Joy UI, nuestra biblioteca de componentes más nueva y hermana del estándar de la industria Material UI.
Tabla de contenidos:- Presentando nuestro proyecto y herramientas- Configuración de la aplicación e instalación del paquete- Construcción del tablero- Prototipado, estilos y temas - Características de Joy UI- Filtrado, ordenación, edición - Características de la Rejilla de Datos- Conclusión, pensamientos finales, P&R
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.
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
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.