Contenido
- 01. Ejecute una verificación de versión
- 02. Instalar Angular
- 03. Crea un esqueleto de proyecto
- 04. Carga diferencial del arnés
- 05. ... y ver los resultados
- 06. Genera un trabajador web
- 07. Explore el código
- 08. Montaje de andamios
- 09. No te preocupes por la falta de constructor
- 10. Ejecute una pequeña ejecución de compilación
- 11. ... y encuentra la salida
- 12. Ponte a trabajar
- 13. Explora Ivy
- 14. Pruebe el procesamiento ng modificado
- 15. Disfrute de una migración mejorada
- 16. Explore el control del espacio de trabajo
- 17. Acelerar el proceso
- 18. Evita a los muertos vivientes
- 19. Mira el registro de cambios
Angular 8 es la última versión de Angular de Google, uno de los mejores marcos de JavaScript que existen. En este artículo, veremos lo que tiene de especial 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 te obliga a usar 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 creadores de sitios web. Y para que las cosas funcionen aún mejor, obtenga su servicio de alojamiento web correctamente.
01. Ejecute una verificación de versión
La cadena de herramientas de Angular vive dentro del entorno NodeJS. Al momento de escribir este artículo, 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.
tamhan @ TAMHAN18: ~ $ nodo -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0
02. Instalar Angular
La cadena de herramientas de Angular reside en una utilidad de línea de comando llamada ng. Se puede instalar a través del conocido NPM.
tamhan @ TAMHAN18: ~ $ sudo npm install -g @ angular / cli tamhan @ TAMHAN18: ~ $ ng versión
Tenga cuidado de responder la pregunta que se muestra en la imagen a continuación.
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).
03. Crea un esqueleto de proyecto
ng 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 ng con derechos de superusuario.
tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng nuevo trabajo
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.
. . . > 0.5% últimas 2 versiones Firefox ESR no muerto IE 9-11 # Para compatibilidad con IE 9-11, elimine "not".
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.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng build tamhan @ TAMHAN18: ~ / angularspace / workertest / dist / workertest $ ls
Invocar árbol para ver los resultados - ng crea múltiples versiones de varios archivos de código (vea la imagen a continuación).
06. Genera un trabajador web
Los trabajadores web permiten que JavaScript ingrese a la última frontera de las aplicaciones nativas: el procesamiento masivo en paralelo de tareas. Con Angular 8, se puede crear un trabajador web desde la comodidad del ng utilidad de línea de comandos.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng generate web-worker myworker CREAR tsconfig.worker.json (212 bytes) CREAR src / app / myworker.worker.ts (157 bytes) ACTUALIZAR tsconfig.app.json (236 bytes) ) ACTUALIZAR angular.json (3640 bytes)
07. Explore el código
ngEs 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 su 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.
/// reference lib = "webworker" /> addEventListener (’message’, ({data}) => {const response = `worker response to $ {data}`; postMessage (response);});
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.
importar {Component, OnInit} from ’@ angular / core’; @Component ({...}) Clase de exportación AppComponent implementa OnInit {title = ’workertest’; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}
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 ngOnInit es un evento de ciclo de vida que se activa cada vez que tiene lugar un evento de inicialización; no es necesario que esté 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 ng, 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.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng serve
Eche un vistazo a la figura para ver esto en acción en la imagen de abajo.
11. ... y encuentra la salida
ng 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.
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.
if (typeof Worker! == ’undefined’) {// Crear un nuevo trabajador constante = new Worker (’./ myworker.worker’, {type: ’module’}); worker.onmessage = ({data}) => {console.log (’la página recibió el mensaje: $ {data }’); }; worker.postMessage ('hola'); } else {console.log ("No hay soporte para trabajadores"); }
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 ng new ivy-project - enable-ivy. Alternativamente, cambie la configuración del compilador como se muestra en el fragmento.
"angularCompilerOptions": {"enableIvy": true}
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 ng modificado
Angulares ng 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.
"arquitecto": {"build": {"builder": "@ angular-devkit / build-angular: browser",
Una buena aplicación de ng Los scripts implican la carga directa de aplicaciones a servicios en la nube. El repositorio de Git proporciona una secuencia de comandos útil que carga su trabajo en 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 espacio de trabajo introducida en Angular 8.0: el fragmento que acompaña a este paso proporciona una descripción general rápida del comportamiento.
función asíncrona demonstra () {host constante = espacios de trabajo. createWorkspaceHost (new NodeJsSyncHost ()); const workspace = aguardar espacios de trabajo. readWorkspace ("ruta / al / espacio de trabajo / directorio /", host); proyecto const = espacio de trabajo.proyectos. get ('mi-aplicación'); const buildTarget = project.targets. get ("construir"); buildTarget.options.optimization = true; aguardar espacios de trabajo.writeWorkspace (espacio de trabajo, host); }
17. Acelerar 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. Consulte esta lista de depreciaciones para obtener más información sobre las características que deben evitarse.
19. Mira el registro de cambios
Como siempre, un artículo nunca puede hacer justicia a un comunicado completo. Afortunadamente, 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? Respaldelos en el almacenamiento en la nube más confiable.
Este artículo se publicó originalmente en una revista de diseño web creativo. Diseñador web.
