El autor del material, cuya traducción publicamos hoy, dice que quiere compartir con los lectores un pronóstico sobre el desarrollo de tecnologías web para los próximos años. En particular, aquí hablaremos sobre lo que, según el autor, los desarrolladores front-end probablemente valen la pena aprender hoy.
Todo lo relacionado con JavaScript se está desarrollando muy rápido. Esto también se aplica a lo que se puede atribuir al campo del desarrollo web. Hoy en día, aquellos cuyos proyectos no se basan en las tecnologías más modernas están comenzando a sentir especialmente la brecha entre lo que usan y el nuevo que aparece casi a diario. Estas tecnologías incluyen Webpack, React, Jest, Vue, Angular en su estado actual. Si bien la "población" del mundo del desarrollo front-end, que incluye especialistas técnicos y programadores, está en constante crecimiento, este mundo se esfuerza por la estandarización. El advenimiento de las nuevas tecnologías y herramientas ya está cambiando la situación.
Podemos decir con bastante certeza que la estandarización del desarrollo de interfaces de usuario será una tendencia común en el desarrollo de tecnologías front-end. En particular, estamos hablando de una composición basada en componentes, el deseo de sistemas modulares. Esta tendencia afecta a casi todo, desde el estilo hasta las pruebas e incluso la gestión del estado de las aplicaciones. Esta tendencia puede incluir tecnologías construidas alrededor de componentes web, módulos ES, las herramientas correspondientes y mucho más.
1. Sistemas para trabajar con componentes web, independientes de frameworks y bibliotecas.
En general, podemos decir que este es el futuro. Por qué La cuestión es que los sistemas en cuestión son independientes de los marcos. Esto significa que pueden trabajar de forma completamente independiente y junto con cualquier marco, dadas sus características con respecto a la presentación del código. Estos sistemas no se caracterizan por lo que se llama "fatiga de JavaScript", "fatiga de JavaScript". Son compatibles con los navegadores modernos. En los proyectos creados con su uso, se incluye la cantidad óptima de código auxiliar. Hacen un buen uso de las capacidades de VDOM.
Los componentes en cuestión se crean utilizando el estándar Elementos personalizados. Le permite crear nuevas etiquetas HTML, ajustar sus propiedades, desde la apariencia hasta los mecanismos internos y las características de trabajar con Shadow DOM.
Los proyectos notables en esta área son
Lit-html (y
Lit-element ),
StencilJS ,
SvelteJS ,
Bit .
¿Cómo deben verse los principios de modularidad, reutilización, encapsulación y estandarización en la era de los componentes? Si lo piensa, piense en el futuro del desarrollo de la interfaz de usuario, resulta que este futuro está representado por componentes web. Volveremos a esta idea. Mientras tanto, aquí hay algunos materiales útiles sobre componentes web.
Aquí puede leer sobre herramientas para desarrollar componentes web.
Aquí hay material sobre bibliotecas de componentes web.
Aquí puede encontrar un ejemplo de creación de prototipos de un lector RSS utilizando componentes web.
2. Sobre el futuro de las guerras de marcos y bibliotecas.
En términos de la cantidad de descargas de NPM, React sigue sin pasar por Angular y Vue. Al menos por ahora .Aquí no vamos a hablar sobre qué marcos y bibliotecas son mejores que otros y por qué esto es así. Si está interesado en leer al respecto,
aquí está , materiales en los que, en datos reales, se comparan Angular, React y Vue. Vamos a estudiar el panorama general. Y se ve así: en el desarrollo front-end, la proporción de tecnologías basadas en componentes está creciendo. Está en constante crecimiento. El número de desarrolladores que usan tecnologías similares también está creciendo y, rápidamente. Además, en esta área hay suficiente espacio libre para la introducción de nuevas herramientas.
Entonces, ¿qué marco vendrá primero en 5 años? Nadie lo sabe. Pero es seguro decir que alguien que quiera estar preparado para el futuro debería estudiar las tecnologías básicas del ecosistema JavaScript y acostumbrarse al entorno en el que el DOM está controlado por componentes web. Quizás en 5 años React sea la herramienta líder para el desarrollo de interfaces. Puede pensar en esto mirando el gráfico anterior, basado en datos de NPM. Pero no tan simple. Eche un vistazo, por ejemplo, a
estas métricas. Nos permiten decir que, en términos de uso real, la brecha entre React y Vue es muy pequeña.
Vue y React, en términos de su uso real, están muy cercaEn el futuro, esperamos mejorar la estandarización de los componentes web independientemente de los marcos. A este respecto, uno puede reflexionar sobre el efecto que esto tendrá en la guerra marco. Y, por cierto, como todos sabemos, React no es ni siquiera un marco, sino solo una biblioteca.
3. Aislamiento, reutilización y composición de componentes.
Bit es un ejemplo de una plataforma enfocada en desarrollar componentes, colaborar con ellos y reutilizarlosHablando sobre el desarrollo front-end y los componentes a partir de los cuales se construyen las interfaces de usuario, uno no puede evitar recordar
Bit .
Esta plataforma de
código abierto le permite aislar componentes (o cualquier pieza de código JS adecuada para su reutilización) y convertirlos en bloques de construcción que se pueden utilizar en muchos proyectos. En este caso, el desarrollador puede controlar el código fuente de los componentes, administrar sus cambios y un árbol completo de sus dependencias.
En pocas palabras, gracias a Bit, el desarrollador tiene la oportunidad de mejorar sus componentes dentro de diferentes proyectos y sincronizar los cambios. Gracias al
centro de componentes
bit.dev, esta idea se extiende al desarrollo del equipo, permitiendo a los miembros del equipo organizar el código y compartirlo.
Bit Hub le brinda al desarrollador todo lo que se necesita para la creación y el uso conjunto de componentes. Por ejemplo: herramientas de búsqueda convenientes, un entorno interactivo en el que puede experimentar con componentes, soporte completo para CI / CD.
Gracias a Bit, puede usar no solo los componentes creados por los esfuerzos de su equipo, sino también proyectos de código abierto. Esto incluye la capacidad de recomendar cambios a los componentes existentes y la capacidad de compartir sus desarrollos.
4. Módulos ES y CDN
Los módulos ES son parte del estándar ES6 que describe cómo trabajar con módulos en el navegador. El uso de esta tecnología le permite transferir algunas funciones a los módulos que se pueden descargar, por ejemplo, a través de CDN. Después del lanzamiento de Firefox 60, podemos decir que los módulos ES son compatibles con
todos los principales navegadores . También se está trabajando en el soporte para módulos ES en
Node.js. Además, se espera agregar soporte para módulos ES a
WebAssembly .
5. Gestión de estado a nivel de componente
¿Qué hay de nuevo en la gestión del estado de la aplicación? En estos días, la administración del estado se reduce a poner cualquier cosa en el repositorio global de Redux.
Pero este enfoque puede complicar el trabajo con los componentes, puede convertirse en un obstáculo para la divulgación total de sus capacidades en términos de reutilización y modularidad. Si consideramos la situación desde este punto de vista, podemos decir que proyectos como MobX nos brindan un enfoque interesante y más reactivo para trabajar con el estado de las aplicaciones (aquí también puede recordar el proyecto
no declarado ).
Si hablamos de los nuevos mecanismos estándar React para administrar el estado, podemos recuperar la API de contexto y los ganchos. Su apariencia significa que el programador ya no necesita bibliotecas de terceros para administrar el estado, y ese estado se puede administrar a nivel de componentes funcionales. Esto mejora la modularidad de los proyectos y la capacidad de reutilizar componentes.
Como resultado, si intenta mirar hacia el futuro, puede suceder que el término "estado" se use principalmente en la aplicación a componentes encapsulados, y no en la aplicación a ciertos almacenes de datos globales de nivel de aplicación.
6. La estilización de componentes es una composición.
Separación de componentes que implementan lógica y estilos: la forma de estilizar componentes a través de la composiciónSe ha dicho mucho sobre cómo
diseñar componentes. Hay muchas oportunidades en esta área. Estos son CSS incrustado, módulos CSS, descripción CSS en código JS, componentes estilizados y soluciones intermedias como Stylable.
Pensando en el estilo futuro de los componentes, tiendo a imaginar el estilo como una composición. Esto significa que los sistemas de diseño de componentes deben incluir componentes que implementen alguna lógica y componentes que describan estilos. Con este enfoque, es posible crear un sistema de diseño de componentes que se desarrolla a medida que se desarrolla el proyecto. Esto elimina la necesidad de que los desarrolladores dominen las bibliotecas voluminosas para el diseño. Las herramientas utilizadas para diseñar componentes como Sketch o Figma también pueden usar esta idea.
7. GraphQL-API y aplicaciones cliente basadas en datos
La tecnología GraphQL y un enfoque de desarrollo basado en componentes brindan oportunidades interesantes para las aplicaciones cliente basadas en la web. Por ejemplo, con
Apollo, puede crear fácilmente componentes de la interfaz de usuario que funcionen con datos a través de GraphQL. Existen muchas otras
herramientas que facilitan el trabajo con GraphQL.
El manejo razonable de varias API simplifica el desarrollo de aplicaciones basadas en datos. Esto le permite aumentar la velocidad de desarrollo. Como resultado, GraphQL es una tecnología que debe prestarse atención a aquellos que están pensando en el futuro.
8. Herramientas de diseño basadas en componentes.
Los componentes se están convirtiendo gradualmente en una parte integral
de los
sistemas de diseño de proyectos web. Esto reduce la brecha entre diseñadores y programadores. Ambos se están acercando el uno al otro.
Por ejemplo,
Sketch ya proporciona herramientas para el desarrollo modular de diseños de componentes que requieren dependencias entre componentes. Ya existen
herramientas para trabajar en Sketch con componentes que dan forma a su presentación visual mediante programación. El uso generalizado de tales herramientas es solo cuestión de tiempo. Herramientas como
Figma están dirigidas principalmente a componentes de interfaz de usuario reutilizables. El proyecto
Framer está desarrollando una herramienta para diseñadores de programación. Esta herramienta permite a los diseñadores controlar cómo los elementos de la interfaz de usuario se transforman en componentes React.
Resumen
Aquí le presentamos varias tendencias en el desarrollo web de clientes que, según el autor del material, deberían prestar atención a alguien que quiera estar listo para el futuro. Esperamos que esta publicación le haya proporcionado algo para pensar.
Estimados lectores! ¿Cómo ves el futuro del desarrollo web?
