Les 19 et 20 septembre, mes collègues et moi avons assisté à la conférence AngularConnect. Il s'agit de l'une des plus grandes conférences angulaires, cette année elle a eu lieu pour la cinquième fois. Le programme comptait 30 rapports, dont 8 de l'équipe Angular, 4 ateliers et 5 zones d'experts. Pour cela, ça valait le coup d'aller à Londres (enfin, ça vaut toujours le détour à Londres).
Dans cet article, nous expliquerons pourquoi nous avons choisi AngularConnect, quels sujets nous intéressaient et vous aiderons à décider de consulter les rapports du premier jour de la conférence.
Le programme
La première chose que nous avons remarquée en décidant de partir ou non était, bien sûr, le programme. 8 rapports de l'équipe Angular, connus de nombreux développeurs Angular John Papa, auteur du blog Angular in Depth Max Koretskiy, et de nombreux autres conférenciers célèbres sont une distribution vraiment stellaire.
Mais l'affaire ne concerne pas que les grands noms. Les sujets énoncés semblaient extrêmement pertinents pour nos tâches de travail.
Nous attendions beaucoup des rapports approfondis -
Optimisations des performances dans Angular de l'ingénieur Google Mert Değirmenci et
Profiling Angular apps comme un requin sur le débogage des performances et des problèmes de mémoire. Tout ce qui touche à la performance est important pour nous, car nous créons des applications interactives complexes.
Le rapport
Migrating Breaking avec TSLint et Schematics semblait également être un succès précis. Nous avons une bibliothèque de kits d'interface utilisateur interne, au cours du développement, dont nous avons souvent rencontré un négatif lorsque nous avons apporté des modifications de rupture. Nous sommes arrivés au besoin de migrations automatiques, il était donc intéressant de savoir comment les autres le font.
Nous utilisons NgRx et surveillons ses meilleures pratiques. Par conséquent, nous étions intéressés par un autre rapport approfondi -
Façades quantiques: pourquoi les façades NgRx sont terribles ou impressionnantes selon la façon dont vous les observez . Nous voulions écouter les conclusions de Sam Julien et les comparer aux nôtres.
Et il y avait beaucoup de telles intersections!
Rapports
Le premier jour de la conférence a été ouvert par Stephen Fluin et Igor Minar.
Stephen a remercié la communauté pour son soutien et a parlé de l'augmentation du nombre de projets Angular de Google de 600 en 2018 à 1 500 en 2019.
Igor a dit que dans Angular CLI 8.3 simplifiait l'assemblage pour ES 5 - cela permettait de réduire le temps passé de 40%. Il a également parlé de l'optimisation dans Angular 9: le poids des artefacts diminuera, les applications commenceront à fonctionner plus rapidement. Cela sera possible grâce au nouveau rendu Ivy. Dans la neuvième version du framework, les bibliothèques seront livrées avec le support ViewEngine. Et à partir de la dixième version - avec Ivy. Vérifiez la compatibilité de la bibliothèque par le
lien .
Plongez au cœur du compilateur angulaire
Alex Rickabaugh, le développeur d'Angular Compiler, parle des cinq étapes de la compilation d'un module Angular en code JavaScript. Il utilise un exemple pour analyser le modèle de compilation: ce qu'il était et ce qui deviendra dans Ivy. Les étendues NgModule, l'exécution partielle de code et l'amélioration de la vérification de type dans les modèles sont les principaux avantages d'Ivy, selon Alex.
Le rapport sera utile à ceux qui veulent comprendre en détail les fonctionnalités du compilateur et comprendre les étapes de son travail.
Angular et le top 10 de l'OWASP
Philippe De Ryck rappelle la cote de vulnérabilité OWASP 10, mais ne s'attarde que sur trois d'entre eux en détail: XSS, Broken Auth, et l'utilisation de dépendances avec vulnérabilités.
- Suivez la voie angulaire - la clé de l'absence de XSS.
- OAuth 2.0 et la bibliothèque aideront à éviter les problèmes d'autorisation.
- Un projet créé avec ng new a 20 000 fichiers installés que le développeur ne contrôle pas. Les attaquants l'utilisent: le package npm electron-notify-native a été ajouté au référentiel populaire. Après un certain temps, nous avons changé le code. Un référentiel populaire obtient une vulnérabilité lors de la mise à jour des dépendances.
Nous recommandons ce rapport comme introduction à OWASP 10.
Mon parcours dans l'équipe angulaire
Manu Murthy a rejoint l'équipe Angular en octobre 2017. Dans son rapport, il parle de trois points clés pendant cette période: changer l'attention portée à la communauté, améliorer les processus au sein de l'équipe et les défis actuels. À la fin du rapport, il évoque les projets de stagiaires de 2019: Caretaker, Scaled search in code et Connecting Ecosystem.
Deux ans de l'équipe Angular ont volé pour nous en une demi-heure. Ils ne se sont pas ennuyés. Si vous voulez connaître le cadre de l'intérieur, vous aimerez le rapport.
Comment nous rendons angulaire rapide
Pendant le développement d'Ivy, l'équipe s'est concentrée sur la performance.
La plupart des exposés de Miško Hevery parlent de l'optimisation des scripts js avec le moteur V8. Sur l'exemple des benchmarks, il montre le temps d'exécution des fonctions monomorphes et polymorphes.
Miško note des programmes utiles pour travailler avec le profilage V8. À la fin du rapport, il présente les structures de données dans Ivy et annonce ngDevMode - un mode de débogage visuel de votre application dans la console du navigateur.
La plupart du rapport analyse les optimisations de navigateur de bas niveau. Convient aux développeurs qui souhaitent optimiser au maximum leurs applications.
Trouver angulaire
Elana Olson parle de l'écosystème Angular: comment créer un projet, comment le styliser avec Angular Material, comment ajouter des services et pourquoi ils sont nécessaires. En conclusion, Elana Olson explique comment vous pouvez aider la communauté angulaire et ajouter votre projet à l'écosystème.
Le rapport justifie le niveau Starter. Convient aux nouveaux développeurs qui ont récemment terminé le Tour des héros.
Les secrets de la vitesse fulgurante d'Angular
Max Koretskyi aborde trois niveaux d'optimisation: le temps d'exécution du code, l'utilisation des structures de données et le fonctionnement du compilateur.
- La mise en cache en ligne et les fonctions monomorphes aideront à accélérer l'exécution du code.
- Le filtre Bloom accélérera le travail avec les structures.
- Le compilateur Ivy convertit le modèle html en code JavaScript optimisé.
- Avant de regarder, je vous recommande de vous familiariser avec la vidéo Miško. Le rapport Max Koretskyi est plus facile à comprendre car les exemples proviennent d'Angular. Description du travail Le filtre Bloom est mémorisé pour toujours.
Profilage d'applications angulaires comme un requin
Gil Fink commence par une histoire sur le processus de rendu dans le navigateur, ses étapes, la différence entre la refusion et la repeinture, le modèle RAIL. Ensuite, Gil procède au profilage et montre avec des exemples comment trouver les zones problématiques à l'aide de l'onglet Performances dans Chrome.
Le rapport convient à la familiarisation avec le processus de profilage des applications. Il n'y a aucun lien avec Angular, vous pouvez recommander des amis aux frontenders de toute spécialisation.
Automatiser vos projets angulaires avec Schematics
Brandon Roberts de Nrwl parle des fonctionnalités de Schémas Angulaires. Ils peuvent être utiles pour automatiser les tâches de routine: établir des dépendances lors de l'ajout d'un package, effectuer des opérations supplémentaires lors de la mise à jour. Et à l'aide de schémas, vous pouvez ajouter des modèles de code et faciliter la création d'entités standard. Par exemple, Brandon montre comment ajouter un modèle pour un service API.
Le rapport commence par les bases et convient à l'exploration de la technologie.
Le rapport de croquis a clôturé le programme du premier jour. Devant nous, Angular-el, communication informelle, promenades dans Londres ... Et le deuxième jour de la conférence, dont nous discuterons dans un article séparé.
Les impressions de la première moitié de la conférence sont restées mitigées. D'une part, certains rapports étaient vraiment profonds, vraiment profonds avec du contenu de première main, souvent des créateurs d'Angular eux-mêmes. En revanche, il y a eu des rapports dont nous avons noté un niveau inférieur au niveau indiqué. Mais la valeur de la conférence n'est pas seulement dans les rapports - nous reviendrons sur cette question dans la deuxième partie.