¿Qué hay dentro de Angular 8?

Angular 8
(Crédito de la imagen: futuro)

Angular 8 es la última versión de Angular de Google, una de las mejores marcos de JavaScript alrededor. En este artículo, repasaremos las características especiales de Angular 8 y le mostraremos cómo comenzar. Primero, una breve mirada retrospectiva a lo que sucedió con el marco hasta ahora.

La introducción de Angular condujo a un cambio de paradigma en el desarrollo web: mientras que la mayoría de las bibliotecas se limitaron a brindar soporte a los desarrolladores con un impacto arquitectónico relativamente limitado, el equipo de desarrolladores de Angular fue en la otra dirección. Su producto le obliga a utilizar una arquitectura específica, con desviaciones que van desde lo difícil hasta lo comercialmente inútil. De hecho, la mayor parte del código angular se ejecuta a través de una cadena de herramientas de transpilación relativamente compleja antes de que llegue al navegador.



Debido al inmenso éxito de Angular, tanto dentro como fuera de Google Inc, el desarrollo se ha estabilizado en general. Esto significa que los cambios de código de ruptura son pocos, mientras que las actualizaciones semestrales se centran en adaptar el marco a los cambios en el panorama de la navegación web.



En el caso de Angular 8, por ejemplo, se implementa un nuevo compilador de JavaScript (aunque todavía de forma experimental). Optimiza el código de compatibilidad generado para que sea significativamente más pequeño y más rápido a expensas de los navegadores más antiguos. Además, la compatibilidad con Web Worker está integrada para aumentar la capacidad de procesamiento de Angular. En resumen, hay mucho que ver, así que vamos a sumergirnos de inmediato.

Si prefiere diseñar un sitio sin código, pruebe uno de estos sencillos constructores de sitios web . Y para que las cosas funcionen aún mejor, consiga su alojamiento web derecho de servicio.



01. Ejecute una verificación de versión

La cadena de herramientas de Angular vive dentro del entorno NodeJS. En el momento de escribir estas líneas, se necesita Node.js 10.9 o superior; si se encuentra en una versión anterior, visite el sitio web de Node.js y obtenga una actualización. El siguiente código muestra el estado de la versión en esta máquina.

|_+_|

02. Instalar Angular

La cadena de herramientas de Angular reside en una utilidad de línea de comando llamada de . Se puede instalar a través del conocido NPM.

|_+_|

Tenga cuidado de responder la pregunta que se muestra en la imagen a continuación.



Haga clic en el icono en la parte superior derecha para ampliar

Haga clic en el icono en la parte superior derecha para ampliar(Crédito de la imagen: Tam Hanna)

Obtener información de la versión de la herramienta es bastante difícil, no solo la sintaxis es única, sino que el resultado también es detallado (vea la imagen a continuación).

Haga clic en el icono en la parte superior derecha para ampliar

Haga clic en el icono en la parte superior derecha para ampliar(Crédito de la imagen: Tam Hanna)

03. Crea un esqueleto de proyecto

de genera el andamio angular para nosotros. En los siguientes pasos, queremos agregar enrutamiento y usar Sass para la transpilación CSS. Si la implementación falla por algún motivo, vacíe el directorio de trabajo y reinicie de con derechos de superusuario.

atajo para el tamaño del pincel en photoshop
|_+_|

04. Carga diferencial del arnés

La nueva versión de Angular optimiza el código de compatibilidad con versiones anteriores para reducir el impacto: un archivo llamado lista de navegadores le permite decidir qué navegadores serán compatibles. Abierto lista de navegadores y quita la palabra no frente a IE 9 a IE11.

|_+_|

05. ... y ver los resultados

Solicite una compilación del proyecto, cámbielo a la carpeta de distribución y elimine los archivos de mapas innecesarios.

|_+_|

Invocar árbol para ver los resultados - de crea múltiples versiones de varios archivos de código (vea la imagen a continuación).

Haga clic en el icono en la parte superior derecha para ampliar

Haga clic en el icono en la parte superior derecha para ampliar(Crédito de la imagen: Tam Hanna)

06. Genera un trabajador web

Los trabajadores web permiten que JavaScript ingrese a la última frontera de las aplicaciones nativas: el procesamiento masivo paralelo de tareas. Con Angular 8, se puede crear un trabajador web desde la comodidad del de utilidad de línea de comandos.

|_+_|

07. Explore el código

de Es probable que la producción parezca intimidante a primera vista. Abriendo el archivo src / app / myworker.worker.ts en un editor de código de elección revela el código que debe conocer bien de la WebWorker especificación. En principio, el trabajador recibe mensajes y los procesa según sea necesario.

|_+_|

08. Montaje de andamios

Las aplicaciones angulares constan de componentes. Es mejor despedir a nuestro trabajador web dentro del AppComponent , que se amplía para incluir un oyente para el OnInit evento. Por ahora, solo emitirá información de estado.

|_+_|

09. No te preocupes por la falta de constructor

Los desarrolladores experimentados de TypeScript se preguntan por qué nuestro código no utiliza el constructor proporcionado por el lenguaje de programación. La razón de eso es que por OnInit es un evento del ciclo de vida que se activa cada vez que tiene lugar un evento de inicialización; esto no necesita estar correlacionado con la invocación de la clase.

10. Ejecute una pequeña ejecución de compilación

En este momento, el programa está listo para ejecutarse. Lo ejecutaremos desde el servidor dentro de de , que se puede invocar mediante el comando de servicio. Un aspecto interesante de este enfoque es que el programa detecta cambios y vuelve a compilar el proyecto sobre la marcha.

|_+_|

Eche un vistazo a la figura para ver esto en acción en la imagen de abajo.

Presiona el ícono en la parte superior derecha para agrandar la imagen

Presiona el ícono en la parte superior derecha para agrandar la imagen(Crédito de la imagen: Tam Hanna)

11. ... y encuentra la salida

de servir put introduce la dirección de su servidor web local, que normalmente es http: // localhost: 4200 / . Abra la página web y abra las herramientas de desarrollo para ver la salida de estado. Manten eso en mente console.log envía datos a la consola del navegador y deja intacta la consola de la instancia de NodeJS.

cómo configurar un folleto en indesign

12. Ponte a trabajar

En este momento, creamos una instancia del trabajador y le proporcionamos un mensaje. A continuación, sus resultados se muestran en la consola del navegador.

|_+_|

13. Explora Ivy

Las versiones futuras de Angular usarán un compilador más avanzado, lo que generará vistas aún más pequeñas. Si bien el producto aún no está terminado, se puede generar un esqueleto habilitado para hiedra a través de del nuevo proyecto ivy - enable-ivy . Alternativamente, cambie la configuración del compilador como se muestra en el fragmento.

|_+_|

Una advertencia: Ivy conduce a reducciones de tamaño asombrosas, pero no es gratis. El producto aún no se ha estabilizado, por lo que no se recomienda su uso en entornos productivos.

14. Pruebe el procesamiento modificado

Angulares de La herramienta de línea de comandos utilizó scripts secundarios internamente durante algún tiempo. Angular 8 sube la apuesta en el sentido de que ahora también puede utilizar esta función para ejecutar sus propias tareas a medida que se ensambla y compila su aplicación.

|_+_|

Una buena aplicación de de Los scripts implican la carga directa de aplicaciones a los servicios en la nube. los Repositorio de Git proporciona una secuencia de comandos útil que sube su trabajo a una cuenta de Firebase.

15. Disfrute de una migración mejorada

Los desarrolladores que migraron desde Angular 1.x, también conocido como AngularJS, han tenido una buena cantidad de problemas para que el navegador funcione correctamente en aplicaciones 'combinadas'. El nuevo Servicio de ubicación unificada tiene como objetivo facilitar este proceso.

16. Explore el control del espacio de trabajo

Los grandes proyectos se benefician de la capacidad de cambiar la estructura del espacio de trabajo de forma dinámica. Esto se hace a través de la nueva API de Workspace introducida en Angular 8.0: el fragmento que acompaña a este paso proporciona una descripción general rápida del comportamiento.

|_+_|

17. Acelere el proceso

La construcción de grandes bases de código JavaScript se vuelve tediosa. Las versiones futuras de AngularJS utilizarán el sistema de compilación Bazel de Google para acelerar el proceso; lamentablemente, al momento de escribir este artículo, no estaba listo para el horario estelar.

18. Evita a los muertos vivientes

Aunque Google tiene mucho cuidado de no romper el código, algunas funciones simplemente deben eliminarse, ya que ya no son necesarias. Controlar esta lista de depreciaciones para obtener más información sobre las funciones que deben evitarse.

19. Mira el registro de cambios

Como siempre, un artículo nunca puede hacer justicia a un comunicado completo. Por suerte, este registro de cambios proporciona una lista detallada de todos los cambios, en caso de que alguna vez tenga ganas de comprobar el pulso de una función especialmente querida para usted.

¿Tiene muchos archivos listos para cargar en su sitio? Respaldalos de la manera más confiable almacenamiento en la nube .

Este artículo se publicó originalmente en una revista de diseño web creativo. Diseñador web .

Leer más: