Amélioration progressive
Des sites à l’épreuve des balles
Nicolas Hoffmann / @Nico3333fr
Codeurs en Seine 2017
Slides dispos ici
https://www.nicolas-hoffmann.net/PE-CES2017Définition
Commencer par la version de base, puis ajouter des améliorations pour ceux qui peuvent les gérer.Quelques exemples…
Quelques exemples…
Quelques exemples…
Et pour les sites ?
Partir de la base (HTML),et enrichir ensuite avec CSS, JS, APIs, etc.
=> Approche de développement et de conception
Et pourquoi faire ?
Des sites plus robustes… entre autres bénéfices Approche bottom-upEt ça, c’en est ?
<input type="tel" …/>
// si non supporté ?
Quelques bêtises sur le sujet
Personne ne désactive JavaScript
Everyone has JavaScript, right?C’est anti-JS.
Oh que non, PE + JS = ♥ !C’est pour supporter les navigateurs archaïques
=> Oh, c’est pas une poubelle ici.
Personne n’utilise les « vieux » navigateurs
Sûr ?C’est une technique qui présume ce qu’ont les visiteurs.
C’est le contraire !C’est faire le travail à double
Heu… non en fait !Schéma classique
C’est pas faux maiiiiiiiis…
Un poil réducteur !En fait, on peut en faire à tous les étages !
En CSS
background: #f7fbfc;
background: rgba(247, 251, 252, 0.40);
/* #f7fbfc66 */
En CSS via @supports
@supports (display: flex) {
.form-wrapper { display:flex; }
}
En CSS via @supports
En JS, via Modernizr
<html class="no-js" lang="fr">
Modernizr appliqué…
<html class="js svg" lang="fr">
.js .hidden-with-js,
.no-js .hidden-without-js {
display: none;
}
En JS, via Modernizr
Sans JS, le contenu est directement affiché.
En JS, via Modernizr
Avec JS, on cache le contenu et on fait apparaitre un lien…
En JS, via Modernizr
… un clic dessus lance une modale.
En JS/API
if (navigator.geolocation) { // …
if (el.classList) { // …
if (el.fireEvent) { // …
// on améliore pour ceux qui supportent
Des exemples plus pratiques
Amélioration d’une fonction basique
People with albinism: Connie ChuAméliorer pour le no-touch…
People with albinismUn exemple via @supports
@supports (display: grid) {
.grid-container-pplus {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
grid-column-gap: 30px;
grid-row-gap: 30px;
}
}
Un exemple via @supports
Sans grid
Un exemple via @supports
Avec grid
Concevoir en amélioration progressive
Van11y tabs
Source
Couper la moutarde
if('querySelector' in document
&& 'localStorage' in window
&& 'addEventListener' in window) {
// bootstrap the javascript application
}
Gérer le offline
if ('serviceWorker' in navigator) {
PWA, ça commence par (amélioration) Progressive !
« Oui mais, le JS est toujours là »
« Et ça ne casse jamais »
Vraiment jamais ?
Justement !
L’idée n’est pas de se dire si le « problème » va arriver, mais juste quand.Et il sera géré de facto.
En résumé
- Sites plus robustes
- Repenser la dépendance à JS
- Permet de parer aux éventualités avec moins de stress
- Offrir la meilleure expérience selon les capacités
- Et plein d’autres avantages…
Conclusion
You + PE = ♥
Ressources
Ressources, suite
- Une histoire de Grid Layout, de Microsoft et de @supports
- Amélioration progressive, capacités et CSS
- Amélioration progressive et bugs sont dans un bateau…
- Retour d’expérience sur un plugin accessible
- Amélioration progressive, de la théorie à la pratique - (slides)
- Reimagining SPA with Progressive enhancement
- A complete guide to PE
Que le kaizen soit avec vous !
Pour discuter :
Nicolas Hoffmann / @Nico3333fr