El mundo del desarrollo web está creciendo increíblemente rápido. Lo que ayer fue noticia puede quedar desactualizado hoy, y lo que casi nadie sabe hoy puede convertirse mañana en el motor del progreso. El material, cuya traducción publicamos hoy, considerará todas las cosas más interesantes que sucedieron en la esfera del front-end en 2018. Hablaremos sobre el desarrollo de marcos y herramientas auxiliares, sobre las tendencias de JavaScript, así como sobre la dirección en la que puede ir la interfaz en 2019.
WebAssembly Standardization
WebAssembly a menudo se considera una de las tecnologías sobre las que se construirá la web del futuro. Esta tecnología tiene como objetivo maximizar el rendimiento del código, reducir su tamaño y la posibilidad de desarrollo web utilizando diferentes idiomas mediante la conversión de programas escritos en un formato binario único compatible con los navegadores web.
En la segunda mitad de 2017, los desarrolladores de todos los principales navegadores
informaron que admitían WebAssembly. Luego, en febrero de 2018, ocurrieron 3 eventos importantes: se lanzó la primera versión de
la especificación WebAssembly, se publicaron las especificaciones de la
interfaz JavaScript correspondiente y
la API web .
Acerca de descargar bibliotecas frontend populares de npm
Los primeros cuatro módulos front-end más populares descargados de npm incluyen React, jQuery, Angular y Vue. A continuación hablaremos sobre la situación con las bibliotecas para el desarrollo web con más detalle.
Descargas de la biblioteca front-end 2018 de npmReact continúa dominando el mundo de las bibliotecas front-end y evoluciona constantemente
React ha sido líder en desarrollo web durante muchos años. El alcance de su uso continuó creciendo en 2018. Esta biblioteca sigue siendo una de las más queridas entre los programadores, según una
encuesta realizada por Stack Overflow.
El núcleo del equipo de desarrollo de React es muy activo en el desarrollo de la biblioteca y le agrega nuevas características. Durante 2018, se pudieron ver muchas adiciones a React v16, incluidos nuevos
métodos de ciclo de vida de componentes, una nueva
API de contexto ,
nuevos eventos de puntero del mouse,
funciones diferidas y un nuevo
componente de orden superior
React.memo . Cabe señalar que se prestó la mayor atención a los
ganchos API React and Suspense .
Los ganchos de reacción se encontraron con gran interés, escribieron mucho sobre ellos, a muchos les gustaron. Esta tecnología le permite agregar estado a los componentes funcionales mediante el uso de la función
useState , permite administrar eventos del ciclo de vida de los componentes.
Aquí hay un video que demuestra cómo el uso de ganchos puede mejorar significativamente el código de la aplicación React.
Otra característica nueva e interesante de esta biblioteca es React Suspense. Está diseñado para controlar la carga de datos dentro de los propios componentes de React. La API Suspense le permite pausar la salida de datos mientras espera la finalización de la operación asincrónica de recibirlos de cualquier fuente. Es la API Suspense que se utiliza en funciones diferidas para implementar la separación de código de componente. El objetivo principal de implementar esta tecnología es la capacidad de administrar cualquier descarga de datos asincrónica, como solicitudes a varias API. Además, la API Suspense le permite almacenar en caché las solicitudes de respuesta.
Hay un ejemplo especialmente diseñado que muestra muchos indicadores para cargar datos en una página, que se muestran siempre que las banderas
isFetching establecidas en
true . Gracias a la API Suspense, el desarrollador tiene controles de interfaz de usuario, en particular, estas herramientas se pueden usar para indicar lo que se debe mostrar en la pantalla mientras se espera que se carguen los datos, establecer un tiempo de espera y configurar la navegación. Incluso existe la creencia generalizada de que la API Suspense puede eliminar la necesidad de Redux. De
este discurso de Dan Abramov, puede aprender sobre el desarrollo de aplicaciones utilizando esta API.
Vue continúa creciendo sin pasar por Reaccionar por número de estrellas en GitHub
Después del crecimiento explosivo de Vue en 2017, el mismo continuó en 2018. Este marco incluso
superó a React en términos de la cantidad de estrellas en GitHub.
Aunque a los desarrolladores web les encanta Vue, este marco todavía está bastante por detrás de React y Angular en términos de su uso real. Sin embargo, Vue cuenta con una base de usuarios activa que continúa creciendo, lo que da la esperanza de que Vue desempeñará un papel importante en el desarrollo web en el futuro.
Ewan Yu (creador de Vue) habla mucho sobre Vue 3
Vue se dirige a lanzar la versión 3.0. En 2018, el creador del marco, Ewan Yu, habló en varios eventos sobre las capacidades esperadas del marco y
escribió sobre él.
El marco angular sigue siendo muy popular, su séptimo lanzamiento
En octubre de 2018, se lanzó el séptimo lanzamiento de Angular. Este marco ha experimentado un desarrollo significativo hasta la fecha, pasando de la arquitectura MVC a un sistema moderno que utiliza componentes. Su popularidad también está en constante crecimiento.
Aunque Angular no tiene los mismos entusiastas partidarios que distinguen a React y Vue, este marco sigue siendo popular en proyectos profesionales. Muchos desarrolladores se cansan de React, porque cuando usan esta biblioteca tienen que tomar muchas decisiones con respecto a la elección de herramientas adicionales, diseñar la arquitectura de la aplicación, construir el proceso de construcción de proyectos. Angular, por otro lado, elimina del desarrollador la necesidad de tomar muchas decisiones, pone a su disposición plantillas arquitectónicas ampliamente utilizadas. Angular es un marco cuyas capacidades cubren todas las necesidades de un desarrollador de aplicaciones web, y la herramienta de línea de comandos correspondiente se encarga completamente del proceso de construcción del proyecto. Por supuesto, muchas cosas con este enfoque se establecen en el marco de manera bastante estricta. Otra ventaja de usar Angular en un entorno profesional es el hecho de que está diseñado para usar TypeScript. Como resultado de Angular, podemos decir que este marco creó un nombre para sí mismo en el entorno de desarrollo web y continúa fortaleciendo su posición.
Cabe señalar que el paquete
@angular/core npm es el nuevo Angular, y el paquete
angular es el antiguo AngularJS.
Aquí están los datos npm sobre las descargas de los paquetes
@angular/core ,
angular ,
react y
vue en 2018, así como información sobre el estado de estos proyectos desde GitHub.
Datos del proyecto para angular / núcleo, angular, reaccionar y vueCada vez más desarrolladores desean aprender GraphQL, pero esta tecnología aún no ha pasado por alto REST.
La tecnología GraphQL ha encontrado aplicación en algunos proyectos grandes como
GitHub , pero aún no se ha extendido ampliamente. Según el estudio State of JS, solo un poco más del 20% de los desarrolladores front-end utilizaron la tecnología GraphQL, pero el indicador que caracteriza a aquellos que lo han escuchado y planean usarlo es un impresionante 62.5%.
Tecnología GraphQL
La tecnología CSS-in-JS se está volviendo más común
Al analizar un entorno de desarrollo web, uno tiene la sensación de que está en camino de unificar absolutamente todo usando JavaScript. Esta tendencia también es visible cuando se aplica a la tecnología CSS-in-JS, utilizando qué estilos se crean con las herramientas de cadena JS. Esto le permite trabajar con estilos y dependencias utilizando la sintaxis JS habitual y los mecanismos de importación y exportación. Además, simplifica el estilo dinámico, ya que los componentes que usan CSS-in-JS pueden convertir propiedades en estilos. Los siguientes son ejemplos de CSS regular y CSS-in-JS.
Para administrar estilos dinámicos utilizando CSS normal, debe trabajar con los nombres de clase en el componente y actualizarlos según el estado y las propiedades. Además, para diferentes opciones de estilo, debe usar clases CSS:
Gracias a CSS-in-JS, las clases CSS ya no son necesarias. Es suficiente pasar la propiedad correspondiente al componente estilizado que implementa la estilización dinámica. El código sale mucho más limpio, obtenemos una separación más clara de las tareas entre estilos y React, lo que permite que CSS realice un estilo dinámico basado en las propiedades. En React, este código parece JavaScript bastante normal:
const Header = styled.div` color: ${({ isActive }) => isActive ? 'green' : 'red'}; `; const MyComp = ({ isActive }} => ( <Header isActive={isActive}>HI</Header> )
Para implementar las características CSS-in-JS, se utilizan principalmente bibliotecas como
componentes con estilo y
emoción . La biblioteca de componentes Styled existe más tiempo que Emotion, se ha generalizado, pero la popularidad de Emotion está creciendo rápidamente, muchos desarrolladores la eligen. Cabe señalar que Kent S. Dodds incluso
dejó de trabajar en su biblioteca Glamorous CSS-in-JS, prefiriendo Emotion. Así es como se ven los componentes Styled y las bibliotecas Emotion en términos de npm y GitHub.
Componentes diseñados y bibliotecas Emotion en 2018El marco Vue admite CSS local cuando se usan componentes de un solo archivo sin el uso de bibliotecas adicionales. Para hacer esto, simplemente agregue la propiedad de
scoped a la etiqueta del componente de
style , después de lo cual Vue utiliza la tecnología CSS-in-JS para organizar el trabajo con estilos locales que no van más allá del componente y no se incluyen en otros componentes.
Además, debe tenerse en cuenta que en Angular, de forma predeterminada, mediante el uso de la tecnología de
encapsulación de
vista , se utiliza el alcance CSS.
Los desarrolladores que luchan contra la fatiga tecnológica encuentran la salvación en las herramientas de línea de comandos
Todos saben lo agotador que puede ser monitorear las bibliotecas actualizadas constantemente, que son vitales para los proyectos web, así como actualizar correctamente los proyectos teniendo en cuenta las actualizaciones de la biblioteca y tomar las decisiones arquitectónicas correctas en tales condiciones. Este problema se ha convertido en un catalizador para el desarrollo de herramientas de línea de comandos que resuelven dichos problemas, permitiendo a los programadores centrarse en trabajar en aplicaciones. Todas estas herramientas se han convertido en el principal medio por el cual se crean nuevas aplicaciones en 2018. En particular, se pueden observar los siguientes proyectos en esta área:
Next.js (SSR para React),
Create-React-App (creación de aplicaciones React de cliente),
Nuxt.js (SSR para Vue),
Vue CLI (aplicaciones Vue de cliente) ,
Expo CLI para React Native, herramientas
angulares estándar.
El deseo de los desarrolladores de simplificar el front-end y aumentar la productividad ha llevado a un aumento en la popularidad de los generadores de sitios estáticos.
Durante el desarrollo rápido y revolucionario de JavaScript, a todos les gustaba aprender las últimas bibliotecas y ponerlas en práctica. Sin embargo, ahora que todo se estabiliza más o menos, los desarrolladores han comenzado a darse cuenta de que no todos los sitios deben ser aplicaciones complejas de una sola página (SPA). Esta comprensión ha llevado a la aparición, el crecimiento y el desarrollo de generadores de sitios estáticos. Gracias a ellos, puede desarrollar proyectos utilizando varias herramientas de front-end, como React o Vue, que luego, durante el ensamblaje, se convierten en archivos HTML estáticos. Esto le permite ofrecer a los clientes rápidamente una página completamente terminada.
Los sitios estáticos son buenos porque son la combinación perfecta de simplicidad y rendimiento. Si se generan archivos HTML durante el ensamblaje del proyecto, esto permite enviar páginas terminadas a los usuarios que se cargan casi instantáneamente, sin recurrir a la representación del servidor o del cliente. Junto con el código HTML, el cliente también carga los archivos JS necesarios para que la página funcione, lo que brinda a los usuarios las mismas capacidades que las aplicaciones normales de una sola página.
Los generadores de sitios estáticos son excelentes para crear algo como sitios personales o blogs, pero también se pueden usar en proyectos más grandes. En 2018, generadores como
Gatsby y
React Static para aplicaciones React, y herramientas como
VuePress para proyectos basados en Vue estaban creciendo en popularidad. De hecho, los sitios estáticos se han vuelto tan populares que el proyecto de código abierto Gatsby se ha convertido en una empresa y ha recibido inversiones de capital de riesgo.
Arquitecturas sin servidor y JAMStack
La creciente popularidad de los sitios estáticos ha llevado al desarrollo de tecnologías de servidor diseñadas para soportarlos. Entonces, los últimos años en el campo del desarrollo web han hablado constantemente sobre arquitecturas sin servidor, esto se debe al hecho de que le permiten organizar la separación del código del servidor y del cliente y reducir el costo de los proyectos de servicio.
El movimiento hacia la falta de servidor se amplió gracias a la metodología de desarrollo de proyectos web JAMStack (J es JavaScript, A es API, M es Markup, es decir, marcado). JAMStack se basa en los conceptos de desarrollo de sitios estáticos, de los que hablamos en la sección anterior. Esta técnica le permite alcanzar velocidades de carga en el sitio extremadamente altas debido al marcado preformado. En el cliente, dichos sitios se convierten en SPA dinámico mediante el uso de API de servidor especiales. En 2018, incluso aprobó, bajo los auspicios de freeCodeCamp, Netlify y GitHub, el primer
hackathon JAMStack .
Aquí está el material que demuestra las características del uso de la arquitectura JAM en freecodecamp.com, que le permite evaluar las posibilidades de desarrollar aplicaciones a gran escala utilizando la metodología JAMStack.
TypeScript puede ser el futuro de JS, pero no se puede decir lo mismo de Flow
JavaScript a menudo es criticado por su falta de tipeo estático. Las principales herramientas para resolver este problema son
TypeScript y
Flow . Al mismo tiempo, TypeScript es mucho más popular que Flow y, de hecho, un estudio de Stack Overflow demostró que los desarrolladores aman TypeScript incluso más que JavaScript (las cifras correspondientes para estos lenguajes son 67% y 61,9%). Según el estudio State of JS, más del 80% de los desarrolladores planean usar TS o ya lo están usando con placer. Si hablamos de Flow, solo el 34% de los desarrolladores lo usan o quieren usarlo.
A juzgar por todos los indicadores, TypeScript es una solución estándar para la escritura estática en JS; muchos prefieren TS sobre JavaScript ordinario. Este año, el número de descargas de TS en npm creció constante y significativamente, mientras que el calendario de descargas de Flow se mantuvo bastante estable. Uno tiene la sensación de que TypeScript, a partir de una herramienta utilizada solo por entusiastas seguidores de la escritura estática, se está convirtiendo en una herramienta extremadamente utilizada para el desarrollo web. Aquí están los datos de TypeScript y Flow (como
babel-preset-flow ) de npm y GitHub.
Descargas de TypeScript y Flow en la segunda mitad de 2018Webpack 4 fue lanzado a principios de 2018
Webpack 4 se lanzó solo 8 meses después del lanzamiento de Webpack 3. La nueva versión de Webpack ha seguido avanzando para simplificar el trabajo y acelerar el proceso de compilación. A veces, el rendimiento de Webpack 4 puede superar el rendimiento de Webpack 3 en un 98%. Webpack 4 tiene como objetivo utilizar parámetros predeterminados razonablemente seleccionados, admite más funciones sin la necesidad de complementos y, para comenzar a usar Webpack, ya no es necesario preparar primero un archivo de configuración. Además, Webpack ahora admite WebAssembly y le permite importar directamente archivos de WebAssembly.
Babel 7.0 lanzado
Babel 7 se lanzó en 2018, después de casi tres años desde el lanzamiento de Babel 6. Babel es una biblioteca mediante la cual se transforma el código JavaScript, que utiliza las capacidades de nuevos estándares (ES6 +), en código ES5, que permite compatibilidad del navegador de proyectos JS.
El material que informa sobre el lanzamiento de la nueva versión de Babel indica que Babel 7 es más rápido, más moderno, admite opciones de configuración avanzadas, tiene una funcionalidad mejorada relacionada con la minificación, admite JSX Fragments y tecnologías TypeScript, nuevas construcciones de lenguaje que se encuentran en sus primeras etapas. armonización y más. Cabe señalar que los paquetes de Babel en npm ahora usan el espacio de nombres
@babel .
Publicaciones importantes de 2018
Considere varias publicaciones importantes lanzadas en 2018.
- Aquí está el material sobre cuánto paga por usar JavaScript en 2018.
- Aquí hay una publicación del evento React Conf, del cual puedes aprender sobre el futuro de React.
- En este artículo, Airbnb comparte su experiencia con React Native, adquirida por la compañía durante 2 años.
- Aquí, Google muestra a todos los que lo desean un dispositivo de interfaz de usuario web de Google Photos.
- Aquí puede leer que Microsoft va a transferir el navegador Edge a la plataforma Chromium.
- Y aquí hay una presentación muy interesante de Ryan Dahl, creador de Node.js.
Pronóstico para 2019
¿Qué le espera a la interfaz en 2019? Aquí está nuestro pronóstico:
- WebAssembly será cada vez más común en proyectos web debido al desarrollo continuo de esta tecnología, la estandarización y el deseo de los desarrolladores de productividad.
- React seguirá estando en la cima de la clasificación de herramientas de desarrollo web, mientras que Vue y Angular continuarán aumentando su base de usuarios.
- CSS-in-JS puede ser el enfoque de estilo estándar, reemplazando CSS regular.
- Quizás los desarrolladores presten atención a los componentes web estándar .
- Como era de esperar, la productividad continuará atrayendo la atención mundial. Esto sugiere que las aplicaciones web avanzadas (PWA) y las tecnologías de intercambio de código se utilizarán en la gran mayoría de los proyectos web.
- Gracias a la distribución y el desarrollo de PWA, los proyectos web se integrarán más estrechamente con las capacidades de los dispositivos móviles y de escritorio, y proporcionarán a los usuarios oportunidades de trabajo completas sin conectarse a una red.
- El crecimiento y el desarrollo de las herramientas de línea de comandos continuarán, con el objetivo de liberar a los desarrolladores de la necesidad de configurar herramientas de forma independiente y darles la oportunidad de participar con calma en la creación de proyectos web.
- Más empresas implementarán soluciones móviles basadas en tecnologías estándar como React Native o Flutter .
- En el desarrollo front-end, aumentará el papel de la contenedorización (en particular, estamos hablando de Docker y Kubernetes).
- Se llevará a cabo una promoción significativa de GraphQL, esta tecnología se utilizará en más empresas.
- TypeScript ya no se considerará como una alternativa al JavaScript ordinario, sino como una opción estándar en aquellas situaciones en las que JavaScript se elegía antes.
- La tecnología de realidad virtual dará un gran paso adelante utilizando bibliotecas como A-Frame , React VR y Google VR .
Estimados lectores! ¿Qué esperas del desarrollo front-end en 2019?