Donner le pouvoir de la donnée aux webapps

Cyrille Perois - 05/10/2018

https://frama.link/WH54Hg2m

Cyrille Perois

 

@JesmoDrazik

jesmodrazik.fr

 

Développeur front-end @                        

Qu'est-ce qu'une webapp ?

Une application web est une application manipulable directement en ligne grâce à un navigateur web et qui ne nécessite donc pas d'installation sur les machines clientes.

+

Une application hybride est une application utilisant le navigateur web intégré du support et les technologies Web (HTML, CSS et Javascript) pour fonctionner sur différents OS.

Comment une webapp accède à ses données ?

« Les données STP »

« Que voici. »

n clients,
1 back-end

👍

?

✔️

  • Local Storage
  • IndexedDB
  • Service Worker + Cache API

Les données déjà récupérées sont mises en cache dans le navigateur, on peut donc les afficher même lorsqu'il n'y a plus de connexion

Et lorsque l'utilisateur(rice) ajoute / supprime / modifie des données alors ?

  • Local Storage
  • Service Worker
  • Cache API
  • Network Availability API
  • ...

... et pourtant des fonctionnalités manquantes

Est-ce que c'est ce qu'on peut faire de mieux ?

Redonner du pouvoir, et donc de l'autonomie aux webapps

Les rendre responsables de leurs données

Déplacer du code métier côté client

✔️

  • L'app répond instantanément aux actions de l'utilisateur
  • L'app est utilisable en mode hors-ligne
  • Quid de la synchronisation des données avec le serveur ?

À chaque action      de l'utilisateur

À chaque action de l'utilisateur
(si une connexion est présente)

+ au retour de la connexion

  • Synchronisation avec le serveur
  • Stockage des données en local (ressources limitées)
  • Conflits lorsque plusieurs utilisateurs modifient les mêmes données

🤔

Seamless multi-master sync, that scales from Big Data to Mobile,with an Intuitive HTTP/JSON API and designed for Reliability.

lets your data flow seamlessly between server clusters to mobile phones and web browsers, enabling a compelling offline-first user-experience while maintaining high performance and strong reliability

Navigateur

PouchDB is an open-source JavaScript database inspired by Apache CouchDB that is designed to run well within the browser.
It enables applications to store data locally while offline, then synchronize it with CouchDB [...] when the application is back online.

Lecture / écriture

Synchronisation lors d'événements particuliers ou à intervalle régulier

Base locale

Base distante

🤔

✔️

  • Synchronisation avec le serveur
  • Stockage des données en local (ressources limitées)
  • Conflits lorsque plusieurs utilisateurs modifient les mêmes données

IndexedDB

  • Base de données locale (dans le navigateur)
  • Stocke des documents JSON
  • Système d'indexation pour accéder aux objets rapidement
  • Des limitations de taille de stockage (différentes selon les navigateurs)

Et si ma cible inclut d'anciennes versions de navigateurs ?

Il existe des adapters pour :

  • WebSQL
  • Local Storage
  • In memory (plutôt pour des tests, quand même)
  • Synchronisation avec le serveur
  • Stockage efficace des données en local (ressources limitées et inconnues)
  • Conflits lorsque plusieurs utilisateurs modifient les mêmes données

🤔

✔️

✔️

{
  "label": "Say « bonsoir Paris »",
  "done": false
}
{
  "_id": "1eab3c4",
  "_rev": "1-95eba0c67ef3",
  "label": "Say « bonsoir Paris »",
  "done": false
}
{
  "_id": "1eab3c4",
  "_rev": "1-95eba0c67ef3",
  "label": "Hello, c'est Cozy et on recrute !",
  "done": true
}
{
  "_id": "1eab3c4",
  "_rev": "2-fca560b8132a",
  "label": "Hello, c'est Cozy et on recrute !",
  "done": true
}
{
  "_id": "1eab3c4",
  "_rev": "1-95eba0c67ef3",
  "label": "Hello, c'est Cozy et on recrute ! Rejoins-nous !",
  "done": false
}

Conflit

Client A modifie le document

Client B modifie le document

  • Synchronisation avec le serveur
  • Stockage efficace des données en local (ressources limitées et inconnues)
  • Conflits lorsque plusieurs utilisateurs modifient les mêmes données

🤩

✔️

✔️

✔️

Tous nos problèmes sont résolus. Notre application est autonome et offline-first

Relations entre documents ?

Il n'y a aucune notion de relations dans CouchDB.

Pourtant dans la vrai vie les relations sont partout...

Todo item

Author

{
  "_id": "1eab3c4",
  "_rev": "1-95eba0c67ef3",
  "label": "Say « bonsoir Paris Web »",
  "done": false,
  "author": {
    "firstname": "Cyrille",
    "lastname": "Perois",
    "nickname": "drazik"
  }
}

Simple, mais pas scalable

{
  "_id": "1eab3c4",
  "_rev": "1-95eba0c67ef3",
  "label": "Say « bonsoir Paris Web »",
  "done": false,
  "relationships": {
    "author": {
      "data": {
        "_id": "b1df87162e",
        "_type": "people"
      }
    }
  }
}
{
  "_id": "b1df87162e",
  "_rev": "1-12652dabf156",
  "firstname": "Cyrille",
  "lastname": "Perois",
  "nickname": "drazik"
}

todo-item

people

Première synchronisation ?

Volume conséquent de données à synchroniser

PouchLink

StackLink

Opération

Résultat

Authentification ?

Token pour les bases A, B et C ?

Documents ?

  • ... tout ce dont on vient de parler
  • Manipulation de données non JSON (fichiers...)
  • Normalisation des données (store Redux normalisé)
  • Lien entre les données et l'UI

Créer des webapps autonomes, capables de gérer leurs propres données et offline-first, c'est possible.

Ça demande de choisir les bons outils et de se poser certaines questions, mais globalement on a tout ce qu'il faut à disposition pour le faire.

L'UX de ces applications est bien meilleure que celle d'applications qui affichent des tas de spinners.

Credits

Merci !

Des questions ?

Venez nous voir sur le stand                   !

@JesmoDrazik - https://frama.link/WH54Hg2m

Donner le pouvoir de la donnée aux webapps - Paris Web 2018

By Cyrille Perois

Donner le pouvoir de la donnée aux webapps - Paris Web 2018

Vidéo : https://youtu.be/VnwzO0uNn6o?t=913

  • 1,537