architecture d’une app qui fait 5 millions de visites par mois
TRANSCRIPT
![Page 1: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/1.jpg)
Architecture d’une app qui fait 5 millions de visites par mois
@juliencarnelos
#bdxio
![Page 2: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/2.jpg)
Groupe Sud Ouest : 34 sociétés
• Groupe Sud Ouest
• Journaux du midi
![Page 3: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/3.jpg)
![Page 4: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/4.jpg)
90 millions de pages vues apps en septembre 2014
300 0006 000 000
8 000 0003 600 000
26 000 000
48 000 000
Sud OuestMidi LibreLa république des PyrénéesL'indépendantCharente LibreCentre Presse Aveyron
Actu locale Actu thématique Journal en PDF
![Page 5: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/5.jpg)
Notre écosystème mobile
![Page 6: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/6.jpg)
Notre écosystème mobile
![Page 7: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/7.jpg)
Un Mercredi à 13h
• 560 visiteurs
• 1 300 interactions / minute
• 13 100 requêtes HTTP / minute
• Peut varier x50 (élections municipales)
![Page 8: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/8.jpg)
“Replace 5 with X”
![Page 9: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/9.jpg)
![Page 10: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/10.jpg)
Nos solutions
![Page 11: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/11.jpg)
« Big Picture »
ReverseProxy
Server
ReverseProxy
Server
ExternalCDN
Web Services
Assets
Images ImageResizer
MONITORING
CDN
![Page 12: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/12.jpg)
L’app
ReverseProxy
Server
ReverseProxy
Server
ExternalCDN
Web Services
Assets
Images ImageResizer
MONITORING
CDN
![Page 13: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/13.jpg)
Extrait de notre parc
![Page 14: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/14.jpg)
Comparaison iPhone / Android
![Page 15: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/15.jpg)
Comparaison iPhone / Android
![Page 16: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/16.jpg)
Notion d’application générique
• même backend
• même structure d’app
• $$ : mutualisation
• Personnalisation : couleurs, images, navigation, services
![Page 17: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/17.jpg)
Organisation du projet
• /Project => code source de l’app générique
• /Assets => 1 sous dossier par éditeur
• splashscreen
• couleurs, wording
• token
• 1 URL de référence
![Page 18: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/18.jpg)
Fichier de configuration
• « Hydrater » l’application au démarrage
• http://api.sudouest.fr/conf?token=ABCDEF
• 1 token par éditeur et par app
![Page 19: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/19.jpg)
routes internes
• Format : editeur://{page}/{params}
• so://rubrique/actu_home
• so://article/12345
• so://kiosque
• so://web/http://www.bdx.io/
• Porté dans la configuration
![Page 20: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/20.jpg)
Définition de la barre de navigation
![Page 21: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/21.jpg)
Menu
![Page 22: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/22.jpg)
Liste des services appelés : URL / Paramètres
![Page 23: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/23.jpg)
Possibilité d’insérer du HTML dans l’app
![Page 24: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/24.jpg)
Les scénarios possibles
• Mettre l’actu du mondial pendant 1 mois
• Lien vers un formulaire de feedback en home
• Modifier la hiérarchie de l’information
• Retirer une fonctionnalité buggée
![Page 26: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/26.jpg)
App Hybride
HTML CSS JS
responsive
![Page 27: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/27.jpg)
Moteur article webview
JSON article
{}
JSON profil
{}
JSON app {}
{ article images type article payant }
{ statut }
{ device }
Template HandleBarsTemplate
HandleBars
Template HandleBars
JQuery
Logique JS
![Page 28: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/28.jpg)
Moteur article webview
webview.zip
5 Ko
200 304
![Page 29: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/29.jpg)
La couche service
ReverseProxy
Server
ReverseProxy
Server
ExternalCDN
Web Services
Assets
Images ImageResizer
MONITORING
CDN
![Page 30: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/30.jpg)
Approche REST
• pur REST : ❤️ en théorie
• Complexité et contraintes fortes
• Parc interne maîtrisé : on peut optimiser
![Page 31: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/31.jpg)
Nos pratiques REST
• 99% de GET
• n° de version dans l’URL
• Clé d’API dans l’url
• Paramètres en GET plutôt que POST
• Parle HTTP : 200 / 304 / 403 / 404 / 500
![Page 32: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/32.jpg)
Nos pratiques REST
• Copie-collable
• Facilite la compréhension
![Page 33: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/33.jpg)
Cache local
• Cache First / Offline
• Requête en arrière plan
• Refresh à la volée
• Importance du HTTP : 304 / E-Tag
![Page 34: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/34.jpg)
Start de l’app
• On veut des utilisateurs à jour
• A chaque mise à jour, on vide le cache local et on force le download des fichiers de base
• Fichier de config
• Assets
• Lors des autres lancements, 3 secondes en temps limite (=> marche mieux sur iPhone)
![Page 35: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/35.jpg)
L’infrastructure
ReverseProxy
Server
ReverseProxy
Server
ExternalCDN
Web Services
Assets
Images ImageResizer
MONITORING
CDN
![Page 36: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/36.jpg)
Un reverse proxy ?
• Proxy : transmet les requêtes d’un client
• Proxy inverse : transmet les requêtes à un serveur interne - peut être intelligent -
Apache api.sudouest.frvarnish
GET /article/12345 cache miss GET /article/12345GET /article/12345 cache hit
![Page 37: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/37.jpg)
Reverse Proxy
• 99% traffic anonyme : Exemple GET /home
Apache
500 500
max-age 60 : 1 par minute e-tag : 304varnish
500 1
max-age 60 e-tag
max-age 60 e-tag
• Dumb Server / 500 mbits - 1 Gbits / 32 - 64 Go
• Tout en RAM, Cluster
![Page 38: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/38.jpg)
Image Resizer / Thumbor
• Optimisation mémoire (Android ?)
• URL : « api.sudouest.fr/image/200/450/image.jpg »
• Mode « Smart »
![Page 39: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/39.jpg)
Schéma logique
varnishfrontal 1
500 mbits
Apache ML
ThumborCluster
varnishfrontal 2
500 mbits
varnishback 11 Gbits
varnishback 21 Gbits
Apache SO
Apache Dep
varnishfrontal 3
500 mbits
DNS Resolver
CDNexterne
infini
![Page 40: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/40.jpg)
Nos outils
![Page 41: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/41.jpg)
Outil web interne
• Choix éditeur / version / environnement
• Choix du web service et des paramètres
![Page 42: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/42.jpg)
Charles Proxy
![Page 43: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/43.jpg)
![Page 44: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/44.jpg)
Charles Proxy
![Page 45: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/45.jpg)
Charles dans la vie
• « Le serveur retourne bien les nouvelles données »
• « L’Ad server retourne 200 / NO FILL »
• « je suis chez FREE » (Throttling Orange)
• Infrastructure KO
![Page 46: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/46.jpg)
Monitoring
ReverseProxy
Server
ReverseProxy
Server
ExternalCDN
Web Services
Assets
Images ImageResizer
MONITORING
CDN
![Page 47: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/47.jpg)
Crashlytics - FREE
![Page 48: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/48.jpg)
![Page 49: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/49.jpg)
![Page 50: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/50.jpg)
![Page 51: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/51.jpg)
![Page 52: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/52.jpg)
Crashlytics
• SDK à intégrer au projet
• Suivi dans le temps :
![Page 53: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/53.jpg)
New Relic - $$$
![Page 54: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/54.jpg)
Fonctionnement
• Instrumente chaque appel réseau
• Instrumente le temps passé dans les activités principales
• Ajoute son code au moment de la compilation du projet
![Page 55: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/55.jpg)
Dashboard New Relic
![Page 56: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/56.jpg)
![Page 57: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/57.jpg)
Stacktrace
![Page 58: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/58.jpg)
Log erreur serveur
![Page 59: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/59.jpg)
Processus de build
![Page 60: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/60.jpg)
Build : 3 parties
• 1 moteur core par plateforme
• 1 pack ressources par éditeur / plateforme
• 1 pack « wording »
![Page 61: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/61.jpg)
Build : processus
• JENKINS en post-commit sur GIT
• iOS : build inhouse (entreprise) et adhoc
• Tests à 90% sur la inhouse.
• Fin de recette sur adhoc (peu de devices)
• Mise en prod manuelle
• Android : 1 version build avec le certificat de production. Si recette OK => publication
![Page 62: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/62.jpg)
En conclusion
• Avoir le pouvoir depuis le serveur : « tirer un fil »
• Contenu responsive hybride et adaptatif
• Penser les futures extensions de l’app : o-auth, webview, deeplink
• Monitoring actionnable
• Automatiser la génération
![Page 63: Architecture d’une app qui fait 5 millions de visites par mois](https://reader033.vdocuments.mx/reader033/viewer/2022042817/55a141c81a28abea278b47ec/html5/thumbnails/63.jpg)
@juliencarnelos #bdxio
Merci