1. Introducción a Prime Vue
Hola, bienvenidos a la presentación sobre Prime Vue, la suite de componentes de interfaz de usuario de próxima generación. Tenemos más de 90 componentes, incluyendo selectores de fecha, botones, tablas y cuadrículas. También ofrecemos accesibilidad incorporada, modos estilizados y sin estilo, plantillas de Vue.js, bloques de Prime y un kit de interfaz de usuario de Figma. La mayoría de estos son gratuitos y de código abierto bajo la licencia MIT. Nuestro modelo de negocio se basa en complementos. Prime Vue es la biblioteca de interfaz de usuario más completa y sigue mejorando.
En esta charla, cubriré Prime Vue y cómo Vue.js nos ayudó a construir esta biblioteca de interfaz de usuario completa.
Entonces, sobre Prime Tech, la empresa detrás de Prime Vue, en realidad somos un proveedor de bibliotecas de componentes de interfaz de usuario, eso es lo único que hacemos. Comenzó con Prime Faces para Java, y ahora tenemos la versión de Angular, Prime NG, Prime React y finalmente, el tema de hoy, Prime Vue. En total, tenemos más de 150 millones de descargas en todo el mundo, y nuestras bibliotecas se están volviendo cada vez más populares cada día. Estos son de código abierto, gratuitos de usar y nuestro modelo de negocio se basa en algunos complementos.
Entonces, lo que tenemos en Prime Vue, tenemos más de 90 componentes, desde selectores de fecha, hasta botones, hasta componentes avanzados como tablas y cuadrículas, y también tenemos la accesibilidad incorporada en la que hemos trabajado arduamente. Además, ofrecemos el modo estilizado y el modo sin estilo. El modo estilizado es la biblioteca de interfaz de usuario regular que proporciona temas persistentes. Y el modo sin estilo te permite abordarlo de la manera que desees para darle estilo. También tenemos las plantillas de Vue.js en caso de que desees comenzar algo listo y bloques de Prime, más de 400 bloques en caso de que desees copiar y pegar secciones de interfaz de usuario en tus páginas para construir la tuya propia. Y para tus diseñadores, tenemos el Kit de interfaz de usuario de Figma. Así que muchas cosas. Y la mayoría de estos están bajo la licencia MIT, toda la biblioteca de componentes está bajo la licencia MIT, y los complementos pagados son como esos bloques y plantillas de Vue.js, por lo que no hay barrera de pago. Así que creo que es la biblioteca de interfaz de usuario más completa en este momento, y cada día mejora más y más.
2. Explorando las características de Prime Vue
Hemos estado trabajando en Prime Vue desde 2008 y ha evolucionado para cubrir una amplia gama de requisitos. Con el Modo sin estilo y el Modo estilizado, puedes personalizar los componentes según tus necesidades. La biblioteca ofrece eventos, devoluciones de llamada y plantillas para una fácil integración de la interfaz de usuario. Admite el modo sin cabeza para reemplazar la interfaz de usuario predeterminada y puedes dar estilo a los componentes con Tailwind o cualquier otro marco preferido. Hay más de 90 componentes gratuitos disponibles, con licencia MIT, con un enfoque en la accesibilidad. Tenemos nuestro propio sistema de diseño y también admitimos el diseño Material. La biblioteca cumple con WCAG y proporciona soporte de teclado y compatibilidad con lectores de pantalla. La elección entre el modo estilizado y sin estilo depende de tus preferencias.
Entonces, comencemos esto, quiero decir, hemos estado trabajando en esta biblioteca de interfaz de usuario desde 2008, así que 16 años ahora, y hemos visto muchas tendencias venir y pasar. Y la pregunta sigue siendo, ¿qué hace que un componente de interfaz de usuario sea bueno? Y la respuesta es que no hay una única respuesta, en realidad. Lo que funciona para alguien puede no funcionar para otra persona. Así que hemos adoptado un enfoque diferente con Prime Vue. Intentamos cubrir mucho terreno. Por eso introdujimos el Modo sin estilo y el Modo estilizado. Pero en su núcleo, tenía que ser accesible. Tenía que ser personalizable porque estás creando estos componentes no para ti mismo, no para un requisito específico, sino para uso público, uso común. Así que tiene que cubrir muchos requisitos. Proporcionamos muchos eventos, devoluciones de llamada para que te conectes y muchas plantillas para proporcionar tu propia interfaz de usuario. La mayoría de los componentes proporcionan el modo sin cabeza, para que puedas reemplazar la interfaz de usuario personalizada. Y en caso de que estés usando algo como Tailwind, también puedes darles estilo con Tailwind. O si te gusta algo más, quiero decir, es realmente, realmente flexible y bastante completo, como mencioné. Así que más de 90 componentes, desde tablas hasta menús desplegables, calendarios, todos estos son gratuitos y con licencia MIT. Tenemos nuestro propio sistema de diseño, pero también puedes usarlo con otro estilo, como mencioné, de lo cual hablaré en detalle.
Lo principal es la accesibilidad. Quiero decir, creo que es algo pasado por alto, en su mayoría por los autores de bibliotecas de componentes de interfaz de usuario, desafortunadamente, pero hay leyes y muchos requisitos específicos últimamente. Y hemos invertido mucho tiempo, un par de meses en esto para cumplir con WCAG. Utilizamos HTML semántico tanto como podemos. Si eso no funciona, si es demasiado limitante, recurrimos a filas de área y atributos. Y en cuanto a los colores, nos aseguramos de que los colores cumplan con los requisitos de accesibilidad. Y el soporte de teclado es para usuarios que no pueden usar los punteros y el mouse, o simplemente prefieren usar el teclado. Los lectores de pantalla también están disponibles en caso de que tu usuario requiera un lector de pantalla para interactuar con tu página. Y eso es lo principal al respecto. Prime Vue está diseñado para ser accesible. Verás que algunas bibliotecas de componentes dependen de ciertos estilos, como Material, pero en Prime Vue, tenemos nuestro propio diseño. Pero también puedes cambiarlo a otro diseño, como Material. De hecho, tenemos temas para el diseño Material y también un par de temas basados en lo que ha creado nuestro equipo de diseño. Y la pregunta sigue siendo, ¿estilizado o sin estilo? Esa es la pregunta común que recibimos constantemente. El modo estilizado te proporciona componentes preestablecidos para elegir.
3. Personalización de los componentes de Prime Vue
Con Prime Vue, tienes la flexibilidad de personalizar los componentes utilizando tokens de diseño o ir sin estilo con Tailwind. El modo estilizado ofrece varios temas como Aura y opciones extensas de personalización. El modo sin estilo permite componentes transparentes que se pueden estilizar utilizando atributos de paso. Estos atributos brindan acceso a los componentes internos, facilitando la personalización. Los atributos de paso se pueden usar globalmente o localmente para componentes específicos como menús desplegables.
Tenemos los tokens de diseño para que, basándote en ellos, puedas personalizarlo. Está bastante bien especificado. Pero si te gusta algo que llamamos estilo libre, entonces puedes ir sin estilo, usar algo como Tailwind. No hay una API estricta que aprender, simplemente puedes usar cualquier clase de Tailwind en esos componentes y estilizarlos como desees.
Así que el modo estilizado es este. Tenemos un par de temas, pero Aura es el último. Nuestro equipo de diseño ha dedicado mucho tiempo a crear esta plantilla de aspecto profesional. Tiene diferentes modos, diferentes... Puedes personalizar fácilmente los colores, todos los colores y superficies, los bordes, todo. Los visuales de enfoque y la mayoría de las partes, las sombras, están disponibles para personalizarlas según tus necesidades.
Y si necesitas algo que se vea bien desde el principio, entonces el probable modo estilizado es para ti. El modo sin estilo está implementado de una manera que Vue.js nos permitió hacerlo muy fácilmente. En una biblioteca regular, tienes los componentes. Renderizan algunas clases CSS específicas, como P algo, como en este caso, PInputText. Y si estableces la propiedad sin estilo en true globalmente, o también puedes usarla en un componente específico, esos selectores CSS no se renderizan en el DOM, lo que significa que perderán su estilo. También puedes hacerlo con la propiedad sin estilo para elegir que un componente específico no tenga estilo. Sin estilo significa que es funcional, totalmente funcional, la accesibilidad está presente, pero cuando lo ejecutes, verás un aspecto transparente. No será realmente atractivo. Eso significa que debes estilizarlo de alguna manera.
En ese caso, entran en juego las propiedades mágicas de paso, los atributos de paso. Por lo general, esto es algo que hemos visto de la comunidad después de desarrollar estas bibliotecas durante años. Algunos usuarios prefieren componentes con buen aspecto desde el principio, pero otros usuarios realmente necesitan personalizarlos. Para aquellos, estos son como componentes de caja negra, ¿verdad? Simplemente agregas el nombre de la etiqueta y interactúas, pero incluyen muchos elementos DOM. En este caso, te gustaría acceder a los componentes internos. Puedes usar estos atributos de paso. Por ejemplo, este menú desplegable tiene muchos elementos DOM, como listas, paneles, el icono de cierre, etc. Puedes personalizarlos y acceder a ellos fácilmente. Puedes agregar clases, puedes agregar cualquier atributo al DOM, como identificadores de prueba o algo así. Por ejemplo, este menú desplegable tiene un elemento raíz y un icono de limpiar. Puedes agregar eventos y todo lo que necesites, y puedes usarlo localmente para un componente específico o globalmente para todos los menús desplegables.
4. Opciones de personalización y presets de Tailwind
El PT global es una forma de estilizar la versión sin estilo de PrimeVue. Ofrece un enfoque programático y declarativo para la personalización. Un ejemplo es limpiar el filtro utilizando PT y acceder a variables de estado. PrimeVue permite flexibilidad sin estar vinculado a otras bibliotecas. Los presets de Tailwind permiten la integración con clases de Tailwind, mientras que también se admiten Uno CSS y Tailwind. La personalización del estilo es fácilmente personalizable al habilitar los presets de Tailwind PT.
Y eso es el PT global, lo que llamamos la forma de estilizar la versión sin estilo de PrimeVue. De hecho, hemos creado un proyecto de CSS tailwind basado en esto. El paso es una sintaxis a la que debes acostumbrarte. Y proporcionamos un enfoque programático y un enfoque declarativo para que puedas elegir entre los dos. El enfoque programático es más flexible, con condicionales y demás. Pero una vez que te acostumbras a esta API, te das cuenta de que es completamente personalizable y flexible.
Y aquí hay un ejemplo que uso. Por ejemplo, estaba en el servidor de Discord. Un usuario preguntaba cómo podía limpiar el filtro cuando el usuario hacía clic en ese icono de búsqueda. Ese icono de búsqueda está ahí con fines decorativos. Entonces, lo que sugerí es simplemente usar un PT y la clave del icono de filtro está ahí. Te pasa el estado y puedes agregar clases, los datos, el sitio o lo que sea, solo como ejemplo. Y ahí está el atributo onClick. Tienes el estado, estos son seguros en cuanto a tipos. Entonces, si estás usando TypeScript, también puedes acceder a todas estas variables porque PrimeVue tiene un excelente soporte para TypeScript y podrás limpiar fácilmente el filtro.
En un escenario regular, con una biblioteca tradicional, tendrías que ir a GitHub, crear un problema y decir que necesitas este evento llamado onFilter para poder limpiar el filtro. Pero ese no es el caso con PrimeVue. No estamos realmente vinculados a la biblioteca Compound Router porque el PT te permite hacer muchas cosas que no están disponibles en muchas otras bibliotecas. Dado que el PT te permite pasar estilos, PrimeVue es realmente una biblioteca interesante porque puedes usar Tailwind sin depender realmente de Tailwind, porque en PrimeVue no queremos depender de Tailwind, ya que es otra biblioteca de CSS para nosotros. Tenemos nuestras propias cosas, nuestra propia API.
Pero los usuarios que les gusta usar mucho Tailwind en sus aplicaciones, es posible que también deseen integrar sus clases de Tailwind en los Compounds. Por eso hemos elegido este camino. Y eso no es Tailwind. En el ecosistema de Vue, Uno CSS también es muy popular, pero también puedes usar Boom y Bootstrap, no para todos los Compounds, pero porque tienen clases muy abiertas como Dropdowns y Buttons, y esperan una cierta estructura DOM. Pero Uno CSS y Tailwind son la combinación perfecta. Por eso hemos creado este proyecto llamado Presets de Tailwind. Los presets de Tailwind son como una configuración global de PT que puedes habilitar. Y cuando estableces onStyle en true, los Compounds reciben su estilo de tus Presets de Tailwind PT. Como no están disponibles en NPM, solo necesitas obtenerlos de GitHub, desde nuestra herramienta CLI o simplemente usar el generador de Presets de la interfaz de usuario para que puedas obtener los Compounds que te gusten. Y debes copiarlos en tu página para que, aunque PrimeVue provenga de NPM, el estilo esté en tu proyecto para que puedas ajustar y cambiar las cosas fácilmente.
5. Tailwind Presets and Design Resources
Echa un vistazo al proyecto de Presets de Tailwind para construir tus propias bibliotecas de UI. PrimeVue en el modo con estilo ofrece flexibilidad y accesibilidad. El kit de UI de Figma y los bloques de Prime proporcionan recursos de diseño y bloques listos para usar.
Echa un vistazo al proyecto de Presets de Tailwind, que te permitirá construir tus propias bibliotecas de UI. De hecho, tenemos la Galería de Presets, los presets impulsados por la comunidad. Solo como ejemplo, he creado un par de ejemplos como cómo hacer un interruptor de entrada de material, barras de notificación, entradas de material, y más. Y en realidad es fácil construir el tuyo propio. Esta es una tendencia común que he visto principalmente en empresas. Los desarrolladores han sido asignados para crear su propia biblioteca de UI interna, pero no tienen mucho tiempo ni recursos. Por lo tanto, PrimeVue en el modo con estilo es perfecto porque el modo con estilo es sin opiniones ¿verdad?
Por ejemplo, aquí tienes un interruptor de entrada basado en PrimeVue, en el modo con estilo, y utilizando los atributos heredados, que es la característica mágica de Vue. Vinculamos cualquier atributo que veamos del usuario al interruptor de entrada. Tenemos un PT. El PT es para tu propia clase con opiniones, en caso de que uses Tailwind. Y luego, como lo envuelves en tu componente de archivo único ToggleSwitchSfc, podrás usar ToggleSwitch basado en el interruptor de PrimeVue, pero el usuario no sabe acerca de PrimeVue. Están usando tu propia biblioteca de UI. Así obtienes accesibilidad y todas las funciones de forma predeterminada. Solo tienes que agregar tu propio estilo. Y puedes distribuirlo entre diferentes aplicaciones. Y el kit de UI de Figma está ahí en caso de que estés trabajando con un equipo de diseño en tu aplicación. Tenemos nuestro propio kit de UI de Figma. Nuestro equipo de diseño lo ha creado y actualmente está en la versión dos y la versión tres está por venir con una gran actualización. Estamos actualizando nuestros tokens de diseño. Así que en caso de que tus diseñadores necesiten diseñar las páginas usando Figma, pueden usar nuestro kit de UI de Figma. Ten en cuenta que esto también es de pago. Y los bloques de Prime, hemos estado haciendo bloques desde 2018 o 17, no sé. Llevo mucho tiempo haciendo esto, así que perdí la noción del tiempo. Los bloques de Prime son como listos para copiar y pegar. Actualmente están basados en Primeflex, pero se están moviendo a Tailwind para que puedas simplemente... La misma idea sobre la UI de Tailwind porque esto de los bloques es muy común. Creo que muchas personas han comenzado a hacer esto, pero tenemos muchos bloques. Creo que más de 450 bloques, páginas de destino, marketing, bloques de aplicaciones y muchas cosas. Los bloques de Prime se están moviendo a primeblocks.org para que puedas iniciar sesión, ver los bloques de Prime y elegir entre Vue y otras versiones también. Son listos para copiar y pegar, así que los copias y los pones en tu aplicación y comienzas a usarlos. En caso de que solo quieras construir tu propia UI, como una página de destino tú mismo o tu propio panel de control, también puedes considerar los bloques de Prime.
6. Vid Templates and Theming
Las plantillas de vid te permiten utilizar plantillas de UI pre-diseñadas. La versión cuatro de Prime Vue introduce una nueva API de temas que utiliza variables CSS en lugar de SASS. El theming ahora forma parte de la biblioteca principal, eliminando la necesidad de un archivo CSS de tema separado. El cambio de modo oscuro ahora es dinámico con variables CSS. El próximo complemento de Figma permite generar temas desde Figma utilizando tokens de diseño.
Y finalmente, tenemos las plantillas de vid. En caso de que no quieras construir tu propia UI con los bloques, todos los bloques funcionan bien con las plantillas. En caso de que necesites una plantilla de UI profesional y abierta, visita nuestra galería de plantillas. Tenemos algunas opciones entre las que puedes elegir. Son bastante flexibles. Tienen diferentes modos de menú y diferentes temas.
Muy bien. La próxima versión es la versión cuatro. Esa es la próxima versión de Prime Vue, y ha cambiado muchas cosas en la UI El cambio más grande es la API de temas en la versión tres. Dado que hemos estado haciendo esto durante mucho tiempo, cuando comenzamos en 2008, no había muchas variables CSS, ni SASS ni nada. Así que seguimos actualizando nuestras bibliotecas cada cinco años porque el patrón es que cada cinco años hay un salto tecnológico, y ese es el momento ahora en 2004.
Ahora estamos dejando de lado SASS, y dado que puedes utilizar variables CSS y anidamiento CSS, SASS ya no es realmente necesario. El theming era solo otro repositorio. Compilabas el tema CSS y lo editabas en tu proyecto, lo cual no era realmente muy flexible. Ahora lo estamos moviendo al núcleo como CSS regular, y no hay un archivo de tema CSS grande y pesado. El cambio de modo oscuro en el pasado teníamos que, en la versión tres, cambiar el tema CSS. Ahora todo es dinámico gracias a las variables CSS. Y lo genial es que es totalmente compatible con Figma, por lo que podrás generar temas desde Figma utilizando nuestro próximo complemento de Figma. Todo se basa en tokens de diseño. Es un sistema de última generación del que estamos muy orgullosos. Tienes los tokens primitivos, tokens semánticos y tokens de componentes. Los tokens primitivos son los tokens que no tienen ningún contexto, como azul 500, nada. Solo colores o como P3, como el relleno tres. Simplemente no tienen ningún significado. Pero los tokens semánticos son como el color primario que cuando lo lees, entenderás el contexto. Y el color primario se asigna a un color primitivo como azul 500. Y los tokens de componentes como botón, fondo, casilla de verificación, fondo de casilla de verificación, panel, borde color, en realidad dependen de los colores semánticos. Puedes elegir intercambiar los colores primitivos, colores semánticos o colores de componentes. Todo depende de ti. Si tienes personalizaciones ligeras, utiliza la personalización de tokens semánticos.
7. Theming and Prime CLI
La API de temas a partir de la versión 4 te permite generar temas desde Figma y personalizar las variables CSS. El conjunto de ajustes Aura proporciona diferentes sombras, bordes y visuales de enfoque. Habrá más ajustes disponibles en Material 2.3, y también puedes crear tu propio conjunto de tokens de diseño. Un nuevo diseñador de UI estará disponible en el sitio web, lo que permitirá demos de componentes y una fácil personalización. Primeflex CSS está siendo reemplazado por componentes de diseño y tipografía, y se están desarrollando nuevas muestras y plantillas gratuitas. La versión beta de Prime CLI permite iniciar proyectos NUX y VIT. También se proporciona asistencia para migración y una herramienta para convertir código Primeflex a Tailwind.
Pero si quieres construir tu propio sistema de diseño con modo de estilo, también necesitas personalizar los tokens de los componentes. Como mencioné, estos se mapean al kit de UI de Figma para que puedas generar temas desde Figma. Y se mapean a las variables CSS en el código.
Aquí está la API de temas a partir de la versión 4. Importamos ajustes preestablecidos. Los ajustes preestablecidos son el conjunto de tokens de diseño. Así alimenta a Prime Vue para decidir cómo se verá el tema. En este caso, Aura proporciona diferentes sombras para los inputs, diferentes bordes, diferentes visuales de enfoque como anillos de enfoque, y así sucesivamente. Y las opciones son cómo sería este CSS generado en caso de que quieras personalizar el prefijo de las variables CSS, o en caso de que quieras dejar el modo oscuro al usuario, en caso de que quieras una capa CSS para la personalización del usuario. Todo esto está disponible. Y Aura es el actual en este momento. Y proporcionaremos más ajustes preestablecidos en Material 2.3. Y podrás conectar tu propio conjunto de tokens de diseño para personalizar completamente el tema.
Como mencioné, estamos trabajando arduamente con nuestro equipo de diseño para asegurarnos de que estos tokens se mapeen a las variables y tokens reales de Figma, para que nuestro próximo complemento de Figma pueda generarlos porque tus diseñadores pueden crear el tema con mejor aspecto, pero será responsabilidad del desarrollador implementarlo en el código, lo cual requeriría un proceso manual. Y hay muchos tokens. En este caso, nuestro complemento lo hará automáticamente por ti, y será muy fácil de mantener. Y el nuevo diseñador de UI es que, en caso de que no estés trabajando con Figma, puedes ingresar al sitio web del diseñador, y habrá demos de componentes para cada componente. Y en el lado derecho, podrás cambiar todo, como los colores, y la exportación te dará el diseño, y será compatible con Figma para que puedas simplemente importar el archivo JSON de Figma y ponerlo, por lo que será una vinculación bidireccional con Figma en caso de que estés usando Figma.
Entonces, Primeflex CSS era nuestra biblioteca CSS, pero ahora con el proceso de CSS de Tailwind y los próximos componentes de diseño y tipografía, hay demasiada superposición. Así que nos estamos alejando de Primeflex y reemplazándolo con los componentes de diseño y tipografía en el modo de inicio y en el modo de inicio. Creo que los usuarios suelen usar algo como Tailwind o Bootstrap. Así que estamos proporcionando nuevas muestras gratuitas, como los paneles de control gratuitos que están por venir. Se implementarán con componentes de diseño y tipografía y también con Tailwind. Para darte una idea de lo que puedes construir con Prime Vue, estos también están en progreso y estarán disponibles de forma gratuita, al igual que Prime Blocks estará disponible con muchos nuevos bloques gratuitos. Y ten en cuenta que también tenemos una plantilla gratuita llamada Sakai de Costa of Tsushima. Entonces, Prime CLI, las herramientas de línea de comandos de CLI también tienen la versión beta disponible. Te permite iniciar un proyecto NUX, un proyecto VIT. Esto será posible porque Prime Vue tiene soporte premium para NUX con nuestro propio módulo NUX, y el Gestor de Ajustes Preestablecidos de Tailwind podrá obtener estos ajustes preestablecidos de GitHub y sincronizarlos y actualizarlos. Y la asistencia para migración podrá proporcionar, ya sabes, migración de código desde las diferentes versiones de Prime Vue. Y finalmente, Primeflex a Tailwind, en caso de que estuvieras usando Primeflex en gran medida, aunque hay similitudes entre las clases, esta herramienta PF2TW podrá convertir el código Primeflex a Tailwind. Muy bien, terminemos con el plan de trabajo.
8. Próximos Planes y Preferencias de los Usuarios
El primer trimestre ha terminado, la versión beta 4 está disponible y la versión final está muy cerca. En el segundo trimestre, trabajaremos en el tema Figma2, proporcionaremos una biblioteca de formularios incorporada e introduciremos soporte RTL. En el tercer trimestre, ofreceremos el Diseñador de UI y nos centraremos en desarrollar componentes avanzados de PrimeView como gráficos de Gantt, hojas de cálculo, editores HTML, diagramas de flujo y calendarios de eventos. El Constructor de UI será una herramienta de arrastrar y soltar con capacidad de enlace y implementación en el backend. La encuesta muestra una preferencia equilibrada entre los estilos sin estilo y con estilo, adaptándose a las diferentes preferencias de personalización de los usuarios.
El primer trimestre ha terminado, la versión beta 4 está disponible y la versión final está muy cerca, pero a principios del segundo trimestre. En el segundo trimestre, trabajaremos en el tema Figma2. Se están lanzando componentes de diseño de complementos y de tipo de diseño. Los usuarios han estado solicitando una biblioteca de formularios. Proporcionaremos una biblioteca de formularios incorporada para validaciones y obtención, recopilación de data de varios componentes. El soporte RTL estará disponible en el segundo trimestre. Nuestro Tailwind está en progreso, y también el conjunto de ajustes preestablecidos de material para nuestro nuevo tema está en camino porque también queremos cubrir los materiales.
En el tercer trimestre, ofreceremos el UI Diseñador, y nos ocuparemos del conjunto advanced de componentes PrimeView. Nuestro trabajo consiste en crear componentes UI. Ahora, PrimeView pasa al siguiente nivel, finalmente podemos abordar estos componentes complejos de alta carga como los gráficos de Gantt, hojas de cálculo, editores HTML, diagramas de flujo y calendarios de eventos. Serán parte de PrimeView porque no son solo componentes sencillos en vivo. También están diseñados para cumplir con los requisitos de las empresas. Y el UI Constructor es algo que nos entusiasma mucho. Y planeamos ofrecer soporte para que sea una herramienta de arrastrar y soltar, y puedas enlazarlo con el backend, para que incluso puedas implementarlo desde la aplicación. Muy bien, en nombre de nuestro equipo en PrimeTech, me gustaría agradecerles. Y PrimeView se está convirtiendo en la biblioteca UI más completa y exhaustiva. Estamos un poco obsesionados con ello, obsesionados con el éxito, y eso es lo único que hacemos. Solo desarrollamos bibliotecas de componentes UI. Sin consultorías ni capacitaciones, solo nos enfocamos en los componentes. Puedes seguir los desarrollos en PrimeView o en mi propio Twitter. Y nos gustaría darte la bienvenida a nuestras discusiones en GitHub y al servidor de Discord.
Preferencias de Personalización y Fecha de Lanzamiento
La encuesta muestra una preferencia equilibrada entre los estilos sin estilo y con estilo, adaptándose a las diferentes preferencias de personalización de los usuarios. Se espera que Prime Vue 4 se lance a mediados de mayo, con una serie de versiones beta que conducen al candidato de lanzamiento.
Y en nombre de nuestro equipo, me gustaría agradecerles por unirse a mí. Y siempre apuesten por Prime, gracias.
Según puedo ver, la encuesta está bastante reñida. A mucha gente le gustan tanto los estilos sin estilo como los estilos con estilo. En primer lugar, hay una ligera preferencia por los estilos sin estilo. Quiero decir, eso tal vez tenga sentido en términos de personalización para empresas más grandes. ¿Qué opinas sobre el resultado, Csatay? Sí, eso es lo que esperaba en realidad, porque hemos estado desarrollando esta biblioteca de componentes durante mucho tiempo. Y esto es lo que hemos visto en la comunidad también, porque algunos usuarios no buscan una solución única. Algunos usuarios prefieren el modo sin estilo donde quieren personalizar los componentes de la interfaz de usuario, y otros usuarios simplemente quieren que estén preestilizados y se vean bien. Por supuesto, tienen que verse bien, pero quieren que estén preestilizados, aunque con algunas personalizaciones mínimas aquí y allá. El modo con estilo está más definido. Quiero decir, hay una API de tokens de diseño en la versión que será mucho mejor, por supuesto, con un enfoque específico en la arquitectura de tokens de diseño. Y sin estilo, quiero decir, eres libre. Este modo de estilo libre que llamamos. La opción popular es, por supuesto, Tailwind, pero también se puede usar con Uno CSS y algunos componentes que encajan con Bootstrap y cosas así. No me sorprende, y esto es lo que hemos visto en nuestra comunidad también. Pero es bueno ofrecer opciones, ya sabes, para que las personas puedan elegir el enfoque de tematización que les guste. Sí. Y eso también suele ser el punto doloroso de las bibliotecas de componentes de interfaz de usuario, el hecho de que no son lo suficientemente personalizables. Así que eso es muy bienvenido. Sí. Pasemos a las preguntas y respuestas. Tenemos bastantes preguntas. Comencemos tal vez por, ¿cuándo crees que se lanzará Prime Vue 4? ¿Tienes alguna ETA? Sí, se suponía que se lanzaría para ahora, pero quiero decir, hemos tenido algunos retrasos, pero esperamos que sea en mayo. Definitivamente, la próxima semana habrá una nueva versión beta 2 y la semana siguiente habrá una tercera beta y luego habrá una RC. Si sigues este calendario, mediados de mayo suena como el lanzamiento de nuestro primer candidato de lanzamiento. Y luego, por supuesto, seguiremos mejorándolo después de Vue 4. Algunas de las características no encajan en Vue 4 porque no queremos retrasarlo. Seguiremos trabajando en los problemas, pero digamos mediados de mayo.
Pass-through PT and Primeflex
Pass-through PT tiene dos modos: modo de cadena y sintaxis de enfoque de objeto regular. Actualmente, no hay soporte de herramientas para el modo de cadena, pero hay planes para proporcionar extensiones de VS Code y una extensión de IDE. Primeflex no se duplicará y se recomienda utilizar Tailwinds con el modo de desinstalación. Se han proporcionado preajustes de Tailwind para simplificar el uso de Tailwinds. También se está desarrollando una herramienta para convertir el código de Primeflex a Tailwinds para una migración automatizada.
De acuerdo, perfecto. Gracias. Sí, quiero decir, eso llega muy rápido, así que eso es bueno.
Sí. Hay uno. Entonces, el pass-through PT es una cadena de estilo. ¿Hay alguna herramienta de desarrollo para esto, resaltado de sintaxis, tipo de almacenamiento en caché? De hecho, tiene dos modos. Hay un modo de cadena. Lamentablemente, el modo de cadena se ha lanzado recientemente. Por lo tanto, no hay soporte de herramientas, pero con la sintaxis de enfoque de objeto regular, sí hay soporte de herramientas. Pero tenemos planes de proporcionar algunas extensiones de VS Code, compilación de código, especialmente en el PT. Así que eso es una de las cosas para mejorar la experiencia del desarrollador. También recibimos este comentario y también tenemos planes de proporcionar una extensión de IDE para esto.
De acuerdo, increíble. Gracias. Entonces, hay alguien que dice, no estoy seguro si entendí correctamente, ¿se duplicará Primeflex y debemos usar el modo de desinstalación con Tailwind en su lugar? Sí, sí, una vez que nos dimos cuenta de que estábamos intentando demasiado. Primeflex es uno de ellos. Quiero decir, nuestro trabajo es proporcionar componentes de interfaz de usuario reutilizables. Y nos dimos cuenta de que también estábamos intentando crear un marco de CSS. Por eso decidimos colaborar en lugar de competir. Por lo tanto, sugerimos utilizar Tailwinds con el modo de desinstalación en su mayoría. También hemos proporcionado preajustes de Tailwind. Por lo tanto, toda esa suite de interfaz de usuario se puede iniciar con Tailwinds. Y esa fue una decisión basada en la demanda de la comunidad y menos trabajo para nosotros mantenerlo.
Sí, y probablemente eso sea lo mejor para que puedas centrarte en las partes importantes. Pero también hemos creado una pequeña herramienta para convertir el código de Primeflex a Tailwinds, para que la migración se pueda automatizar. También se lanzará la próxima semana. Vaya, se está lanzando rápido. Eso es muy bienvenido porque a la gente generalmente no le gusta las migraciones complicadas.
Form Handling and Vue Compatibility
PrimeView colabora con FormKit para garantizar la compatibilidad y también proporciona una biblioteca de formularios simple. La compatibilidad con Vue 2.0 está en modo de mantenimiento, y se recomienda utilizar las versiones 3 y 4. PrimeView se destaca por su amplia oferta de componentes, modos estilizados y sin estilo, y mantenimiento dedicado por un equipo de colaboradores a tiempo completo.
Así que gracias de nuevo. Mencionaste la expansión de las capacidades de manejo de formularios. ¿También estás considerando la integración con otras bibliotecas enfocadas en formularios como FormKit? Sí, también nos reunimos con los chicos de FormKit y colaboramos con ellos para asegurarnos de que FormKit funcione bien con PrimeView. También validamos. Pero quiero decir, también hay una demanda de nuestra propia community para proporcionar una biblioteca de formularios simple que haga el trabajo. No está destinada a competir con FormKit, pero es solo una pequeña utilidad para ayudar con los forms. Pero para casos más advanced, por supuesto, pueden usar FormKit, pero estamos trabajando con ellos. Así que están colaborando con ellos. Y nos encontramos en conferencias e incluso tuvimos algunas discusiones en línea.
De acuerdo. En línea, en persona. Sí. Perfecto. ¿Es PrimeView compatible con Vue 2.0? Teníamos una versión. Todavía tenemos una versión para Vue 2.0, v2.primeview.org, pero está en modo de mantenimiento. Por lo tanto, no se pueden esperar muchas características nuevas. Es como, y no hacemos muchas versiones, solo si hay algunos errores importantes y cosas así. Por lo tanto, sugerimos utilizar la versión 3 y la versión 4. La versión 3 se mantendrá hasta fin de año también, para asegurar una migración sin problemas. De acuerdo. ¿Cómo se compara PrimeView con otras bibliotecas UI? Creo que PrimeView es realmente completo, tenemos más de ocho componentes, probablemente más de los que necesita una aplicación promedio. Y también proporcionamos un modo estilizado y un modo sin estilo, lo cual no he visto mucho en aplicaciones en diferentes bibliotecas. Y es mantenido por una empresa. Así que esperemos que no vaya a desaparecer pronto. No es como un proyecto de hobby o un proyecto secundario. Es principalmente un producto de código abierto. Muchas personas están trabajando en esto a tiempo completo. Así que hay algunas diferencias, diría yo. Sí. Me alegró mucho ver que pasó de ser un proyecto a ser de código abierto. Eso es realmente increíble. Creo que se nos acabó el tiempo. Si no me equivoco. Pero gracias de nuevo por todas esas respuestas y por tu increíble charla. Y nos vemos muy pronto. Te deseo un buen día. Adiós. Adiós. Sí.
Comments