LE WEB GRANULAIRE

4 mars 2015

Thibaut VillemontCreative Technologist

5emeGauche

La granularité ?

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

au pixel

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

granulaire

Dans l’économie, Patrick Viguerie ( The granularity of growth,

2008) propose une étude granulaire de l’entreprise pour identifier les poches de

croissance

“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 ?

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

Visualiser le système

Utilisateurséquipe interne

finaux

infrastructureIT

Composantsergonomiquefonctionnels

interactifs

Architectureinformationgraphiquetechnique

Stratégiecible

businesscoûts

Briquesfonctionnelles

technologiquesalgorithmique

Fluxtransaction

data

Chacune des entités doit êtreautonome

communiquanteréutilisable

AutonomeComposable (brique)

Maintenable et évolutivene doit pas créer d’interférence

I

Communiquanteinteropérabledocumentée

accessible

II

Réutilisablepartageable

extensible (dérivation)

III

La granularité, c’est donc “smart”

Un système dit granulaire se base sur la confiance

entre des communautés, des entreprises, des hommes

… est transdiciplinairechaque choix impacte l’UX, la création, le

code, le budget, les metrics, les objectifs, ...

… est un gain de tempschaque composant est plus facile

à maintenir et améliorer

Dans la pratique

Infrastructure & web services

Stack Airbnb

http://stackshare.io/airbnb/airbnb#

Code

130 000 packages

Gestion des dépendances

10 000 packages

Gestion debundles

2500 bundles

mais aussiExpressJS, Laravel,

autres CMS, ...

Exemple de bundles

Gestion des utilisateursGestion de bloc articlesgestion d’un moteur de rechercheUpload d’imageOutils de debug….

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

Polymerframework par Google

Brickframework par Mozilla

Les composants d’interface

Le but est d'isoler chaque objet d'une interface

( style, architecture et comportement ) et de le travailler en équipe

Les composants d’interface

Pour bâtir une véritable charte qui intègre l’essence des interfaces web (expérience à l’

usage)

Les composants d’interface

Et qui continue l’expérience de l’utilisateur avec la marque quelque soit le contexte :

TV, mobile, wearable …

ExempleBBC Styleguideweb, TV, mobile, tablette

BBC Composants + code

Orchestration

Orchestration

Tout décomposerpour percevoir les enjeux et les difficultés de conception

Prioriser les composants du projetpour mieux estimer les efforts à faire

Orchestration

Faire confiance aux services tiers qui solutionnent très bien les problèmes

Oublier en partie le PSDet inventer des livrables plus en phase avec le digital

Une évidence

Un modèle qui s’est naturellement imposé sur le web et qui répond aux

exigences d’innovation.

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

Question ?