En esta página:
- Actualizar a Angular 8
- Carga diferencial por default
- Uso de importaciones dinámicas en la Configuración de rutas
- API Builder en Angular CLI
- API Workspace en Angular CLI
- Soporte para Web Workers
- Mejoras al Migrar de Angular JS a Angular
- Nueva Guía de Características Obsoletas (Deprecated)
- Sobre Ivy & Bazel
- Agradecimiento a Colaboradores
- Notas
Hace unos días el equipo de Desarrollo de Angular lanzo la versión 8 de su popular Framework Javascript, esta versión cuenta con interesantes novedades que mejoran el rendimiento y productividad en el Desarrollo de un proyecto, en este artículo te comparto las novedades que vienen con esta versión de Angular, vamos con el artículo.
Revisando un poco las novedades, parece que este update es un poco limitado, pero creo que estas novedades son buenas y ayudarán muchos a los Desarrolladores con el Framework Angular.
Actualizar a Angular 8
Si deseas actualizar a la ultima versión de Angular puedes visitar este enlace oficial de Angular en donde encontrarás información y orientación para hacerlo. La mayoría de Desarrolladores usa el siguiente comando para actualizar Angular
|
1 2 3 |
ng update @angular/cli @angular/core |
A partir de esta sección mostraremos las novedades de Angular 8
Carga diferencial por default
En Angular 8 se realiza la carga de paquetes para Navegadores modernos que soportan ES2015+ y otro paquete para navegadores más antiguos que solo soportan ES5 de Javascript. Es decir el Navegador cargará por defecto el paquete que le corresponda.
Una ves que actualices Angular con el comando ng update, este actualiza el archivo tsconfig.json con las opciones requeridas. El CLI de Angular analizará la opción target para verificar si deseas usar o no la Carga diferencial.
Cuando la opcion target contiene el valor es2015 Angular genera 2 paquetes, cada paquete será usado en la versión del Navegador que corresponda.
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "compilerOptions": { … "module": "esnext", "moduleResolution": "node", … "target": "es2015", // Esta opción … }, |
Cuando se ejecuta el proyecto, el navegador utiliza la etiqueta <script> en donde carga el paquete correspondiente
|
1 2 3 4 5 6 7 8 9 |
<script type="module" src="polyfills-es2015.j"> // JS Moderno <script nomodule src="polyfills-es5.js"> // JS Anterior (Legacy) ... ... ... |
Angular almacena más de 40 KB de tamaño de paquete inicial para Navegadores modernos, la comunidad de Angular ha difundido que las aplicaciones ahorran de 7 a 20 % de tamaño de paquete, dependiendo de la cantidad de funciones modernas de Javascript que son aprovechadas.
Si deseas aprender más sobre la Carga diferencial en angular visita este enlace oficial.
Uso de importaciones dinámicas en la Configuración de rutas
Angular 8 quiere que la creación de rutas sea más sencilla y que vaya de acuerdo con el estándar de la industria, en versiones anteriores de Angular la configuración de una ruta era de la siguiente manera
|
1 2 3 |
{path: '/admin', loadChildren: './admin/admin.module#AdminModule'} |
En esta nueva versión de Angular la configuración de una ruta será de la siguiente manera
|
1 2 3 |
{path: `/admin`, loadChildren: () => import(`./admin/admin.module`).then(m => m.AdminModule)} |
Personalmente no lo he podido comprobar, pero desde el Blog Oficial de Angular menciona que los editores de código Visual Studio y WebStorm ahora se les hará más fácil entender y validar estas importaciones en tu proyecto.
Al actualizar a la versión Angular 8 con el comando ng update el sistema actualizará tu código automáticamente a esta nueva forma de configurar rutas.
API Builder en Angular CLI
La interfaz de Comandos Angular CLI ahora tiene soporte para ejecutar las nuevas tareas de la API Builder que se definen como CLI Builders, ahora al ejecutar los comandos ng build, ng test y ng run estos realizarán sus respectivos procesos de compilación e implementación con estas nuevas APIs Builder y sus nuevas extensiones o configuraciones determinadas.
Angular 8 ha trabajado de manera conjunta con los desarrolladores de AngularFire librería que sirve para construir y desplegar un proyecto con Firebase y Angular.
Con los siguientes comandos implementaremos y compilaremos Angular con Firebase de la manera recomendada por Angular Fire
|
1 2 3 4 |
ng add @angular/fire ng run my-app:deploy |
API Workspace en Angular CLI
En versiones anteriores de Angular, los usuarios tenían que abrir y modificar manualmente el archivo angular.json para realizar cambios en la configuración del espacio de trabajo de Angular.
En la versión de Angular 8 se ha introducido la API Workspace que facilitará la lectura y configuración de manera dinámica de la configuración del espacio de trabajo.
Puedes leer más sobre esta API en el repositorio GitHub de Angular.
Soporte para Web Workers
Los Web Workers son una excelente manera de acelerar una aplicación si esta realiza algún procesamiento intensivo en el CPU ya que permiten llevar acabo un proceso de tu aplicación en un subproceso o segundo plano como la manipulación de imágenes o videos.
En esta versión de Angular 8 se agrega soporte para Web Workers, puedes generar un Web Worker desde tu consola de comandos ejecutando el siguiente comando
|
1 2 3 |
ng generate webWorker mi-webworker |
Una vez generado tu Web Worker, puedes usarlo en tu aplicación y podrás agruparlo y dividirlo en tu código
|
1 2 3 |
const worker = new Worker(`./mi-webworker.worker`, { type: `module` }); |
Te recomendamos leer más sobre Web Workers en Angular sobre todo por temas de compatibilidad que se dan cuando introducen por primera vez una funcionalidad en Angular y otros detalles.
Mejoras al Migrar de Angular JS a Angular
El servicio $location de Angular JS maneja toda la configuración de enrutamiento, navegación, codificación y decodificación de URLs, redirecciones e interacciones con las APIs del navegador.
A partir de Angular (Por si no lo sabes ya no se llama Angular JS, sino ahora se llama ‘Angular’ simplemente al Framework Javascript), este usa su propio servicio Location Service que cuenta con un servicio de ubicación unificado y absorve todas las tareas que antes realizaba el servicio $location de Angular JS.
Asimismo se ha añadido mejores practicas para corregir la carga lenta en Angular de ciertas partes de una aplicación creada en Angular JS, esto facilita la migración de las funciones más utilizadas primero y Angular solo usará la carga de Angular JS para una parte determinada de la aplicación.
Nueva Guía de Características Obsoletas (Deprecated)
El equipo de Desarrolladores de Angular se ha esforzado y ha actualizado su guía con las características que quedan y quedarán obsoletas en futuras versiones de Angular, mencionan en su blog oficial que una característica tendrá soporte para las versiones N + 2, es decir que si una característica queda en desuso en Angular 8.1, dicha característica seguirá funcionando en las versiones 9 y 10.
Para leer la lista completa con las características obsoletas de Angular te recomendamos leer este enlace oficial de Angular.
Sobre Ivy & Bazel
Estas nuevas características de Angular que son Ivy (Nuevo motor de Renderizado de Angular) y Bazel (Nuevo sistema de compilación de Angular) aún se encuentran en etapa de Desarrollo, por lo que aún no han sido liberados, Angular nos estará informando más sobre estas característica en las próximas semanas.
Agradecimiento a Colaboradores
El grupo de Desarrolladores de Angular Agradece a Manfred Steyer por apoyar con el desarrollo de la carga diferencial de esta versión de Angular 8, a Craig Spence por apoyar con el desarrollo del Uso de importaciones dinámicas en la Configuración de rutas, a Jason Miller por apoyar con el desarrollo y soporte de Web Workers.
Asimismo esta versión de Angular 8 fue apoyado por 286 usuarios
Adam Bradley, Adam Plumer, Adam Yi, Ahsan Ayaz, Alan, Alan Agius, Alberto Garza, Alex Eagle, Alexey Zuev, Alex Rickabaugh, alimemonzx, alsami, Amadou Sall, Amit Chaurasia, Andrew Crites, Andrew Kushnir, Andrew Seguin, arjunyel, Artem Lanovyy, Ashinze Ekene, Author Name, benbot1, Benedikt Meurer, Ben Lesh, Bolek Szewczyk, Bonnie Brennan, Bowen Ni, Brad Brandhorst, Brad Green, Brandon, Brandon Roberts, Cameron Steffen, Camille Roux, Carlos Ortiz García, Carlos Schneider, cexbrayat, Charles Lyding, Cody Schroeder, coultonluke, Courtney Pattison, crisbeto, cyraid, Cyrille Tuzi, D3T0N8R, Daniel Ruf, Dario Braun, Dave, davidlsharp1, deebloo, Dhananjay Kumar, dsychin, Dustin M. Eastway, Eduard, Emilie Huet, Enmanuel, ericksoen, Erick Xavier, Ernest Galbrun, Esteban Marin, Felix Lemke, Filipe Silva, Frederik Prijck, Fux, Etienne, George Kalpakas, Giorgos Bamparopoulos, Greg Magolan, Hamza TEI, Hans Larsen, hateonion, hpawe01, Igor Minar, ijz953, iliesaithamouda, Ivan Tham, Jamie R. Rytlewski, Janghyun Han, janith, Jason Aden, javatutorials2016, Jeferson Duwe, Jeff Cross, jenniferfell, Jeremy Elbourn, JiaLiPassion, JiaLi.Passion, Jimmy Kasprzak, jithil-kore, Joey Perrott, Johannes Hoppe, John Reese, Jon Grunewald, JoostK, Jorge Cano, José I. Escudero, Joseph Harrison-Lim, José Toledo Navarro, Judy Bogart, Jun, Jurgen Van de Moere, Juri Strumpflohner, Justin Schwartzenberger, Kamil Myśliwiec, Kapunahele Wong, Kara, Kara Erickson, Karanveer Plaha, Kayce Basques, Keen Yee Liau, Keilla Fernandes, Kenny Schank, Kevin Newman, kevinphelps, Kristiyan Kostadinov, krzysztof-grzybek, kwiateusz, LHearen, likui, luixaviles, Luiz Machado, Ly-lns, MaksPob, Malgosia, Manohar Reddy Poreddy, Marc Laval, Mark Goho, Martin Mädler, Martin Ockovsky, Martin Sikora, Matias Niemelä, Matti Järvinen, Maxime Lafarie, Maxim Mazurok, Max Kramer, Meknassih, meriturva, mgechev, Michael De Wree, Michael Hladky, Michael Prentice, Mike Brocchi, Mikhail Tatsky, Minko Gechev, Miško Hevery, musou1500, Nazar Nasirzada, nchetankumar, Nikita Poltoratsky, Nikita Potapenko, Oleg Sucharevich, Olivier Combe, Omar Griffin, onlyflix, Oscar Busk, Patrick Roche, Paul Gschwendtner, Pawel Kozlowski, Pete Bacon Darwin, Peter Johan Salomonsen, Piotr Tomiak, Rado Kirov, Raja Rama Mohan Thavalam, Renan Montebelo, Renovate Bot, Richard Lea, Rick Katka, Ricky Roller, Riley Littlefield, Robert Tyree, Rob Gregorius, Roland Rytz, RudarDaman, Sam Julien, Sander Elias, Sander Vanneste, Santosh Yadav, sarkiroka, Sarun Intaralawan, Sasidhar Vanga, Sebastian Dorn, SebastienBtr, Sergej Grilborzer, Serginho, Sharon DiOrio, Sheik Althaf, Shivam_Vyas, Siddharth Ajmera, sis0k0, softchris, Stepan Suvorov, Stephen Fluin, Steve Dignan, Stewart Rand, stoneLeaf, Suguru Inatomi, Suraj Poddar, Surya Malladi, Teamop, Tim Deschryver, tomastrajan, Tomas Veras, Trevor Karjanis, Trotyl Yu, TwoDCube, Uday Vunnam, Vani, Vincent Guo, Vinit Tomar, Vladimir Moskva, Wassim Chegham, WilliamKoza, William Koza, William Neely, Xin Gao, Yun Peng, zackarychapple, Zheng Kai, zverbeta, 赵正阳, 陈旭.
Alan, Alan Agius, Alex Eagle, Amadou Sall, Andrey Chalkin, Andriy Pyvovarchuk, Captain Caius, Cédric Exbrayat, cexbrayat, Charles Lyding, cipchk, clydin, Craig Spence, Cyrille Tuzi, Emilio Martinez, Filipe Silva, George Kalpakas, Hans, Hans Larsen, hawkgs, hrocha16, Jason Miller, JiaLiPassion, Judy Bogart, Kara, Keen Yee Liau, Logan Mzz, Louis Larry, Luis Confraria, ManfredSteyer, Mathias Raacke, mgechev, Minko Gechev, mrmeku, Nikita Poltoratsky, Niyaz Akhmetov, Olivier Combe, owenmecham, Rares Matei, Renovate Bot, Sam Thorogood, Santosh Yadav, Stephen Fluin, thekiba, Tiago Temporin, ukrukar, Vikram Subramanian, Will, WilliamKoza, William KOZA.
Abderrahmane Hamila, Aleksandar Kamenov, Alexander M, Alex Rickabaugh, Amadou Sall, Andrew Seguin, Artur Araslanov, Benjamin Kindle, CaerusKaru, Christian Jensen, crisbeto, Dario Braun, Erik Welander, Esteban Marin, Gilliam, Guillaume de Jabrun, Isitar, Jeremy Elbourn, Jerome Nelson, J. G. Sebring, Joey Perrott, John Crowson, John S, Kara, Kara Erickson, Karl Seamon, Kavi Jivan, Kristiyan Kostadinov, Lazar Ljubenović, Marc Laval, Martin Kamenov, Mathias Paumgarten, Matias Niemelä, Md. Enzam Hossain, Michael Hoffmann, Michael Prentice, Miguel Galante, Mitchell Wills, mmalerba, Mouad Ennaciri, Nathan Clarke, Paul Gschwendtner, Pavel Agarkov, Pavithran Gridharan, Pawel Kozlowski, Rado Kirov, Rudar Daman Singla, Steven Xu, Suresh918, swseverance, Thomas, Vanessa Schmitt, Viktor Slavov, Vitaliy Bobrov, William Lohan, ɯλrv.
Notas
- Algunas características pueden retirarse o continuar en futuras versiones de Angular, esto no depende de nosotros, si no de los Desarrolladores que dan Soporte a Angular.
Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.