Contenu
- 01. Exécutez une vérification de version
- 02. Installez Angular
- 03. Créer un squelette de projet
- 04. Charge différentielle du faisceau
- 05. ... et voir les résultats
- 06. Créer un web worker
- 07. Explorez le code
- 08. Mettre en place des échafaudages
- 09. Ne vous inquiétez pas du manque de constructeur
- 10. Exécutez une petite compilation
- 11. ... et recherchez la sortie
- 12. Se mettre au travail
- 13. Explorez Ivy
- 14. Essayez le traitement ng modifié
- 15. Profitez d'une migration améliorée
- 16. Explorer le contrôle de l'espace de travail
- 17. Accélérer le processus
- 18. Évitez les morts-vivants
- 19. Consultez le journal des modifications
Angular 8 est la dernière version d'Angular de Google - l'un des meilleurs frameworks JavaScript disponibles. Dans cet article, nous vous présenterons les particularités d’Angular 8 et vous montrerons comment commencer. Tout d'abord, un bref retour sur ce qui s'est passé avec le cadre jusqu'à présent.
L'introduction d'Angular a conduit à un changement de paradigme dans le développement Web: alors que la plupart des bibliothèques se limitaient à fournir une assistance aux développeurs avec un impact architectural relativement limité, l'équipe de développeurs d'Angular est allée dans l'autre direction. Leur produit vous oblige à utiliser une architecture spécifique, avec des écarts allant de difficile à inutile sur le plan commercial. En fait, la plupart du code angulaire passe par une chaîne d'outils de transpilation relativement complexe avant même qu'il n'atteigne le navigateur.
En raison de l'immense succès d'Angular, à la fois à l'intérieur et à l'extérieur de Google Inc, le développement s'est - dans l'ensemble - stabilisé. Cela signifie que les changements de code de rupture sont peu nombreux, tandis que les mises à niveau semestrielles sont axées sur l'adaptation du cadre aux changements dans le paysage de la navigation Web.
Dans le cas d'Angular 8, par exemple, un nouveau compilateur JavaScript est déployé (bien que toujours expérimentalement). Il optimise le code de compatibilité généré pour qu'il soit nettement plus petit et plus rapide au détriment des navigateurs plus anciens. De plus, la prise en charge de Web Worker est intégrée pour augmenter la capacité de traitement d’Angular. En bref, il y a beaucoup à voir - alors plongeons-nous dans le vif du sujet.
Si vous préférez concevoir un site sans code, essayez l'un de ces outils de création de site Web simples. Et pour rendre les choses encore plus fluides, faites en sorte que votre service d'hébergement Web fonctionne correctement.
01. Exécutez une vérification de version
La chaîne d'outils d'Angular vit dans l'environnement NodeJS. Au moment d'écrire ces lignes, Node.js 10.9 ou supérieur est nécessaire - si vous vous trouvez sur une version plus ancienne, visitez le site Web Node.js et obtenez une mise à niveau. Le code ci-dessous montre l'état de la version sur cette machine.
tamhan @ TAMHAN18: ~ $ node -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0
02. Installez Angular
La chaîne d'outils d'Angular réside dans un utilitaire de ligne de commande nommé ng. Il peut être installé via le NPM bien connu.
tamhan @ TAMHAN18: ~ $ sudo npm install -g @ angular / cli tamhan @ TAMHAN18: ~ $ ng version
Veillez à répondre à la question montrée dans l'image ci-dessous.
Obtenir les informations de version de l'outil est assez difficile - non seulement la syntaxe est unique, mais la sortie est également détaillée (voir l'image ci-dessous).
03. Créer un squelette de projet
ng génère l'échafaudage angulaire pour nous. Dans les étapes suivantes, nous voulons ajouter un routage et utiliser Sass pour la transpilation CSS. Si le déploiement échoue pour une raison quelconque, videz le répertoire de travail et redémarrez ng avec les droits de superutilisateur.
tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng nouveau test de travail
04. Charge différentielle du faisceau
La nouvelle version d'Angular optimise le code de compatibilité descendante pour un impact réduit - un fichier appelé liste de navigateurs vous permet de décider quels navigateurs doivent être pris en charge. Ouvert liste de navigateurs et supprimer le mot ne pas devant IE 9 à IE11.
. . . > 0.5% 2 dernières versions Firefox ESR not dead IE 9-11 # Pour le support IE 9-11, supprimez "not".
05. ... et voir les résultats
Commandez une compilation du projet, placez-vous dans le dossier de distribution et purgez les fichiers cartographiques inutiles.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng build tamhan @ TAMHAN18: ~ / angularspace / workertest / dist / workertest $ ls
Appelez l'arbre pour voir les résultats - ng crée plusieurs versions de divers fichiers de code (voir l'image ci-dessous).
06. Créer un web worker
Les web workers laissent JavaScript entrer dans la dernière frontière des applications natives: le traitement massivement parallèle des tâches. Avec Angular 8, un travailleur Web peut être créé directement dans le confort du ng utilitaire de ligne de commande.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng generate web-worker myworker CREATE tsconfig.worker.json (212 octets) CREATE src / app / myworker.worker.ts (157 octets) UPDATE tsconfig.app.json (236 octets) ) MISE À JOUR angular.json (3640 octets)
07. Explorez le code
ngLe résultat de la vidéo est susceptible de sembler intimidant à première vue. Ouverture du fichier src / app / myworker.worker.ts dans un éditeur de code de choix révèle du code que vous devez bien connaître WebWorker spécification. En principe, le travailleur reçoit les messages et les traite au besoin.
/// reference lib = "webworker" /> addEventListener (’message’, ({data}) => {const response = `worker response to $ {data}`; postMessage (response);});
08. Mettre en place des échafaudages
Les applications angulaires sont constituées de composants. Il est préférable de renvoyer notre travailleur Web dans le AppComponent, qui est développé pour inclure un auditeur pour le OnInit un événement. Pour l'instant, il n'émettra que des informations d'état.
import {Component, OnInit} depuis ’@ angular / core’; Classe d'exportation @Component ({...}) AppComponent implémente OnInit {title = 'workertest'; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}
09. Ne vous inquiétez pas du manque de constructeur
Les développeurs TypeScript expérimentés se demandent pourquoi notre code n'utilise pas le constructeur fourni par le langage de programmation. La raison en est que ngOnInit est un événement de cycle de vie qui est déclenché chaque fois qu'un événement d'initialisation a lieu - cela n'a pas besoin d'être corrélé à l'appel de classe.
10. Exécutez une petite compilation
À ce stade, le programme est prêt à être exécuté. Nous l'exécuterons à partir du serveur à l'intérieur de ng, qui peut être appelée via la commande serve. Un aspect intéressant de cette approche est que le programme détecte les changements et recompile le projet à la volée.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng serve
Jetez un œil à la figure pour voir cela en action dans l'image ci-dessous.
11. ... et recherchez la sortie
ng servir met l'adresse de son serveur Web local, qui est généralement http: // localhost: 4200 /. Ouvrez la page Web et ouvrez les outils de développement pour voir la sortie d'état. Garde en tête que console.log renvoie les données vers la console du navigateur et laisse la console de l'instance NodeJS intacte.
12. Se mettre au travail
À ce stade, nous créons une instance du worker et lui fournissons un message. Ses résultats sont ensuite affichés dans la console du navigateur.
if (typeof Worker! == 'undefined') {// Créer un nouveau const worker = new Worker ('./ myworker.worker', {type: 'module'}); worker.onmessage = ({data}) => {console.log ('page got message: $ {data }'); }; worker.postMessage ("bonjour"); } else {console.log ("Pas de support de travail"); }
13. Explorez Ivy
Les futures versions d'Angular utiliseront un compilateur plus avancé, conduisant à des vues encore plus petites. Bien que le produit ne soit pas encore terminé, un squelette compatible avec le lierre peut être généré via ng new ivy-project - enable-ivy. Vous pouvez également modifier les paramètres du compilateur comme indiqué dans l'extrait de code.
"angularCompilerOptions": {"enableIvy": true}
Un mot d'avertissement: Ivy conduit à des réductions de taille étonnantes, mais ce n'est pas gratuit. Le produit n'a pas encore stabilisé, il n'est donc pas recommandé de l'utiliser dans des environnements productifs.
14. Essayez le traitement ng modifié
Angulaire ng L'outil de ligne de commande a utilisé des scripts enfants en interne pendant un certain temps. Angular 8 augmente la mise en ce sens que vous pouvez désormais également utiliser cette fonction pour exécuter vos propres tâches au fur et à mesure que votre application est assemblée et compilée.
"architect": {"build": {"builder": "@ angular-devkit / build-angular: browser",
Une application soignée de ng les scripts impliquent de télécharger directement des applications sur des services cloud. Le référentiel Git fournit un script utile qui télécharge votre travail sur un compte Firebase.
15. Profitez d'une migration améliorée
Les développeurs qui quittent Angular 1.x, également connu sous le nom d'AngularJS, ont eu une bonne part de problèmes pour que le navigateur fonctionne correctement dans des applications «combinées». Le nouveau service de localisation unifiée vise à rendre ce processus plus fluide.
16. Explorer le contrôle de l'espace de travail
Les grands projets bénéficient de la possibilité de modifier dynamiquement la structure de l'espace de travail. Cela se fait via la nouvelle API Workspace introduite dans Angular 8.0 - l'extrait de code accompagnant cette étape fournit un aperçu rapide du comportement.
fonction async démontrer () {const host = workspaces. createWorkspaceHost (nouveau NodeJsSyncHost ()); const workspace = attendre les espaces de travail. readWorkspace (’chemin / vers / espace de travail / répertoire /’, hôte); projet const = espace de travail.projects. get ("mon-application"); const buildTarget = project.targets. get ('build'); buildTarget.options.optimization = true; attendre workspaces.writeWorkspace (espace de travail, hôte); }
17. Accélérer le processus
Construire de grandes bases de code JavaScript devient fastidieux. Les futures versions d'AngularJS utiliseront le système de compilation Bazel de Google pour accélérer le processus - malheureusement, au moment de la rédaction de cet article, il n'était pas prêt pour les heures de grande écoute.
18. Évitez les morts-vivants
Même si Google prend un soin extrême de ne pas casser le code, certaines fonctionnalités doivent simplement être supprimées car elles ne sont plus nécessaires. Consultez cette liste d'amortissements pour en savoir plus sur les fonctionnalités à éviter.
19. Consultez le journal des modifications
Comme toujours, un article ne peut jamais rendre justice à une version complète. Heureusement, ce journal des modifications fournit une liste détaillée de tous les changements - juste au cas où vous auriez envie de vérifier le pouls d'une fonctionnalité qui vous est particulièrement chère.
Vous avez beaucoup de fichiers prêts à être téléchargés sur votre site? Sauvegardez-les dans le stockage cloud le plus fiable.
Cet article a été initialement publié dans le magazine de conception Web créative Concepteur Web.
