Cyrille Perois
Lead front-end developer @ Wandi Teaches front-end development @ IUT Paris Descartes
Cyrille Perois - 05/10/2018
https://frama.link/WH54Hg2m
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.
« Les données STP »
« Que voici. »
n clients,
1 back-end
👍
❌
?
❌
✔️
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 ?
... 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
✔️
❌
À chaque action de l'utilisateur
À chaque action de l'utilisateur
(si une connexion est présente)
+ au retour de la connexion
🤔
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
🤔
✔️
Il existe des adapters pour :
🤔
✔️
✔️
{
"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
🤩
✔️
✔️
✔️
Tous nos problèmes sont résolus. Notre application est autonome et offline-first
❌
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
Volume conséquent de données à synchroniser
PouchLink
StackLink
Opération
Résultat
Token pour les bases A, B et C ?
Documents ?
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.
Venez nous voir sur le stand !
@JesmoDrazik - https://frama.link/WH54Hg2m
By Cyrille Perois
Vidéo : https://youtu.be/VnwzO0uNn6o?t=913