Si tu empresa es como las que he trabajado, tienes aplicaciones con siete diseños de botones diferentes, tres datepickers diferentes y una extraña colección de dropdowns que pueden o no ser accesibles. Una tendencia creciente para lidiar con esta inconsistencia es construir un sistema de diseño personalizado o una biblioteca de componentes. Básicamente, construyes La Única Forma™ de crear un datepicker para tu organización y pides al resto de tu empresa que se ajuste a tu nuevo sistema. Pero construir una biblioteca de componentes viene con muchos desafíos, como, ¿qué frameworks o bibliotecas deberías usar (si es que alguna)? ¿Cómo te aseguras de que tus componentes sean accesibles? ¿Y cómo distribuyes tus componentes para que toda tu empresa los pueda usar? En esta charla relámpago aprenderás cómo construir una biblioteca de componentes rápidamente basándote en una biblioteca como Kendo UI. Aprenderás consejos y trucos sobre cómo empezar y ejecutar, cómo personalizar componentes y cómo distribuir componentes en toda tu organización.
Construyendo una Biblioteca de Componentes Personalizada - Rápido
Video Summary and Transcription
Hoy quiero hablarles sobre cómo construir bibliotecas de componentes personalizadas rápidamente. Cada empresa debería tener su propio conjunto estándar de controles de interfaz de usuario para lograr consistencia en diseño, tecnología y accesibilidad. Las empresas no deberían construir las partes más difíciles de esas bibliotecas ellas mismas, como date pickers y data grids. Pero como desarrollador de software, tu tiempo es valioso. Construir bibliotecas de componentes personalizadas es un mejor uso de tu tiempo que reinventar la rueda.
1. Building Custom Component Libraries
Hoy quiero hablarles sobre cómo construir bibliotecas de componentes personalizadas rápidamente. Cada empresa debería tener su propio conjunto estándar de controles de interfaz de usuario para garantizar la consistencia en diseño, tecnología y accesibilidad. Las empresas no deberían construir las partes más difíciles de esas bibliotecas, como los selectores de fecha y las rejillas de datos. Estos componentes requieren una cuidadosa consideración de la accesibilidad, la compatibilidad móvil, la documentación y la extensibilidad.
Hola a todos. Soy TJ y hoy quiero hablarles sobre cómo construir bibliotecas de componentes personalizadas rápidamente. Y con bibliotecas de componentes me refiero básicamente a una serie de controles de interfaz de usuario que pueden ser desde botones y campos de entrada hasta cosas más complejas como selectores de fecha y autocompletados. Personalmente, he estado construyendo bibliotecas de componentes como esta durante mucho tiempo, tal vez demasiado. En el pasado, fui miembro del equipo de jQuery UI, si lo recuerdan. Todavía tengo este sombrero genial para mostrarlo. Y más recientemente, ahora soy miembro del equipo de KendoUI. Y debido a que he estado haciendo esto durante muchos años, he desarrollado una serie de opiniones o ideas interesantes sobre las bibliotecas de componentes que voy a comenzar a compartir, porque creo que les resultarán interesantes y útiles. Y luego pasaré a mostrar cómo pueden poner en práctica estas ideas y darles algunas recomendaciones sobre cómo pueden construir su propia component library. Para comenzar, mi primera opinión o idea interesante es que creo que cada empresa, creo que su empresa debería tener su propio conjunto estándar de controles de interfaz de usuario. Y la razón de esto es realmente la consistencia. Aplicar cierta consistencia visual para que en lugar de tener 30 diseños de botones diferentes, creen un botón en una component library que tenga la única forma correcta de construir botones para su organización. Pero también obtienen consistencia en términos de tecnología. Una component library es una forma de forzar a elegir un conjunto limitado de tecnologías que desean promover en toda su organización. También obtienen consistencia en términos de accesibilidad. La accesibilidad puede ser difícil, pero si pueden hacerlo bien dentro de los componentes de su biblioteca, pueden extender esos beneficios de accesibilidad a otras partes de su organización. Así que creo que cada empresa debería tener su propia biblioteca de componentes de interfaz de usuario. Y también creo que las empresas no deberían construir las partes más difíciles de esas bibliotecas por sí mismas. Y con componentes complejos aquí, no me refiero a cosas como campos de entrada y botones. Me refiero a las cosas más difíciles. Los selectores de fecha, las casillas de verificación, los autocompletados, las rejillas de datos, cosas así. Porque estos componentes son más difíciles de lo que pueden parecer al principio. Tomemos el selector de fecha, por ejemplo. Y no solo tienes que construir un calendario aquí. Cuando estás construyendo un componente reutilizable, debes tener en cuenta muchas otras cosas. ¿Cómo vas a hacer que esto sea accesible? ¿Cómo te asegurarás de que funcione como esperas en dispositivos móviles, que TypeScript funcione, que documentarás todo esto para que otras personas entiendan lo que hiciste y que sea extensible y todas estas cosas. Y estos son problemas solucionables. Tú, que estás viendo esto, puedo verlo a través de la cámara. Eres una persona inteligente. Estos son problemas
2. Component Libraries for Efficient UI Development
Pero como desarrollador de software, tu tiempo es valioso. Construir bibliotecas de componentes personalizadas es un mejor uso de tu tiempo que reinventar la rueda. Las empresas deberían tener sus propias bibliotecas y utilizar componentes específicos del framework. La compatibilidad tiene un costo y generalmente es superado por el rendimiento, el tamaño del paquete y la ergonomía del framework. El equipo de Kendo UI ha construido bibliotecas separadas para diferentes frameworks. Comienza configurando un entorno de desarrollo y utiliza una biblioteca de referencia para widgets complejos. Busca exhaustividad, accesibilidad, componentes específicos del framework y extensibilidad.
Así que creo que las empresas deberían tener su propio conjunto estándar de componentes de UI. Creo que no deberían construir las partes más difíciles de eso por sí mismas. Y creo que, en la mayoría de los casos, deberías inclinarte hacia el uso de componentes que estén construidos para tu framework, para tu cadena de herramientas de elección. Entonces, ¿cómo llevas estas cosas a la práctica? Bueno, recomiendo comenzar configurando un entorno de desarrollo que puedas utilizar para construir componentes en un lugar que esté fuera de cualquiera de tus aplicaciones existentes. Lo que me gusta hacer es tener un entorno donde pueda desarrollar los componentes y también tener una aplicación de demostración donde pueda probar esos componentes en una aplicación en ejecución y ver cómo funcionan. Y también tener algunos scripts que me permitan tomar mis componentes cuando estén listos, empaquetarlos, agruparlos y distribuirlos para que se puedan utilizar en toda mi organización. Y proporcionaré un enlace, si estás interesado en esto, al final de esta charla, para que si quieres ver mi flujo de trabajo preferido en detalle, puedas seguirlo. Pero comienza por tener este entorno de desarrollo. Y a partir de ahí, recomendaría tener una biblioteca de referencia a la que recurrir para algunos de estos widgets más complejos o cualquier cosa que no quieras construir tú mismo. Y para eso, buscaría algunas cosas en esta biblioteca de terceros. Comenzaría buscando exhaustividad. No quieres estar tomando componentes de cinco lugares diferentes en Internet y tratando de unirlos. Por lo general, tendrías una biblioteca que proporcione la mayor cantidad posible de esto. Quieres buscar accesibilidad porque, nuevamente, quieres incorporar una buena accesibilidad a tus componentes por defecto. Quieres buscar componentes específicos del framework o, al menos, algo que funcione muy bien con la cadena de herramientas que te gusta usar. Y también quieres buscar extensibilidad. Lo bueno de una biblioteca de componentes es que las personas encontrarán formas de usar tus componentes de muchas maneras diferentes. Por lo tanto, quieres encontrar componentes de terceros que sean muy adaptables, que puedas ajustar y personalizar y cambiar cosas en cada pequeño
3. Creando Envoltorios para la Consistencia
Recomiendo usar una biblioteca de terceros de referencia para componentes complejos y crear envoltorios para una implementación consistente. Comienza configurando un entorno de desarrollo fuera de tus aplicaciones. Elige una biblioteca de referencia para componentes complejos y crea envoltorios para mantener la consistencia. Tu empresa debería tener un conjunto estándar de componentes de UI. Visita bitly/components-fast para obtener más información.