L'intégration,
ce monde du
« ça dépend »

Paris Web 2013

Créé par Nicolas Hoffmann / @nico3333fr

Instant schizophrénique

Dans la tête de l'intégrateur/développeur front-end

« Nouveau site en responsive »

  • Chic !
  • Chic !
  • Chic !

« Le site doit être très rapide sur mobile »

  • Checklist webperfs rulez
  • Conditionnal loading ?
  • CSS, CDN, images hyper-optimisées
  • Page Speed, Web Page Test, etc.
  • Mobile-first !
  • Éviter jQuery, préférer Vanilla JS ?
  • Etc.

« Rapide, mais pas de perfs de l'extrême »

  • Mobile-first ☑
  • Checklist webperfs ☑
  • « j'ai le droit de gueuler quand même s'ils me demandent nawak » ☑
  • Etc.

« Côté tablettes => iPad »

« Pas d'optimisation Retina »

  • Tant mieux.
  • Pas de JavaScript supplémentaire, images tailles réelles.
  • Logo en SVG

« Pas de grosse usine JS »

  • Peut-être envisager jQuip ou Vanilla JS ?
  • Pas de trucs expérimentaux à « fallbacker »
  • « ok, mais effets jQuery. J'vous jure. »

« Dernières versions de
Chrome, Firefox, Opera, Safari »

  • \o/ pas de support Firefox 3.6 à la noix ou de Safari 5 à la c…
  • Ok côté CSS3
  • :)

« Sujet qui fâche : IE »

  • Se gaffer quand même d'IE9, prévoir une classe conditionnelle pour lui
  • … et pour tous les autres ☑

« IE8 »

  • Ok, pas de data-URI > 32ko
  • Pas de média-query, pas de rem :(
  • Et tout le reste.
  • Lot de consolation : display:table
  • CSS Pie ?

« IE7 »

PUTAIN

  • Ok, pas de data-URI > 32ko
  • Mobile-first ☑ ☐ ?

« IE7, mais juste en "pas cassé" »

  • Ok, fallback display:table à coups de float façon RÖCSSTI
  • Prévoir une CSS spéciale à part pour fallbacker les data-URI
  • Support IE7 à la rache : limiter la casse

« IE7, en "pas cassé", mais… »

  • * Put*** * je dois faire une CSS à part, oui ou m… ?
  • Limiter les fallbacks JS
  • Grrrrrrrrr…

« IE6 »

T'en as d'autres ?

C'est pas drôle.

Fin du discours schizophrénique

Ce qui saute aux yeux…

« Ce n'est pas parce que ce chemin est non-conscient qu'il n'existe pas. »

« ça dépend »

  • Impossibilité de répondre parfaitement à des contraintes antagonistes
  • Nous sommes le « postérieur entre deux chaises »

Des « vérités » qu'on
enfreint sciemment

  • « Les images ne sont pas de taille supérieure et redimensionnées côté client. »
  • Sauuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuf…
  • Retina et autres périphériques à haute densité de pixels.

« ça… dépend »

L'intégration actuellement, cela ressemble plutôt à cela :

Table de mixage

Il faut faire des choix

Lire ce alt tu dois.

Mais comment ?

Comment avoir la capacité de faire des choix ?

  • Le terreau. Vous. Moi.
  • L'objectif.

Une méthode infaillible ?

  • Devinez ?
  • Nan !

Des aides, des repères

Des boussoles

Mes 4 boussoles !

Boussole numéro 1 : à part

Des boussoles

IE

Boussoles suivantes

  • L'intégrateur est la colonne vertébrale du projet
  • Il deale avec tous les intervenants
  • Il doit donc être le maillon le plus souple

Boussole numéro 2

Boussole client : les demandes expresses du client

Boussole numéro 3

Boussole projet : le cadre du projet, ce qu'il implique de réaliser

Boussole numéro 4

Boussole équipe : les personnes qui vont graviter autour du projet

Histoire de rigoler

Des boussoles contradictoires

En conclusion

« L'intégration, c'est comme la météorologie, c'est un système complexe très sensible aux conditions initiales… et extérieures ».

Merci pour votre attentionnerie

Un grand merci à :
  • Paris-Web et son staff
  • Les sponsors de Paris-Web
  • Les interprètes LSF
  • La vélito… vélyti… les personnes qui tapent super vite
  • Reveal.js (pour la présentation)
  • Et tous ceux que j'ai oublié (ça c'est fait)

Quelques sources parmi tant pour se cultiver