Angular 2

Bonjour à tous, c’est Nebil de NetDevices !

Aujourd’hui je vais vous parler d’Angular 2. Cela fait déjà 1 an que nous sommes à la version 1.0, sachant que la toute première version d’Angular  est sortie en 2009.

Introduction à Angular et Angular 2

Angular est un Framework (“cadre de fonction”) Front end en open source. Contrairement au back end qui va nécessiter une base de donnée, le front end va plutôt être lié au design, à l’interface de la plateforme.

Quel est l’objectif principal d’Angular ?

Si l’on devait faire une allégorie au corps humain, la structure d’un site web pourrait être définie de la façon suivante:

• le squelette qui pourrait correspondre au code HTML
• “l’habillage”, le design qui serait possible grâce au CSS
• “l’action”, les interactions avec l’interface, qui seraient plutôt liées au langage Javascript

l’UX va bien évidemment dépendre de ces facteurs. Un des objectifs principaux d’Angular va ici être d’améliorer l’interaction entre Javascript et le langage HTML

Pourquoi être passé à Angular 2 ?

Depuis quelques années nous assistons à une mutation accélérée d’internet et des objets connectés. En effet internet est maintenant “cross device” (smartphones, tablettes, iots…). De plus, nous n’avons plus la même utilisation des navigateurs. Nous ne cessons de développer de nouvelles fonctions, extensions afin d’élargir les possibilités. Cependant ceci a un impact : le ralentissement du navigateur. Angular 1 à l’origine était trop “attaché” au navigateur donc pas suffisamment performant pour l’utilisation que l’on a d’internet sur des supports mobiles par exemple. 

Lorsque les ingénieurs de Google ont imaginé Angular 2, ils se sont projetés vers l’avenir. Ils ont imaginé que l’on serait plus mobiles. Il faudrait donc être “cross plateforme”, minimiser l’attachement au navigateur ce qui implique que l’on ne serait plus aussi contraint de suivre les mises à jour du navigateur. Ce détail va permettre plus de rapidité.

Il y a un réel contraste entre Angular 1 et 2, ne serait-ce que pour l’apprentissage. Angular 2 est bien sûr plus complexe. Cette complexité est due au fait que l’utilisation de cet outil nécessite parallèlement une connaissance de Typescript et Rxjs (Reactive Extensions). Typescript permet d’utiliser les nouvelles technologies en Javascript. Il va avoir un rôle d’intermédiaire en rendant les nouvelles technos compatibles avec les anciennes, ce qui permet de ne pas subir la contrainte des mises à jour. Rx va quant à lui se charger de la gestion des données.

Angular 2 et React

Il existe un réel débat entre Angular 2 conçu par Google et React de facebook en termes de performances. 

React propose une version “Virtual DOM” et Angular2 une autre version “Shadow DOM” .  Ils ont cependant tous deux pour objectif de limiter la dépendance du device au DOM grâce à une abstraction partielle, voire quasi totale de celui-ci.

Le virtual DOM va correspondre à une copie virtuelle du DOM, considérée comme beaucoup plus légère que ce dernier. Lors d’une modification de celui-ci le développeur devra cependant procéder à une mise à jour régulière du DOM.

Angular 2 va en comparaison se baser sur le « shadow DOM » qui consiste en une abstraction partielle du DOM. On procède donc à des modifications directes du DOM, ce qui évite de surveiller constamment les mises à jours. Ceci est d’autant plus simple grâce à Typescript.

L’intérêt d’une abstration du DOM

En de simples termes, le DOM (Document Object Model) est une API (Interface de Programmation des Applications) qui permet le développement, la gestion et une bonne utilisation de documents en langage HTML et XML.

Le DOM était à l’origine pensé  pour les navigateurs d’ordinateurs. Ceci implique (dès que l’on change de device) une limite  au niveau de la masse de données stockées, donc un impact considérable sur la vitesse et les performances. Une abstraction du DOM va justement permettre d’inverser cette tendance et de rendre d’un côté la programmation des applications beaucoup plus simple, et de l’autre une amélioration de l’UX/UI.

Bien que nous utilisions ces 2 technologies chez NetDevices, j’ai choisi de me spécialiser dans Angular 2 car j’utilise Meteor.js. Ceci me permet ainsi de faire du fullstack en temps réel.

Angular 2 chez NetDevices

Nous utilisons régulièrement Angular 2 chez NetDevices lors de la création d’applications web et mobiles. Nous l’utilisons d’ailleurs sur des projets pour deux de nos clients.  consistant à créer un back office et une application mobile lui permettant de diffuser des radios et annonces dans ses magasins. Pour ces projet, nous associons Angular 2 à Cordova et Ionic2.

NetDevices est une équipe composée de chefs de projets méthodiques, de développeurs geeks, d’intégrateurs / webdesigners, tous passionnés du développement web et des nouvelles technologies.Avec nos solutions Web2Mobile, Sharry (market place mobile), et notre partenariat avec IBM, nous savons répondre à vos besoins du plus simple au plus complexe.Pour plus d’informations, n’hésitez pas à nous contacter!