Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Chroniqueur Actualités

    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    mars 2013
    Messages
    5 012
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations professionnelles :
    Activité : Administrateur de base de données

    Informations forums :
    Inscription : mars 2013
    Messages : 5 012
    Points : 129 184
    Points
    129 184
    Par défaut Angular 9.0 disponible. Par défaut, toutes les applications vont utiliser le compilateur et le runtime Ivy
    Angular 9.0 est disponible. Par défaut, toutes les applications vont utiliser le compilateur et le runtime Ivy
    L'équipe explique les avantages apportés par ce moteur de rendu

    Dans sa version 6.0, le framework JavaScript Angular a été livré avec un nouveau moteur de rendu appelé Ivy. « Vous aimez Angular, mais vous souhaitez juste qu'il soit plus petit, plus facile à déboguer, et compilé plus rapidement ? Ce sont nos objectifs avec le nouveau moteur de rendu d'Angular nommé Ivy » expliquait alors Google à propos d'Ivy. Selon l'équipe Angular, ce moteur de rendu est axé sur l'amélioration de la vitesse et accélère la compilation. Ivy faisait la promesse aux développeurs de réduire la taille du code et de leur apporter une flexibilité accrue. L'équipe Angular a indiqué en outre que le passage au nouveau moteur de rendu se ferait en douceur.

    Dans la version 9.0 cette fois-ci toutes les applications vont utiliser le compilateur et le runtime Ivy par défaut. L'outil a gagné en maturité. En effet, l'équipe a noté qu'en plus des centaines de corrections de bogues, le compilateur Ivy et le runtime offrent de nombreux avantages :
    • tailles de paquets plus petites ;
    • des tests plus rapides ;
    • un meilleur débogage ;
    • une amélioration au niveau des classes CSS et des liaisons de style ;
    • un vérification de type améliorée ;
    • une amélioration des erreurs de build ;
    • un temps de build amélioré, une activation d'AOT par défaut ;
    • l'amélioration de l'internationalisation améliorée.


    Tailles de paquets plus petites

    Le compilateur Ivy a été conçu pour supprimer les parties d’Angular qui ne sont pas utilisées via l’arborescence et pour générer moins de code pour chaque composant Angular.

    Grâce à ces améliorations, les petites applications et les grandes applications peuvent voir les économies de taille les plus spectaculaires.
    • Les petites applications qui n'utilisent pas de nombreuses fonctionnalités Angular peuvent bénéficier le plus du tree-shaking (un terme couramment utilisé dans le contexte JavaScript pour parler de l'élimination du code mort).
    • Les grandes applications avec de nombreux composants peuvent bénéficier le plus de la taille d'usine réduite.
    • Les applications de taille moyenne devraient voir des tailles de bundle équivalentes ou légèrement plus petites, car elles bénéficient moins du tree-shaking et n'ont pas suffisamment de composants pour bénéficier d'une taille d'usine réduite.


    Nom : ivy.png
Affichages : 27852
Taille : 49,5 Ko
    Les petites applications pourraient voir une diminution d'environ 30 % de la taille de l'ensemble, les grandes applications verront une diminution de 25 à 40% et les applications moyennes vont observer une diminution minimale

    Des tests plus rapides

    L'équipe a travaillé sur l'implémentation de TestBed dans Ivy pour la rendre plus efficace.

    Auparavant, TestBed recompilait tous les composants entre l'exécution de chaque test, indépendamment du fait que des modifications aient été apportées aux composants (par exemple, par le biais de remplacements) ou non.

    Dans Ivy, TestBed ne recompile pas les composants entre les tests sauf si un composant a été remplacé manuellement, ce qui lui permet d'éviter la recompilation entre la grande majorité des tests.

    Avec ce changement, les tests d'acceptation de base du framework sont environ 40% plus rapides. L'équipe s'attend à ce que les utilisateurs voient leur propre vitesse de test d'application être environ 40 à 50 % plus rapide.

    Meilleur débogage

    Ivy vous fournit plus d'outils pour déboguer vos applications. Lorsque vous exécutez une application en mode Dev avec le runtime Ivy, il vous est proposé désormais le nouvel objet ng pour le débogage.
    • Vous pouvez demander à Angular l'accès aux instances de vos composants, directives, etc.
    • Vous pouvez appeler manuellement des méthodes et mettre à jour l'état.
    • Lorsque vous souhaitez voir les résultats de la détection des modifications, vous pouvez déclencher la détection des modifications avec applyChanges.


    Nom : ng.png
Affichages : 3043
Taille : 55,1 Ko

    Ivy améliore également la trace de la pile pour les problèmes de débogage tels que ExpressionChangedAfterItHasBeenCheckedError. Auparavant, la trace de la pile pouvait être inutile:

    Nom : pile1.png
Affichages : 3045
Taille : 97,5 Ko

    Avec Ivy, vous voyez une trace de pile plus utile qui vous permet de passer directement à l'instruction de modèle avec l'expression qui a changé.

    Nom : pile2.png
Affichages : 3035
Taille : 92,6 Ko

    Une amélioration au niveau des classes CSS et des liaisons de style

    Le compilateur et le runtime Ivy fournissent des améliorations pour la gestion des styles. Auparavant, si une application contenait des définitions concurrentes pour un style, ces styles se remplaceraient de manière destructive. Avec Ivy, les styles sont fusionnés de manière prévisible.

    Considérez les extraits de modèle et de composant suivants :

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    <my-component style="color:red;" [style.color]="myColor" [style]="{color: myOtherColor}" myDirective></div>

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    @Component({
      host: {
        style: "color:blue"
      },...
    })
    ...
     
    @Directive({
      host: {
        style: "color:black",
        "[style.color]": "property"
      },...
    })
    ...
    Auparavant, la dernière liaison à être évaluée aurait été gagnante et cela pouvait dépendre du moment des modifications de ces expressions. Si myColor et myOtherColor n'étaient pas définis, le style statique red aurait été ignoré.

    Avec la version 9, vous pouvez gérer vos styles selon un ordre de priorité clair et cohérent qui ne dépend pas du timing. Les styles les plus spécifiques ont toujours la priorité la plus élevée. Par exemple, une liaison à [style.color] remplace une liaison conflictuelle à [style].

    Cependant, pour des raisons de compatibilité descendante, l'équipe a laissé le comportement des liaisons [ngStyle] et [ngClass] être le même qu'auparavant. Lorsque leurs valeurs de liaison sont mises à jour, les nouvelles valeurs remplaceront toutes les liaisons concurrentes.

    En tant qu'effet secondaire du refactoring de style, vous pouvez désormais également lier des propriétés personnalisées CSS (également appelées variables CSS).

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <div [style.--main-border-color]=" '#CCC' ">
      <p style="border: 1px solid var(--main-border-color)">hi</p>
    </div>

    Vérification de type améliorée

    Le compilateur Angular peut vérifier plus de types de votre application et appliquer des règles plus strictes. Ces fonctionnalités vous aideront, vous et votre équipe, à détecter les bogues plus tôt dans le processus de développement.

    Le framework prend en charge deux indicateurs principaux pour les vérifications de type supplémentaires en plus de la valeur par défaut :
    • fullTemplateTypeCheck - L'activation de cet indicateur indique au compilateur de tout vérifier dans votre modèle (ngIf, ngFor, ng-template, etc.) ;
    • strictTemplates - L'activation de cet indicateur appliquera les règles de système de type les plus strictes pour la vérification de type.

    Amélioration des erreurs de build

    Le nouveau compilateur Ivy est non seulement plus rapide et offre une plus grande sécurité de type, il facilite également la lecture de tous les messages d'erreur.

    Dans la version 8 ou View Engine, une erreur de compilation typique ressemblerait à ceci:

    Nom : erreur1.png
Affichages : 3005
Taille : 48,0 Ko

    Dans la version 9 avec Ivy, la même erreur ressemble à :

    Nom : erreur2.png
Affichages : 3009
Taille : 39,8 Ko

    Des mises à jour ng plus fiables

    Le framework a bénéficié de quelques modifications au fonctionnement de ng update pour rendre la fonctionnalité plus fiable et informative.
    • Utilisez toujours la dernière CLI. À partir de la 8.3.19 de la CLI, le framework utilise maintenant la CLI de la version mise à jour TARGET lors des mises à jour. Cela signifie qu'à l'avenir, les mises à jour seront toujours gérées automatiquement par la dernière CLI.
    • Mises à jour de progression plus claires. ng update fait maintenant plus pour vous dire ce qui se passe sous le capot. Pour chaque migration, vous verrez des informations sur la migration.
    • Débogage des mises à jour plus facile. Par défaut, ng update exécute toutes les migrations et laisse les modifications agrégées sur le disque pour que vous puissiez les inspecter. La mise à jour de la version 9 introduit également le nouvel indicateur --create-commits. Lorsque vous exécutez ng update --create-commits, l'outil valide l'état de votre base de code après chaque migration, afin que vous puissiez parcourir et comprendre ou déboguer les modifications qui sont apportées à votre code.

    De nouveaux composants

    Vous pouvez désormais inclure des fonctionnalités de YouTube et de Google Maps dans vos applications.
    • Vous pouvez afficher un lecteur YouTube dans votre application avec le nouveau youtube-player. Après avoir chargé l'API du lecteur YouTube IFrame, ce composant en tirera parti.
    • Le framework s'accompagne également des composants google-maps. Ces composants facilitent le rendu de Google Maps, l'affichage des marqueurs et le câblage de l'interactivité d'une manière qui fonctionne comme un composant Angular normal, vous évitant d'avoir à apprendre la totalité de l'API Google Maps.

    Prise en charge de TypeScript 3.7

    Angular a été mis à jour pour fonctionner avec TypeScript 3.6 et 3.7, y compris la fonction de chaînage facultative extrêmement populaire de TypeScript 3.7. Pour rester en phase avec l'écosystème, l'équipe a également mis à jour sa version d'autres dépendances de l'écosystème telles que Zone.JS et RxJS.

    Source : blog Angular
    Contribuez au club : Corrections, suggestions, critiques, ... : Contactez le service news et Rédigez des actualités

  2. #2
    Membre régulier Avatar de sitexw
    Homme Profil pro
    Développeur Web
    Inscrit en
    février 2015
    Messages
    43
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : février 2015
    Messages : 43
    Points : 107
    Points
    107
    Par défaut
    Cool 👍

  3. #3
    Membre régulier
    Homme Profil pro
    Développeur Web
    Inscrit en
    janvier 2019
    Messages
    81
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2019
    Messages : 81
    Points : 124
    Points
    124
    Par défaut
    merci pour les infos !

  4. #4
    Modérateur
    Avatar de grunk
    Homme Profil pro
    Architecte Web / Android
    Inscrit en
    août 2003
    Messages
    5 675
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Architecte Web / Android
    Secteur : Industrie

    Informations forums :
    Inscription : août 2003
    Messages : 5 675
    Points : 15 620
    Points
    15 620
    Par défaut
    A peine 1% de gain pour ma part sur une app avec ~40 composants
    Pry Framework php5 | N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  5. #5
    Membre régulier
    Homme Profil pro
    Développeur Web
    Inscrit en
    janvier 2019
    Messages
    81
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2019
    Messages : 81
    Points : 124
    Points
    124
    Par défaut
    avec une grosse application que j'ai développé, en passant donc vers Angular 9 et son nouveau moteur ivy. Je constate une rapidité d’exécution assez bluffante !

  6. #6
    Membre averti Avatar de RPGamer
    Homme Profil pro
    Ingénieur en systèmes embarqués
    Inscrit en
    mars 2010
    Messages
    154
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : Suisse

    Informations professionnelles :
    Activité : Ingénieur en systèmes embarqués

    Informations forums :
    Inscription : mars 2010
    Messages : 154
    Points : 337
    Points
    337
    Par défaut
    L'ajout de composants YouTube et Google Maps est une excellente idée.

    Les nombreux apports et gains en temps de compilation et en performances du compilateur Ivy sont aussi apréciables.

Discussions similaires

  1. [EDI] répertoire par défaut pour les projets
    Par jcs2 dans le forum Delphi
    Réponses: 2
    Dernier message: 01/09/2006, 14h06
  2. problème avec média player par défaut pour les vidéos ?
    Par tomguiss dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 18/10/2005, 15h08
  3. Réponses: 1
    Dernier message: 16/02/2005, 13h04
  4. Réponses: 6
    Dernier message: 28/09/2004, 17h47

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo