15 herramientas esenciales de JavaScript que deberías usar

Javascript en 2019

JavaScript es una herramienta vital para cualquier desarrollador web. Para ayudarlo a obtener lo mejor de este poderoso lenguaje de programación, querrá contar con la ayuda de algunas herramientas dedicadas (y obtener su alojamiento web derecho). La buena noticia es que no le faltan opciones aquí: hay muchas herramientas de JavaScript para elegir. La parte difícil es elegir las que sean adecuadas para usted y su flujo de trabajo.

En este artículo, hemos reunido las que creemos que son las mejores herramientas de JavaScript que existen en este momento. Si no es un desarrollador, o simplemente desea crear un sitio rápidamente y sin necesidad de código, considere usar un Creador de sitios web

01. Componentes web

Página de inicio de componentes web

El concepto de componente se utiliza mucho en los marcos de JavaScript. Se utilizan para dividir un proyecto en varios trozos reutilizables que se pueden mover independientemente unos de otros. Pero, ¿qué sucede cuando llega el momento de cambiar el marco? Los componentes escritos anteriormente ya no funcionarán. O hay una carga de trabajo adicional para convertir los componentes o el proyecto permanece vinculado a ese marco.

Componentes web son una solución a ese problema. Están escritos utilizando tecnologías web nativas, son autónomos y exponen valores y comportamientos a través de atributos como cualquier otro elemento HTML.

Se componen de tres especificaciones independientes: plantillas HTML, DOM de sombra y elementos personalizados.

Plantillas HTML
Estos definen la apariencia visual de un componente. Contienen la estructura del contenido, que luego se puede copiar y reutilizar para cada componente de la página.

DOM de sombra
El concepto de mantener el marcado interno del componente alejado del resto del documento. Esto evita que los estilos y otras lógicas se rompan y afecten a otros componentes.

Elementos personalizados
Estos son el pegamento que mantiene todo unido. Son responsables del ciclo de vida del componente, que puede incluir lógica adicional para cuando se agrega o quita un componente de la página.

Los componentes web se pueden utilizar junto con sus contrapartes de framework. Como se supone que actúan como elementos nativos, la mayoría de los marcos funcionarán con ellos sin problemas. Algunos marcos, como Angular, pueden necesitar que se les informe de su existencia con anticipación para que funcionen correctamente.

Como se pueden componer juntos fácilmente, los componentes se pueden importar de muchas fuentes. Sitios web como webcomponents.org proporcionan varios elementos prefabricados que se pueden colocar y utilizar de inmediato.

Si bien el concepto de componente web existe desde 2011, las especificaciones han cambiado constantemente. En 2018, las cosas se calmaron, con Firefox implementando las últimas versiones de Shadow DOM y especificaciones de elementos personalizados en octubre. Con Edge que lanzará sus implementaciones en 2019, todos los principales navegadores los admitirán de forma nativa.

02. WebAssembly

Una queja sobre el uso del navegador para alojar aplicaciones es que JavaScript se ejecuta demasiado lento cuando se trata de tareas que requieren un uso intensivo del procesador, como motores de juegos o edición de video.

WebAssembly - o 'WASM' - es un objetivo de compilación para código escrito en otros lenguajes más adecuados para el trabajo pesado. Esto permite que los programas existentes escritos en lenguajes como C ++, Rust o Go lleguen a la web. Al compilarlos en un formato binario, permite dividirlos en trozos y descargarlos de manera eficiente.

Estos archivos binarios se compilan en la memoria y se crean instancias utilizando el nuevo objeto WebAssembly. Hay un impulso para que estos módulos se puedan importar como cualquier otro módulo de JavaScript, pero el trabajo en esta área aún está en curso.

Si bien WASM es un nuevo idioma para trabajar en el navegador, no lo convierte en un competidor de JavaScript. Ambos lenguajes tienen sus ventajas, y JavaScript aún se presta mejor a las operaciones diarias en el navegador. Pueden trabajar juntos y tener autonomía sobre partes separadas de una aplicación.

WASM tiene soporte para varios navegadores, ahora incluye dispositivos móviles. Esto abre la puerta a muchas oportunidades que antes se limitaban a las aplicaciones nativas. Durante el próximo año, es posible que veamos que más juegos y desarrolladores de aplicaciones adoptan esta tecnología.

03. Ver

Logotipo de Green Vue

2019 verá el lanzamiento de Vue 3.0

Vista ha ido en constante aumento durante el año pasado. Las actualizaciones recientes se han centrado más en la experiencia del desarrollador y las mejoras de calidad. Vue 2.5 se lanzó en 2017 e incluyó actualizaciones para el manejo de errores, la representación del servidor y las definiciones de TypeScript. Los componentes funcionales únicos, una de las características más populares de Vue, se actualizaron para admitir CSS con ámbito y también se mejoró la compilación de plantillas.

Desde entonces, las actualizaciones de la experiencia principal de Vue se han centrado principalmente en la corrección de errores y las mejoras de rendimiento. El enfoque ahora se ha desplazado a productos de desarrollo complementarios.

La versión 3 de la herramienta CLI de Vue pasa a un enfoque más configurable. Durante la inicialización se seleccionan funciones como el enrutamiento, la formación de pelusa y la gestión de datos. Estas funciones se pueden agregar y eliminar según sea necesario sin tener que desarmar el proceso de construcción.

Junto con la CLI, hay una interfaz web disponible para visualizar las diferentes partes de una aplicación. Esto actúa como un tablero para ayudar a analizar los tiempos de carga, los tamaños y los puntos débiles dentro de la compilación mientras se ejecuta.

De cara al futuro, 2019 verá el lanzamiento de Vue 3.0. Si bien los cambios importantes se mantendrán al mínimo, esta versión se centrará en hacer uso de los componentes basados ​​en la clase ES2015. También admitirá fragmentos y portales, al igual que las funciones de React.

  • Aprende más: Acelere el rendimiento con Vue.js

04. TypeScript

Página de inicio de TypeScript

Lleve la seguridad de tipos a JavaScript con Mecanografiado . Esta herramienta le permite definir los tipos esperados para las variables y tener herramientas de compilación e IDE que le advierten de cualquier problema. La versión 3 ofrece un mejor soporte para conceptos más nuevos, como operadores de descanso y distribución.

05. Reaccionar

Reaccionar 16.6 incorporó la función de 'suspenso', que facilitó el trabajo con el contenido dinámico. Combinado con Reaccionar perezoso () , crea un punto en el que dividir el código en trozos más pequeños. Suspense puede representar un componente de reserva, como un control giratorio de carga, mientras se carga el componente. En 2019, el suspenso se convertirá en una herramienta más flexible. Al activar la búsqueda de datos como parte del flujo, los usuarios obtendrán una experiencia fluida y similar a la nativa.

Una de las formas más fáciles de poner en marcha React es mediante el uso de la herramienta 'Crear aplicación React' para eliminar un proyecto. Una actualización reciente actualizó sus dependencias y mejoró sus características. Create React App 2.0 usa Babel 7 y Webpack 4 para construir proyectos, lo que agiliza la construcción y abre la puerta a funciones más nuevas como la sintaxis de fragmentos abreviados.

Los proyectos realizados con la versión anterior se pueden actualizar actualizando la dependencia 'react-scripts'. Actualizar las aplicaciones expulsadas es un proceso más manual, pero se pueden actualizar pieza a pieza.

React no muestra signos de desaceleración este año. Los enganches permiten que los componentes funcionales establezcan comportamientos del ciclo de vida y estado. El modo concurrente mejora el rendimiento de los componentes de renderizado lento. Ambas características están programadas para su lanzamiento en la primera mitad de 2019.

  • Aprende más: Desarrollar componentes React reutilizables

06. Angular

Logotipo de escudo angular

La versión 7 de Angular agrega mejoras a cada parte del marco

Angular es un marco que participa en todas las partes de una aplicación, incluido el manejo de datos y las actualizaciones de la interfaz. Si bien puede aumentar el tamaño de los paquetes, todas las partes de la aplicación funcionarán juntas sin problemas.

La versión 7 de Angular agrega mejoras a cada parte del marco. Si bien hay pocos cambios con los que los desarrolladores podrán jugar, hay muchos cambios para beneficiar la velocidad y la confiabilidad detrás de escena. Ahora es posible agregar presupuestos de rendimiento para tamaños de paquete. Esto asegurará que una construcción nunca se vuelva excesivamente grande sin ser informado.

Como parte de una actualización general de Material Design, también se han actualizado los respectivos componentes de Angular CDK. Por ejemplo, el módulo de desplazamiento permite la compatibilidad con el desplazamiento virtual, lo que ayuda a que las listas largas se desplacen sin problemas.

La actualización a la versión 7 implicará, para la mayoría, ejecutar una línea utilizando la CLI.

|_+_|

Las actualizaciones futuras se centrarán en el nuevo motor de renderizado Ivy. Esto mejorará la capacidad de eliminar el código no utilizado del paquete, lo que resultará en tamaños de archivo drásticamente reducidos. Debido a la estructura de las aplicaciones Angular, el motor de renderizado se puede reemplazar sin requerir ningún cambio en la lógica interna.

07. Polímero

En su primera iteración, el Polímero Library fue la puerta de entrada a un futuro de elementos personalizados. Al adoptar las próximas especificaciones de componentes web, los desarrolladores pudieron reconstruir sitios web a partir de bloques de construcción listos para usar.

Con el tiempo, estas especificaciones han evolucionado y uno de los componentes básicos, las importaciones de HTML, ya no formaba parte del plan. El lanzamiento reciente de Polymer 3.0 aborda este problema y se centra más en el uso de módulos ES más accesibles para lograr un objetivo similar.

El objetivo original de la biblioteca de polímeros era volverse más liviana a medida que crecía el soporte para esas especificaciones, pero terminó creciendo en su lugar. Para volver a centrarse en ese objetivo, 3.0 es la última versión de la biblioteca que se lanzará. En el futuro, se recomienda que los componentes estén hechos con LitElement y lit-html .

|_+_|

LitElement es un envoltorio ligero alrededor de los componentes web para que sea más fácil trabajar con ellos. los html El literal de plantilla etiquetado es lit-html , que es una biblioteca de plantillas con DOM que difiere para mantener las actualizaciones de la página lo más pequeñas posible.

Ambos LitElement y lit-html se encuentran en un estado de prelanzamiento en este momento, pero el equipo de Polymer apunta a que se publiquen en algún momento a principios de este año.

08. Más bonita

Página de inicio más bonita

Esta herramienta de JavaScript está dedicada a garantizar que el formato del código se mantenga constante en todo el proyecto. Tengo Más bonita revise los archivos y actualice el formato automáticamente. Algunos editores también admiten el formateo en cada guardado.

Si está trabajando en un proyecto de equipo, asegúrese de que su proceso sea totalmente coherente con el perfecto almacenamiento en la nube opción.

09. Trabajadores de servicios

Trabajadores de servicios Permitir que una aplicación ejecute un proceso en segundo plano que gestiona algunas funciones de nivel inferior. Esto puede incluir notificaciones push, sincronización de datos en segundo plano e incluso proporcionar una experiencia para cuando el dispositivo está fuera de línea. El nivel de control depende del desarrollador.

Los trabajadores del servicio han existido durante algún tiempo en Android, pero también recientemente dieron el salto a iOS. Si bien la atención se centra en los dispositivos móviles, también funcionan en el escritorio. Ahora que la mayoría de los visitantes tendrán acceso a la funcionalidad, no hay mejor momento para comenzar a mejorar la experiencia de los usuarios.

10. OffscreenCanvas

Hay ocasiones en las que un elemento de lienzo es la mejor herramienta para el trabajo. Por ejemplo, los juegos en línea pueden usarlos para generar sprites, o los videos pueden tener efectos de procesamiento aplicados.

El problema es que cualquier interacción con el elemento siempre funcionará en el hilo principal, lo que ralentiza las cosas para el usuario. Para animaciones repetidas o procesamiento pesado, esto puede convertirse en un problema.

Fuera de pantallaLienzo desacopla la lógica del lienzo del elemento. Sin el enlace al DOM, se puede usar en un trabajador para liberar el hilo principal. Actualmente, solo Chrome admite esta función, y Firefox la incluye detrás de una bandera.

11. Electrón

Página de inicio de Electron

Utilice HTML, CSS y JavaScript para crear aplicaciones nativas para Windows, MacOS y Linux. Electrón impulsa muchas aplicaciones populares, como Visual Studio Code, Slack y Skype para escritorio.

12. Esbelto

Mientras Esbelto es un marco relativamente desconocido, ha ido ganando terreno desde su lanzamiento hace un par de años. La reciente encuesta State of JavaScript lo clasificó como más popular el año pasado que los titanes históricos de Backbone y jQuery.

El objetivo de Svelte es mantener el tamaño del archivo bajo al no enviar un marco en absoluto. Como parte del proceso de compilación, analiza los componentes y los optimiza antes de compilarlos en JavaScript vanilla. El resultado es una aplicación con el tamaño más pequeño posible.

Con la versión 2, hay mejoras en la sintaxis para hacer que los componentes sean lo más legibles y predecibles posible. Las actualizaciones de los ganchos del ciclo de vida y los valores calculados facilitan al compilador saber dónde realizar las optimizaciones.

Las funciones son deliberadamente ligeras para que cada aplicación sea rápida. Muchas actualizaciones desde la versión 2 se han centrado en evitar situaciones que provocan un rendimiento deficiente en la salida compilada.

Se están llevando a cabo discusiones sobre una reescritura de la lógica de los componentes en Svelte para alinearla con otros marcos. Como compilador, puede hacer sus propias modificaciones para ayudar a funcionar mejor, sin dejar de ser un entorno limpio para los desarrolladores.

13. Cambiar el tamaño del observador

Un enfoque verdaderamente basado en componentes para el desarrollo web está más cerca que nunca. Si bien CSS y JavaScript se pueden agrupar en un solo paquete, es difícil reutilizar ese componente de manera confiable en todas las páginas.

Al agregar elementos a un cambiar el tamaño del observador , recibe una notificación cuando cambian los límites del elemento. Las imágenes se pueden actualizar según el espacio disponible. Por ejemplo, el mismo componente de la tarjeta puede verse diferente en una barra lateral o en el cuerpo principal.

Este observador actualmente solo está disponible en Chrome, mientras está en desarrollo en Firefox. Otros navegadores pueden volver a monitorear los eventos de cambio de tamaño del navegador, pero esto afectará el rendimiento.

14. Cordova

Página de inicio de Córdoba

Cree múltiples aplicaciones móviles y de escritorio diferentes utilizando tecnologías web y una base de código con Cordova . PhoneGap, la distribución de Adobe de Cordova, proporciona herramientas adicionales, como el desarrollo de iOS en Windows.

15. Libro de cuentos

Libro de cuentos le permite crear una galería de elementos de la interfaz de usuario en un entorno personalizable independiente de cualquier aplicación. Funciona con marcos populares como React y Vue, junto con soporte para fragmentos de HTML.

Generar 2019

Generate, la galardonada conferencia para diseñadores web, regresa a Nueva York del 24 al 25 de abril. Reserva entradas en www.generateconf.com

Este artículo se publicó originalmente en una revista de diseño web creativo. Diseñador web . Comprar número 283 o Suscríbete aquí .

Leer más: