Post on 11-Jul-2015
Architecture d’une app qui fait 5 millions de visites par mois
@juliencarnelos
#bdxio
Groupe Sud Ouest : 34 sociétés
• Groupe Sud Ouest
• Journaux du midi
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
Notre écosystème mobile
Notre écosystème mobile
Un Mercredi à 13h
• 560 visiteurs
• 1 300 interactions / minute
• 13 100 requêtes HTTP / minute
• Peut varier x50 (élections municipales)
“Replace 5 with X”
Nos solutions
« Big Picture »
ReverseProxy
Server
ReverseProxy
Server
ExternalCDN
Web Services
Assets
Images ImageResizer
MONITORING
CDN
L’app
ReverseProxy
Server
ReverseProxy
Server
ExternalCDN
Web Services
Assets
Images ImageResizer
MONITORING
CDN
Extrait de notre parc
Comparaison iPhone / Android
Comparaison iPhone / Android
Notion d’application générique
• même backend
• même structure d’app
• $$ : mutualisation
• Personnalisation : couleurs, images, navigation, services
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
Fichier de configuration
• « Hydrater » l’application au démarrage
• http://api.sudouest.fr/conf?token=ABCDEF
• 1 token par éditeur et par app
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
Définition de la barre de navigation
Menu
Liste des services appelés : URL / Paramètres
Possibilité d’insérer du HTML dans l’app
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
App Hybride
HTML CSS JS
responsive
Moteur article webview
JSON article
{}
JSON profil
{}
JSON app {}
{ article images type article payant }
{ statut }
{ device }
Template HandleBarsTemplate
HandleBars
Template HandleBars
JQuery
Logique JS
Moteur article webview
webview.zip
5 Ko
200 304
La couche service
ReverseProxy
Server
ReverseProxy
Server
ExternalCDN
Web Services
Assets
Images ImageResizer
MONITORING
CDN
Approche REST
• pur REST : ❤️ en théorie
• Complexité et contraintes fortes
• Parc interne maîtrisé : on peut optimiser
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
Nos pratiques REST
• Copie-collable
• Facilite la compréhension
Cache local
• Cache First / Offline
• Requête en arrière plan
• Refresh à la volée
• Importance du HTTP : 304 / E-Tag
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)
L’infrastructure
ReverseProxy
Server
ReverseProxy
Server
ExternalCDN
Web Services
Assets
Images ImageResizer
MONITORING
CDN
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
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
Image Resizer / Thumbor
• Optimisation mémoire (Android ?)
• URL : « api.sudouest.fr/image/200/450/image.jpg »
• Mode « Smart »
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
Nos outils
Outil web interne
• Choix éditeur / version / environnement
• Choix du web service et des paramètres
Charles Proxy
Charles Proxy
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
Monitoring
ReverseProxy
Server
ReverseProxy
Server
ExternalCDN
Web Services
Assets
Images ImageResizer
MONITORING
CDN
Crashlytics - FREE
Crashlytics
• SDK à intégrer au projet
• Suivi dans le temps :
New Relic - $$$
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
Dashboard New Relic
Stacktrace
Log erreur serveur
Processus de build
Build : 3 parties
• 1 moteur core par plateforme
• 1 pack ressources par éditeur / plateforme
• 1 pack « wording »
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
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
@juliencarnelos #bdxio
Merci