
đ 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 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 : | àŒŒ 〠â_â àŒœă€ |
No Comment