Ejecución in situ y desarrollo web

Hola a todos!

Ahora te contaré una historia extraña. Una vez, viví en un condominio, en el que, en la planta baja, había un gimnasio con cintas de correr. En mi juventud, participé activamente en los deportes, y luego logré conocer el estado que ocurre durante la carrera y se llama el "segundo viento": esto es cuando de repente comienzas a sentirte inspirado por una deidad que no conoce la fatiga. La respiración, las palpitaciones y los movimientos corporales tienen una resonancia especial y te convierten en un auto en funcionamiento. El sentimiento es más brillante, en mi opinión, cuanto más NO le gustaba correr hasta este punto. Entonces, todos los días pasaba junto a las cintas de correr y pensaba que sería bueno recordar a los jóvenes. Bueno, lo recordaba. La cinta de correr ayudó con esto, le permitió afinar el ritmo y lograr el ritmo deseado. En la calle, no puedo hacer esto: es muy difícil correr por la ciudad a una velocidad uniforme, el terreno y los obstáculos interfieren. Después de un tiempo, me mudé a un apartamento normal (sin gimnasio) y comencé a pensar en adquirir mi propia cinta de correr.

Sí, por supuesto, podrías comprar una suscripción al club deportivo más cercano, pero yo, como muchos de mis colegas en TI, soy una fobia social. Si ni siquiera un sociópata. El ejercicio es un proceso íntimo para mí. Bueno, usar cualquier minuto libre para el entrenamiento también fue tentador: "la salud del friki" y todo eso ... En resumen, miré las ofertas de las tiendas en línea, leí las reseñas, me pregunté cuánto podría gastar en este negocio, cómo resolver el problema con el ruido y dónde poner esta gran bandura. ... Luego caí en las manos de una cuerda de saltar común y me dije: bueno, aquí está, ¡una buena opción para el entrenamiento cardiovascular sin demasiadas hemorroides! Todo lo que necesita son techos altos y ... Nada salió de eso: para saltar sobre una cuerda de saltar de manera rítmica y uniforme, necesita poder hacerlo. Volvemos a pensar en la cinta de correr o ... Espera un minuto, ¿por qué no intentas CORRER EN LUGAR? Oh, bueno, de alguna manera MUY simple y estúpido. Pero lo intenté. ¿Y sabes que? ¡Esto es genial! Las sensaciones son casi las mismas que experimenté en la cinta de correr, solo que todo es muchas veces más simple: te agarras a la mano un brazalete de fitness, te pones los auriculares con música de salchicha, enciendes el temporizador y ¡listo! Sí, hay matices, pero créeme, son insignificantes. Como resultado, he estado enfermo con este tema desde hace algún tiempo, tanto que quiero unirme a la secta de los mismos locos. Me preguntas: ¿de qué estás hablando en general, cómo se relaciona todo esto con el desarrollo web?

Y así es como

Considere la pila de tecnología popular para el desarrollo front-end moderno:

TypeScript + LESS / SCSS / PostCSS + React + Redux / Mobx + Webpack

De hecho, ahora este es un cierto estándar. Es fácil verificar esto mediante el análisis de vacantes. Cualquier proyecto nuevo este año, con el mayor grado de probabilidad, se lanzará con una lista similar bajo el capó. Este es un buen conjunto de cintas de correr probadas con el tiempo. Repasemos esta lista juntos y veamos qué queda de ella si usamos el enfoque Ejecutar en el lugar.

TypeScript

Cosa maravillosa Cualquiera que haya escrito algo serio para la web lo entenderá. A menudo, en los artículos sobre TypeScript para principiantes, que dan ejemplos, hablan de cosas muy simples y banales, como pasar argumentos escritos a una función o las vicisitudes de la conversión de tipos en JavaScript, de la que se guarda. Pero las capacidades de TS son mayores y más profundas que las verificaciones de tipo en la etapa de compilación, puede llevar al desarrollador "de la mano" a lo largo del proyecto, provocando y no permitiendo que uno tropiece una vez más. Pero TS tiene sus inconvenientes: NO funciona en un navegador sin transpail y su sintaxis, digamos, "ondas" en los ojos. Cuando trabajas con el front-end, tu flujo de trabajo a menudo implica verificar cómo se ejecuta tu código en el navegador, necesitas acceso constante al tiempo de ejecución nativo. La pérdida de tiempo para reconstruir un proyecto para reflejar los cambios, en conjunto, puede ser enorme. Incluso si tiene todo lo que necesita está en caché y optimizado. Que hacer Mi opción: usar JS + JSDoc. Sí, TS Static Analyzer admite el formato JSDoc . Al mismo tiempo, ve su código directamente en el navegador y aprovecha los beneficios de la civilización. Los bloques que describen tipos y otras sugerencias no se mezclan con el código y tienen límites obvios, lo que, personalmente para mí, ayuda mucho a leer el código "en diagonal". Si usa VS Code, puede probar este enfoque simplemente agregando la línea // @ ts-check al comienzo de su código. Si necesita soporte para navegadores heredados, la compilación de ES6 +, por supuesto, seguirá siendo necesaria, pero solo para la versión de producción. Como resultado, simplifica la depuración en tiempo de ejecución (de la cual no se guardará la ausencia de errores y advertencias durante el ensamblaje) y ahorra mucho tiempo.

MENOS / SCSS / PostCSS

De este conjunto, mis favoritos fueron MENOS y PostCSS. Me encantó MENOS por su sintaxis más "nativa" y la relativa facilidad de las dependencias necesarias para el entorno de desarrollo. PostCSS ayudó a crear todo tipo de trucos con SVG y prefijos de pistas. Las desventajas, como en el párrafo anterior, llamaría la necesidad de una recopilación constante. Bueno, las dependencias mismas. Sin embargo, en nuestro año 2018, tenemos algo tan maravilloso como las variables CSS nativas. Esta es una cosa extremadamente poderosa con la que ningún preprocesador puede comparar: ¡puede redefinir sus variables directamente en tiempo de ejecución! Esto abre todo un mundo de nuevas posibilidades. Por ejemplo, puede simplemente "sobre la marcha", cambiar los temas de toda la aplicación, así como sus bloques individuales. Literalmente, un usuario puede pegar una máscara para una aplicación con algún selector de color, y para esto no necesita mantener paquetes separados con estilos precompilados o cargar su JS con lógica adicional. Y mucho más, más sutil y específico. Elijo el CSS moderno nativo. Pero si necesitas soportar IE11, entonces tristeza .

Reaccionar

React nos trajo un nuevo concepto de descomposición modular, que se adaptaba muy bien a las necesidades del desarrollo del lado del cliente, porque la estructura de los componentes repitió la estructura de la presentación, simplificando la percepción y dando orden a los jefes de los desarrolladores. Por eso, en mi opinión, se ha vuelto tan popular y por eso le agradece. Sin embargo, ahora React adquiere cada vez más las propiedades de un culto a la carga: la gente comienza a arrastrarlo a los proyectos solo porque "todos lo hacen". Y esto es terrible, porque la elección de ingeniería, especialmente en un tema tan importante, debe ser lo más consciente posible. Y para ser consciente, debe comprender que React está lleno de fallas. Para mí, esto es, en primer lugar, que es una abstracción demasiado gruesa sobre el DOM nativo y trae una gran cantidad de sus propios detalles con los que debe lidiar en lugar de resolver directamente los problemas. Esto es especialmente sensible y deprimente si sus tareas son un poco menos triviales que los moldes banales. Puede hablar sobre este tema durante mucho tiempo, recuerde JSX, VDOM y más, pero para nosotros ahora la pregunta principal es: ¿cuál es la alternativa? No, no Vue. Y no, especialmente, Angular. Para mí, estos son componentes web: un conjunto de estándares CustomElements + ShadowDOM + Módulos ES + Plantillas HTML . Por qué Porque estos son los estándares admitidos por la plataforma web en sí, y no la plataforma meta y los complementos JS.

Puede dividir su código en bloques ordenados y organizarlo como desee utilizando módulos nativos. Sí, los módulos son compatibles con todos los navegadores modernos y no necesita reconstrucción durante el proceso de desarrollo. Sí, puede almacenar estilos y plantillas por separado en módulos. Sí, puede habilitar específicamente el soporte de sintaxis para estos archivos y trabajar con ellos como HTML y CSS nativos. El ciclo de vida de los componentes web lo ayudará a organizar la representación y las actualizaciones sin un análisis innecesario y sin cambiar la estructura del DOM. ShadowDOM le permite deshacerse de BEM engorroso y no preocuparse adicionalmente por la encapsulación de estilos.
ShadowDOM es transparente para las variables CSS y le permite pasar parámetros hacia adentro desde cualquier nivel apropiado de anidamiento. Esto le permite experimentar con diseño paramétrico y hacer muchos otros trucos. Los componentes web funcionan completamente con la API DOM habitual mientras que son elementos html completos: todos los métodos estándar están en sus manos. Puede usar atributos personalizados para pasar parámetros y mostrar configuraciones (aunque, a diferencia de React, no puede pasar nada más que cadenas y valores booleanos, pero para mí no es un problema en absoluto). Su código será más fácil y rápido. Créeme, he podido comparar. Un poco triste: para la mayoría de los usuarios, todo funcionará de forma nativa, pero algunos necesitarán polifilos . Si sus estadísticas y público objetivo, principalmente sobre los navegadores modernos, no dude en profundizar en este tema, vale la pena.

Redux / mobx

Es mas complicado. Por un lado, hay un montón de artículos que enumeran las fortalezas y debilidades y comparan diferentes enfoques para almacenar estados. Y para ir a los detalles, necesita un caso específico. Resultó que este tema me ha perseguido durante bastante tiempo: me encuentro con tareas bastante complejas de trabajar con datos estructurados complejos. Bueno, en general: los datos que están cerca de la realidad nunca en la práctica son simples, convenientemente normalizados con una clara jerarquía universal. Muy a menudo, este es un gráfico complicado, que requiere que inicialmente establezca la máxima flexibilidad en el sistema. En este asunto, soy partidario de la construcción de bicicletas, pero no recomendaré indiscriminadamente mi propio camino a todos. Lo que definitivamente puedo recomendar es no desdeñar los fundamentos de la informática moderna, leer algo de ciencia popular sobre teoría de grafos, teoría de conjuntos, teoría del caos. Además, no estoy hablando de algún tipo de hardcore: las ideas más generales pueden ser muy útiles y "despejar el cerebro" de la manera correcta. En el caso simple, podrá escribir su propio repositorio de estado con blackjack y suscripciones, y no será más difícil que profundizar en la documentación de las bibliotecas populares.

Paquete web

Por supuesto, podemos abandonar el sistema de ensamblaje por completo. Pero resolver la cadena de importación en código en tiempo real no es lo más rápido. Por lo tanto, todavía necesitamos paquetes para la versión de producción. Bueno, otra clase de minificación / ofuscación, de nuevo, y un papito compacto ... Es por eso que dejamos Webpack. Pero necesitamos para él solo un par de módulos con configuraciones mínimas, y sin observadores y reconstrucciones para el proceso de desarrollo. Personalmente, mi configuración de compilación se ve muy compacta y no requiere una gran cantidad de dependencias. Recientemente, a menudo escucho sobre el nuevo generador de paquetes, y su concepto minimalista me atrae mucho, pero, que yo sepa, no funciona con módulos ES y, en mi opinión, es un archivo. Espero que esto cambie.

Cual es el resultado

A menudo escucho la opinión de que si escribes "vainilla", inevitablemente te encontrarás con el hecho de que tu proyecto pronto se convertirá en una papilla con fideos sin soporte. Permítanme parar: en primer lugar, si lo desean, las gachas también se pueden preparar a partir de una reducción con una reducción (he visto suficiente de esto). Y en segundo lugar, todo será muy bueno si usa módulos, JSDoc y buenas prácticas de OOP. Entonces, ¿a qué hemos llegado?

JS + CSS + Componentes web + Webpack

De las cinco "cintas de correr" solo nos queda una, significativamente ligera. Y esto es suficiente para sentir las "alas detrás".

PD: De ninguna manera afirmo que mis enfoques se adaptarán a todos. Le pido que considere esta obra al menos como una ocasión para pensar en lo que nos parece por sentado.