🆕 WA-Tech&DevNews N°18 Nouveau site Web-atrio.com

🆕 WA-Tech&DevNews N°18 Nouveau site Web-atrio.com

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 FrontAngular 11 et Angular Universal
Technos en BackAWS Lambda
ServeursAutoScaling via AWS Elastic Beanstalk
DéploiementsAutomatisés via AWS CLI
Techniques d’optimisationsServer 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 :àŒŒ ぀ ◕_◕ àŒœă€

William

Super HĂ©ro du web / CTO Si vous venez dans nos bureaux je vous fais un cafĂ© ☕ et on discute sur Rocket League

Related Posts

[WA Tools] JSON Visio, pour vous aider a visualiser votre json

[WA Tools] JSON Visio, pour vous aider a visualiser votre json

Le Web3 c’est quoi ?

Le Web3 c’est quoi ?

🆕 WA-Tech&DevNews N°21 0 commentaire

🆕 WA-Tech&DevNews N°21

🆕 WA-Tech&DevNews N°20 0 commentaire

🆕 WA-Tech&DevNews N°20

No Comment

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.