1. Introducción a la Ingeniería de Felicidad del Desarrollador
Hola, soy Francois, un ingeniero de felicidad del desarrollador. Trabajo en refactorizar, arreglar pruebas y crear herramientas para hacer que los ingenieros sean más rápidos. Hoy hablaré sobre Preview JS y los desafíos de las compilaciones lentas y su impacto en la productividad.
Hola, mi nombre es Francois. Soy un ingeniero de felicidad del desarrollador de Sydney, Australia. Es posible que te estés preguntando, ¿qué es un ingeniero de felicidad del desarrollador? Lo que significa es que soy un ingeniero de software regular a quien le gusta trabajar en refactorizar cosas o arreglar pruebas inestables, o hacer que la integración continua sea más rápida, pero a veces también se trata de crear nuevas herramientas para hacer que otros ingenieros sean más rápidos. Una de estas herramientas se llama Preview JS, y voy a hablar de eso ahora. Es posible que estés familiarizado con este cómic de XKCD. Creo que fue lanzado hace bastante tiempo, pero aún es relevante hoy en día. Te daré unos segundos para que lo leas. Esto, creo, fue especialmente relevante en los días en que muchos programadores usaban C++ u otro lenguaje realmente lento, donde tenías que esperar cinco minutos, tal vez 10 minutos, tal vez incluso una hora para que tu código se volviera a compilar. No es tan relevante hoy en día para JavaScript, ¿o sí? En realidad, no es tan inusual en estos días trabajar en una base de código grande que use tal vez una versión antigua de Webpack o una versión mal configurada de Webpack, que tarda un par de minutos en ejecutar la compilación. Tal vez incluso peor, tal vez tengas que esperar 30 segundos cada vez que haces un cambio en el archivo, lo cual, si lo piensas, cuando sumas eso durante un día cada vez que quieres ver el impacto de un cambio de código que hiciste, eso es bastante tiempo que se pasa Y no solo es esperar, sino que también interrumpe tu flujo, así que generalmente vas a cambiar de contexto, vas a empezar a hacer otra cosa y luego vuelves y simplemente, has perdido la noción de lo que estabas tratando de hacer o lo que sea que tenías en mente simplemente no está allí. Y no es muy bueno para la productividad o para la felicidad en la ingeniería.
2. Manejo de elementos de menú no disponibles
Tomemos el ejemplo de una aplicación de entrega de comida llamada Humbry. Los usuarios han dado retroalimentación de que se sorprenden cuando el menú no contiene los elementos esperados. Actualmente, si un elemento no está disponible, se elimina por completo del menú. Sin embargo, los diseñadores de la aplicación han recibido una solicitud de función para mostrar elementos no disponibles pero dejar claro que no están disponibles. La primera forma de implementar esto es ejecutando la aplicación localmente.
Entonces, tomemos este ejemplo, esta es una aplicación de entrega de comida que llamé Humbry y es realmente solo para el propósito de esta presentación. Aquí tenemos varios restaurantes y digamos que tengo antojo de crepes francesas, así que voy a decir crepes. Bien, hay un restaurante llamado Crêperie François y voy a ir allí y revisar. Bien. Hay algunas cosas realmente deliciosas, plátano caramelizado y chocolate. Eso suena bien. Naranja fresca y confitada. Bien. Eso suena bien. Bien. Eso también. Bien. Voy a pedir todo, tal vez dos de cada uno. Genial. Esto es más o menos lo que esperarías de una aplicación de entrega de comida. Y estamos en los primeros días de lanzamiento para los usuarios. Y la primera retroalimentación que recibimos es que a algunos usuarios les sorprende que a veces el menú no contenga los elementos que esperaban. Esto se debe a que a veces, si un elemento no está disponible, actualmente la API simplemente lo elimina del menú. Entonces, digamos que este restaurante se quedó sin pollo. Este primer elemento, pollo Kung Pao, en realidad estará completamente ausente. Lo cual sorprende a los usuarios, porque piensan, ¿este restaurante eliminó esto del menú para siempre? ¿Debería boicotear completamente este restaurante porque eliminaron mi elemento favorito? No, ese no es el caso. Simplemente no está disponible hoy. Y realmente esa es nuestra responsabilidad como diseñadores de esta aplicación, hacerlo claro. Entonces, en cambio, recibimos una solicitud de función de nuestro gerente de producto, que dice que ahora deberíamos mostrar los elementos de menú no disponibles, pero dejar claro que no están disponibles. Así que sabes cómo aquí tenemos este contador, en lugar de este contador, simplemente diremos, no disponible hoy, ¿verdad? Esto debería ser mucho menos confuso para los usuarios. Por supuesto, la primera forma en que podemos implementar esto es ejecutando la aplicación localmente. ¿De acuerdo? Así que vamos a ir a
3. Modificando API y código para elementos de menú no disponibles
Estoy ejecutando la aplicación localmente y esperando a que se inicie. Necesito encontrar un restaurante con un elemento de menú no disponible, pero la API no devuelve elementos no disponibles. Puedo cambiar la API para que los devuelva o simularlo en mi código. Modificaré el código para marcar un elemento de menú como no disponible y actualizaré el componente para mostrarlo como tal.
en nuestra
terminal, ejecutamos
Yarn Dev y esperamos un poco. Bien, está ejecutándose en localhost, genial. Debo esperar un poco para que se inicie. En realidad, no estoy del todo seguro de por qué, pero algo aquí tarda bastante tiempo. Esto es exactamente a lo que me refería con el tiempo que se pierde esperando. Podría ir a Twitter y olvidarme completamente de esto y luego tener que esperar nuevamente porque necesito recargar la página o algo así. Bien, genial. Así es nuestra aplicación. Está en ejecución. Ahora necesito encontrar un restaurante que tenga un elemento de menú que no esté disponible actualmente, así que voy a buscar y tratar de encontrar uno. Pero espera, dije antes que la API en realidad no devuelve elementos de menú que no están disponibles, así que eso no va a funcionar. Todos ellos están disponibles por definición porque son devueltos por la API. Así que tengo un par de formas de abordar esto. Una es si soy un ingeniero que trabaja en la API, entonces puedo cambiar la API para que devuelva elementos no disponibles, aunque debo tener cuidado de no devolverlos a versiones de la aplicación que aún no los admiten. O si no sé nada sobre la API, tendré que simularla. Voy a entrar en mi código y encontrar... Bien, es la página del restaurante... Oops, página del restaurante, y voy a entrar en eso. Bien, eso está usando este estado de página de detalles del restaurante, que es un estado de MobX. Al final del día, todo lo que hace es obtener. Bien, está obteniendo eso, está obteniendo los datos, la respuesta de los detalles del restaurante. Genial. Al menos esto está bien tipado. Y eso devuelve un elemento de menú, y el elemento de menú tiene un campo disponible que es un booleano opcional. Bien, voy a modificar esto y decir, data.menu.zero.noDisponible = true. Y voy a volver aquí. Entonces, este primero, porque el número cero debería estar no disponible, pero por supuesto no lo hemos implementado, así que ahora todavía muestra el contador. Y ahora, sé que este componente se llama elemento de menú del restaurante, así que voy a entrar aquí y decir... Bien, aquí, en lugar del contador, queremos decir que si está no disponible, entonces mostramos no disponible
4. Ejecutando la aplicación localmente y usando Storybook
Bien. Genial, hecho. Ejecutar la aplicación localmente es muchas veces la solución correcta. Opción dos, podríamos usar Storybook. Es prácticamente una aplicación de galería para todos tus componentes de interfaz de usuario. Cada historia es una versión específica de tus componentes.
en su lugar. Así que, menú no disponible, no disponible. Genial. Bien. Genial, hecho. Eso es todo. Ahora, por supuesto, debo recordar eliminar esto porque si no lo hago, va a arruinar la experiencia para los usuarios, pero aparte de eso, hemos terminado. Afortunadamente, esta es una buena base para trabajar. Gracias
Next.js. Y sí, prácticamente hemos terminado.
Entonces, ¿ejecutar la aplicación localmente es muchas veces la solución correcta, verdad? Es muy sencillo. No requiere ninguna configuración adicional. Lo único es que simular data puede ser difícil dependiendo del caso de uso específico en el que estés trabajando. Y la velocidad de iteración puede ser lenta, nuevamente, solo si estás trabajando en una base de código realmente compleja o algo que no está muy bien configurado. Pero eso es más común de lo que crees.
Opción dos, podríamos usar Storybook. En caso de que no estés familiarizado con Storybook ya, es prácticamente una aplicación de galería para todos tus componentes de interfaz de usuario. Se llama Storybook porque defines historias para tus componentes. Cada historia es una versión específica de tus componentes. Así que en nuestro caso, por ejemplo, tenemos la historia de no disponible y la historia de disponible. Entonces déjame mostrarte lo que eso significa. Voy a entrar aquí y ejecutar tu Storybook. Y esto puede llevar un tiempo dependiendo de cuántos componentes tengas. Vale. En este caso, muy rápido, genial. Y puedes ver, okay, tenemos esta historia de contador. Tenemos la historia de no coincidencia, la historia de encabezado de restaurante, lista de restaurantes, y así sucesivamente. Entonces, lo que nos interesa aquí es el elemento de menú del restaurante donde tenemos dos historias diferentes, predeterminada y seleccionada. Así que puedes ver que cuando está seleccionada, ya hay un contador creado. Y puedo volver aquí y déjame mostrarte cómo está implementado eso. Así que tenemos este archivo junto al elemento de menú del restaurante que es el elemento de menú del restaurante para las historias. Y tiene un poco de boilerplate.
5. Creando una Historia para el Elemento de Menú No Disponible
Definimos argumentos para las historias, como predeterminado y seleccionado. Queremos crear una nueva historia llamada no disponible con un elemento de menú no disponible. Después de simular la experiencia, revertimos el cambio para probar otro enfoque.
plato para
storybook. Y luego cada historia es esto. Así que tenemos argumentos que definimos para la historia. Así que aquí tenemos dos historias, predeterminado y seleccionado. Y predeterminado y seleccionado están aquí. Así que puedes ver que la diferencia está en los argumentos que pasamos, que son prácticamente las props. Así que en nuestro caso, queremos crear una nueva historia llamada no disponible con un elemento de menú que, por supuesto, está no disponible. Oops, olvidé una coma, disponible, true. Eso está bastante bien, okay. Y ahora debería aparecer. Okay, perfecto. Lo tenemos aquí. Pero por supuesto, no hemos revertido el cambio todavía. Así que hagámoslo de nuevo. Simplemente simulando la experiencia desde cero, elemento de menú.noDisponible, no disponible. Okay, perfecto. Y se actualizó bastante rápido, lo cual es genial. Y déjame revertir eso de nuevo porque lo vamos a hacer de nuevo de otra manera.
6. Beneficios de Storybook para el Diseño de Componentes
Lo bueno de Storybook es que fomenta un buen diseño, no solo desde una perspectiva de diseño de UX, sino también desde una perspectiva de diseño de software. Te impulsa a crear componentes simples que son agnósticos del estado, lo que los hace fáciles de probar y reutilizar en diferentes bases de código.
Genial. Lo bueno de Storybook es que fomenta un buen diseño, no solo desde una perspectiva de diseño de UX, sino también desde una perspectiva de diseño de software. Entonces, debido a que quieres historias para cada uno de tus componentes, debes pensar en qué componentes quieres en primer lugar y cómo quieres que se diseñen en términos de props que toman, etc. Y la forma en que Storybook estructura las historias significa que estás un poco impulsado en la dirección de crear componentes simples que son agnósticos del estado, por lo que no son capaces de usar Redux o algo similar. Y usualmente eso es algo muy bueno porque significa que tus componentes son muy fáciles de probar y también de reutilizar.
7. Preview.js para React, Vue y Solid
Storybook actúa como documentación y te permite previsualizar componentes. La opción tres es tener una previsualización para componentes de React, como previsualizaciones de markdown. No pude encontrar una solución adecuada, así que construí Preview.js. Preview.js funciona con React, Vue y Solid, y está disponible en VS Code e IntelliJ.
en diferentes bases de código, así que hay muchas cosas buenas allí. También actúa como documentación, lo cual, nuevamente, es súper útil, por ejemplo, si quieres decirle a tu diseñador de
UX, hey, tengo este componente que actualmente en esta implementación en particular, puedes verlo en esta URL. Eso es realmente súper útil y conciliar eso con el diseño en el que está trabajando tu diseñador. Puede ser un poco lento para iniciar, ya que depende de cuántos componentes tengas, y realmente es algo en lo que el equipo de
storybook está trabajando para mejorar de todos modos, así que no es algo de lo que me preocuparía demasiado. Requiere un poco de boilerplate, por lo que vimos que solo puedes ver componentes que tengan historias definidas para ellos, así que primero necesitas definir las historias. Si encuentras un componente y te preguntas cómo se ve y no hay una historia para él, primero tendrás que escribir una historia. Genial. ¿Hay una opción tres? ¿Sabes cómo cuando escribes markdown en tu IDE, digamos en VS
Code, puedes ver una vista previa de ello. Permíteme mostrarte. Creemos un archivo readme y digamos, hola mundo. Estoy en una Mac. Voy a presionar comando K y V, creo. Sí. Solo voy a decir que esto se actualiza instantáneamente con una vista previa agradable. Ahora puedo ver esto es bastante genial. Genial. Entonces, ¿qué pasaría si tuviéramos algo así, pero para componentes
React. Y seguí buscando eso, pero nunca pude encontrar la solución correcta. Hubo un par de contendientes, pero el problema es que solo funcionan con componentes que no toman ninguna prop o que son súper, súper simples. Así que decidí construirlo. Y se llama Preview.js. En realidad, antes se llamaba
React Preview. Porque era para componentes
React. Pero luego me di cuenta de que también podría funcionar con otros
frameworks como
Vue y Solid. Así que lo renombré a Preview.js. Y también en el proceso, prácticamente todo. Entonces Preview.js funciona con
React,
Vue 2,
Vue 3 y Solid. Está disponible en VS
Code e IntelliJ. Así que veamos cómo se ve Preview.js. Volvamos a VS
Code. Aquí tenemos nuestro elemento de menú de restaurante, al que volví a
8. Previsualización de elementos del menú de restaurante en Preview.js
Puedo ver una previsualización del elemento del menú de restaurante abierto en Preview.js sin escribir ningún código. Genera automáticamente un valor válido basado en las props y el tipo de elemento del menú.
estado anterior. Y aquí voy a tener este botón, abrir elemento del menú de restaurante en Preview.js. Así que voy a hacer clic en eso. Y ¡oh, prueba! Eso es bastante genial, okay. Puedo ver una previsualización de eso. Y, nuevamente, no tuve que escribir ningún código para esto. Esto es tal cual. Básicamente, lo que hizo fue mirar las props de esto. Es, entonces, oh, okay. Este específico, primero, es un componente
React, y por lo tanto no puedo mostrar esta cosa. Pero también dice, okay, que toma el recuento de elementos del menú al actualizar. Y en realidad puede mirar el tipo de elemento del menú y el tipo
9. Implementando el estado no disponible
Hagámoslo más realista implementando el estado no disponible. Proporciono un valor de ejemplo y veo las actualizaciones en vivo al instante. Con comentarios instantáneos, lo embellezco con relleno, esquinas redondeadas, sombra y un borde rojo. A pesar de los errores tipográficos, es genial.
de generar un valor válido para ello. Bueno, esto, tanto como pueda adivinar. Así que aquí, hagámoslo un poco más realista. Digamos brownies. Y usemos imágenes adorables de gatitos. Aunque no vamos a comer al gatito. Así que sí, esto es realmente solo para ilustración. Y ahora, esto es un poco más realista. Ahora, queremos implementar el estado no disponible. Entonces lo que voy a hacer es proporcionar un valor de ejemplo. De acuerdo, no disponible: true. Y ahora, debería poder ver cómo se ve. Entonces, div no disponible. Oh, genial. Eso se actualiza en vivo. Eso es bastante genial. Y lo voy a embellecer, dado que tengo comentarios instantáneos. Eso es bastante genial. De acuerdo. Un poco de relleno, tal vez esquinas redondeadas. Sí. Tal vez una sombra. Sombra, sí, genial. Tal vez también un borde. Borde 2, borde rojo. Ups, lo siento. Errores tipográficos, muchos errores tipográficos. De acuerdo. Eso es lo que obtienes por grabar una presentación.
10. Usando PrivyJS con Storybook y VIT
Sigo presionando guardar cuando en realidad ni siquiera necesito guardar porque PrivyJS no requiere que guardes. PrivyJS funciona bien con Storybook. No compiten entre sí. PrivyJS es posible gracias a VIT, que es más rápido y más simple que Webpack. Usa VIT.
a las 11 pm. Vale. Sí, otro error tipográfico. Vale, genial. Sigo presionando guardar cuando en realidad ni siquiera necesito guardar porque PrivyJS no requiere que guardes. Vale, eso es bastante genial. Vale, no disponible en este momento. Vale. ¿Cómo se ve cuando lo hago más ancho? Vale, genial. Eso está bien. Vale, tal vez solo no disponible. Vale, genial. Hecho. Eso es PrivyJS en pocas palabras. Ahora, podrías preguntarte si usas PrivyJS, ¿deberías seguir usando
Storybook? Y la respuesta es sí.
Storybook sigue siendo una gran herramienta para documentar tus componentes y asegurarte de que hayas documentado cada variante de ellos. De hecho, PrivyJS admite mostrar tus historias. Si entro en las historias de los elementos del menú del restaurante, puedes ver que veo el mismo enlace de vista previa para cada una de las historias, y puedo verlas así, lo cual es perfecto. También puedo ver el encabezado del restaurante, todas estas cosas diferentes. Entonces, si solo estás explorando una base de código que usa
Storybook y usas PrivyJS, lo tienes configurado, probablemente ni siquiera necesites iniciar
Storybook. Y esto probablemente sería mucho más rápido para usar en su lugar. Así de simple. En una versión futura de PrivyJS que espero lanzar en junio o julio, también habrá una función para guardar tus props como una nueva historia. Aunque probablemente haré que eso sea parte de la versión Pro de PrivyJS, que es de pago, solo porque al final del día me gustaría poder ganar un poco de dinero con eso para poder pasar todo mi tiempo trabajando en PrivyJS en lugar de tener que apretujarlo en mi tiempo libre. Pero eso es lo básico. PrivyJS funciona muy bien con
Storybook. Puedes usar ambos. No compiten entre sí. PrivyJS solo es posible gracias a un par de innovaciones recientes en herramientas web, especialmente una llamada VIT, que es prácticamente una alternativa a
Webpack que es significativamente más simple de configurar y también mucho más rápido. Tu experiencia de desarrollo con VIT es que actualizas un archivo y en cuestión de milisegundos, se actualizará. Es por eso que PrivyJS puede hacer Privy mientras escribes. La única razón por la que eso es posible es porque utiliza VIT en el fondo. Si quieres sacar algo de esta charla, aparte de usar PrivyJS, por supuesto,
11. Configuración de PrivyJS y Configuración de Componentes
PrivyJS es fácil de configurar y puede ahorrarte muchas horas por semana. Utiliza Visual Studio Code como el IDE compatible y configura un componente envolvente para mostrar tus componentes correctamente. Asegúrate de importar styles.globals.css para una mejor apariencia. Si encuentras errores, repórtalos en GitHub. Visita PrivyJS.com para obtener más información y sígueme en Twitter para recibir comentarios.
utiliza VIT. Pruébalo. Es más fácil de configurar de lo que crees, y podría ahorrarte literalmente muchas, muchas horas por semana. Si quieres configurar PrivyJS con tu proyecto, hay algunos pasos que debes seguir. Para ser honesto, en este momento, no es la experiencia más fluida, desafortunadamente. A menos que uses Create
React App o algo muy simple, en cuyo caso esperemos que funcione sin problemas.
Lo primero es asegurarte de utilizar un IDE compatible, ya sea Visual Studio Code o IntelliJ slash WebStorm. Si no estás seguro de cuál usar, utiliza Visual Studio Code porque la versión de IntelliJ tiene algunos errores, para ser honesto. Estoy trabajando en eso. Y luego, lo siguiente es configurarlo para mostrar tus componentes correctamente, porque por defecto, lo que hará PreviewJS es simplemente mostrar el componente en una aplicación completamente vacía, lo cual no es perfecto. Si, por ejemplo, necesitas que haya algún CSS global. La forma de hacerlo es configurando un componente envolvente. Permíteme mostrarte cómo se ve eso en mi aplicación hungry. Aquí está previewjs.wrapper.tsx, y eso es prácticamente toda la configuración que tenemos. Eso es todo, toda la configuración. Lo importante aquí es esta importación de styles.globals.css. Sin esto, se vería muy feo, permíteme mostrarte a qué me refiero. De acuerdo, así que tengo esto, y lo voy a eliminar solo por diversión. Y va a quedar, sí, realmente roto. Porque, por supuesto, en globals o TSS, en este caso, tengo toda la configuración de Tailwind. Y también tengo un envoltorio que configura un contenedor de pantalla, así que solo estoy agregando un poco de margen para que se vea más bonito. Pero es posible que, por ejemplo, necesites configurar algún contexto de react, inicializar tu estado de redux, o cualquier otra cosa que necesites. Y si usas alias, importar alias, es posible que también necesites un par de líneas de configuración también. Como mencioné anteriormente, PrivyJS es bastante nuevo, acaba de salir en enero. Entonces, si encuentras algún error, considera informarlo en GitHub. Realmente lo apreciaría eso. Espero que después de esta charla haya tal vez un par de cientos de informes de errores. Esperemos que no tantos. Visita PrivyJS.com si quieres echarle un vistazo. Si estás en Twitter, puedes seguirme y compartir tus comentarios. Realmente espero que PrivyJS pueda mejorar un poco tu flujo de trabajo diario y hacerlo un poco más rápido. ¡Gracias!
React Advanced Conference 2021
Comments