internal presentation for interactive agency www.5emegauche.com

1. LE WEB GRANULAIRE
4 mars 2015
Thibaut Villemont
Creative Technologist
5emeGauche

2. La granularité ?

3. Dans la photo,
la granularité fait référence au grain,
au pixel

4. Dans la musique,
la granularité fait référence à la synthèse
granulaire

5. Dans l’économie,
Patrick Viguerie ( The granularity of growth,
2008) propose une étude granulaire de l’
entreprise pour identifier les poches de
croissance

6. “La structure par division, par métier ou par
ligne de produit ne permet pas de faire les
bons choix stratégiques de croissance”
Redécouper pour mieux comprendre ?

7. Dans l’industrie du Web,
Idem, il faut décomposer,
mais ce n’est pas suffisant

8. Visualiser le système

9. Utilisateurs
équipe interne
finaux
infrastructure
IT
Composants
ergonomique
fonctionnels
interactifs
Architecture
information
graphique
technique
Stratégie
cible
business
coûts
Briques
fonctionnelles
technologiques
algorithmique
Flux
transaction
data

10. Chacune des entités doit être
autonome
communiquante
réutilisable

11. Autonome
Composable (brique)
Maintenable et évolutive
ne doit pas créer d’interférence
I

12. Communiquante
interopérable
documentée
accessible
II

13. Réutilisable
partageable
extensible (dérivation)
III

14. La granularité, c’est donc “smart”

15. Un système dit granulaire
se base sur la confiance
entre des communautés, des
entreprises, des hommes

16. … est transdiciplinaire
chaque choix impacte l’UX, la création, le
code, le budget, les metrics, les objectifs, ...

17. … est un gain de temps
chaque composant est plus facile
à maintenir et améliorer

18. Dans la pratique

19. Infrastructure & web services
Stack Airbnb
http://stackshare.
io/airbnb/airbnb#

20. Code
130 000 packages
Gestion des
dépendances
10 000 packages
Gestion de
bundles
2500 bundles
mais aussi
ExpressJS, Laravel,
autres CMS, ...
Exemple de bundles
Gestion des utilisateurs
Gestion de bloc articles
gestion d’un moteur de
recherche
Upload d’image
Outils de debug
….

21. Les composants d’interface
Element personnalisé : ex : <super-
article></super-article>
Que l’on peut importer dans une page HTML
Qui est dynamique (Template)
Web components
Polymer
framework par Google
Brick
framework par Mozilla

22. Les composants d’interface
Le but est d'isoler chaque objet
d'une interface
( style, architecture et comportement )
et de le travailler en équipe

23. Les composants d’interface
Pour bâtir une véritable charte qui intègre l’
essence des interfaces web (expérience à l’
usage)

24. Les composants d’interface
Et qui continue l’expérience de l’utilisateur
avec la marque quelque soit le contexte :
TV, mobile, wearable …

25. Exemple
BBC Styleguide
web, TV, mobile, tablette
BBC Composants + code

26. Orchestration

27. Orchestration
Tout décomposer
pour percevoir les enjeux et les difficultés de conception
Prioriser les composants du projet
pour mieux estimer les efforts à faire

28. Orchestration
Faire confiance aux services tiers
qui solutionnent très bien les problèmes
Oublier en partie le PSD
et inventer des livrables plus en phase avec le digital

29. Une évidence

30. Un modèle qui s’est naturellement imposé
sur le web et qui répond aux
exigences d’innovation.

31. Un modèle pour faire vivre les applications
et vivre ceux qui les façonnent.

32. Question ?