Le dev web

pour ceux qui en font peu

Une présentation de Christophe Porteneuve au M2 CCI de l’Université de Tours

TÉKITOA


var christophe = {
  age:        37.219028062970565,
  city:       'Paris',
  company:    'Delicious Insights',
  jsSince:    1995,
  claimsToFame: [
    'Prototype.js',
    'Ruby On Rails',
    'Bien Développer pour le Web 2.0',
    'Prototype and Script.aculo.us',
    'Paris Web',
    'JS Attitude',
    'Git Attitude'
  ]
};
          

Découvrons-nous

en deux minutes

Tranches d’âge

Le M2 CCI : qui en entrée, en sortie ?

Et moi, et moi, et moi…

Du coup, gardez du recul :-)

Le marché

du dev web

Pratiquement plus de marché du dev desktop
(limité à du 100% métier pour l'industrie et le retail)

Seuls quelques gros éditeurs continuent (MS, Adobe…)

Tout se passe sur le web (sites, SaaS…)

Énormément d'applis mobiles sont en fait des clients web

Technos

Avec quoi fait-on du web ?

Backend

Traditionnels / Old-school

✘ PHP

✘ Java EE

✘ ASP.NET

Les jeunes d’aujourd'hui

✔︎ Ruby et Rails

✔︎ Python et Django

✔︎ Node.js

CMS et e-commerce

Les solutions toutes faites

CMS : Wordpress, Drupal et les autres

e-Commerce : Magento, Prestashop…

Front-end

Le socle fondamental

HTML (XHTML 1.0 ou HTML5)

CSS (2 ou 3)
dont Media Queries, Columns, Paged Media, Units, Transforms, Transitions, Animations, Shaders…

JavaScript (ES3–6)

DOM (niveaux 2–3)

Front-end

« HTML5 »

Beaucoup plus que du balisage…

Détection online/offline, AppCache, Web Storage, Canvas, audio/vidéo, Géolocalisation, Web Forms (Input Types, Constraints Validation), Microdonnées…

Et aussi…

Ajax (XHR, XHR2, CORS), ARIA, SVG, WebGL, Web Sockets, WebRTC, Web Workers, ServiceWorker, Audio API, Audio Data API, Web Components (HTML Imports + Templates + Shadow DOM + Custom Elements)…

Les browsers

Ce terrain miné

L’enfer : IE 6–8

Microsoft se rachète une conduite depuis IE9. IE12 au top !

Firefox : moderne, rapide, JS au taquet… Mozilla a une excellente réputation dans le web ouvert et le respect la vie privée.

Chrome : moderne, rapide, Dev Tools au top et APIs bleeding edge. Vie privée discutable.

Aplanir

Les différences

JS et DOM : le sol n’arrête pas de bouger :-(

2005–2009 : Prototype.js

Depuis : jQuery

jQuery ≠ JavaScript !@#

Quant à YUI, Dojo, Mootools, Ext… OSEF.

Le web mobile

Plus de 50% du trafic web début 2015.

Toutes les estimations voient ça finira par être ~90%.

Les browsers mobiles sont excellents*
beaucoup WebKit, plus Fennec (Firefox Mobile) et IE Mobile

* sauf le browser par défaut d’Android pre-Lollypop (« IE6 du mobile »)

Énorme marché des apps mobiles hybrides (99% web dans une coquille native vide), au travers notamment de PhoneGap et Titanium.

Le futur est illustré par des projets comme FirefoxOS.

Libs incontournables

Pour ne pas réinventer la roue

Underscore pour l’algo courante (ou Lo-Dash)

Moment (pour toute manip date/heure)

Préprocesseurs CSS : LESS, SASS, Stylus

Frameworks CSS : Bootstrap, Compass, SemanticUI

Webperf

Pour une poignée de millisecondes de moins

Vos pages doivent se charger très, très vite
(et pas que sur votre Mac via fibre : sur smartphone via 3G/Edge)

L’immense majorité des sites sont mauvais en perfs.
Il faut savoir jouer avec plein de variables et d’optimisations : concaténation / spriting, compactage / subsetting, GZipping, cache & CDN, DNS prefetching, trimming CSS, optis JS et DOM…

Impact financier fort : outre les coûts de stockage / BP, le taux de conversion en e-commerce est fortement corrélé. On peut perdre des millions par an juste parce qu'on met 100ms de trop en moyenne à charger…

Compétences

transversales

Git est le gestionnaire de sources de référence
Dommage que tellement de gens soient restés scotchés dans Subversion, ou sous-utilisent Git de façon terrifiante…

Les outils de dev intégrés aux navigateurs deviennent de véritables EDIs, très pointus et performants :

Chrome Dev Tools

Firefox Dev Tools

IE F12 Developer Tools

Safari Web Development Tools

Principes

fondamentaux du dev web

Page web = HTML + CSS + JS (et DOM)

Web = plate-forme universelle. JS = langage universel*

La frontière page / app / service se brouille, disparaît. « Handovers » d'un périphérique à l'autre.

Déploiement fluidifié par rapport au desktop.

Analyse temps réel des utilisateurs et de leurs comportements : opportunités d'itération rapide.

* et non Java ou C#

Évolution

et grandes tendances

Le web a 25 ans

Eh oui. Eh oui…

Il s’est passé un milliard de trucs, vous n’imaginez pas.

Aujourd’hui, une génération tech web = 1 an, max 2.
Tout va très vite, mais des grands principes de fond demeurent, certaines bonnes pratiques sont assez pérennes.

Je vous conseille ma présentation détaillée faite à Codeurs en Seine fin 2014.

Revenons vite fait sur les grandes périodes et tendances récentes, et laissez-moi vous dire vers où on se dirige…

L’âge de raison

2005–2010

À mort XML, SOAP et WS-*, vive JSON et REST !

Ajax et complexification / enrichissement de la couche client

Google Maps, Gmail, Netvibes, Twitter, Facebook… De vraies applis dans le browser.

Tendances récentes

2011–2014

MVC client, SPA (Backbone, Ember, Angular…)

Tests automatisés (Jasmine, Mocha, Karma, Sauce…)

Modules formels (CommonJS, AMD)

Chaînes de build

ES5

JS isomorphique

Le browser comme plate-forme 
JS comme VM universelle (runtime)

2015

ES6+ (natif ou via Traceur / 6to5)
et du coup, modules ES6 natifs, probablement

Web Components (natif ou via Platform / X-Tag)

Offline-first

noBackend

IoT / Physical Web

Tooling & veille

On n’est plus au Kansas, Dorothy

Tooling

et chaînes de build

Préprocesseurs : LESS, SASS, Stylus

Transpilers : CoffeeScript, 6to5, Traceur

Builders : Grunt, Gulp, Broccoli, Glou, Brunch

Package managers : npm, Bower, jspm.io

Tests automatisés : QUnit, Jasmine, Mocha, Karma, PhantomJS, Intern, BrowserStack, Sauce

Developer Tools

Feedback live : LiveReload, BrowserSync, Tincr, fb-flo(screencast)

Licornes

Énormément de besoins et contraintes :
compatibilité navigateurs, accessibilité, responsive / mobile, performance (dont mobile)…

Beaucoup, beaucoup plus dur que le backend
où tout est contrôlable, et plus stable.

Les bon devs front sont des licornes : ils valent de l’or
et ils ont un bel avenir ;-)

(et oubliez le distingo débile dev front / intégrateur, si franco-français, comme la découpe idiote programmeur / développeur…)

JS 101

parce que quand même

JavaScript vs. Java

Un nommage malheureux (alors qu’on fait pas plus différents)

Java JavaScript
Typage Statique Dynamique
Disponibilité Presque partout, à installer Partout, de base
Développement Surtout propriétaire, lent depuis 2002 Standard et libre, rapide depuis 2009
Exécution Lourde, voire très lourde Légère, voire très légère
Utilisation Back-end (applets mortes) Full stack
Forces Blinde contre les mauvais devs, encourage l’architecture Dynamique, rapide, flexible, productif
Faiblesses Bride les bons devs, sur-architecture tout Refactoring, complétion, etc. Dur.
Avenir 10 ans fiables en SSII/finance, ensuite… A « gagné le web ». Langage universel

Types & typage

Dynamiquement type ≠ pas typé

Types de stockage : number, boolean, string, function, object, symbol. Et undefined.

« Types » (constructeurs) natifs : Number, Boolean, String, Function, Object, Array, Date, RegExp, Symbol.

Litéraux

Opérateurs typeof et instanceof

Comparaisons == vs. ===

Fonctions de 1er ordre


function foo() { … }
var f = foo;

var obj = { yo: foo };
            

var obj1 = {
  run: function run() { … }
};

var obj2 = {
  run: obj1.run
};
            

Fonctions d’ordre supérieur

Des fonctions qui acceptent des fonctions


setTimeout(function() { console.log('Ayé !'); }, 1000);

$(document).on('click', handleClick);
            

Sans ça, pas de callbacks ! o_O

Des fonctions qui renvoient des fonctions


function handleKeyDown(e) {
  if (this.keyMap[e.keyCode]) { … }
}

this.handleKeyDown = handleKeyDown.bind(this);
              

Idéal pour de l’AOP, et plein de design patterns : Singleton, Décorateur, Mémoïsation, etc.

Constructeurs


function Person(first, last) {
  if (!(this instanceof Person)) {
    throw new Error('Et le new, eh, patate !');
  }
  this.first = first;
  this.last = last;
}

var roiDeLaClasse = new Person('Georges', 'Abitbol');
var superActeur = new Person('Clark', 'Gable');

var boulet = Person('Vincent', 'Lagaf');
// => undefined
first // => 'Vincent'
last  // => 'Lagaf'
            

Prototypes


Person.prototype.greet = function greet(whom) {
  return "Salut " + whom + ", je m’appelle " + this.first + ".";
};

Person.prototype.walk = function walk() { … };

roiDeLaClasse.greet("les gars")
// => "Salut les gars, je m’appelle Georges."
            

En gros, Constructeurs + Prototypes ≈ « Classes »

(en fait, nettement plus puissant…)

Prototypes natifs


Number.prototype.minutes = function minutesToMS() {
  return this * 60 * 1000;
};

Number.prototype.ago = function msToDateAgo() {
  return new Date(Date.now() - this);
};

new Date()          // => Fri Jan 23 2015 16:20:51 GMT+0100 (CET)
3.5.minutes().ago() // => Fri Jan 23 2015 16:17:21 GMT+0100 (CET)
            

Mais attention : ce sont en quelque sorte des espaces de noms publics, partagés : ne pas faire n’importe quoi.

Idéal pour les shims, en revanche.

Design patterns

Nettement plus court


function memoize(fx) {
  var called = false, result;

  return function() {
    if (called) {
      return result;
    }
    result = fx.apply(this, arguments);
    called = true;
    return result;
  };
}
            

var index = 0;
function demo() { return ++index; }
var memoDemo = memoize(demo);
memoDemo(); // => 1
memoDemo(); // => 1
memoDemo(); // => 1
            

Design patterns

Nettement plus court


function makeSpy(fx) {
  var spy = function spy() {
    var call = {
      context: this, args: arguments, stamp: Date.now(),
      result: fx.apply(this, arguments)
    };
    spy.calls.push(call);
    return call.result;
  };
  spy.calls = [];
  spy.displayName = "spy" + (fx.name || "");
  return spy;
}
            

var obj = {
  greet: function greet(whom) { console.log('Hi', whom); return 42; }
};
obj.greet = makeSpy(obj.greet);
obj.greet('John'); // => 42
obj.greet.calls
// => [{ context: (obj), args: ['John'], stamp: 14219478…, result: 42 }];
            

ES6

Quelques exemples


class Person {
  constructor(first, last) {
    this.first = first;
    this.last = last;
  }

  greet(whom = 'toi') => `Salut ${whom}, moi c’est ${this.first}.`
}

class Geek extends Person {
  constructor(first, last, language) {
    super(first, last);
    this.language = language;
  }
}
            

ES6

Quelques exemples


let a = 42, b = 37;

[a, b] = [b, a];

function makeObject(first, last, arrKey = 'items', ...items) {
  return { first, last, [arrKey]: items };
}

let { first, keys } = makeObject('John', 'Smith', 'keys', 1, 2, 3);
            

ES6

Quelques exemples


function createDefensiveObject(target) {
  return new Proxy(target, {
    get(target, property) {
      if (property in target) {
        return target[property];
      }

      throw new ReferenceError(`Property "${property}" does not exist.`);
    }
  });
}
            

function Person(first, last) {
  this.first = first;
  this.last = last;
  return createDefensiveObject(this);
}

var protector = new Person('Serge', 'Karamazoff');
protector.age // => ReferenceError: Property "age" does not exist.
            

Apprendre JS

avec des ressources de qualité

Eloquent JavaScript est une énorme tuerie ; part de zéro.

JS + toi = ♥ fait le point sur les 3 grands piliers
(prototypes, closures et binding)

Ateliers NodeSchool autonomes :
Bases de JS, Prototypes, ES6

Le guide du Mozilla Developer Network, en français !

Speaking JS et la série ES6 d’Axel Rauschmayer explorent grave dans le détail…

Et plein de ressources pour la veille

Un bon ingé

qu’est-ce que c’est ?

Aspects « classiques »

Passionné
Le dev est un métier passion ; alimentaire ? Dommage.

Artisan
Le dev c’est de la création. Avoir le souci du travail bien fait.

Pragmatique
Parfois, la meilleure solution n’est pas « parfaite » ou « pure ».

Rigoureux
Concentration, sérieux, cohérence, tests exhaustifs maintenus.

Efficace
Outillage adapté, automatisation, meilleures pratiques. Évoluer.

Autonome
Équilibrer entre recherche d’info et demande d’aide.

…et moins classiques

Ouvert
Pas de meilleure techno / langage dans l’absolu. Contextuel.

Curieux
Sortir régulièrement de sa zone de confort, rester curieux.

Capable de recul
Sauter illico sur tout ce qui sort n’est pas idéal… Évitez le Kool-Aid !

Respectueux
Online negative bias. Magic words: Bienvenue, Bonjour, Super, Merci.

Humble
Éviter le NIH comme la peste. On trouve toujours meilleur que soi.

Social
Savoir échanger, collaborer, être bien intégré à l’équipe.

Envie d’en savoir plus ?

On fait des super formations de ouf sur
JS et le dev web front, Node.js et Git.

Merci !

Et que le Web soit avec vous


Christophe Porteneuve

@porteneuve

Retrouvez les slides sur bit.ly/ledevweb