Angular Ivy: DOM Incremental para las masas

Transcript

1. Angular Ivy DOM Incremental para las masas
2. Carlos Vega Senior Software Engineer con amplia experiencia en Angular, React, NodeJS, .NET Core, Kubernetes, Docker y AWS. Open Source: Storybook for Angular (@storybook/angular), learnstorybook.com (Angular, Español e Inglés) Twitter: @__el_Negro Github: @alterx
3. IVy Es un nuevo motor de visualización retrocompatible enfocado en mejorar la velocidad, tamaño y flexibilidad de las aplicaciones creadas con Angular. Corresponde a la cuarta iteración de renderers que ha tenido el framework.
4. DOM Incremental vs DOM Virtual
5. DOM Virtual
6. React Cada componente es representado como una estructura sencilla (React Element) que contiene todas sus características principales y no está ligada al DOM. El proceso de reconciliación se lleva a cabo por medio de un algoritmo de diffing que consiste en comparar estas estructuras y determinar los cambios que deben aplicarse al DOM. Una vez que se conocen estos cambios, y la manera más eficiente de realizarlos, dichas operaciones se realizan sobre el DOM.
7. Actualización del árbol de componentes
8. DOM Incremental
9. Angular Angular utiliza el concepto de DOM Incremental que, básicamente, significa representar el las actualizaciones del DOM como una serie de instrucciones en lugar de representarlo como un objeto o estructura simple (como lo hace el DOM virtual). Estas instrucciones no son únicamente interpretadas por el motor de visualización, de hecho estas rutinas son el motor de visualización (rendering engine).
10. Actualización del árbol de componentes
11. Procesos del framework
12. Runtime
13. Interpretador El interpretador cumple la función vital de utilizar los datos que produce el compilador para instanciar componentes y ejecutar la detección de cambios.
14. Interpretador En la iteración actual (no Ivy), el compilador produce una serie de metadatos que sirven como guía para crear cada componente. Este interpretador se encarga crear los nodos necesarios y orquestar la detección de cambios durante la ejecución de nuestra aplicación. Además, se requiere un análisis estático de toda la aplicación.
15. En contraste, con Ivy se producen una serie de instrucciones y estas son las que se encargan de instanciar los nodos del DOM y de la detección del cambio. Interpretador (cont)
16. Modelo de ejecución
17. Compilador
18. El compilador de Ivy crea una definición del componente o directiva basada en la metadata existente (los decoradores que cada clase tiene) y utiliza una serie de TypeScript transformers para agregar dichos datos como miembros estáticos de la clase en cuestión. Compilador
19. TypeScript transformers Cada compilador transforma un único decorador en un campo estático que va a funcionar como una función pura. Esto es importante ya que refuerza el principio de localidad: un compilador únicamente depende de sus entradas.
20. La única excepción a esta regla está en @Component pues los selectores que son aplicables durante la compilación del template de un componente son determinados por el módulo que declara este componente. Compilador (cont)
21. Por ejemplo, en el caso del decorador de Componentes, las entradas del compilador serán: • Una referencia a la clase del componente • El template y los estilos asociados • El selector del componente • Un mapa de selectores incluidos en el módulo al que el componente pertenece Compilador (cont)
23. Compilación de templates
24. Angular posee un compilador que se encarga de procesar los templates que escribimos y convertirlos en la función template. Dicha función puede ejecutarse en dos modos: creación o actualización. Compilación de templates
25. Este compilador se encarga de parsear y tokenizar cada template y convertirlo en un AST de HTML que, a su vez, se convierte en un Angular Template AST. Este último es una forma especial de AST que contiene partes exclusivas de Angular: se encarga de convertir la sintaxis especial a su versión canónica, recolectar todas las referencias y variables, y crear los bindings necesarios. Compilación de templates (cont)
26. Reference inversion Hay un paso llamado reference inversion que realizará el compilador de Angular y cuyo único propósito es determinar la lista de componentes, pipes y directivas disponibles dentro del template de un componente.
27. Detección de cambios
28. La detección de cambios en Angular es un proceso que permite determinar si es necesario volver a generar una vista del componente o componentes en cuestión. En el caso de Angular Ivy, la detección de cambios se hace por medio de una función interna llamada detectChanges que recibe la instancia de un componente y realiza las operaciones pertinentes. Detección de cambios
29. Anteriormente, esta función contenía una gran cantidad de código, ya que este era el punto principal desde donde se realizaba todo el proceso. La implementación de Ivy llama la función template del componente y, adicionalmente, corre la detección de cambios para los componentes hijos y cualquier componente que se haya creado de manera dinámica. Detección de cambios (cont)
30. Plataformas y Renderers : inicializando nuestra app.
31. Plataformas
32. Como es sabido, Angular es un framework que no depende de una sola plataforma. De hecho, actualmente permite correr las aplicaciones en el navegador, dispositivos móviles, el servidor y un WebWorker Plataformas
33. Cada plataforma tiene dos partes: • PlatformRef, que es un servicio que se encarga de hacer el bootstrap de nuestra aplicación • Providers, que son los tokens y servicios que se utilizan durante las fases de bootstrap y ejecución. Plataformas (cont)
34. Renderer
35. Una buena parte de Angular es, en realidad, una serie de clases abstractas. Cada plataforma provee implementaciones para estas clases que dependen del ambiente en el que se van a correr las aplicaciones. Renderers
37. Bootstrapping
38. La primera fase es la compilación del módulo, que básicamente toma todos los módulos, directivas y componentes hijos, obtiene sus metadatos y le solicita al compilador que compile los templates. Posteriormente se crea una zona de NgZone que contendrá toda la aplicación. Bootstrapping
39. Después, Angular crear un error handler global y, por último, los inicializadores. Estos simplemente son funciones que deben ser ejecutadas justo antes de que el proceso de bootstrap termine. Para proveerlas se utiliza el token ‘APP_INITIALIZER’. Bootstrapping (cont)
40. Una vez que todo está listo, es el momento de inicializar el primer componente de la aplicación (el componente raíz). Dado que el módulo provee un array que contiene los componentes que deben ser inicializados lo único que PlatformRef debe hacer es recorrer esta lista y crear el (los) componente(s) correspondiente(s). Bootstrapping (cont)
41. En Angular Ivy, si utilizamos renderComponent, hay una serie de cambios ya que no contaremos con: • ngZone, • detección de cambios automática, • inyector por defecto, • HTML sanitizer, • inicializadores ni status de inicialización (que nos deja saber si los inicializadores han sido ejecutados correctamente). Bootstrapping (cont)
42. En este caso, es necesario instanciar estos componentes de manera manual. Adicionalmente, es necesario que manejemos manualmente los cambios que se realizan en el UI del componente. Bootstrapping (cont)
44. NgModules
45. Cada módulo de Angular crea un scope transitivo cuando la aplicación es compilada. Este scope está constituido por todos los elementos que el módulo exporta (y están incluidos en el campo exports) y todos los elementos que el módulo utiliza o importa. Los desarrolladores desean convertir los módulos en un componente opcional, para lo cual es necesario tener un scope local en cada componente. NgModules
46. De hecho, un PR (https://github.com/angular/angular/pull/27481) de Minko Gechev explora la posibilidad de incluir un array de dependencias (deps) dentro de los metadatos de cada componente. Esto haría que el módulo no sea requerido. NgModules (cont)
48. can i haz some code?
49. Compilador desde cero
50. Componentes manuales
51. Renderer a la medida
52. Referencias y lectura recomendada DOM Incremental https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36 http://google.github.io/incremental-dom/
53. Referencias y lectura recomendada (cont) Angular IVY https://blog.angularindepth.com/angular-revisited-tree-shakable-components-and-optional-ngmodules-329a4629276d https://blog.angularindepth.com/inside-ivy-exploring-the-new-angular-compiler-ebf85141cee1 https://blog.angularindepth.com/all-you-need-to-know-about-ivy-the-new-angular-engine-9cde471f42cf https://blog.angularindepth.com/ivy-engine-in-angular-first-in-depth-look-at-compilation-runtime-and-change-detection-876751edd9fd https://blog.angularindepth.com/angular-ivy-change-detection-execution-are-you-prepared-ab68d4231f2c https://herringtondarkholme.github.io/2018/02/19/angular-ivy/ https://github.com/angular/angular/tree/8.1.x/packages/core/src/render3
54. Referencias y lectura recomendada (cont) Arquitectura del compilador IVY https://github.com/angular/angular/blob/master/packages/compiler/design/architecture.md https://github.com/angular/angular/blob/master/packages/core/src/render3/STATUS.md https://twitter.com/elmd_/status/1146508665647747072?s=20 Plataformas y Renderers https://blog.angularindepth.com/angular-platforms-in-depth-part-1-what-are-angular-platforms-9919d45f3054 https://blog.nrwl.io/experiments-with-angular-renderers-c5f647d4fd9e
55. Referencias y lectura recomendada (cont) TypeScript transformers https://dev.doctorevidence.com/how-to-write-a-typescript-transform-plugin-fc5308fdd943 https://levelup.gitconnected.com/writing-a-custom-typescript-ast-transformer-731e2b0b66e6 https://blog.angularindepth.com/having-fun-with-angular-and-typescript-transformers-2c2296845c56 https://blog.angularindepth.com/do-you-know-how-angular-transforms-your-code-7943b9d32829 https://medium.com/joolsoftware/custom-typescript-transformers-with-angular-cli-7f4150797e05 https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API https://blog.angularindepth.com/converting-typescript-decorators-into-static-code-using-tsquery-tstemplate-and-transforms-8c65d606a5 17
56. Gracias