🏂🏻 🛁 👏🏿 Kit de herramientas front-end: utilidades y funciones útiles para acelerar el desarrollo 💩 📦 🧙🏿

Atrás quedaron los días en que fue suficiente para el fronttender abrir el Bloc de notas, escribir algunas líneas de código, verificarlo en un navegador y subirlo al servidor a través de FTP. El desarrollo moderno de la interfaz de usuario se ha vuelto mucho más complicado. El ecosistema de JavaScript está creciendo y cambiando tan rápidamente que es fácil confundirse. En esta publicación, le diré lo que utiliza el equipo front-end de Parallels para optimizar el rendimiento.

Estoy seguro de que en este momento, en algún lugar del mundo, dos proveedores de servicios frontales están discutiendo seriamente sobre qué marco es mejor usar para el proyecto. Y el tercero está conectado a ellos: un ardiente oponente de los marcos. Afirma que necesita escribir en JavaScript vainilla, porque todos estos programas progresivos solo inflan el código con dependencias innecesarias y generalmente están diseñados para aquellos que no pueden programar. Es probable que su discusión termine en nada. Una hora después, todos se dispersarán silenciosamente a los trabajos. Todos permanecerán en su propia opinión y trabajarán como solían hacerlo.

En mi opinión, tales disputas son peores que las disputas sobre lo que apareció antes, una gallina o un huevo. Porque no existe la única solución efectiva verdadera para un desarrollo front-end sin problemas. Estoy de acuerdo en que todas las funciones básicas se pueden hacer sin usar Angular, React, Vue.js y marcos similares. Pero si el objetivo es la cooperación y crea una aplicación a gran escala, no solo una, sino como equipo, es más fácil con ellos.

Por supuesto, puedes prescindir de ellos, pero hacen posible que no pierdas el tiempo creando un estándar, estableciendo la estructura (siempre sabes dónde está), facilitando la rutina y acelerando el desarrollo. Si suponemos que el lenguaje es un alfabeto, entonces el marco puede considerarse como un libro de frases con diálogos cliché que facilitan la construcción de la comunicación.

En esta publicación, compartiré herramientas útiles que el equipo y yo usamos al crear la interfaz de usuario. Simplifican enormemente tanto el desarrollo conjunto como el apoyo adicional al proyecto.

***
Creo que, para empezar, vale la pena contar un poco sobre ti. Ingresé al mundo de TI hace nueve años, en 2011. Comenzó como una pila completa en una pequeña organización. Luego se involucró en aplicaciones móviles híbridas, fue responsable de la parte de la lógica que estaba en WebView. Y unos años más tarde terminó en Parallels. Aquí trabajo en el equipo de Cloud, que es un proveedor de soluciones web para todos los productos de la empresa. La mayor parte de las características comerciales me obligan a pensar e implementar tareas de front-end. Ahora se centró en desarrollar el portal My Account.

Como probablemente ya entendió del texto anterior, la creación de la interfaz de esta aplicación web no estuvo exenta de marco. Elegimos Vue.js. Para que sea agradable trabajar con él, también implementaron herramientas adicionales. Esto es lo que nos ayudó a optimizar el proceso de desarrollo tanto como sea posible.

Vue CLI

Esta utilidad de línea de comandos incluye muchas características útiles y está diseñada para el desarrollo rápido de proyectos. En términos generales, crea un marco estándar para el lanzamiento y le permite centrarse en la creación de la aplicación sin pensar en la etapa inicial sobre las herramientas y la configuración del ensamblaje. Pueden personalizarse según las necesidades del proyecto más adelante.

Vue CLI proporciona soporte para las principales tecnologías de desarrollo web. Fuera de la caja hay herramientas como Webpack, Babel, TypeScript, ESLint, Sass. Y además, hay soporte incorporado para la unidad y las pruebas de extremo a extremo utilizando Mocha y Nightwatch.

Vue devtools

Una extensión para el navegador que le permite depurar la aplicación en tiempo real. Tiene acceso a las propiedades y métodos de los componentes, una lista de todos los eventos. Puede controlar completamente el estado de la aplicación a través de una página web y no esperar a que una partición vea el resultado.

Funciona en Chrome y Firefox. No hay una extensión oficial para otros navegadores, pero puede ejecutar Vue Devtools a través de la aplicación Electron. Entonces la herramienta estará disponible en cualquier entorno.

Zeplin

El servicio facilita la transferencia de diseños al desarrollo. Como en cualquier gran empresa, tenemos un conjunto de componentes de interfaz de usuario. Anteriormente, estaba en los archivos PSD, y debido a esto, el acceso a él era muy caótico. Y en Zeplin existe tal cosa, llamada la guía de estilo global.

En él puede recopilar todas las reglas para construir interfaces empresariales. Para cada componente de la IU, el código CSS se genera automáticamente: se indican los colores, tamaños, sangrías y otras propiedades de cada bloque que conforman el elemento. Es decir, los estilos ya no necesitan implementarse desde cero, lo que acelera enormemente el trabajo. La era del PSD ha terminado.

Además, hay un historial de todos los cambios. Puede seguir fácilmente cómo fue en la etapa inicial y qué sucedió al final.

Git url como dependencia

Esta es la función npm que estamos usando. Necesitábamos compartir un conjunto de componentes de UI para que los colegas dentro de la empresa tuvieran acceso a él y pudieran usarlo para sus necesidades. La solución más obvia a este problema es el paquete npm. Pero no lo queríamos en el registro público, el servidor local npm no era una buena idea, por lo que utilizamos el paquete git + npm.

Por lo tanto, cada empleado de Parallels tiene acceso a la base de código de la interfaz de usuario y, dado que es git, el problema de versiones también está resuelto. No habrá problemas debido a las actualizaciones, nada se romperá.

Centinela

Para recopilar errores y registros que ocurren en el lado del cliente, sin esperar una queja, conectamos Sentry . Esta herramienta rastrea la ejecución de código en navegadores personalizados.

Si se detecta un error, se nos envía automáticamente una solicitud con un informe completo que refleja tanto la esencia del incidente como la lista de acciones que lo precedieron. En base a estos datos, es muy fácil encontrar la razón y arreglar todo.

También nos permitió descargar un poco nuestro soporte técnico, salvó a nuestros colegas de llamadas y llamadas innecesarias.

Sobre los peligros de las adicciones

Finalmente, un pequeño consejo. Intenta escribir utilidades tú mismo. Recientemente, las bibliotecas con soluciones preparadas se han vuelto muy populares. Llega al punto de que las ofertas de front-end toman dependencias incluso para las funciones de "línea única" que pueden escribir con los ojos cerrados. ¿Qué amenaza esto? Un fracaso.

Una historia instructiva sucedió hace cuatro años. Una persona eliminó su paquete de 11 líneas del registro npm y, por lo tanto, rompió alrededor de mil proyectos. Los desarrolladores de todo el mundo comenzaron a recibir mensajes de error al intentar implementar sus aplicaciones debido a la falta de un pequeño módulo llamado "panel izquierdo".

Así que no seas perezoso, no reemplaces el código con un montón de dependencias. Confíe en usted mismo y escriba pequeñas utilidades usted mismo, y use soluciones de biblioteca preparadas solo para funciones complejas, donde realmente ayudan a no reinventar la rueda.