Développer des applications résistantes à des conditions dégradées

layout: true
<div class="my-footer"><p>JEC 2026</p><p>alethgueguen.com</p></div>

---
class: center, bkg-gradient-rock,bkg-bottom
# Développer des applications résistantes<br>à des conditions dégradées

---
class: middle

<div class="dflex my-brand-wrapper flexcol">
  <div class="dflex">
    <img src="../_images_pro/symbol_color_bgtransparent_screen.png">
    <span class="my-brand">Aleth Gueguen conseil IT</span>
  </div>
  <div class="dflex">
    <div class="mlm mrb">
      <h2 style="font-size: 1.6em;">
        Consultante indépendante depuis 2006
      </h2>
      <p class="my-brand-subtitle">Je développe des logiciels sur mesure pour les PME</p>
    </div>
    <img src="../_images_pro/portrait_665×665.jpg" style="width: 23%; border-radius: 50%; ">
  </div>
</div>

???
Quand je parle de logiciels, c'est essentiellement basé sur la techno WEB  
donc c'est de ça qu'on va parler aujourd'hui   
même si ce que je raconte ça peut s'appliquer à d'autre technos
---
class: bkg-vertical-right
background-image: url(../_images_bateau/rochers_remous_cropped.jpg)
<style>
  .mt12{margin-top: 12%;}
  .arrowcond{position: absolute; top: 9%; left: 16%; transform: scale(.6);}
</style>

# Conditions dégradées
.absolute.arrowcond[![](image/arrow_down_yellow.png)]
.mt12[
## .tag1[Pas de réseau]
]
## .tag1[Réseau intermittent / Latence]
## .tag1[Batterie faible]
## .tag1[Appareil entrée de gamme / ancien]

---
class: bkgx156-y0, no-margin-h
background-image: url(image/chantier.jpg)
<style>
  .mt3-5 h2{margin-top:4.5em;} 
</style>

# Équipes sur le terrain

- Chantiers en zone blanche ou grise
- Usine
- Extérieur > Pas de prise de courant  
pas de recharge pendant  
la journée de travail

.mt3-5[
## .tag1[Mais aussi] ]
.small[
- Ado en galère, accède à un site d’aide sociale avec une PS2 de seconde main
- En zone de montagne pendant et après une tempête 
]

???
Quelques cas impressionnant où un ensemble de [struggle] se combinent

- Hivernant au Pôle Sud, Internet dispo pendant quelques heures quand le satellite passe au zenit de la station

---
name: qualites
<style>
  #slide-qualites h1 {text-align: center;}
  #slide-qualites h2 {
    display: flex;
    align-items: center;
    gap: .5em;
}
  #slide-qualites h2 img {width: 2em;}
#slide-qualites ul, .results ul {
    list-style-type: "▷ ";
    font-size: 1.35em;
  }
  .results ul li{margin-bottom: 2em;}
#slide-qualites ul {
  margin-top: -1.5em;
    margin-left: 4em;
    padding-left: 2em;
    font-size: 1.5em;
    background-image: linear-gradient(to bottom, hsl(200 86% 42% / 1), hsl(185 100% 36% / 1));
    color: var(--grey0);
}
</style>

# Les deux faces opposées du Web

## ![](image/plus.png) Navigateurs présents partout

## ![](image/minus.png)  On ne maitrise pas l’environnement d’éxécution
- Ressources disponibles : RAM / CPU / vitesse
- Version du navigateur
- Taille d’écran
- État de la batterie

???
le + : distribution universelle, tout (ou presque) embarque un navigateur

le - : on ne maitrise pas du tout les appareils sur lesquels notre code tourne.  
Et c'est pas forcément des foudres de guerre

---
class: bkg-vertical-right, cores
background-image: url(../_images_bateau/lac-volcan.jpg)
<style>
  .cores img{width: 63%; margin-top: 1.5em;}
  .cores h2 {font-size: 1.85em; }
  .cores h2,.cores p{ margin:.25em 0 }
</style>
## Aggravé dans le cas des appareils mobiles

.tag2[L’accès au réseau n’est jamais certain  ]

.tag2[CPU peu puissants sur la majorité des appareils]

![](image/infrequently_single_core_scores.png)

???
5G ou pas / Intermittence / Latence  
La majorité des smartphone, c'est de l'android milieu ou entrée de gamme

on peut considérer que le web c'est un environnement hostile

---
class: bkg-vertical-r102, nav-bat
background-image: url(../_images_bateau/bateau-en-marche.jpg)
<style>
  .nav-bat h1 {
    padding: .1em .5em;
    background: rgb(221 221 216 / 70%);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    border-radius: 0.1em;
    width: fit-content;
  }
</style>

# Navigation en bateau à voile

.tag2[Environnement réaliste <br> pour les conditions dégradées]

<p class="relative" style=" width: fit-content; ">
    <img src="image/reso-e.png" alt="" width="400" style="
    z-index: 10;
    position: relative;
">
<span class="absolute tag2" style="
    background: var(--pink4);
    color: var(--grey0);
    font-size: smaller;
    right: -23%;
    top: 19%;
    transform: rotate(15deg);
">Pas toujours</span>
<span class="absolute tag2" style="
    background: var(--yellow1);
    color: var(--logo-indigo);
    font-size: smaller;
    top: 61%;
    right: -20%;
    transform: rotate(-11deg);">Contrainte</span>
</p>
???
Il se trouve que j'ai un mode de vie où je passe plusieurs mois par an  
sur mon bateau. J'y vis et j'y travaille   
Et ça m'a permis de d'expérimenter en conditions réelles  
ces fameuses conditions dégradées

---
class: center, middle,bkg-vertical-left
background-image: url(../_images_bateau/panneau_solaire.jpeg)
<style>
.mon-lab {background: hsl(253deg 38% 15% / 80%); top: 11%; left: 13%; color: #b3c2cc; border-radius: .25em; }
mon-lab h1 {margin: 0; padding: .25em;}
.pv100w {top: 3%; right: 7%; font-size: 120%; text-align: left}
.pas-partout{top: 30%; right: 9%; font-size: 120%;}
.carte-manche {bottom: 7%; }
.carte-manche img {width: 100%; }
.marche-pas {top: -1em; position: relative; left: 10%; }
.marche-pas img {width: 76%; }
.pv-arrow {top: 2%; transform: rotate(-3deg) scale(.7); right: 23%; }
.w-max-content{width: max-content;}
</style>

.mon-lab.absolute[
# Mon lab R&D
]
.absolute.pv100w[Paneau solaire 100W<br>priorité aux instruments<br>nav / pilote / météo / AIS]
.absolute.pv-arrow[![](image/red-arrow.png) ]
.absolute.pas-partout[Réseau = pas partout]
.absolute.carte-manche[![](../_images_bateau/carte-manche.png) ]

???
La question du réseau, oui il y a la solution d’internet par satellite  
Est-ce que c’est ça qu'on veut ?  
Plusieurs milliers de satellites / plusieurs constellations / des réentrées [x par jour] avec la pollution que ça entraine

---
class: center, bkg-vertical-0
background-image: url(../_images_bateau/scilly-2023-2.jpg)
name: expe
<style>
  #slide-expe h2{font-size: 1.5em; margin-bottom: 3em; }
  #slide-expe h3{font-size: 1em; margin-bottom: .25em;}
  #slide-expe h3+p{margin: 0 0 3em; font-size: 1em; color: var(--logo-indigo);}
  #slide-expe h3+p img {position: relative; top: .25em; }
</style>

.ml50[
# Comment faire 
## pour fournir une expérience positive malgré tout ?

.w-max-content.mauto.left[
### .tag1[Limiter la taille du code à éxécuter]
![](image/arrow_angle.png)Enlever la dépendance au manque de ressource

### .tag1[Éxécuter les tâches en local]
![](image/arrow_angle.png)Enlever la dépendance au réseau
] ]

---
name: fondamentaux
class: middle, bkg-vertical-right
background-image: url(../_images_bateau/cygne_cropped_vertical.jpg)
<style>
  #slide-fondamentaux h1{font-size: 50px;}
</style>

# Revenir aux fondamentaux

.tag2[Les vertus cachées  du “plateforme native”]

???
Le web a tellement évolué depuis ces 10 dernières années  
qu'on peut utiliser les API natives pour obtenir les mêmes fonctionalités  
qui autrefois étaient fourni par des librairies externes

---
name: ux-html
<style>
  .retro{    position: absolute;
    top: 7%;
    right: 19%;
    z-index: 10;
    padding: .25em;
    border-radius: .15em;
    transform: rotate(-14deg);
    background: var(--logo-indigo);
    font-size: .6em;
    color: var(--yellow1);
}
.list-img ul{margin-top: 3em;}
.list-img li{margin-bottom: 2em; position: relative;}
.list-img li img{position: absolute;}
#slide-ux-html img{
    top: -0.5em;
    right: 7em;
    padding: 5px;
    border-radius: 3px;
    background: hsl(147.33deg 33.26% 37.93%);
    box-shadow: 0 0 3px 1px var(--indigo-togrey-light50);}
</style>

# HTML, le langage du WEB .retro[Rétrocompatible]
.list-img[
- UX de HTML![](image/ux_html.png)
]
---
name: html-moderne
<style>
#slide-html-moderne img {
    top: -6.5em;
    right: 10em;
}
</style>

# HTML, le langage du WEB .retro[Rétrocompatible]
.list-img[
- UX de HTML
- HTML moderne![](image/html_moderne.png)
]

---
name: css-moderne
<style>
#slide-css-moderne li:nth-child(2) {margin-bottom: .5em; }
#slide-css-moderne li img{position: relative; top: 1em;}
</style>

# HTML, le langage du WEB .retro[Rétrocompatible]
.list-img[
- UX de HTML
- HTML moderne
- CSS moderne ![](image/arrow-short-right.png) grid, animation, scroll
]

---
class: img72
 <style>
.img72 p{margin: 0}  
.img72  img{width: 72%}
.absolute.nav {top: 25%; left: 53%; transform: rotate(-6deg); background: hsl(44, 92%, 63%); padding: 3px; border-radius: 3px; font-size: .65em;}
.absolute.arrow.resized {transform: rotate(168deg); right: 20%; top: 68%; }
.absolute.arrow.resized img{width: 100%}
.absolute.mille {bottom: 11%; right: 2%; font-size: 1em; color: #5497ae; }
</style>

![](image/doc_html.png)
.absolute.nav.dejavu[⬅️ Navigateur optimisé pour parser et afficher du HTML]
.absolute.arrow.resized[![](image/arrow_down.png)]
.absolute.mille.dejavu[1000 × < tr >]

---
class: limites,bkg-vertical-right, relative
background-image:url(../_images_bateau/falaise_noire.jpeg)
<style>
.limites-h1 {
    position: relative;
    padding: 0 5px 5px;
    display: inline-block;
    top: -1em;
    left: 1em;
    transform: rotate(-8deg);
    border-radius: 5px;
    font-family: Compagnon;
    font-size: 1.5rem;
    font-weight: 600;
    background: var(--indigo-togrey-light100);
    color: var(--yellow1);
}
.limites .list-img ul{list-style: none;}
.limites .absolute.acc{left: 1.5%; top: 28%;}
.limites .absolute.acc img{height: 400px;}
.resist {
    position: relative;
    left: 12%;
    top: 1em;
    padding: 3px;
    border-radius: 3px;
    background: #cece24;
    color: hsl(282deg 4% 22.01%);
}
</style>

# HTML/CSS.limites-h1[a aussi besoin de JS]
.list-img[.absolute.acc[![](image/accolade-1.png)]
- Persistence des données
- Gestion du cache de l’application (hors-ligne)
- Accessibilité (en partie)
].resist[C’est ce qui fait la résistence aux conditions dégradées ]

???
Même si on va déjà très loin avec HTML/CSS  
y a certaines choses que ça gère pas :   
enregistrer son travail, ce qu'on a écrit, ses notes sur sa machine (dans le navigateur)  
Afficher les pages depuis le navigateur sans faire une requête à travers le réseau

---
class: center, middle,js-natif
<style>
 .flex-2{flex: 2;}
</style>

???
Et ça, Js natif/vanilla/ sait le faire. Depuis 10 ans

---
class: no-build, middle
<style>
  .no-build ul{margin: 0;}
</style>

.dflex[
<div class="flex-1 dflex flexcol" style=" justify-content: space-evenly; ">
  <img src="image/JS.png" alt="JS" width="200">
<img src="image/Natif.png" alt="Natif" width="250"></div>
.list-img.flex-2[
- Code rétrocompatible, pas de “breaking change” 
- Pas de dépendance aux spécificités d’un framework  
.tag2.bugue[si ça bugue, c’est ton code]
- Pas de code supplémentaire à télécharger, parser, éxécuter
- Pas de chaine de build
]
]

???
Pas de code supplémentaire(celui du framework) à télécharger, parser, éxécuter

Pour quoi j'insiste tellement sur l'inutilité d'un framework pour s'adapter ?   
Parce que ça nous permet de s'affranchir du manque de ressources sur la majorité des appareils mobiles

---
class: sync, bkg-multi
background-image: url(image/multi_screens_app_ates.png)
<style>
  .sync h1 {margin: 0 0 .25em; font-size: 2em;}
  .sync ul{
    margin: 2.5em 0 0; padding: 0;
    list-style-type: "▷ ";
  }
  .sync ul li {
    margin-bottom: 1.5em;
}
  .sync-i p{margin: .25em 0 0 1em;}
  .bkg-multi{background-size: 36%;
    background-position-y: 52%;
    background-position-x: 96%;}
  .bkg-action-pg{
    background-size: 42%;
    background-position-x: 5%;
    background-position-y: 20%;
  }
  .bkg-action-pg ol {font-size: 1.25em;}
  .bkg-action-pg li{margin-bottom: 1em}
  .absolute.tag2.cache{top: 66%; left: 29%;}
</style>

# Méthode de construction pour des web apps professionnelles
- Travail réalisé en local
- Données persistées dans indexedDB  
- Synchronisation avec serveur/back-office distant  
quand les conditions le permettent

???
Ce que je vous raconte, c'est tiré de ce que développe pour des applis pro  
tout le process se passe en local / tire parti du cache d’application
iDB embarquée nativement dans navigateur
on peut voir ça comme un mini back-office pour 1  
et qui synchro le travail avec le serveur distant quand les conditions le permettent

---
class: bkg-action-pg, relative
background-image: url(image/action_page.png)
.absolute.tag2.cache[cache]  
.ml47[
# Principes généraux
.no-ul[
1. Une action = Une page
2. Pas d’état :   
données enregistrées dans indexedDB,   
paramètres propagés dans l’URL si besoin
3. Modifier le DOM, pas de repaint / re-render
4. “Event delegation” :  
écouter sur l’élément de niveau supérieur
] ]
---
class: no-margin-h, cache
<style>
  .no-ul ul{margin: 0;Doctrinepadding: 0; list-style-type: none;}
  .list-doc ul{list-style-image: url(image/doc.svg)}
  .list-doc.second li:nth-child(2n){margin-bottom: 1em;}
.list-doc.second li:nth-child(3){position: relative; z-index: 0; }
.list-doc.second li:nth-child(4){position: relative; }
.list-doc.second li:nth-child(3)::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: -1.25em;
    width: 186%;
    height: 3em;
    box-shadow: 0 0 3px 1px var(--pink3);
    border-radius: 5px;
}
  .cache-wrapper {
      position: relative;
      width: fit-content;
      white-space: nowrap;
      background: var(--grey0);
      border-radius: 1em;
      box-shadow: 0 0 1px 1px var(--indigo-togrey-light50);
  }
  .legend.tag2{top: -.75em; left: 1em; padding: .25em .5em; border-radius: .75em; line-height: 1; }
  .cached-response{margin-right: 1em; font-size: smaller;}
  .cached-response::after {content: "cached response"; }
  .file {width: 17em; right: -15em; }
  .file::before {content: "⇨ "; color: var(--yellow2); }
  .bkg-top{background-position-y: top;
    background-size: 50%;}
</style>

# Servir une page en local avec un service Worker

.dflex.cache-wrapper[.absolute.legend.tag2[cache].flex-1.list-doc[
- style.css
- lib1.js
- lib2.js
- font.ttf
- image.png
].list-doc.second[
- home.html .absolute.file[.cached-response.tag2[].response[/home]]
- homeController.js
- report-form.html .absolute.file[.cached-response.tag2[].response[/new-report]]
- newReportController.js
- list.html .absolute.file[.cached-response.tag2[].response[/list]]
- listController.js
]]
.smaller[Librairie WorkBox pour abstraire la gestion du cache  
https://developer.chrome.com/docs/workbox/modules/workbox-cli#injectmanifest
]

???
Les SW servent entre autre à gérer le cache d’application  
Un SW a un cycle de vie : install, activate, ...
L’API SW est assez bas niveau => bcp de boilerplate

---
class: bkg-top
background-image: url(image/page-controller.png)
<style>
.img2 {
    height: 507px;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 10%;
}
.dflex.img2 img {
    height: 95%;
    /*width: auto;*/
}
</style>

---
name: controller
<style>
  .img3{
    height: 528px;
    margin-top: 2%;
    margin-left: -5%;
  }
  #slide-controller p:nth-child(3){margin: 0}
.tag3 {
    padding: .25em .5em;
    background: var(--grey0);
    box-shadow: 0 0 3px 1px var(--pink3);
    border-radius: 5px;
}
  .noshow{display: none;}
</style>

.tag3[/public/js/pages/newReportController.js ]

.dflex.noshow[
```js
//public/js/pages/newReportController.js
// 1. imports
import * as iDBStorage from './libs/iDBStorage.js'
import importPhoto from './components/importPhoto.js'
// 2. cache DOM refs
const elts = {
    myEl: document.querySelector('[data-someting]'),
    // ...
}
// 3. const, let + ‘theThing’
    // ...
// 4. Initialize web components
customElements.define('import-photo', importPhoto)

// 5. Templates function
function entryRowTmpl(row) {
  return `
    <tr>
        <td>${row.col1}</td>
        <td>${row.col2}</td>
        <td>${row.col3}</td>
        <td class="entry-actions">
            <button data-click="showActionsMenu">Menu</button>
        </td>
    </tr> `
}

// 6. eventHandlers
// 7. eventListener
// 8. init()
// 9. local utility functions

// 6. eventHandlers
const changeHandler = {
  changeThing: (event) => {
    // do Stuff
    // persist the thing in indexedDB
  },
  handleEvent: (event) => {
    let handler = event.target.dataset[event.type]

if (!handler || !this[handler]) {
      return
    }

this[handler](event)

}
}

// 7. eventListener
formElement.addEventListener('change', changeHandler)

// 8. init()
function init() {
  // get theThing from iDBStorage
  // doStuff
}
// 9. local utility functions

// Call init
init()
``` ]

---
name: custom-elt
background-image: url(../_images_bateau/combo-mini-phare-ilot.jpg)

# Web component .struct.tag1[pour modulariser] 
.dflex.code[
.ldom.absolute.tag2[light DOM] 
.absolute.arrow-y[![](image/arrow_down_yellow.png)] 
[![](image/web-component-html.png)]

![](image/web-component-js.png)
]
.dflex.noshow[
.text-left[
```html
<import-photo display-elt="photos-display">
  <label class="dropimage photo">
    <input type="file" name="photos" accept="image/*" multiple>
  </label>
</import-photo>
```
] .text-left[
```js
export default class importPhoto extends HTMLElement {

connectedCallback() {

this.displayElt = 
      document.getElementById(
        this.getAttribute('display-elt'))

this.fileInput = 
      document.querySelector(
        'input[name=photos'])

this.addEventListener('change', this)

}

handleEvent(event) {
    // do stuff
  }
}
``` ] ]

???
si beaucoup de fonctionnalités différentes dans la page
.small[meyerweb.com/eric/thoughts/2023/11/01/blinded-by-the-light-dom] 
---
class: bkg-left, bkg-bottom, relative
background-image: url(image/persist_iDB.png)
<style>
  .idb-obj {
    right: 15%;
    position: absolute;
    top: 24%;
}
.obj-store {
    position: absolute;
    right: 1%;
    top: 61%;
    background: hsl(191.84deg 32.76% 54.51%);
    color: var(--grey0);
}
</style>
# Persister les données dans indexedDB
<span class="tag1 idb-obj">indexedDB permet de<br>stocker des objets JS</span>
<span class="tag1 obj-store">Création d’un object store et de l’index</span>

.dflex.noshow[.flex-1[
```js
const db = await openDB('myAppDb', DB_VERSION, {
  async upgrade(db, oldVersion, newVersion, transaction) {

const reports = v1Db.createObjectStore('reports', {
      keyPath: 'name',
      unique: true,
    })

reports.createIndex('reportStatus', 'status')
  }
})
```
].flex-1[
```js
let report = {
    timestamp: Math.ceil(today.getTime() / 1000),
    categorie: null,
    lat: null,
    lon: null,
    content: '',
    photoFileNames: [],
    status: 'transmission_pending'
  }

```
]]

???
iDB présent dans tous les navigateurs  
BDD par défaut  
object store   
API ancienne à base de callback

---
class: bkg-vertical-left, results
background-image: url(../_images_bateau/regate-deriveurs.jpg)
.ml60[
# Résultats
- Performance  
  ressenti «instantané» pour une page de formulaire +250 input
- Données persistées en local pendant plusieur mois
- Synchronisation en tâche de fond
]

???
ça marche. ça marche même très bien  
Livrer  uniquement le code dont on a besoin, ça fait une grosse différence en terme de performance  
Anecdote s/ demande ressenti instantané > “je détruis l'écran si ça réagit pas immédiatement au tap”  
Dans Android au moins j'ai testé les données persistées dans iDB et dans le cache ça tient plusieurs mois > pas loin d'un an

---
class: center, bkg-cover
background-image: url(image/grenouille.jpeg)
.bkg-gradient-green[
# Quelques observations ]

???
Alors, est-ce que j'ai trouvé la martingale parfaite ?  
Certainement, non !  
Il ya pas mal d’inconnues encore  
et de freins

---
class: bkg-vertical-right, ref-ux
background-image: url(../_images_bateau/shipping_kiel_canal_cropped.jpg)
<style>
  .fit-content{width: fit-content;}
  .ref-ux img{position: relative; z-index: 1}
  .ref-ux .tag2.absolute{bottom: 12%; transform: rotate(-2deg);}
</style>
.center.fit-content[
# 1. Comprendre où sont<br>mes données]

![](image/concept_stockage.png)

.tag2.absolute[Refléxion sur l’UX]

???
Cloud vs local
Concept du stockage  
ça n'a rien d’évident pour une personne utilisatrice de comprendre où est stocké ce qu'elle produit  
Photos, textes, ...   
Là on est vraiment dans le dématérialisé  
Ne sais pas discriminer entre ce qui est remonté vers un serveur distant “le cloud” et ce qui est présent en local dans son appareil.  
Ne sais pas faire la différence entre ce qui est "public/publié" et ce qui est non-accessible au regard extérieur

---
class: coutures
<style>
  .coutures .list-img ul{margin-top: 0; padding:0;list-style: none;}
  .after {
    color: var(--logo-indigo);
    font-size: 83%;
    padding-left: 4em;
    position: relative;
    top: 0.75em;
}
</style>
# Rendre les «coutures» visible
.list-img[
- .tag1[Montrer les opérations de synchronisation]  
![](image/arrow_angle.png).after[Ce  qui est “chez moi” vs ce que je veux “remonter” dans un serveur distant]  
- .tag1[Rendre visible l’intermittence du réseau]  
![](image/arrow_angle.png).after[Est-ce que j’ai assez de bande passante ? C’est quoi le débit là où je suis ?]  
- .tag1[Rendre la main]  
![](image/arrow_angle.png).after[Laisser la décision SI ET QUAND je déclenche une opération de synchro] 
]
???
Je vous livre des premières pistes sur lesquelles je me suis penchée  
mais c'est loin d'être très avancé  
opé de synchro, souvent c'est complètement transparent. La machine gère ça dans son coin et on ne sait pas ce qu'elle fait.

---
class: bkg-vertical-right, sync-actions
background-image: url(../_images_bateau/oiseau_rocher.jpg)
<style>
  .sync-actions h1 {
    font-size: 44px;
    margin: 0;
}
  .sync-actions h1+p{margin-top: 2em}
  .legere{
    top: 9%;
    left: 34%;
    transform: rotate(-29deg) scale(.6);
  }
.lours {
    top: 23%;
    left: 23%;
    transform: rotate(9deg) scale(0.5);
}
</style>
# «Matérialiser» les actions de synchronisation

Différencier les données texte.absolute.legere[![](image/legeres.png)]  
et les photos/fichiers.absolute.lours[![](image/lourds.png)]  
- Donner le choix
- Aider à décider (poids / état du réseau / ...)

???
Un autre option, que j'ai développé pour une app de navigateurs  
l'équivalent de polarstep, pour les gens qui naviguent

---
class: bkg-vertical-0
background-image: url(../_images_bateau/baleiniere.jpg)
<style>
  .ml47{margin-left: 47%}
  .ml47 p{line-height: 2}
</style>
.ml47[
# 2. Justifier ses choix techniques

Ce que le client veut en priorité :  
  C’est que **ça marche**  
  Dans un futur à peu près connu  
  Que ça tombe pas en panne

.tag1.smaller[Le choix technique n'est pas le problème du client]
]
---
name: objections
class: bkg-vertical-right-narrow
background-image: url(../_images_bateau/falaise.jpg)
<style>
  #slide-objections h2{margin-bottom: 0}
  #slide-objections h2+p{margin-top: 0; position: relative;}
  .bkg-vertical-right-narrow {
    background-size: 42%;
    background-position-x: 105%;
    background-position-y: top;
}
.dble {
    transform: rotate(-70deg) scale(.5);
    top: -67%;
}
.aligne{display: inline-block; width: 100%; line-height: 1}
.rgen{    
    position: absolute;
    transform: scale(.6); left: 1em; top: -.25em;
  padding: .25em 1em;}
#slide-objections .tag2.small.absolute {
    text-align: center;
    transform: rotate(-7deg);
    left: 32%;
    top: 55%;
}
</style>

# Répondre aux objections

## Développement   
  moins risqué, plus rapide, moins cher  
  .relative.aligne[Aligné avec le .rgen.tag1[Référentiel général d’écoconception de services numériques]]

## Maintenabilité  .tag2.small.absolute[«Sans framework<br>on a du code “code spagetti”»]  
Structurer le code    
Former au web natif.absolute.dble[![](image/arrow_double.png)]

## Frein au recrutement

???
Méthodes de structuration du code > connues et appliquées

Poule et œuf  
Offre de formation / Offre sur marché de l’emploi    
Les entreprises recrutent des dev React parce qu'ils sont nombreux

## C’est le rôle des organisations de prendre leurs décisions tech en fonction de leur produit et des besoins clients

Fenêtre d’Overton pour passer au web natif

Les écoles / bootcamp forment à React parce que c'est demandé sur le marché de l’emploi

On voit apparaitre de + en + de critique sur les framework
D’autres apparaissent, mais ça reste encore assez lourd comparé au natif

---
class: bkg-cover, conclusion, middle, center
background-image: url(../_images_bateau/scilly-2023.jpg)
<style>
  .conclusion{color: var(--grey0);}
  .conclusion .ml50 p {
    margin-bottom: 2.5em;
}
  .conclusion .ml50 p:last-child {
    color: hsl(193 56% 25% / 1);
    margin-top: 5.5em;}
</style>
.ml50[
# Conclusion

Web ⇨ plateforme universelle  
mais attention aux mobiles

Rendre visible les coutures

On a besoin de concepteur / designer pour proposer des solutions
]

???
  environnement hostile (surtout dans le mobile)  
Le natif : réponse au bloatware ?

Rendre visible les coutures, laisser les décisions aux gens (synchro / local // local vs cloud)

On a besoin (terriblement) de concepteur / designer qui s'emparent de ces questions et proposent des réponses
---
class: center, middle, bkg-cover, color-white
background-image: url(../_images_bateau/rubber-duck.jpg)

.mtvb[
#Questions ?]