Développement Zéro-Déchet

---

background-image: url(nail-gilfanov-TuyneoFacJg-unsplash.jpg)
.smokescreen[
  # Développement Zéro Déchet
  ## Cécilia Bossard - Yannick Martel
]
<div style="position: absolute; right: 90px; top: 270px; padding: 10px; bottom: 40px; height: 40px">
  <img src="cl-lutin-seul.svg" style="height:100px">
</div>

???
On dit bonjour, on se présente, ... ;-)
Et on explique de quoi on va parler

[Photo by Nail Gilfanov on Unsplash]

---
class: slide, no-number
background-image: url(arid-climate-change-clouds-60013.jpg)
.smokescreen_slide_title[
  # Etat des lieux
]
.smokescreen_slide[

4% des gaz à effet de serre émis par notre consommation numérique

Accroissement de 9% par an

Part d'internet dans les émissions mondiales de gaz à effet de serre était de 2% en 2008 (autant que les transports aériens)

]

???

La planète n'est vraiment pas en grande forme, et en tant que professionnel.le.s de l'IT, nous en sommes en partie responsables (sur-consommation de ressources, appareils électroniques polluants obsolètes rapidement, ... ).

The Shift Project - octobre 2018 : "4% des gaz à effet de serre émis par notre consommation numérique, et elle s'accroît de 9% par an"

En 2008, la part d'Internet dans les émissions mondiales de gaz à effet de serre était de 2%, soit autant que les transports aériens mondiaux.

---
background-image: url(sarah-dorweiler-x2Tmfd1-SgA-unsplash.jpg)
.smokescreen_slide_title[
  # Sobriété numérique
]

.smokescreen_slide[
« Les opportunités du numérique étant précieuses, mieux les calibrer est essentiel pour en préserver l’utile.

Être ‘sobre’ à l’échelle de notre société, c’est donc réinventer nos usages pour qu’ils soient compatibles avec les contraintes climatiques. »

Maxime Efoui-Hess, The Shift Project

]

???

Piste de solution : réduire le superflu, se contenter de ce qui est vraiment essentiel

=> sobriété numérique.

Sobriété à la maison => doctrine du "Zéro Déchet"

Peut-on essayer de les transposer et les appliquer au développement logiciel ?

Que pouvons-nous alors changer concrètement dans nos pratiques de développement pour améliorer notre empreinte carbone numérique ?

Faisons le point sur le Zéro Déchet et ce qu'il peut amener dans nos métiers.

[Photo by Sarah Dorweiler on Unsplash]

---
background-image: url(laura-mitulla-aAGPWsp0WZk-unsplash.jpg)
.smokescreen_slide_title[
  # Le Zéro-Déchet
]

???

Si vous n'êtes pas à l'aise avec les principes du Zéro-Déchet, commençons par les rappeler brièvement.

[Photo by Laura Mitulla on Unsplash]

---
background-image: url(laura-mitulla-aAGPWsp0WZk-unsplash.jpg)

???

Béa Johnson (autrice du livre « Zéro-Déchet ») en a créé 5 règles (à appliquer dans l'ordre) :

- Refuser ce dont on n'a pas besoin (Objets jetables, échantillons gratuits, prospectus, sur-emballages, ...)
- Réduire ce dont nous avons besoin mais ne pouvons pas refuser (Consommation énergétique, gaspillage, objets inutilisés, en plusieurs exemplaires, )
- Réutiliser, réparer, réinventer. Réparer au lieu de jeter, réinventer un nouvel usage pour un objet usagé
- Recycler : trier les déchets pour leur permettre d'être recyclés
- Composter tout le reste (logiquement, il ne doit rester que la matière organique)

---
background-image: url(magnus-engo-W4lcqyH9r8c-unsplash.jpg)
.smokescreen_slide_title[
  # Zéro Déchet numérique ?
]

???

Ces règles simples permettent déjà de réduire drastiquement la taille de nos poubelles. Mais qu'en est-il de nos "poubelles numériques" ?

Le matériel est de loin la plus grosse source de pollution numérique.

WWF : Il faut 22 kg de produits chimiques pour fabriquer un ordinateur, auxquels il faut ajouter 240kg de combustible et 1,5t d'eau.

[Photo by Magnus Engø on Unsplash]

---
background-image: url(magnus-engo-W4lcqyH9r8c-unsplash.jpg)
.smokescreen_slide_title[
  # Zéro Déchet numérique
]

- Refuser
- Réduire
- Réutiliser
- Recycler
- Composter
]

???

Les règles du Zéro-Déchet peuvent facilement être appliquées à notre matériel technologique :

- Refuser : gadgets numériques difficiles à recycler, object connectés plus utilisables car serveurs coupés, ...
- Réduire : combien d'ordinateurs, tablettes, téléphones, ... qui ne servent quasi jamais ?
- Réutiliser : Réparer les appareils vieillissants puis dons à des associations ? , serveur fin de vie
- Recycler : bien s'assurer d'apporter ces appareils dans des structures qui vont les recycler
- Composter : à quand l'ordinateur végétal ?
---

background-image: url(sai-kiran-anagani-5Ntkpxqt54Y-unsplash.jpg)
.smokescreen_slide_title[
  # Zéro Déchet dans le développement ?
]

???

Matériel -> face visible de l'iceberg.

Mais le numérique est également à l'origine d'une pollution moins visible, celle dûe à son usage !

La consommation énergétique liée au numérique est une grande source de pollution :

consommation des serveurs, des machines clientes, mais également de toute l'infrastructure réseau (routeurs, backbone, ...) qu'il faut maintenir et refroidir …

Possible d'appliquer les règles du Zéro-Déchet et réduire la consommation énergétique de nos applications.

[Photo by Sai Kiran Anagani on Unsplash]
---

Exemple d'une application "toute simple"
]

???

Prenons l'exemple d'une application a priori toute simple.

Besoin de mesurer impact des modiciations du code sur conso énergétique.

Eco-index => mesure front-end (on détaillera juste après)

Back end ? Rien trouvé sur étagère

Installation de sondes sur la machine pour mesurer la conso du CPU

Création page pour afficher résultats

Page créée par dev back-end => pas beaucoup d'efforts sur le front => utilisation d'un template, affichage des données brutes

La page affiche des graphiques à l'écran en récupérant les données depuis un web-service et ces graphiques sont rafaîchis régulièrement.

---
background-image: url(initialState.png)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
]

<div class="ecoIndex">
  <p class="ecoIndexTitle">Eco-Index</p>
  <h3 class="ecoIndexResult">E</h3>
    <div class="ecoIdexStats">
      Nombre de requêtes : 35 <br>
      Taille de la page (kb) : 7201 <br>
      Taille du DOM : 12298 <br>
      GES (gCO2e) : 2.5 <br>
      Eau (cl) : 3.75 <br>
      EcoIndex : 25 <br>
    </div>
</div>
<br/>
]

???

L'application ne fait pas grand chose mais a pourtant un éco-index très faible.

Qu'est ce que l'éco-index ? Index calculé à partir de 3 variables 
- Nombre de requêtes
- Taille de la Page (nombre de kb téléchargés pour afficher la page)
- Taille du DOM (Nombre de noeuds du document HTML - i.e. complexité de la structure de la page)

---
background-image: url(initialState.png)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
]
.smokescreen_slide[

Après 1 minute ...
<div class="ecoIndex">
  <p class="ecoIndexTitle">Eco-Index</p>
  <h3 class="ecoIndexResult">F</h3>
    <div class="ecoIdexStats">
      Nombre de requêtes : 81 <br>
      Taille de la page (kb) : 30606<br>
      Taille du DOM : 12333 <br>
      GES (gCO2e) : 2.72 <br>
      Eau (cl) : 4.08 <br>
      EcoIndex : 14 <br>
    </div>
</div>
<br/>
]

???

Et après 1 minute, c'est encore pire !

=> Application des règles du zéro déchet sur cette application pour voir si on arrive à améliorer tout ça.

Pour cela, nous allons nous baser sur les bonnes pratiques d'éco-conception issues du livre "Eco-conception web / les 115 bonnes pratiques" de Frédéric Bordage.

---

???

Première étape : refuser

[Photo by Mattia Ascenzo on Unsplash]

---
background-image: url(mattia-ascenzo-1559579-unsplash.jpg)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
  ## 1. Refuser
]
.smokescreen_slide[

### "Est-ce que j'en ai vraiment besoin ?"
]
???

La première question à se poser est "Est-ce que j'en ai vraiment besoin ?"

On peut alors facilement refuser :
- les fonctionnalités inutiles qui ne sont jamais utilisées par les utilisateurs
- les nouvelles technos qui n'apportent rien à l'utilisateur
- le stockage des données inutiles (Datensparseimkeit) : a t'on besoin de vraiment tout stocker ? de stocker toutes les infos perso des utilisateurs ?
- ...

---
background-image: url(mattia-ascenzo-1559579-unsplash.jpg)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
  ## 1. Refuser
]

### Eliminer les fonctionnalités non essentielles

<i class="material-icons">local_florist</i><i class="material-icons">local_florist</i><i class="material-icons">local_florist</i>
]

???

Bonne pratique #1

Dans notre cas, nous pouvons supprimer quelques fonctionnalités
- Notifications
- Barre de recherche
- Le total consommé
- les 24 dernières heures
- le maximum

---

background-image: url(mattia-ascenzo-1559579-unsplash.jpg)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
  ## 1. Refuser
]

### Eliminer les fonctionnalités non essentielles
<div style="display:table">
	<div class="ecoIndex_1">
	  <p class="ecoIndexTitle">Eco-Index</p>
	  <h3 class="ecoIndexResult">E</h3>
	    <div class="ecoIdexStats">
	      Nombre de requêtes : <b>35</b> <br>
	      Taille du DOM : <b>12298</b> <br>
	    </div>
	</div>
	<div class="ecoIndex_2">
	  <p class="ecoIndexTitle">Eco-Index</p>
	  <h3 class="ecoIndexResult">E</h3>
	    <div class="ecoIdexStats">
	       <div class="ecoIdexStats">
      Nombre de requêtes : <b>30</b> <br>
      Taille du DOM : <b>12198</b><br>
	    </div>
	</div>
</div>
<br/>

]

???

Réduction du nb de requêtes et taille DOM

Pas de manière significative

---
background-image: url(mattia-ascenzo-1559579-unsplash.jpg)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
  ## 1. Refuser
]

.smokescreen_slide[
### Eviter les animations Javascript/CSS coûteuses
<i class="material-icons">local_florist</i><i class="material-icons">local_florist</i><i class="material-icons">local_florist</i>
]

???
Bonne pratique #48

Dans notre cas, nous avons une animation sur les graphiques lors de l'affichage. Est-elle vraiment nécessaire ?

---
background-image: url(mattia-ascenzo-1559579-unsplash.jpg)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
  ## 1. Refuser
]

.smokescreen_slide[
### Eviter les animations Javascript/CSS coûteuses
<div style="display:table">
	<div class="ecoIndex_1">
	  <p class="ecoIndexTitle">Eco-Index</p>
	  <h3 class="ecoIndexResult">E</h3>
	    <div class="ecoIdexStats">
	      Taille du DOM : <b>12198</b><br>
	    </div>
	</div>
	<div class="ecoIndex_2">
	  <p class="ecoIndexTitle">Eco-Index</p>
	  <h3 class="ecoIndexResult">E</h3>
	    <div class="ecoIdexStats">
	      Taille du DOM : <b>9267</b><br>
	    </div>
	</div>
</div>
<br/>
]

???

Réduction taille du DOM
Ne change en rien l'utilisabilité de l'application

---
background-image: url(mattia-ascenzo-1559579-unsplash.jpg)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
  ## 1. Refuser
]

### Supprimer tous les warnings et toutes les notices
<i class="material-icons">local_florist</i><i class="material-icons">local_florist</i><i class="material-icons">local_florist</i>
]
???
Bonne pratique #65

Suppression de tous les warnings dans la console (variables non utilisées, imports inutiles, ...)

---
background-image: url(mattia-ascenzo-1559579-unsplash.jpg)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
  ## 1. Refuser
]

### Supprimer tous les warnings et toutes les notices
<div style="display:table">
	<div class="ecoIndex_1">
	  <p class="ecoIndexTitle">Eco-Index</p>
	  <h3 class="ecoIndexResult">E</h3>
	    <div class="ecoIdexStats">
	      Taille du DOM : <b>9267</b><br>
	    </div>
	</div>
	<div class="ecoIndex_2">
	  <p class="ecoIndexTitle">Eco-Index</p>
	  <h3 class="ecoIndexResult">E</h3>
	    <div class="ecoIdexStats">
	      Taille du DOM : <b>9267</b> <br>
	    </div>
	</div>
</div>
<br/>

]

???

Aucune modification au niveau des indicateurs de l'éco-index.
Par contre, la charge CPU va être diminuée car il n'aura pas à calculer tous ces warnings.

---
background-image: url(mattia-ascenzo-1559579-unsplash.jpg)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
  ## 1. Refuser
]

<br/>
<div style="display:table">
	<div class="ecoIndex_1">
	  <p class="ecoIndexTitle">Eco-Index</p>
	  <h3 class="ecoIndexResult">E</h3>
	    <div class="ecoIdexStats">
	      Nombre de requêtes : <b>35</b> <br>
	      Taille de la page (kb) : 7201<br>
	      Taille du DOM : <b>12298</b> <br>
	      GES (gCO2e) : 2.5 <br>
	      Eau (cl) : 3.75 <br>
	      EcoIndex : 25 <br>
	    </div>
	</div>
	<div class="ecoIndex_2">
	  <p class="ecoIndexTitle">Eco-Index</p>
	  <h3 class="ecoIndexResult">E</h3>
	    <div class="ecoIdexStats">
	      Nombre de requêtes : <b>26</b> <br>
	      Taille de la page (kb) : 7132 <br>
	      Taille du DOM : <b>9267</b> <br>
	      GES (gCO2e) : 2.46 <br>
	      Eau (cl) : 3.69 <br>
	      EcoIndex : 27 <br>
	    </div>
	</div>
</div>
<br/>
]

???

Réduction de près d'un tiers la taille du DOM, ainsi que le nombre de requêtes.

Valeurs sont encore trop importantes pour avoir un réel impact sur l'éco-index.

---
background-image: url(state1.png)
background-position: top;

???
PENSER A MONTRER L'APPLI

---
background-image: url(i-yunmai-5jctAMjz21A-unsplash.jpg)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
  ## 2. Réduire
]

???

Passons maintenant à la 2ème règle : Réduire

[Photo by i yunmai on Unsplash]

---
background-image: url(i-yunmai-5jctAMjz21A-unsplash.jpg)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
  ## 2. Réduire
]

]

???

La question à se poser est "Est-ce que j'en ai vraiment besoin d'une telle quantité ?"

On peut ainsi commencer à:

- Réduire la taille des applications en réduisant
  - la taille (et la quantités) des librairies embarquées
  - la taille des CSS, des images
  - l'utilisation de CMS ou de frameworks "magiques" (qui embarquent la moitié d'internet)
- Réduire les communications réseau en réduisant
  - le nombre de requêtes vers le serveur
  - les résultats remontés de la base de données (pas de select *, pagination)
- Réduite la quantité de mémoire utilisée en
  - Surveillant le garbage collector
  - Utilisant un profiler pour optimiser les parties du code très consommatrices en mémoire

---
background-image: url(i-yunmai-5jctAMjz21A-unsplash.jpg)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
  ## 2. Réduire
]

### Quantifier précisément le besoin
<i class="material-icons">local_florist</i><i class="material-icons">local_florist</i><i class="material-icons">local_florist</i>
]

???
Bonne pratique #2 :

Diminution de la quantité de données envoyées par le serveur.

Actuellement, les web-services retournent tous les enregistrements.
Nous n'avons besoin d'afficher que les 50 derniers.

=> Modification du code côté back-end pour qu'il ne retourne que les 50 derniers éléments.

Refresh des données toutes les 10s inutile => A supprimer

---
background-image: url(i-yunmai-5jctAMjz21A-unsplash.jpg)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
  ## 2. Réduire
]

### Quantifier précisément le besoin
<div style="display: table">
	<div class="ecoIndex_1">
	  <p class="ecoIndexTitle">Eco-Index</p>
	  <h3 class="ecoIndexResult">E</h3>
	    <div class="ecoIdexStats">
	      Taille du DOM : <b>9267</b> <br>
	    </div>
	</div>
	<div class="ecoIndex_2">
	  <p class="ecoIndexTitle">Eco-Index</p>
	  <h3 class="ecoIndexResult">D</h3>
	    <div class="ecoIdexStats">
	      Taille du DOM : <b>717</b> <br>
	    </div>
	</div>
</div>
<br/>
]

???

Ces modifications ont permis de réduire drastiquement la taille du DOM.

Notre éco-index est passé de E à D !

---
background-image: url(i-yunmai-5jctAMjz21A-unsplash.jpg)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
  ## 2. Réduire
]

.smokescreen_slide[
### Redimensionner les images en dehors du navigateur
<i class="material-icons">local_florist</i><i class="material-icons">local_florist</i><i class="material-icons">local_florist</i>
]

???
Bonne pratique #20 :

Image de fond actuelle de 5.4 Mo affichée partiellement.

=> Réduction à 200 ko en réduisant qualité et portion image affichée

---
background-image: url(i-yunmai-5jctAMjz21A-unsplash.jpg)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
  ## 2. Réduire
]

### Redimensionner les images en dehors du navigateur
<div>
	<div class="ecoIndex_1">
	  <p class="ecoIndexTitle">Eco-Index</p>
	  <h3 class="ecoIndexResult">D</h3>
	    <div class="ecoIdexStats">
	      Taille de la page (kb) : <b>7132</b> <br>
	    </div>
	</div>
	<div class="ecoIndex_2">
	  <p class="ecoIndexTitle">Eco-Index</p>
	  <h3 class="ecoIndexResult">C</h3>
	    <div class="ecoIdexStats">
	      Taille de la page (kb) : <b>1337</b> <br>
	    </div>
	</div>
</div>
<br/>
]

???

Cette réduction de la taille de l'image a permis de grandement réduire la taille de la page.

Par la même occasion, on est passé d'un éco-index D à C !

---
background-image: url(i-yunmai-5jctAMjz21A-unsplash.jpg)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
  ## 2. Réduire
]

### Limiter le nombre de requêtes HTTP
<i class="material-icons">local_florist</i><i class="material-icons">local_florist</i><i class="material-icons">local_florist</i>
]

???
Bonne pratique #9

Actuellement, pour chaque graphique et chaque donnée, nous effectuons une requête différente vers le back-end.

Ces appels peuvent être fusionnés pour n'en faire qu'un seul.

---
background-image: url(i-yunmai-5jctAMjz21A-unsplash.jpg)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
  ## 2. Réduire
]

### Limiter le nombre de requêtes HTTP
<div>
	<div class="ecoIndex_1">
	  <p class="ecoIndexTitle">Eco-Index</p>
	  <h3 class="ecoIndexResult">C</h3>
	    <div class="ecoIdexStats">
	      Nombre de requêtes : <b>26</b> <br>
	    </div>
	</div>
	<div class="ecoIndex_2">
	  <p class="ecoIndexTitle">Eco-Index</p>
	  <h3 class="ecoIndexResult">C</h3>
	    <div class="ecoIdexStats">
	      Nombre de requêtes : <b>22</b> <br>
	    </div>
	</div>
</div>
<br/>

]

???

La majorités des requêtes réalisées par l'application ne s'adresse pas au back-end, mais aux librairies externes.

Le nombre de requêtes a pu être diminué, mais pas énormément.

---
background-image: url(i-yunmai-5jctAMjz21A-unsplash.jpg)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
  ## 2. Réduire
]

.smokescreen_slide[
<br/>
<div>
	<div class="ecoIndex_1">
	  <p class="ecoIndexTitle">Eco-Index</p>
	  <h3 class="ecoIndexResult">E</h3>
	    <div class="ecoIdexStats">
	      Nombre de requêtes : <b>26</b> <br>
	      Taille de la page (kb) : <b>7132</b> <br>
	      Taille du DOM : <b>9267</b> <br>
	      GES (gCO2e) : 2.46 <br>
	      Eau (cl) : 3.69 <br>
	      EcoIndex : 27 <br>
	    </div>
	</div>
	<div class="ecoIndex_2">
	  <p class="ecoIndexTitle">Eco-Index</p>
	  <h3 class="ecoIndexResult">C</h3>
	    <div class="ecoIdexStats">
	      Nombre de requêtes : <b>22</b> <br>
	      Taille de la page (kb) : <b>1194</b> <br>
	      Taille du DOM : <b>717</b> <br>
	      GES (gCO2e) : 1.92 <br>
	      Eau (cl) : 2.88 <br>
	      EcoIndex : 54 <br>
	    </div>
	</div>
</div>
<br/>
]

???

"Réduire" => grande amélioration de l'éco-Index

Pas d'impact sur l'expérience utilisateur

La réduction de la taille de l'image a majoritairement permis de réduire la taille de la page, et la réduction du nombre de données envoyées a pu réduire la taille du DOM.

---
background-image: url(state2.png)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
  ## 2. Réduire
]

???
PENSER A MONTRER L'APPLI

---
background-image: url(recycle-57136_1920.jpg)

???

Appliquons maintenant la 3ème règle : "Réutiliser"

[Image par Shirley Hirst de Pixabay]

---
background-image: url(recycle-57136_1920.jpg)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
  ## 3. Réutiliser
]

### "Est-ce que je peux réutiliser quelque chose d'existant ?"

]

???

La question à se poser dans ce cas est "Est-ce que je peux réutiliser quelque chose d'existant ?"

Réutilisation : coeur de notre métier. Utilisation de composants ou de bibliothèques.

Bonne pratique de code "Don't repeat yourself"
=> utilisation de variables pour garder en mémoire les éléments souvent accedés

Conception modulaire des applications

---
background-image: url(recycle-57136_1920.jpg)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
  ## 3. Réutiliser
]

### Favoriser les polices standards
<i class="material-icons">local_florist</i><i class="material-icons">local_florist</i><i class="material-icons">local_florist</i>
]

???
Bonne pratique #17

Police de caractère particulière => utilisation des polices déjà présentes sur les postes client

---
background-image: url(recycle-57136_1920.jpg)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
  ## 3. Réutiliser
]

### Favoriser les polices standards
<div>
	<div class="ecoIndex_1">
	  <p class="ecoIndexTitle">Eco-Index</p>
	  <h3 class="ecoIndexResult">C</h3>
	    <div class="ecoIdexStats">
	      Nombre de requêtes : <b>22</b> <br>
	    </div>
	</div>
	<div class="ecoIndex_2">
	  <p class="ecoIndexTitle">Eco-Index</p>
	  <h3 class="ecoIndexResult">C</h3>
	    <div class="ecoIdexStats">
	      Nombre de requêtes : <b>16</b> <br>
	    </div>
	</div>
</div>
<br/>
]

???

En évitant de télécharger de nouvelles polices, nous avons donc réussi à réduire le nombre de requêtes réalisées par l'application.

De la même manière, en remplaçant les images par des glyphs, on réutilise des caractères déjà présents dans la police et on limite le nombre de nouveaux éléments à charger.

---
background-image: url(recycle-57136_1920.jpg)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
  ## 3. Réutiliser
]
.smokescreen_slide[

### Mettre en cache les réponses Ajax
<i class="material-icons">local_florist</i><i class="material-icons">local_florist</i>

### Ajouter des en-têtes Expires ou Cache-Control
<i class="material-icons">local_florist</i><i class="material-icons">local_florist</i><i class="material-icons">local_florist</i>

]

???
Bonnes pratiques #107 & #105

Mise en place d'un cache pour toutes les requêtes sauf celles vers le back-end

---
background-image: url(recycle-57136_1920.jpg)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
  ## 3. Réutiliser
]

.smokescreen_slide[
### Mettre en cache les réponses Ajax
### Ajouter des en-têtes Expires ou Cache-Control
<div>
	<div class="ecoIndex_1">
	  <p class="ecoIndexTitle">Eco-Index</p>
	  <h3 class="ecoIndexResult">C</h3>
	    <div class="ecoIdexStats">
	      Nombre de requêtes : <b>16</b> <br>
	      Taille de la page (kb) : 1156 <br>
	    </div>
	</div>
	<div class="ecoIndex_2">
	  <p class="ecoIndexTitle">Eco-Index</p>
	  <h3 class="ecoIndexResult">C</h3>
	    <div class="ecoIdexStats">
	      Nombre de requêtes : <b>4</b> <br>
	      Taille de la page (kb) : 37 <br>
	    </div>
	</div>
</div>
<br/>
]
???

Pas de modif au 1er chargement, mais grande diminution au refresh

Cache mis en place que côté front. On peut imaginer en utiliser un également côté back-end pour éviter les allers-retours redondants.
---
background-image: url(recycle-57136_1920.jpg)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
  ## 3. Réutiliser
]

<br/>
<div>
  <div class="ecoIndex_1">
	  <p class="ecoIndexTitle">Eco-Index</p>
	  <h3 class="ecoIndexResult">C</h3>
	    <div class="ecoIdexStats">
	      Nombre de requêtes : <b>22</b> <br>
	      Taille de la page (kb) : 1194 <br>
	      Taille du DOM : 717 <br>
	      GES (gCO2e) : 1.92 <br>
	      Eau (cl) : 2.88 <br>
	      EcoIndex : 54 <br>
	    </div>
	</div>
	<div class="ecoIndex_2">
	  <p class="ecoIndexTitle">Eco-Index</p>
	  <h3 class="ecoIndexResult">C</h3>
	    <div class="ecoIdexStats">
	      Nombre de requêtes : 4 <br>
	      Taille de la page (kb) : 37 <br>
	      Taille du DOM : 706 <br>
	      GES (gCO2e) : 1.72 <br>
	      Eau (cl) : 2.58 <br>
	      EcoIndex : 64 <br>
	    </div>
	</div>
</div>
<br/>

]

???

La réutilisation des polices de caractères a donc permis de réduire le nombre de requêtes, mais n'a pas eu d'impact significatif sur l'éco-index

Cache => Réduction du nombre de requêtes.

Notre éco-index a diminué mais reste classé en C (la limite pour passer à B est à 65 ^^)

---
background-image: url(state4.png)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
  ## 3. Réutiliser
]

???
PENSER A MONTRER L'APPLI

---
background-image: url(pawel-czerwinski-RkIsyD_AVvc-unsplash.jpg)

???

4ème règle à appliquer : Recycler.

[Photo by Paweł Czerwiński on Unsplash]

---
background-image: url(pawel-czerwinski-RkIsyD_AVvc-unsplash.jpg)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
  ## 4. Recycler
]

### "Est-ce que je peux recycler quelque chose d'existant ?"

]

???

Nous pouvons nous poser la question "Est-ce que je peux recycler quelque chose d'existant ?"

Le recyclage concerne les objets en fin de vie.

=> Peut-on recycler les applis en fin de vie ?

Si oui, comment ?

---
background-image: url(pawel-czerwinski-RkIsyD_AVvc-unsplash.jpg)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
  ## 4. Recycler
]

- Recyclage des données des applications en fin de vie
- Recyclage du code

]

???

Données des applis en fin de vie

=> Migration des données de ces applications vers successeur.

=> Bien penser en amont au format des données pour en faciliter le transfert

Recyclage du code

=> Extraire des composants, des bibliothèques pour donner une 2nde vie au code dans une autre appli

=> code libre bien sûr :-P

---

???

Dernière règle du Zéro-Déchet : le compostage.

[Photo by Alvin Engler on Unsplash]

---
background-image: url(alvin-engler-7OC877W77yw-unsplash.jpg)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
  ## 5. Composter
]

### "Le compostage est le recyclage des déchets organiques pour produire naturellement un fertilisant, le compost."

]

???

Si on reprend une définition du compostage, on nous dit que "Le compostage est le recyclage des déchets organiques pour produire naturellement un fertilisant, le compost.".

Peut-on faire un parallèle avec le développement ? Comment crée-t-on du compost en informatique ?

Ou comment produire du fertilisant à partir de nos déchets ?

---
background-image: url(alvin-engler-7OC877W77yw-unsplash.jpg)
.smokescreen_slide_title[
  # Zéro Déchet logiciel
  ## 5. Composter
]

- Conférences
- Binômage
- Mentoring
]

???

Donner des conférences, écrire des articles, binômer, mentorer les moins expérimentés, ... tout ceci permet aux plus expérimentés d'entre nous de partager leurs connaissances, leurs erreurs passées
et d'aider les autres à monter en compétences, un peu comme si il leurs apportaient de l'engrais.

---
background-image: url(clement-h-95YRwf6CNw8-unsplash.jpg)
.smokescreen_slide_title[
  # Zéro déchet logiciel
  ## Bilan
]

.smokescreen_slide[
- Suppression des fonctionnalités non essentielles
- Suppression des animations coûteuses
- Suppression des warnings
- Réduction de la quantité d'information
- Réduction de la taille des images
- Réduction du nombre de requêtes HTTP
- Utilisation de polices standards
- Mise en place de cache
]

???

Voici en condensé la liste des actions que nous avons mises en oeuvre sur l'application.

[Photo by Clément H on Unsplash]

---
background-image: url(clement-h-95YRwf6CNw8-unsplash.jpg)
.smokescreen_slide_title[
  # Zéro déchet logiciel
  ## Bilan
]

<br/>
<div style="display:table;">
	<div class="ecoIndex_1">
	  	<p class="ecoIndexTitle">Eco-Index</p>
	  	<h3 class="ecoIndexResult">F</h3>
		<div class="ecoIdexStats">
		  Nombre de requêtes : 81 <br>
		  Taille de la page (kb) : 30606 <br>
		  Taille du DOM : 12333 <br>
		  GES (gCO2e) : 2.72 <br>
		  Eau (cl) : 4.08 <br>
		  EcoIndex : 14 <br>
		</div>
	</div>
	<div class="ecoIndex_2">
	  <p class="ecoIndexTitle">Eco-Index</p>
	  <h3 class="ecoIndexResult">C</h3>
	    <div class="ecoIdexStats">
	      Nombre de requêtes : 4 <br>
	      Taille de la page (kb) : 37 <br>
	      Taille du DOM : 706 <br>
	      GES (gCO2e) : 1.72 <br>
	      Eau (cl) : 2.58 <br>
	      EcoIndex : 64 <br>
	    </div>
	</div>
</div>
<br/>
]

???

Si on fait un rapide bilan de toutes nos modifications, nous pouvons constater que l'éco-index a été le plus impacté par :
- la diminution de la taille des ressources
- la diminution de la taille du DOM

A noter que le calcul de l'éco-index pondère différemment les 3 données qui sont le nombre de requêtes, la taille de la page et la taille du DOM.
L avaleur est une moyenne pondérée à 3 pour le DOM, 2 pour le nombre de requêtes HTTP et 1 pour la taille de la page.

Malgré tous nos efforts, nous n'avons pas réussi à franchir la barre du C (même si on n'est qu'à un point du B !), mais nous avons tout de même pas mal amélioré la situation :D

Il est également à noter qu'en souhaitant diminuer l'impact écologique de notre application, nous en sommes arrivés à améliorer ses performances et potentiellement faciliter son utilisation en simplifiant la présentation des informations.

---
background-image: url(vanilla-flower-542019_1920.jpg)
.smokescreen_slide_title[

# Et si ...
]
.smokescreen_slide[
On supprimait ReactJS pour passer en VanillaJS ?
]

???

L'application a été réalisée en ReactJS. On s'est donc posé la question de savoir si on l'avait réalisée en vanillaJS, est-ce que l'éco-index aurait été meilleur ?
Est-ce que React ne grossit pas artificiellement notre page ?

[Image parBinesh A B de Pixabay]

---
background-image: url(vanilla-flower-542019_1920.jpg)
.smokescreen_slide_title[

# Passage en VanillaJS
]
.smokescreen_slide[
<br/>
<div style="display:table;">
	<div class="ecoIndex_1">
	  <p class="ecoIndexTitle">Eco-Index</p>
	  <h3 class="ecoIndexResult">C</h3>
      <div class="ecoIdexStats">
        Nombre de requêtes : 4 <br>
        Taille de la page (kb) : 37 <br>
        Taille du DOM : 706 <br>
        GES (gCO2e) : 1.72 <br>
        Eau (cl) : 2.58 <br>
        EcoIndex : 64 <br>
      </div>
	</div>
	<div class="ecoIndex_2">
	  <p class="ecoIndexTitle">Eco-Index</p>
	  <h3 class="ecoIndexResult">C</h3>
	    <div class="ecoIdexStats">
	      Nombre de requêtes : 19 <br>
	      Taille de la page (kb) : 75 <br>
	      Taille du DOM : 632 <br>
	      GES (gCO2e) : 1.72 <br>
	      Eau (cl) : 2.58 <br>
	      EcoIndex : 64 <br>
	    </div>
	</div>
</div>
<br/>

]

???

Au final, on se retrouve avec exactement la même valeur d'éco-index.

En creusant un peu plus les raisons, c'est la présence des graphiques qui fait grossir la taille du DOM. La librairie que nous avons utilisée n'est donc pas la plus légère en terme d'éco-index.

Etant donné que nous voulions garder le même rendu graphique, nous n'avons pas changé cette librairie, mais la question peut se poser de chercher des composants et librairies plus légers.

---
background-image: url(nail-gilfanov-TuyneoFacJg-unsplash.jpg)
.smokescreen_slide_title[

# A quoi ressemble un site classé 'A' ?
]

???

Le but n'est pas d'avoir un classement 'A' à tout prix, mais surtout de diminuer son impact et prendre en compte cette contrainte lors des développements.

---
background-image: url(perduCom.png)
.smokescreen_slide_title[
## A quoi ressemble un site classé 'A' ?
]
.footnote[http://perdu.com/]

---
background-image: url(lowTechMag.png)
.smokescreen_slide_title[
## A quoi ressemble un site classé 'A' ?
]
.footnote[https://solar.lowtechmagazine.com/]

---
background-image: url(allianceGreenIt.png)
.smokescreen_slide_title[
## A quoi ressemble un site classé 'A' ?
]
.footnote[http://alliancegreenit.org/]

---
background-image: url(nail-gilfanov-TuyneoFacJg-unsplash.jpg)
.smokescreen_slide_title[

# Pour aller plus loin
]
.smokescreen_slide[
Eco-conception des services numériques
]

???

Si vous voulez approfondir un peu plus la question, vous pouvez vous tourner vers l'éco-conception des services numériques.

L'éco-conception consiste à intégrer les questions environnementales dès la conception d'un produit ou d'un service, et lors de toutes les étapes de son cycle de vie.

Les points que nous avons abordés interviennent essentiellement en phase de conception et de réalisation, mais beaucoup de choses peuvent être améliorées par la suite.
On peut citer par exemple les problématiques d'hébergement, d'optimisation ...

Par exemple, nous aurions pu utiliser sur notre application des outils comme webpack, babel et consorts pour minifier le code, compresser les feuilles de style, réaliser du tree-shaking sur les librairies, etc...
Nous aurions également pu mettre en oeuvre un reverse proxy pour améliorer les temps de réponse à nos requêtes.
Concernant l'hébergement, il peut être intéressant de se pencher sur la question des hébergements dits "verts", ou des fournisseurs d'électricités "verte".

---
background-image: url(nail-gilfanov-TuyneoFacJg-unsplash.jpg)
.smokescreen_slide_title[
# Références
]
.smokescreen_slide[
http://www.greenIT.fr

Livre "Ecoconception web: les 115 bonnes pratiques" de Frédéric Bordage

Livre blanc "Eco-conception des services numérique" de l'Alliance Green IT

Le Think Tank "The Shift Project"

Notre vie de tous les jours ;)
]

---
background-image: url(nail-gilfanov-TuyneoFacJg-unsplash.jpg)
.smokescreen_slide_title[
# Merci
]
.smokescreen_slide[
Avez-vous des questions ?
]