AccueilActualités informatiqueJavaScript : Angular 13 coupe de vieux liens

JavaScript : Angular 13 coupe de vieux liens

La version 13 du framework JavaScript Angular a été publiée. Sous le slogan « Ivy Everywhere », la version s’appuie sur le pipeline pour le compilateur et le rendu réunis dans Ivy. Le moteur de visualisation ne fait plus partie du cadre.

Autre héritage, Angular 13 supprime la connexion à Internet Explorer (IE) 11 afin de pouvoir utiliser les fonctionnalités contemporaines du navigateur, telles que les variables CSS et les animations web, via des API web natives, que le navigateur web obsolète de Microsoft ne connaît pas. Il élimine également les polyfills requis pour IE 11, qui peuvent être installés dans les applications existantes avec la commande ng update dans les applications existantes. Ceux qui dépendent de l’ancien navigateur peuvent rester avec Angular 12, qui bénéficiera encore d’un support officiel jusqu’en novembre 2022.

Sommaire

La version 12, sortie en mai, avait déjà déclaré le moteur de visualisation comme étant déprécié, et dans la version actuelle, il a finalement disparu. Cela complète le passage à Ivy, le pipeline pour les compilateurs et le rendu. Angular 8 avait un premier aperçu à bord, et dans la version 9 Ivy est devenu la norme pour les nouvelles applications Angular, mais a causé des retards dans la sortie sur le chemin de la stabilité à l’époque.

Lire aussi

Avec la suppression du moteur de visualisation, Angular devra probablement s’appuyer moins souvent sur le compilateur de compatibilité angulaire ngcc. Cela devrait potentiellement accélérer la compilation, puisque les fichiers de métadonnées et de résumé requis pour ngcc ne sont pas nécessaires. En outre, la suppression du moteur de visualisation permet des optimisations supplémentaires.

En outre, Angular 13 simplifie l’API pour la création de composants de manière dynamique. Il ne nécessite pas d’objet d’usine supplémentaire, mais permet l’appel direct de la fonction ViewContainerRef.createComponent. L’API s’en sort avec moins de code passe-partout, comme le montre un exemple tiré du blog d’Angular. Alors qu’auparavant le code suivant était nécessaire pour créer dynamiquement un nouveau composant :

@Directive({ … })
export class MyDirective {
    constructor(private viewContainerRef: ViewContainerRef,
                private componentFactoryResolver: 
                        ComponentFactoryResolver) {}
    createMyComponent() {
        const componentFactory = this.componentFactoryResolver.
                             resolveComponentFactory(MyComponent);
    
        this.viewContainerRef.createComponent(componentFactory);
    }
}

maintenant les lignes de code suivantes sont suffisantes :

@Directive({ … })
export class MyDirective {
    constructor(private viewContainerRef: ViewContainerRef) {}
    createMyComponent() {
        this.viewContainerRef.createComponent(MyComponent);
    }
}

L’équipe a également apporté quelques ajustements au format de paquet Angular (APF). Entre autres choses, les métadonnées du moteur de visualisation sont omises. En outre, le format est orienté vers le JavaScript contemporain tel que l’ES2020. Les bibliothèques créées avec la dernière version du FAP se passent également du compilateur ngcc. Enfin, le format de paquet peut traiter les exportations de paquets de nœuds.

En ce qui concerne les composants d’Angular, la version actuelle met l’accent sur l’absence de barrie. Selon ses propres informations, l’équipe a vérifié tous les composants de conception matérielle (MDC) pour les exigences accrues a11y – a11y signifie Accessibilité : a + 11 lettres + y. Pour des raisons d’accessibilité, les cases à cocher et les boutons radio, entre autres, ont des distances plus grandes, et pour certains composants, il y a des ajustements au mode de contraste élevé.

Les éléments du côté droit offrent un espacement plus important pour faciliter le contrôle tactile.

(Image : Angular.io)

D’autres innovations dans Angular 13, telles que des ajouts à la fonction TestBed et le cache de construction persistant peuvent être trouvés sur le blog d’Angular. La liste complète des modifications se trouve dans le journal des modifications.

Plus d'articles