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
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.
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.
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).
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.
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
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.
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)
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)
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
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)
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.
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
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)
de una sola plataforma. De hecho, actualmente permite correr las aplicaciones en el navegador, dispositivos móviles, el servidor y un WebWorker Plataformas
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)
de clases abstractas. Cada plataforma provee implementaciones para estas clases que dependen del ambiente en el que se van a correr las aplicaciones. Renderers
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
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)
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)
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)
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
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)