Los días 19 y 20 de septiembre, mis colegas y yo asistimos a la conferencia AngularConnect. Esta es una de las conferencias angulares más grandes, este año se celebró por quinta vez. El programa contó con 30 informes, de los cuales 8 fueron del equipo de Angular, 4 talleres y 5 zonas de expertos. Por el bien de esto, valió la pena ir a Londres (bueno, bueno, siempre vale la pena un viaje a Londres).
En este artículo, explicaremos por qué elegimos AngularConnect, qué temas nos interesaron y le ayudaremos a decidir ver los informes del primer día de la conferencia.
El programa
Lo primero que notamos al decidir si ir o no fue, por supuesto, el programa. 8 informes del equipo de Angular, conocidos por muchos desarrolladores de Angular, John Papa, autor del blog Angular in Depth, Max Koretskiy, y muchos otros oradores famosos son un elenco verdaderamente estelar.
Pero el asunto no es solo en grandes nombres. Los temas indicados parecían extremadamente relevantes para nuestras tareas de trabajo.
Esperábamos mucho de los informes de inmersión profunda: las
optimizaciones de rendimiento en Angular del ingeniero de Google Mert Değirmenci y las
aplicaciones Profiling Angular como un tiburón sobre la depuración del rendimiento y los problemas de memoria. Todo lo relacionado con el rendimiento es importante para nosotros, porque hacemos aplicaciones interactivas complejas.
La
migración de los cambios de última hora con TSLint y el informe de
Schematics también parecía un éxito exacto. Tenemos una biblioteca interna de Kit de interfaz de usuario, durante el desarrollo de la cual a menudo encontramos un punto negativo cuando realizamos cambios importantes. Llegamos a la necesidad de migraciones automáticas, por lo que fue interesante descubrir cómo lo hacen otros.
Usamos NgRx y monitoreamos sus mejores prácticas. Por lo tanto, estábamos interesados en otro informe de inmersión profunda
: fachadas cuánticas: por qué las fachadas NgRx son terribles o impresionantes, dependiendo de cómo las observe . Queríamos escuchar las conclusiones de Sam Julien y compararlas con las nuestras.
¡Y había muchas de esas intersecciones!
Informes
El primer día de la conferencia fue inaugurado por Stephen Fluin e Igor Minar.
Stephen agradeció a la comunidad por su apoyo y habló sobre aumentar el número de proyectos angulares de Google de 600 en 2018 a 1,500 en 2019.
Igor dijo que en Angular CLI 8.3 simplificó el ensamblaje para ES 5, lo que permitió reducir el tiempo dedicado en un 40%. También habló sobre la optimización en Angular 9: el peso de los artefactos disminuirá, las aplicaciones comenzarán a funcionar más rápido. Esto será posible debido al nuevo render de Ivy. En la novena versión del marco, las bibliotecas vendrán con soporte de ViewEngine. Y a partir de la décima versión, con Ivy. Verifique la compatibilidad de la biblioteca por el
enlace .
Profundiza en el compilador angular
Alex Rickabaugh, el desarrollador de Angular Compiler, habla sobre los cinco pasos para compilar un módulo Angular en código JavaScript. Utiliza un ejemplo para analizar el modelo de compilación: qué era y qué se convertirá en Ivy. Los alcances de NgModule, la ejecución parcial de código y la verificación mejorada de tipos en las plantillas son las principales ventajas de Ivy, según Alex.
El informe será útil para aquellos que quieran comprender en detalle las características del compilador y comprender en qué etapas consiste su trabajo.
Angular y los 10 mejores de OWASP
Philippe De Ryck recuerda la calificación de vulnerabilidad OWASP 10, pero solo se centra en tres de ellas en detalle: XSS, Broken Auth y el uso de dependencias con vulnerabilidades.
- Siga el camino angular: la clave de la ausencia de XSS.
- OAuth 2.0 y la biblioteca ayudarán a evitar problemas de autorización.
- Un proyecto creado con ng new tiene 20 mil archivos instalados que el desarrollador no controla. Los atacantes usan esto: el paquete npm electron-notify-native fue agregado al repositorio popular. Después de un tiempo, cambiamos el código. Un repositorio popular obtiene vulnerabilidad al actualizar dependencias.
Recomendamos este informe como introducción a OWASP 10.
Mi viaje en el equipo angular.
Manu Murthy se unió al equipo de Angular en octubre de 2017. En su informe, habla sobre tres puntos clave durante este tiempo: cambiar el enfoque en la comunidad, mejorar los procesos dentro del equipo y los desafíos actuales. Al final del informe, habla sobre los proyectos internos de 2019: Caretaker, Scaled search in code y Connecting Ecosystem.
Dos años del equipo de Angular volaron para nosotros en media hora. No se aburrieron. Si desea conocer el marco desde adentro, le gustará el informe.
Cómo hacemos angular rápido
Durante el desarrollo de Ivy, el equipo se centró en el rendimiento.
La mayor parte de la charla de Miško Hevery habla sobre la optimización de scripts js con el motor V8. En el ejemplo de los puntos de referencia, muestra el tiempo de ejecución de las funciones monomórficas y polimórficas.
Miško señala programas útiles para trabajar con perfiles V8. Al final del informe, presenta las estructuras de datos en Ivy y anuncia ngDevMode, un modo para depurar visualmente su aplicación en la consola del navegador.
La mayor parte del informe analiza las optimizaciones de navegador de bajo nivel. Adecuado para desarrolladores que desean optimizar sus aplicaciones tanto como sea posible.
Encontrar angular
Elana Olson habla sobre el ecosistema Angular: cómo crear un proyecto, cómo diseñarlo con Angular Material, cómo agregar servicios y por qué son necesarios. En conclusión, Elana Olson explica cómo puede ayudar a la comunidad Angular y agregar su proyecto al ecosistema.
El informe justifica el nivel de inicio. Adecuado para nuevos desarrolladores que hayan completado recientemente el Tour of Heroes.
Los secretos detrás de la velocidad del rayo de Angular
Max Koretskyi aborda tres niveles de optimización: tiempo de ejecución del código, uso de estructuras de datos y operación del compilador.
- El almacenamiento en caché en línea y las funciones monomórficas ayudarán a acelerar la ejecución del código.
- El filtro Bloom acelerará el trabajo con estructuras.
- El compilador Ivy convierte la plantilla html en código JavaScript optimizado.
- Antes de mirar, le recomiendo que se familiarice con el video Miško. El informe de Max Koretskyi es más fácil de entender porque los ejemplos son de Angular. Descripción del trabajo El filtro Bloom se recuerda para siempre.
Perfilar aplicaciones angulares como un tiburón
Gil Fink comienza con una historia sobre el proceso de renderizado en el navegador, sus etapas, la diferencia entre reflujo y repintado, modelo RAIL. Luego, Gil procede a la creación de perfiles y muestra con ejemplos cómo encontrar áreas problemáticas utilizando la pestaña Rendimiento en Chrome.
El informe es adecuado para familiarizarse con el proceso de creación de perfiles de aplicaciones. No hay vínculos con Angular, puede recomendar amigos a los participantes de cualquier especialización.
Automatizando sus proyectos angulares con Schematics
Brandon Roberts de Nrwl habla sobre las características del esquema angular. Pueden ser útiles para automatizar tareas rutinarias: establecer dependencias al agregar un paquete, realizar operaciones adicionales al actualizar. Y con la ayuda de esquemas, puede agregar plantillas de código y facilitar la creación de entidades estándar. Por ejemplo, Brandon muestra cómo agregar una plantilla para un servicio API.
El informe comienza con lo básico y es adecuado para explorar la tecnología.
El informe del boceto cerró el programa del primer día. Delante de nosotros estaba Angular-el, comunicación informal, paseos por Londres ... Y el segundo día de la conferencia, que discutiremos en un artículo separado.
Las impresiones de la primera mitad de la conferencia se mantuvieron mezcladas. Por un lado, algunos informes fueron muy profundos, muy profundos con contenido de primera mano, a menudo de los propios creadores de Angular. Por otro lado, hubo informes, cuyo nivel calificamos por debajo del nivel establecido. Pero el valor de la conferencia no está solo en los informes, volveremos a este tema en la segunda parte.