Mejorando la Felicidad del Desarrollador con Preview.js

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.

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

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.

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.

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!