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 000
6 000 000
8 000 000
3 600 000
26 000 000
48 000 000
Sud Ouest
Mid...
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 (électio...
“Replace 5 with X”
Nos solutions
« Big Picture »
Reverse
Proxy
Server
Reverse
Proxy
Server
External
CDN
Web Services
Assets
Images Image
Resizer
MONITORING...
L’app
Reverse
Proxy
Server
Reverse
Proxy
Server
External
CDN
Web Services
Assets
Images Image
Resizer
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, i...
Organisation du projet
• /Project => code source de l’app générique
• /Assets => 1 sous dossier par éditeur
• splashscreen...
Fichier de configuration
• « Hydrater » l’application au démarrage
• http://api.sudouest.fr/conf?token=ABCDEF
• 1 token par...
routes internes
• Format : editeur://{page}/{params}
• so://rubrique/actu_home
• so://article/12345
• so://kiosque
• so://...
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 ...
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 }
{ devic...
Moteur article webview
webview.zip
5 Ko
200
304
La couche service
Reverse
Proxy
Server
Reverse
Proxy
Server
External
CDN
Web Services
Assets
Images Image
Resizer
MONITORI...
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
• Pa...
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 de...
L’infrastructure
Reverse
Proxy
Server
Reverse
Proxy
Server
External
CDN
Web Services
Assets
Images Image
Resizer
MONITORIN...
Un reverse proxy ?
• Proxy : transmet les requêtes d’un client
• Proxy inverse : transmet les requêtes à un serveur
intern...
Reverse Proxy
• 99% traffic anonyme : Exemple GET /home
Apache
500 500
max-age 60 : 1 par minute
e-tag : 304
varnish
500 1
...
Image Resizer / Thumbor
• Optimisation mémoire (Android ?)
• URL : « api.sudouest.fr/image/200/450/
image.jpg »
• Mode « S...
Schéma logique
varnish
frontal 1
500 mbits
Apache
ML
Thumbor
Cluster
varnish
frontal 2
500 mbits
varnish
back 1
1 Gbits
va...
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 s...
Monitoring
Reverse
Proxy
Server
Reverse
Proxy
Server
External
CDN
Web Services
Assets
Images Image
Resizer
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 ...
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 inhous...
En conclusion
• Avoir le pouvoir depuis le serveur : « tirer un fil »
• Contenu responsive hybride et adaptatif
• Penser le...
@juliencarnelos
#bdxio
Merci
Architecture d’une app qui fait 5 millions de visites par mois
Architecture d’une app qui fait 5 millions de visites par mois
Architecture d’une app qui fait 5 millions de visites par mois
Architecture d’une app qui fait 5 millions de visites par mois
Architecture d’une app qui fait 5 millions de visites par mois
Architecture d’une app qui fait 5 millions de visites par mois
Architecture d’une app qui fait 5 millions de visites par mois
Architecture d’une app qui fait 5 millions de visites par mois
Prochain SlideShare
Chargement dans…5
×

Architecture d’une app qui fait 5 millions de visites par mois

1 557 vues

Publié le

Basé sur un cas réel dans la presse quotidienne régionale, cette présentation vous montrera quels sont les principes d'architecture à respecter pour concevoir et maintenir un parc d'applications mobiles natives iOS / Android / Windows Phone 8. Nous verrons les différentes étapes de la construction d'un socle commun et générique, résistant à la charge et évolutif. Nous parlerons également des solutions hybrides, de la gestion server-side, de la prise en compte du réseau mobile et des difficultés rencontrées.

Publié dans : Mobile
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 557
Sur SlideShare
0
Issues des intégrations
0
Intégrations
30
Actions
Partages
0
Téléchargements
12
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Architecture d’une app qui fait 5 millions de visites par mois

  1. 1. Architecture d’une app qui fait 5 millions de visites par mois @juliencarnelos #bdxio
  2. 2. Groupe Sud Ouest : 34 sociétés • Groupe Sud Ouest • Journaux du midi
  3. 3. 90 millions de pages vues apps en septembre 2014 300 000 6 000 000 8 000 000 3 600 000 26 000 000 48 000 000 Sud Ouest Midi Libre La république des Pyrénées L'indépendant Charente Libre Centre Presse Aveyron Actu locale Actu thématique Journal en PDF
  4. 4. Notre écosystème mobile
  5. 5. Notre écosystème mobile
  6. 6. Un Mercredi à 13h • 560 visiteurs • 1 300 interactions / minute • 13 100 requêtes HTTP / minute • Peut varier x50 (élections municipales)
  7. 7. “Replace 5 with X”
  8. 8. Nos solutions
  9. 9. « Big Picture » Reverse Proxy Server Reverse Proxy Server External CDN Web Services Assets Images Image Resizer MONITORING CDN
  10. 10. L’app Reverse Proxy Server Reverse Proxy Server External CDN Web Services Assets Images Image Resizer MONITORING CDN
  11. 11. Extrait de notre parc
  12. 12. Comparaison iPhone / Android
  13. 13. Comparaison iPhone / Android
  14. 14. Notion d’application générique • même backend • même structure d’app • $$ : mutualisation • Personnalisation : couleurs, images, navigation, services
  15. 15. 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
  16. 16. Fichier de configuration • « Hydrater » l’application au démarrage • http://api.sudouest.fr/conf?token=ABCDEF • 1 token par éditeur et par app
  17. 17. 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
  18. 18. Définition de la barre de navigation
  19. 19. Menu
  20. 20. Liste des services appelés : URL / Paramètres
  21. 21. Possibilité d’insérer du HTML dans l’app
  22. 22. 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
  23. 23. O-Auth • standard • Jeton d’auth transmis dans les so://web/
  24. 24. App Hybride HTML CSS JS responsive
  25. 25. Moteur article webview JSON article {} JSON profil {} JSON app {} { article images type article payant } { statut } { device } Template HandleBars Template HandleBars Template HandleBars JQuery Logique JS
  26. 26. Moteur article webview webview.zip 5 Ko 200 304
  27. 27. La couche service Reverse Proxy Server Reverse Proxy Server External CDN Web Services Assets Images Image Resizer MONITORING CDN
  28. 28. Approche REST • pur REST : ❤️ en théorie • Complexité et contraintes fortes • Parc interne maîtrisé : on peut optimiser
  29. 29. 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
  30. 30. Nos pratiques REST • Copie-collable • Facilite la compréhension
  31. 31. Cache local • Cache First / Offline • Requête en arrière plan • Refresh à la volée • Importance du HTTP : 304 / E-Tag
  32. 32. 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)
  33. 33. L’infrastructure Reverse Proxy Server Reverse Proxy Server External CDN Web Services Assets Images Image Resizer MONITORING CDN
  34. 34. 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
  35. 35. Reverse Proxy • 99% traffic anonyme : Exemple GET /home Apache 500 500 max-age 60 : 1 par minute e-tag : 304 varnish 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
  36. 36. Image Resizer / Thumbor • Optimisation mémoire (Android ?) • URL : « api.sudouest.fr/image/200/450/ image.jpg » • Mode « Smart »
  37. 37. Schéma logique varnish frontal 1 500 mbits Apache ML Thumbor Cluster varnish frontal 2 500 mbits varnish back 1 1 Gbits varnish back 2 1 Gbits Apache SO Apache Dep varnish frontal 3 500 mbits DNS Resolver CDN externe infini
  38. 38. Nos outils
  39. 39. Outil web interne • Choix éditeur / version / environnement • Choix du web service et des paramètres
  40. 40. Charles Proxy
  41. 41. Charles Proxy
  42. 42. 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
  43. 43. Monitoring Reverse Proxy Server Reverse Proxy Server External CDN Web Services Assets Images Image Resizer MONITORING CDN
  44. 44. Crashlytics - FREE
  45. 45. Crashlytics • SDK à intégrer au projet • Suivi dans le temps :
  46. 46. New Relic - $$$
  47. 47. 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
  48. 48. Dashboard New Relic
  49. 49. Stacktrace
  50. 50. Log erreur serveur
  51. 51. Processus de build
  52. 52. Build : 3 parties • 1 moteur core par plateforme • 1 pack ressources par éditeur / plateforme • 1 pack « wording »
  53. 53. 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
  54. 54. 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
  55. 55. @juliencarnelos #bdxio Merci

×