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.

angular-2-netdevices

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és à Angular 2?

angular-2-google-smartphone

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

angular-2-vs-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

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.

Nos domaines technologiques de prédilection (mais pas seulement) :  Fullstack JS, React Native, ReactJS, Nodejs, Angular 1&2, Ionic, Cordova, Redux… et les outils associés : Stack mean, Jira, Jenkins, Slack, Trello, intégration continue, TDD

Pour plus d’informations, n’hésitez pas à nous contacter!

[wpforms id="9980" title="false"]
<div class="wpforms-container wpforms-container-full" id="wpforms-9980"><form id="wpforms-form-9980" class="wpforms-validate wpforms-form wpforms-ajax-form" data-formid="9980" method="post" enctype="multipart/form-data" action="/angular-2/" data-token="29dab55f0ec328adeaaf0331fbcda78e"><noscript class="wpforms-error-noscript">Veuillez activer JavaScript dans votre navigateur pour remplir ce formulaire.</noscript><div class="wpforms-field-container"><div id="wpforms-9980-field_3-container" class="wpforms-field wpforms-field-layout" data-field-id="3"><label class="wpforms-field-label wpforms-label-hide" for="wpforms-9980-field_3">Layout</label><div class="wpforms-field-layout-columns wpforms-field-layout-preset-50-50"><div class="wpforms-layout-column wpforms-layout-column-50"><div id="wpforms-9980-field_0-container" class="wpforms-field wpforms-field-name" data-field-id="0"><label class="wpforms-field-label" for="wpforms-9980-field_0">Résumé / Pitch du projet <span class="wpforms-required-label">*</span></label><input type="text" id="wpforms-9980-field_0" class="wpforms-field-small wpforms-field-required" name="wpforms[fields][0]" required></div><div id="wpforms-9980-field_16-container" class="wpforms-field wpforms-field-radio wpforms-conditional-trigger" data-field-id="16"><label class="wpforms-field-label" for="wpforms-9980-field_16">J&#039;ai une description détaillée du projet</label><ul id="wpforms-9980-field_16"><li class="choice-1 depth-1"><input type="radio" id="wpforms-9980-field_16_1" name="wpforms[fields][16]" value="Oui" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_16_1">Oui</label></li><li class="choice-2 depth-1"><input type="radio" id="wpforms-9980-field_16_2" name="wpforms[fields][16]" value="Non" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_16_2">Non</label></li></ul></div><div id="wpforms-9980-field_18-container" class="wpforms-field wpforms-field-checkbox wpforms-conditional-field wpforms-conditional-show" data-field-id="18" style="display:none;"><label class="wpforms-field-label" for="wpforms-9980-field_18">Vous avez des technos en tête ?</label><ul id="wpforms-9980-field_18"><li class="choice-1 depth-1"><input type="checkbox" id="wpforms-9980-field_18_1" name="wpforms[fields][18][]" value="fullstackJS / python" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_18_1">fullstackJS / python</label></li><li class="choice-2 depth-1"><input type="checkbox" id="wpforms-9980-field_18_2" name="wpforms[fields][18][]" value="nocode bubble" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_18_2">nocode bubble</label></li><li class="choice-3 depth-1"><input type="checkbox" id="wpforms-9980-field_18_3" name="wpforms[fields][18][]" value="autre" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_18_3">autre</label></li></ul></div><div id="wpforms-9980-field_19-container" class="wpforms-field wpforms-field-checkbox wpforms-conditional-field wpforms-conditional-show" data-field-id="19" style="display:none;"><label class="wpforms-field-label" for="wpforms-9980-field_19">Type de projet</label><ul id="wpforms-9980-field_19"><li class="choice-1 depth-1"><input type="checkbox" id="wpforms-9980-field_19_1" name="wpforms[fields][19][]" value="Applications web / mobiles" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_19_1">Applications web / mobiles</label></li><li class="choice-2 depth-1"><input type="checkbox" id="wpforms-9980-field_19_2" name="wpforms[fields][19][]" value="Projet data, IA " ><label class="wpforms-field-label-inline" for="wpforms-9980-field_19_2">Projet data, IA </label></li><li class="choice-3 depth-1"><input type="checkbox" id="wpforms-9980-field_19_3" name="wpforms[fields][19][]" value="Site vitrine / e-commerce" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_19_3">Site vitrine / e-commerce</label></li></ul></div><div id="wpforms-9980-field_12-container" class="wpforms-field wpforms-field-textarea wpforms-conditional-field wpforms-conditional-show" data-field-id="12" style="display:none;"><label class="wpforms-field-label" for="wpforms-9980-field_12">Description détaillée de votre projet </label><textarea id="wpforms-9980-field_12" class="wpforms-field-medium" name="wpforms[fields][12]" ></textarea></div></div><div class="wpforms-layout-column wpforms-layout-column-50"><div id="wpforms-9980-field_1-container" class="wpforms-field wpforms-field-email wpforms-one-third" data-field-id="1"><label class="wpforms-field-label" for="wpforms-9980-field_1">Votre e-mail <span class="wpforms-required-label">*</span></label><input type="email" id="wpforms-9980-field_1" class="wpforms-field-small wpforms-field-required" name="wpforms[fields][1]" required></div><div id="wpforms-9980-field_17-container" class="wpforms-field wpforms-field-radio" data-field-id="17"><label class="wpforms-field-label" for="wpforms-9980-field_17">Signer un accord de confidentialité ?</label><ul id="wpforms-9980-field_17"><li class="choice-1 depth-1"><input type="radio" id="wpforms-9980-field_17_1" name="wpforms[fields][17]" value="Oui" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_17_1">Oui</label></li><li class="choice-2 depth-1"><input type="radio" id="wpforms-9980-field_17_2" name="wpforms[fields][17]" value="Non" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_17_2">Non</label></li></ul></div></div></div></div><div id="wpforms-9980-field_22-container" class="wpforms-field wpforms-field-checkbox" data-field-id="22"><ul id="wpforms-9980-field_22"><li class="choice-1 depth-1 wpforms-selected"><input type="checkbox" id="wpforms-9980-field_22_1" name="wpforms[fields][22][]" value="Recevoir les newsletters personnalisées" checked='checked'><label class="wpforms-field-label-inline" for="wpforms-9980-field_22_1">Recevoir les newsletters personnalisées</label></li></ul></div></div><div class="wpforms-submit-container"><input type="hidden" name="wpforms[id]" value="9980"><input type="hidden" name="wpforms[author]" value="1"><input type="hidden" name="wpforms[post_id]" value="5435"><button type="submit" name="wpforms[submit]" id="wpforms-submit-9980" class="wpforms-submit" data-alt-text="Envoi..." data-submit-text="Envoyer" aria-live="assertive" value="wpforms-submit">Envoyer</button><img src="https://www.netdevices.fr/wp-content/plugins/wpforms/assets/images/submit-spin.svg" class="wpforms-submit-spinner" style="display: none;" width="26" height="26" alt="Chargement en cours"></div></form></div> <!-- .wpforms-container -->