 |
| Framework Angular, BELZ DEV (entreprise / société / agence) de développement d'applications web et mobiles, et de progiciel de gestion intégré en Afrique (Sénégal-Dakar) ,Conception site web e-commerce, Conception site web, Comptabilisation, Conception site web php, Logiciel conception site web, Cout conception site web, Développement web java, Prix conception site web, Concevoir une application web ,Web design, Site expert web , Combien coute un site e-commerce, Cycle de développement web ,Créer un site e-commerce avec PHP/MySQL , Cite e-commerce avantages, Développement web freelance ,Business plan site e-commerce, Site e-commerce cahier des charges, Site e-commerce design, Rapport de stage de développement web, Développement site e-commerce, Développement web WordPress , Développement web mobile et multimédia, Utilisation cms Wordpress, Design web responsive , Développement web frontend Logiciel de gestion école avec WordPress, Wordpress boutique en ligne ,Développement mobile Android, Système de gestion , Etape du développement web , Développement web javascript, Développement web python django, Application web responsive, Développement web avancé, Comptabilité de site de développement web, Langage de programmation(Java,Php,Angular,Css,Bootstrap,Ionic,Jee,Jsp,Jsf),Application mobile, développement d'application web et mobile, mobile développement back end, création application J2E, Application Android studio, Application Android Ionic, Framework php laravel, systèmes informatiques, systèmes d'informations, Développement web base de données, Logiciel de gestion. |
Les 5 principaux avantages d'Angular et de TypeScript
Ces derniers mois, la même question m'a été posée à plusieurs reprises au sujet d'Angular lors de formations. Lors de discussions avec des chefs d'entreprise sur la direction que prennent les technologies web, avec des clients que j'ai aidés à définir leur architecture. La même question revient sans arrêt : "Quels sont les plus importants avantages qu'Angular et TypeScript peuvent apporter à nos équipes de conception ?"
C'est une excellente question à poser avant de se lancer dans de nouvelles technologies ou de nouveaux frameworks. La plupart des personnes qui posent la question sont des responsables ou des directeurs technologiques qui souhaitent comprendre les avantages qu'Angular peut offrir à leurs équipes, d'un point de vue technique mais aussi non technique. Ils sont préoccupés par les efforts de maintenance de l'application, la productivité des développeurs, le traitement des demandes de modification, la durée de vie du framework, le rythme de la technologie et bien d'autres choses encore.
Après avoir entendu cette question maintes et maintes fois, il est temps de formuler mes cinq principales raisons d'utiliser Angular et TypeScript. Il y en a certainement BEAUCOUP d'autres que je pourrais énumérer, mais voici mon top 5 des avantages :
Cohérence
Productivité
Maintenabilité
Modularité
Détection précoce des erreurs
Avant d'aller plus loin, je voudrais mentionner que même si
je travaille beaucoup avec Angular (et que je l'apprécie), je ne suis pas du
genre à ne miser que sur un seul framework. Pourquoi ? S'il y a une chose que
j'ai apprise dans la vie, c'est que "one size never fits all". Si
quelqu'un suggère qu'une technologie ou un framework est * toujours * la
meilleure option, j'aime dire : "Allez dans un magasin de chaussures et dites
que vous voulez essayer une paire de chaussures. Si on vous demande quelle
taille vous voulez, répondez simplement que cela n'a pas d'importance et voyez
ce qui se passe ensuite. Le "one size fits all" ne convient pas pour
l'achat de chaussures et il ne convient pas non plus dans le domaine de la
technologie.
Mon entreprise (BelzDev) travaille avec de nombreuses grandes et petites entreprises. Certaines utilisent AngularJS 1.x, d'autres sont passées à Angular v2+, certaines utilisent React, d'autres explorent Vue.js (et d'autres) et certaines utilisent encore jQuery. Cet article s'adresse à ceux qui s'intéressent à Angular et TypeScript. Si vous n'êtes pas intéressé par Angular / TypeScript, cet article n'est probablement pas pour vous.
Commençons par l'avantage numéro 1.
Cohérence
La cohérence du code est un objectif important qui doit toujours être recherché lors de la mise en œuvre du code. Si vous ou votre équipe devez prendre en charge des applications de production, vous savez à quel point la cohérence est importante et pourquoi elle permet une meilleure maintenance. Qu'offre Angular en termes de cohérence ? L'ensemble du framework est basé sur des composants et des services que vous pouvez imaginer comme des blocs de Lego. Tous les composants et services commencent de la même manière. Par exemple, tous les composants Angular effectuent les opérations suivantes :
L'importation des modules ES2015 nécessaires.
La définition d'un décorateur @Component (métadonnées)
Le placement de code dans une classe de composant.
L'image suivante montre comment cela fonctionne :
Cette structure est toujours identique, quel que soit le
composant que vous écrivez. Certes, il y a des aspects que vous pouvez ajouter
(implémentez une interface comme OnInit ou des alternatives correspondantes, si
vous utilisez TypeScript, placez des modèles en ligne ou dans un fichier
séparé, etc.), mais la structure globale d'un composant a toujours l'air
identique. Et c'est une bonne chose, car cela assure une cohérence dès le
départ lorsque les membres de l'équipe commencent à créer des composants.
Toutes les dépendances requises par le service peuvent être "insérées" dans son constructeur, comme le montre l'exemple de code ci-dessus (un fournisseur doit être enregistré pour la dépendance). C'est un bel exemple de cohérence : alors que les composants, services et autres types peuvent certainement créer des instances des objets nécessaires, Angular propose une dépendance intégrée qui insère les objets au moment de l'exécution. Cela assure non seulement la cohérence d'une application, mais permet également d'écraser les objets insérés en fonction de la situation, ce qui peut s'avérer utile dans de nombreux scénarios.
La documentation d'Angular contient également un guide de
style que les équipes peuvent utiliser comme point de départ pour améliorer la
cohérence à l'échelle du projet. Si j'étais directeur, manager, chef d'équipe
ou simplement chargé d'assurer la cohérence d'une équipe, je consacrerais le
temps nécessaire à la création d'un guide de style spécifique à l'équipe pour
chaque framework utilisé.
Productivité
Avec la cohérence, c'est aussi la productivité qui est mise en avant. En principe, les développeurs n'ont pas besoin de se demander s'ils font les choses "de la bonne manière". Les composants et les services ont essentiellement la même apparence, le code d'application réutilisable est stocké dans des classes de service, les modules ES6 / ES2015 organisent les fonctions associées et permettent au code d'être auto-contenu et auto-répondant. Les données sont transmises aux composants à l'aide de propriétés d'entrée et peuvent être transmises à l'aide de propriétés de sortie.
Plus la cohérence est grande, plus la productivité est
élevée. Une fois que vous avez compris comment écrire un composant, vous pouvez
en écrire un autre en suivant les mêmes directives générales et les mêmes
structures de code. Une fois que vous avez compris comment créer une classe de
service, vous pouvez facilement en créer une autre. Vous devenez plus rapide et
meilleur, et si vous combinez tout cela avec la CLI Angular, vous êtes cohérent
tout en étant productif.
Si vous utilisez TypeScript pour créer vos applications
Angular, vous bénéficiez également de plusieurs avantages en termes de
productivité. Dans des éditeurs tels que VS Code et WebStorm, vous avez accès à
une aide au code robuste (Intellisense) pendant la saisie, ce qui facilite la
reconnaissance des types et des fonctions qu'ils offrent. Si vous utilisez des
interfaces TypeScript, vous bénéficiez même d'une aide au code pour les données
JSON renvoyées par les appels à un service back-end. Cela est extrêmement utile
lorsque différents objets de données / modèles sont utilisés et manipulés par
les développeurs. Bien entendu, TypeScript ne fonctionne pas uniquement avec
Angular (vous pouvez l'utiliser avec React, AngularJS, Vue.js, Node.js et
toutes les autres bibliothèques / frameworks JavaScript), mais il s'intègre
bien à Angular.
BELZ DEV (entreprise / société / agence) de
développement d'applications web et mobiles, et de progiciel de gestion intégré
en Afrique (Sénégal-Dakar)
Maintenabilité
J'adore les projets open source, mais je peux aussi
comprendre que les personnes ou les groupes qui dirigent un tel projet doivent
faire face à d'autres aspects de la vie et que certains projets ne peuvent donc
plus être maintenus. Si vous travaillez depuis longtemps avec des projets de
logiciels open source, vous connaissez peut-être le contexte et les histoires
correspondantes. Chaque fois que j'envisage un projet, je regarde le nombre de
contributeurs, la date de la dernière mise à jour et les problèmes afin de voir
s'ils sont traités régulièrement. Je m'efforce de n'utiliser et de ne
recommander que des projets, des modules, des bibliothèques, etc. qui sont
activement soutenus, de sorte que mes projets et ceux de mes clients soient
plus faciles à maintenir et à mettre à jour.
Une équipe dédiée chez Google Building Angular, associée aux contributions open source de la communauté, est pour moi personnellement un ÉNORME argument de vente. Dans le monde JavaScript actuel de "Flavour of the Day", on ne sait évidemment jamais de quoi demain sera fait, c'est pourquoi les fondations solides qui soutiennent le framework me donnent une grande confiance. Un autre bonus est le fait que Google utilise Angular au sein de sa propre entreprise pour le développement d'applications. Vous pensez peut-être qu'il en va de même pour React... et vous avez raison. Toutefois, je souhaite me concentrer ici sur Angular.
Vous pensez peut-être aussi : "Mais Dan - le saut
d'AngularJS 1.x à Angular 2+ a été énorme et définitivement pas bon pour la
maintenabilité de notre application !" Oui, c'est un point valable - même
avec des options de mise à niveau. Le saut entre AngularJS et Angular était un
résultat direct du langage JavaScript, qui a fait d'énormes progrès avec les
fonctionnalités ES6 / ES2015, combinées à de nouvelles fonctionnalités que les
navigateurs modernes peuvent désormais prendre en charge. Si l'équipe Angular
n'avait PAS fait ce saut, nous aurions rapidement qualifié Angular de
"framework Caveman", car il n'aurait pas utilisé les fonctionnalités
les plus récentes et les plus performantes pour soutenir les performances, la
cohérence, la productivité, la maintenabilité et le développement global .
J'étais content quand l'équipe Angular a fait ce pas. Bien sûr, je n'ai pas non
plus de boule de cristal pour prédire l'avenir (si quelqu'un en a une, je
serais heureux de l'emprunter), mais je sais que l'équipe Angular sait très
bien comment les changements apportés au framework affectent les projets
d'entreprise (d'autant plus qu'Angular est aussi largement utilisé par Google
lui-même ). D'après ce que j'ai entendu, je suis convaincu que la sortie de
nouvelles versions aura moins d'impact à l'avenir.
Outre le soutien solide dont bénéficie Angular en coulisses
de la part de l'équipe Angular, la cohérence du code décrite ci-dessus facilite
également la maintenance. Au cours de ma carrière, j'ai pu travailler de
nombreuses années dans le support (j'ai même utilisé le bon vieux pager pendant
de nombreuses années), je suis donc conscient de l'importance d'un code
cohérent et facile à maintenir. Bien sûr, une équipe peut utiliser n'importe
quel framework avec le bon guide de style, la formation et les connaissances
nécessaires pour développer une application cohérente. Cela ne vaut pas
seulement pour Angular, mais aussi pour de nombreux autres frameworks.
Cependant, Angular offre une voie très claire pour l'écriture du code, ce qui,
en fin de compte, simplifie la maintenance. Et lorsque les interlocuteurs
partent en vacances (ou changent de travail), il est facile pour les collègues
de corriger les erreurs trouvées ou de traiter les demandes de modification
sans difficulté.
Le code Angular peut être créé avec TypeScript (ma préférence), ce qui offre de nombreux avantages aux entreprises. Dans le chapitre "Détection précoce des erreurs", je reviendrai sur Typescript et sur certains avantages évidents en matière de maintenance.
Que votre équipe assure elle-même le support d'une
application ou que celui-ci soit assuré par une autre équipe, la possibilité de
créer des applications qui soient cohérentes et faciles à maintenir, et qui
utilisent un framework soutenu par une équipe de développement à temps plein
combinée à une solide communauté open source, sont des priorités clés pour la
plupart des entreprises.
Modularité
Avec Angular, il s'agit d'organiser le code en "buckets". Tout ce que vous créez, qu'il s'agisse de composants, de services, de pipes ou d'instructions, doit être organisé dans un ou plusieurs buckets. Si vous devez souvent manipuler du code spaghetti dans votre organisation, le travail avec Angular et TypeScript a un effet très rafraîchissant. Les "buckets" auxquels je fais référence sont appelés "modules" dans le monde Angular. Ils permettent d'organiser les fonctionnalités de l'application et de les diviser en fonctions et en sections réutilisables. Les modules offrent également de nombreux autres avantages, comme la lenteur du chargement lorsqu'une ou plusieurs fonctionnalités de l'application doivent être chargées en arrière-plan ou à la demande.
Les applications d'entreprise peuvent devenir très volumineuses et la possibilité de répartir le travail entre plusieurs membres de l'équipe tout en gardant un œil sur la qualité du code est définitivement réalisable avec Angular. Les modules peuvent être utilisés pour ajouter une organisation à une application, de la même manière que les paquets et les espaces de noms dans d'autres langages / frameworks comme Java ou .NET. J'admets volontiers qu'une bonne compréhension des modules Angular et de leur utilisation est essentielle pour une utilisation réussie. Mais dès qu'une équipe peut développer des modules en conséquence, les avantages de la division du travail, de la cohérence du code, de la productivité et de la maintenance se font pleinement sentir.
Détection précoce des erreurs
Angular a été créé avec TypeScript, ce qui présente de
nombreux avantages, comme par exemple: :
TypeScript est un surensemble de JavaScript. TypeScript
n'est pas un langage indépendant comme CoffeeScript, Dart ou d'autres, et est
donc particulièrement puissant. Cela signifie que je peux utiliser du code
JavaScript ES5 ou ES2015+ existant, le mettre dans un fichier TypeScript .ts
(ou même travailler directement avec le fichier .js), et le code fonctionne
parfaitement. TypeScript compile / convertit simplement le code jusqu'à ES5 ou
ES2015, selon ce que vous configurez.
TypeScript prend en charge les principales fonctions ES2015
ainsi que les fonctions ES2016 / ES2017 telles que les décorateurs, Async /
await et autres. J'aime le considérer comme ES2015 ++. Vous trouverez les
fonctions prises en charge sur http://kangax.github.io/compat-table/es6.
TypeScript offre un support pour les types (éléments de
base, interfaces et autres types personnalisés). Oui - ce n'est pas pour rien
que TypeScript a le mot "type" dans son nom. Bien que les types
soient facultatifs, ils sont fortement recommandés si vous souhaitez détecter
les erreurs à un stade précoce du cycle de développement, en particulier pour
les grandes applications. Grâce à eux, il est beaucoup plus facile de
reconnaître si quelque chose est passé ou mal utilisé.
Le code TypeScript peut être débogué directement dans le
navigateur (ou dans un éditeur), à condition que les fichiers d'association
correspondants soient créés pendant la phase de création.
Avec TypeScript, vous pouvez utiliser des classes et/ou des
techniques de programmation fonctionnelle. Vous n'êtes pas limité à une seule
possibilité, et vous pouvez désactiver toutes les fonctions spécifiques à
TypeScript.
Je pourrais énumérer de nombreuses autres fonctions (vous en trouverez d'autres sur le site TypeScript), mais en fin de compte, le framework Angular est créé avec TypeScript. Si vous l'utilisez dans vos projets (ce que je recommande vivement), vous pouvez identifier les erreurs très tôt dans le cycle de développement ou lors de la réalisation de travaux de maintenance. En ce qui concerne les applications d'entreprise, TypeScript fournit des "garde-fous" pour votre code JavaScript. Vous vous assurez ainsi que les développeurs et les équipes ne "passent pas par-dessus bord" lors de la création d'applications.
Outre les avantages offerts par TypeScript, Angular a été
conçu dans un souci de testabilité. La CLI Angular fait du processus de test
des composants et de test de bout en bout un jeu d'enfant (elle utilise par
défaut Karma et Jasmine pour les tests de composants, mais vous pouvez utiliser
les outils de test de votre choix). Il suffit de taper "ng test" dans
la ligne de commande pour que tous les tests du projet soient exécutés. La
commande "ng generate" génère automatiquement un fichier de
spécifications pour vous lorsque vous créez un composant, un service, etc. Si
votre entreprise utilise des tests unitaires, c'est définitivement un avantage
supplémentaire qui vous aidera à détecter les erreurs de développement à un
stade précoce.
Résumé
Il y a certainement beaucoup d'autres avantages qui pourraient être discutés, mais j'ai voulu me concentrer sur cinq d'entre eux qui me semblent importants. Est-ce que ce sont les "bons" avantages sur lesquels vous pouvez vous concentrer ? C'est évidemment une question très subjective. Pour mon entreprise et pour de nombreuses autres entreprises avec lesquelles nous travaillons, la cohérence, la maintenabilité, la productivité, la modularité et la possibilité de détecter les erreurs à un stade précoce figurent en tête de liste.
Il est important de noter que bon nombre de ces avantages
peuvent également être obtenus avec d'autres bibliothèques / frameworks
JavaScript ("one size does not fit all"). L'objectif de cet article
n'est PAS de vous convaincre qu'Angular est le seul framework côté client à
offrir ces avantages. Il vise plutôt à aider ceux qui envisagent Angular et
TypeScript à comprendre certains de leurs principaux avantages.
BELZ DEV (entreprise / société / agence) de
développement d'applications web et mobiles, et de progiciel de gestion intégré
en Afrique (Sénégal-Dakar)
Enregistrer un commentaire