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

O-Auth

• standard

• Jeton d’auth transmis dans les so://web/

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