News spéciale nouveau site WEB-ATRIO, vous trouverez dans cette news les caractéristiques techniques du nouveau site. Nous vous partagerons également des éléments de code mis en place sur le site pour améliorer vos projets.

Spécifications techniques

Technos en Front	Angular 11 et Angular Universal
Technos en Back	AWS Lambda
Serveurs	AutoScaling via AWS Elastic Beanstalk
Déploiements	Automatisés via AWS CLI
Techniques d’optimisations	Server Side RenderingPré-rendu des pagesOptimisation CLP

Angular Universal

Ce nouveau site comporte quelques petites particularités techniques, des pépites d’optimisation je dirais ! Pour commencer grâce à Angular Universal le rendu est fait côté serveur,  le moteur de recherche n’a plus besoin de comprendre le Javascript, vous le faites pour lui, et ça c’est top car le référencement Javascript n’est pas encore aussi fiable qu’un rendu serveur comme le PHP par exemple. Angular Universal se base sur un serveur Express.js ce qui nous a permis de gérer les redirections d’url à un niveau facilement maintenable.

Angular Universal arrive avec son lot de fonctionnalités pour modifier le titre, ou les metadata. Cela entraîne régulièrement des petites modifications du code car comme le javascript est exécuté côté serveur, certaines fonctionnalités ne sont pas disponibles à ce moment-là. Exemple avec l’élément window ou document qui représente l’accès au navigateur, on peut tester ça avec une simple petite fonction :

import {isPlatformBrowser} from ‘@angular/common’;

constructor(@Inject(PLATFORM_ID) platformId: {}) {

    if (isPlatformBrowser(platformId))

        const myDiv = document.getElementById(‘#Yeah’)

}

Au final cela ajoute une toute petite complexité qui nous oblige à savoir à quel moment le code à le droit d’être exécuté mais la valeur ajoutée est importante, il est donc idiot de s’en passer !

Afin d’optimiser le poids des pages, il est important de bien organiser son code avec Angular. Pour ce faire, on peut considérer que notre page est un “Module” qui embarque son composant. Cela permet de différer le chargement de javascript qui ne serait pas utile à la page que l’on souhaite afficher. Cela s’appelle du LazyLoading

Lors de la déclaration d’une route il suffit d’utiliser la méthode loadChildren() qui prend un callback d’un observable, exemple :

{

    path: ‘SSII/contact’,

    loadChildren: () =>  import(‘./modules/contact-us/contact-us.module’)

        .then( m => m.ContactUsModule )

}

Pour les personnes qui connaissent Angular vous faites certainement déjà cela souvent mais cette news s’adresse à tout le monde !

Animation 3D sur les AS de Coeur

Pour les plus attentifs, vous avez dû voir ces derniers jours que nous avons déployé une nouvelle version de l’animation 3D. La carte s’anime maintenant en continu avec un changement de comportement en cas de survol.

Si vous souhaitez reproduire cela sur vos projets, je vous mets à disposition le code source. Afin de le rendre facilement réutilisable il à été développé en Javascript  Natif dans un service Angular. Vous pouvez donc très facilement l’adapter pour vos projets :

Code source JS : https://pastebin.com/7QTE6Ubb

Code source CSS : https://pastebin.com/qwhrBxtT

Pour l’utiliser il vous suffit de charger les fichiers JS et CSS dans votre projet Angular (vous devrez peut être adapter un peu le CSS en fonction du résultat attendu et des dimensions de ce que vous souhaitez animer)

Ensuite il faut instancier notre service une fois que la vue à été rendue (Cycle de vie ngAfterViewInit)

 ngAfterViewInit(): void {

    this.pcS = new PerspectiveCardService(

       document.getElementById(‘myCard’)

       ),{intensity: 45});

    this.pcS.playing = true;

  }

Vous pouvez passer différents paramètres comme le niveau de Zoom , l’intensité, l’inclinaison etc. je vous laisse découvrir cela comme vous le voulez.

AWS Spécial : Comment automatiser le déploiement sur AWS Elastic Beanstalk

Pour commencer vous devez avoir un environnement configuré et fonctionnel, je ne montre pas comment créer l’environnement en CLI ici mais seulement l’automatisation du déploiement continu.

Vous devez également avoir installé AWS CLI et configuré vos identifiants de connexion.

Ce script n’est pour l’instant compatible que avec PowerShell.

Pour commencer je crée un numéro de version en date du jour pour identifier mon livrable

$VERSION = Get-Date -format ‘dd-MM-yyyy_hh:mm’

Je crée un zip avec 7zip de mon répertoire dist compilé par Angular, je supprime l’ancienne version si nécessaire

cd dist && del dist.zip && 7z a -tzip dist.zip ./** && cd ..

Il faut ensuite uploader le zip sur un bucket AWS S3 (espace de stockage statique) sur Amazon Web Service. C’est une subtilité de beanstalk, il n’est pas possible de lui envoyer directement le zip.

aws s3 cp dist/dist.zip s3://web-atrio-beyond-coding-deploy-version/deploy.zip

la partie en jaune c’est le nom de votre bucket S3 et en vert le nom du fichier final disponible sur le bucket.

Ensuite il faut créer une nouvelle version du livrable pour notre environnement beanstalk. Pour ce faire, vous pouvez exécuter la commande suivante en respectant votre configuration.

aws elasticbeanstalk create-application-version –application-name ‘WKR-WA’ –version-label $VERSION –source-bundle S3Bucket=’web-atrio-beyond-coding-deploy-version’,S3Key=’deploy.zip’

WKR-WA c’est le nom de mon application beanstalk je lui indique la mise en ligne d’une nouvelle version de l’application, disponible sur S3.

Ensuite, Beanstalk est configuré en environnement, nous allons donc lui indiquer quelle version est déployée sur quel environnement. Notre version est stockée dans la variable $VERSION initialisée en première action.

aws elasticbeanstalk update-environment –application-name ‘WKR-WA’ –environment-name ‘WKR-PROD’ –version-label $VERSION

Et la c’est magique, si vous allez sur la console AWS Beanstalk et sur votre environnement vous verrez que le déploiement est en cours, cela est très rapide et prend généralement moins d’une minute.

Quelques méthodes SCSS bien utiles.

Pour avoir un code responsive le plus efficace possible nous avons écrit toutes nos règles en pixel ce qui permet d’être pixel perfect par rapport à la maquette, ce n’est cependant pas très adaptatif. Pour ce faire, nous avons développé un convertisseur  de pixels vers l’unité REM.

Qu’est ce que l’unité REM ?

Cette unité encore peu utilisée est relative au tout premier élément d’une page web, la balise (root).

La magie de cette merveille technologique intervient quand on s’attaque à des projets « responsive » et sur des clients mobile plus précisément. Etant donnée que notre taille sera toujours relative à l’élément parent et avec pour base la taille de la typographie l’ensemble du contenu va s’adapter en fonction de la font-size. 

Baisser ou agrandir la police permettra d’avoir par exemple des paddings et des margins proportionnels et de ne pas avoir à adapter spécifiquement ces dimensions pour faire du responsive.

Nous avons également bien modifié notre façon de faire du CSS, il n’y a aucune librairie sur ce site. Adieu Twitter Bootstrap, 99% du temps ce n’est pas nécessaire sur vos projets. Mais les grilles c’est cool quand même non ? Pour ce faire, on a développé notre propre système de grille.

Et vous savez quoi ? Il est encore plus optimisé que bootstrap car le rendu est fait en un minimum de lignes de code. De plus, on écrit directement nos conditions d’affichage dans la classe en se servant du système d’inclusion de propriété de sass.

Qu’est ce que ça donne au final ? Ce morceau de code, facile à utiliser et compréhensible par tous sans avoir à connaître le système :

.__maClass{

     …code divers

     @include media(‘>=desktop’){

         height: calc-rem(40px);

     }

}

Même pas besoin d’apprendre à utiliser les Médias queries. Nous mettrons à disposition ce système de grilles prochainement après avoir factorisé un peu de code !

Un autre truc qui nous sert pas mal c’est la conversion de couleurs hexadécimal en filtre SVG ( bonjour la compatibilité IE6 )

Pour ce faire je vous donne la mixin développée par Timothée Fay

@mixin recolor($color: #000, $opacity: 1) {

  $r: red($color) / 255;

  $g: green($color) / 255;

  $b: blue($color) / 255;

  $a: $opacity;

  // grayscale fallback if SVG from data url is not supported

  $lightness: lightness($color);

  filter: saturate(0%) brightness(0%) invert($lightness) opacity($opacity);

  // color filter

  $svg-filter-id: « recolor »;

  filter: url(‘data:image/svg+xml;utf8,\

    <svg xmlns= »http://www.w3.org/2000/svg »>\

      <filter id= »#{$svg-filter-id} » color-interpolation-filters= »sRGB »>\

        <feColorMatrix type= »matrix » values= »\

          0 0 0 0 #{$r}\

          0 0 0 0 #{$g}\

          0 0 0 0 #{$b}\

          0 0 0 #{$a} 0\

        « />\

      </filter>\

    </svg>\

    ##{$svg-filter-id}’);

}

Rédaction :	William Krieg
Relecture :	Sonia KLEIN
Participation indirecte :	༼ つ ◕_◕ ༽つ