Fermer

mai 15, 2018

Premier coup d'oeil: Lierre angulaire


Qu'est-ce que Angular Ivy? Apprenez comment fonctionne ce nouveau moteur de rendu pour Angular, comment vous pouvez rester à jour en cours de développement et ce que cela signifie pour vous.

Si vous êtes dans le monde angulaire, vous avez peut-être entendu ce mot à la mode "Ivy" ballotté. Mais qu'est-ce que Ivy? Est-ce une plante que vous voulez éviter? Un méchant de bande dessinée? Un groupe de collèges? Non, pas dans ce cas. Ivy est le nouveau pipeline de rendu et le nouveau moteur de vue d'Angular. Miško Hevery et Kara Erickson nous ont donné un premier regard sur Ivy dans le ng-conf 2018 jour 1 keynote . Dans cet article, nous allons examiner ce qu'est Ivy, comment cela fonctionne, et comment vous pouvez rester à jour sur ses progrès.

Juste une mise en garde: Ivy est encore aux premiers stades d'être activement développé , donc cet article est sujet à changement. Bon, allons-y!

Qu'y a-t-il de si bon à propos d'Ivy

Ivy est donc le nouveau moteur de rendu et de visualisation d'Angular. Qu'est-ce que cela signifie, cependant? Pour le dire simplement, le moteur de vue d'Angular prend les modèles et les composants que nous avons écrits et les traduit en HTML et en JavaScript que le navigateur peut lire et afficher. Cela signifie, par exemple, que vos variables de modèle et les liaisons de données sont restituées à la page avec les données correctes.

Ivy va être la troisième incarnation de ce moteur pour Angular 2+. D'abord, il y avait le compilateur original (qui n'était pas considéré comme un moteur de vue). Ensuite, pour la version 4, l'équipe a présenté le moteur de vue, appelé "renderer2". Ivy est le suivant. Ivy va être plus petit, plus rapide et plus simple . En fait, premières démos de Rob Wormald et Igor Minar d'une application "Hello, World" sont incroyablement minuscules 3.2KB!

 Angular Ivy

Vous pouvez consulter le code pour cette démo ici .

Le thème de plus petit, plus rapide et plus simple s'applique non seulement aux tailles de paquets, mais aussi au processus de compilation. Ceci est principalement dû à deux concepts clés: localité et tremblement d'arbres . Examinons-les de plus près.

Localité

Localité signifie qu'Ivy compile un fichier à la fois. Il ne regarde qu'un composant et son modèle, pas ses dépendances, lors de la génération de la sortie. Compiler un fichier à la fois signifiera de plus petites séries d'instructions, et cela signifiera aussi que nous serons en mesure de faire des builds incrémentielles. Renderer2 n'a pas pu faire cela, car il devait faire une analyse statique de tout le code et générer un fichier appelé metadata.json qui pourrait être utilisé pour générer les instructions de compilation. Ce modèle de données a ensuite été envoyé à l'interpréteur angulaire afin d'être traduit en quelque chose de lisible par le DOM. Ivy compresse ces étapes, et le modèle HTML est transformé en instructions qui sont ensuite lisibles par DOM.

La localité se traduit par plusieurs avantages. En plus d'une compilation plus rapide et de l'absence d'une étape metadata.json ce processus simplifié signifie que les créateurs de bibliothèque pourront envoyer du code AoT (à l'avance compilé) via npm. Essentiellement, nous aurons une équivalence entre AoT et JIT (juste à temps). C'est une bonne nouvelle pour les développeurs – l'une des premières frustrations avec le compilateur et le rendu AoT était que, souvent, le code modèle qui fonctionnait dans JIT ne compilait pas avec AoT.

Un dernier avantage de la localité est qu'il y a plus de programmation, comme les composants d'ordre supérieur et la capacité de générer dynamiquement des modules, des composants ou des canaux. Tout le monde n'aura pas besoin de ce genre de fonctionnalités avancées, mais c'est une étape supplémentaire pour faire d'Angular une plate-forme plus sophistiquée.

Tree-Shaking

Ivy a été conçu dès le départ en pensant aux arbres. "Tree-shaking" signifie enlever les morceaux inutilisés de votre code, ce qui résulte en des paquets plus petits et des temps de chargement plus rapides.

Tree-shaking est fait en utilisant l'analyse statique, qui n'exécute pas réellement votre code. Pour cette raison, il doit prendre en compte tous les scénarios possibles et inclure tout ce qui pourrait être nécessaire dans le bundle. Par exemple, si vous avez importé une fonction mais l'avez cachée derrière une fausse condition, cette fonction sera toujours incluse dans le paquet, même si elle n'est jamais appelée:

 import {myCoolFunction} from './other';

const myCondition = false;

if (myCondition) {
  myCoolFunction (); // ceci sera toujours inclus
} 

Ivy a été conçu dans cet esprit. Dans Renderer2, le code était similaire à une série de conditions qui incluraient différentes parties d'Angular si elles étaient trouvées dans votre application. Ivy, d'un autre côté, divise les choses en fonctions plus petites et plus atomiques. Ces fonctions atomiques rendent le code du moteur de rendu beaucoup plus convivial pour les arborescences, car elles génèrent uniquement le code dont vous avez besoin dans le modèle que vous avez écrit.

Pour le dire simplement: Ivy s'assure que si vous n'utilisez pas quelque chose dans Angular, il n'est pas inclus.

Les fonctions shakable d'Angular incluent:

  • Syntaxe de modèle
  • Injection de dépendance
  • Projection de contenu
  • Directives structurelles
  • Lifecycle hooks
  • ] Pipes
  • Requêtes
  • Auditeurs

Vous pouvez voir pourquoi cette démo "Hello World" est si petite – elle n'a besoin que d'une infime partie des fonctionnalités de base d'Angular!

What Ivy Means to You

La localité et le tremblement des arbres sont des facteurs de changement. Quand nous combinons les deux, nous finissons par:

  • Constructions plus petites
  • Temps de reconstruction plus rapides
  • Développement plus rapide
  • Un pipeline plus simple et plus piratable
  • Code lisible par un humain

Mais quoi d'autre? signifie pour vous? Quand Ivy va vivre, est-ce que ça va tout casser? La réponse est non – vous ne devriez pas remarquer de changements autres que le meilleur processus de construction. Tout le travail de levage sera fait en arrière-plan, totalement transparent pour vous le développeur.

Il y a un autre moyen pour Ivy de vous toucher. En raison de la simplification drastique du pipeline Ivy, les modèles feront partie de la trace de la pile. Vous n'aurez plus à traiter de messages d'erreur cryptiques lorsque quelque chose est cassé dans la syntaxe de votre modèle – vous verrez le numéro de ligne exact où quelque chose ne va pas. Vous pourrez même définir des points d'arrêt dans vos modèles pour les déboguer. Si vous êtes comme moi, c'est un énorme soupir de soulagement.

Normalement, le moteur de rendu n'affecte pas beaucoup le développement au jour le jour. Pour ceux d'entre nous dans le monde réel, cependant, nous avons eu notre juste part de frustrations avec le compilateur AoT lors du passage du développement à la production. Ivy va considérablement améliorer notre expérience de développement en supprimant une grande partie de la «boîte noire» du processus de rendu.

Essayez-le vous-même

Si vous avez envie de fouiller dans un exemple de code, vous pouvez jeter un coup d'œil à l'application todo que Kara a présentée à ng-conf. Juste avertissement: tout ceci est très expérimental et saignant!

Tout d'abord, vous devrez installer le nouveau système de compilation Bazel pour votre système d'exploitation. Suivez les instructions de la documentation pour le mettre en service.

Ensuite, clonez le repo Angular:

 git clone https://github.com/angular/angular.git

Ouvrez un terminal à l'intérieur de ce répertoire et accédez au code de l'application todo:

 git clone https://github.com/angular/angular.git

Exécutez ces deux commandes pour installer les dépendances et exécuter le serveur de développement:

 bazel run @yarn //: fils

bazel run // paquetages / core / test / bundling / todo: devserver 

Vous pouvez aussi lancer cette dernière commande avec : prodserver pour voir la compilation

Poursuivez, essayez de casser les choses et jetez un oeil au fichier instructions.ts pour voir les instructions de compilation générées par Ivy.

 Angular Ivy

Comment rester à jour

Nous avons appris comment fonctionne Ivy, les avantages qu'elle promet, et comment cela va vous affecter. Nous avons également vu un petit échantillon de code. Alors quand Ivy est-il libéré?

Miško a montré cette diapositive de la feuille de route d'Ivy à ng-conf 2018 ("aujourd'hui" signifiait le 18 avril 2018):

 Angular Ivy

voir que les phases de la chronologie de Ivy commencent avec le travail sur l'exécution, qui chevauche le travail sur le compilateur de gabarit. Une fois celles-ci terminées, la version bêta commencera parallèlement au processus de vérification interne de Google. Ce processus de vérification consiste notamment à s'assurer qu'Ivy n'introduit pas de changements importants pour les 600+ applications internes de Google qui utilisent Angular. Cela garantit une rétrocompatibilité complète avant que Ivy ne soit libéré dans la nature.

Jusqu'à ce que Google ait fini de tester Ivy, il peut être testé via le drapeau enableIvy: true de angularCompilerOptions

Pour garder un œil sur les progrès d'Ivy, vous pouvez consulter ce document GitHub et regarder ce numéro de GitHub . Ou, si ce n'est pas assez excitant pour vous, membre de la communauté Oussama Ben Brahim a créé une application Firebase appelée Is Ivy Ready qui fournit une belle petite interface à cette fin. Way to go, Oussama!

Où en savoir plus

Voici quelques autres ressources pour en savoir plus sur les fournisseurs Ivy et treeshakable:


Les commentaires sont désactivés en mode aperçu.
[ad_2]
Source link