Scribd
Cargar
15 vistas24 páginas

Angular 17

Cargado por

Pedro Victor Candido Ferreira
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
15 vistas24 páginas

Angular 17

Cargado por

Pedro Victor Candido Ferreira
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 24

ANGULAR

Te cuento todas las


17
novedades
ANGULAR
17
DOCUMENTAC
Nueva web moderna de
IÓN
documentación donde hay un
playground y buscadores mucho
más fácil de
https:// usar
angular.dev/
ANGULAR
17
NUEVA SINTAXIS EN
LAS ESTRUCTURAS DE
CONTROL
Para mejorar la experiencia de los
desarrolladores, han lanzado una nueva
sintaxis de plantilla de bloque que
ofrece potentes funciones con
interfaces sencillas y declarativas.
NUEVA SINTAXIS EN
ANGULAR LAS ESTRUCTURAS DE
CONTROL
17
Se utiliza la nueva sintaxis de El flujo de control integrado permite:
bloque para un flujo de control
Una sintaxis más ergonómica y cercana a JavaScript, por
optimizado e integrado.
lo que es más intuitiva y requiere menos búsquedas en
Después de ejecutar estudios
la documentación.
de usuarios, se identificó que Mejor comprobación de tipos gracias a un
muchos desarrolladores luchan estrechamiento de tipos más óptimo.
con *ngIf, *ngSwitch y *ngFor Es un concepto que existe principalmente en tiempo de
compilación, lo que reduce la huella en tiempo de
ejecución (haciéndola "desaparecer"), lo que podría
reducir el tamaño de su paquete en hasta 30 kilobytes y
mejorar aún más su puntuación Core Web Vital.
Está disponible automáticamente en sus plantillas sin
importaciones adicionales.
Mejoras significativas en el rendimiento.
NUEVA SINTAXIS EN
ANGULAR LAS ESTRUCTURAS DE
CONTROL
17 ANTE
ngIf S

AHOR
A
NUEVA SINTAXIS EN
ANGULAR LAS ESTRUCTURAS DE
CONTROL
17 ANTE
ngSwitc S

AHOR
A
NUEVA SINTAXIS EN
ANGULAR LAS ESTRUCTURAS DE
CONTROL
17 ANTE
ngFor S

AHOR
A
ANGULAR
17 VISTAS
APLAZABLES
Aprovechando la nueva sintaxis
de bloques, el nuevo angular
traeun nuevo y potente
mecanismo que puedes utilizar
para que tus aplicaciones sean
ANGULAR VISTAS APLAZABLES

17
ANGULAR VISTAS APLAZABLES

17
Supongamos que tienes un blog y te gustaría cargar
de forma “lazy” la lista de comentarios de los
usuarios.

Actualmente, tendrías que usar ViewContainerRef y a


la vez gestionar toda la complejidad de las limpiezas,
gestionar los errores de carga, mostrar un marcador
de posición, etc. Ocuparse de varios casos de esquina
puede resultar en un código complejo, que será difícil
de probar y depurar.

Las nuevas vistas aplazables, le permiten cargar de


forma LAZY la lista de comentarios y todas sus
dependencias transitivas con una sola línea de código
declarativo
ANGULAR VISTAS APLAZABLES

17La parte más increíble es que todo esto sucede a través de una
transformación en tiempo de compilación: Angular abstrae toda la
complejidad encontrando componentes, directivas y tuberías utilizadas
dentro de un bloque @defer, generando importaciones dinámicas y
gestionando el proceso de carga y cambio entre estados.

Empezar a cargar LAZY un componente cuando un determinado


elemento del DOM entra en la ventana gráfica implica mucha más lógica
compleja y la API IntersectionObserver. Angular hace que el uso de
IntersectionObservers sea tan sencillo como añadir un disparador de
vista aplazable.
ANGULAR VISTAS APLAZABLES

17
También hay bloques para los estados de carga y error:
ANGULAR VISTAS APLAZABLES

17 Las vistas aplazables ofrecen algunos activadores más:

• on idle: carga de forma lazy el bloque cuando el navegador no está haciendo ningún trabajo pesado

• on immediate: inicia la carga de forma lazy de forma automática, sin bloquear el navegador

• on timer(<time>): retrasa la carga con un temporizador.

• on viewport y on viewport(<ref>): viewport también permite especificar una referencia para un elemento de
anclaje. Cuando el elemento de anclaje es visible, Angular carga el componente y lo renderiza.

• on interaction y on interaction(<ref>): permite iniciar la carga de forma lazy cuando el usuario interactúa con
un elemento concreto

• on hover y on hover(<ref>): activa la carga de forma lazy cuando el usuario pasa el ratón por encima de un
elemento

• when <expr>: permite especificar una condición propia mediante una expresión que devuelve una promesa
ANGULAR
17
RENDERIZADO
Se acercaHÍBRIDO
el renderizado del lado del
servidor (SSR) y la generación de sitios
estáticos (SSG o prerendering) a los
desarrolladores a través del CLI de
Angular
ANGULAR RENDERIZADO HÍBRIDO

17
Puedes habilitar SSR en nuevos proyectos con
ANGULAR
17
NUEVOSHOOKS
PARA LOS CICLOS
Para mejorar el rendimiento de los SSR y

DE VIDA
SSG de Angular, la idea es alejarse de la
emulación del DOM y de las
manipulaciones directas del DOM. Al
mismo tiempo, a lo largo del ciclo de vida
de la mayoría de las aplicaciones es
necesario interactuar con elementos para
instanciar bibliotecas de terceros, medir
NUEVOS HOOKS
ANGULAR PARA LOS CICLOS
DE VIDA
17
afterRender - registra una llamada de retorno que se
invocará cada vez que la aplicación termine de
renderizar

afterNextRender - registra una llamada de retorno


que será invocada la próxima vez que la aplicación
termine de renderizar.
NUEVOS HOOKS
ANGULAR PARA LOS CICLOS
DE VIDA
17 Sólo el navegador invocará estos hooks, lo que te
permite conectar lógica DOM personalizada de forma
segura directamente dentro de tus componentes. Por
ejemplo, si quieres instanciar una librería de gráficos
puedes usar afterNextRender:

Cada hook admite un valor de fase (p. ej., lectura,


escritura) que Angular utilizará para programar las
retrollamadas con el fin de reducir el thrash del diseño
y mejorar el rendimiento.
ANGULAR
17
VITE Y
ESBUILD
POR
La compilación esbuild plus
potenciada por Vite da una mejora
DEFECTO
del 67% en el tiempo de
compilación de algunas de las
aplicaciones
ANGULAR
17
MEJORAS EN EL
DEVTOOLS
Se ha implementado nuevas
Interfaces de depuración que
nos permiten conectarnos al
tiempo de ejecución del
framework e inspeccionar el
árbol de inyectores.
ANGULAR MEJORAS EN EL
DEVTOOLS
17
Se utiliza la extensión de Chrome Angular Dev Tools
ANGULAR
17
STANDALONE
APIS DESDE EL
Si bien el ngModules se mantiene la
COMIENZO
tendencia es a su desaparición y
que comiencen todos los
componentes a ser STANDALONE y
funcionen independientemente
ANGULAR RENDERIZADO HÍBRIDO

17
Puedes iniciar proyectos 100% StandAlone así:
ANGULAR
17
¡GRACIA
Seguime en mis redes

S!@sergiecode
www.youtube.com/@sergiecode
Cursos gratis de programación

También podría gustarte