Problématique

Peut-on espérer une amélioration des performances de notre code via les (design) patterns ?

Contexte

• Tous les langages
• Tous les projets (existants et futurs)
• Les possibilités (≠ la réalité)

Débuter par l'exemple

Transformation + Filtre (init)

const arraySize = 1000;
const initialArray = [];
for (let i = 0 ; i < arraySize ; i++) {
  initialArray.push(i);
}

function process(initialArray) {
  // TODO: See following slides
}

process(initialArray);

Transformation + Filtre (v1)

return initialArray
  .map(x => x * x)
  .filter(x => x % 3 === 0);

Transformation + Filtre (v2)

const tempArray = [];
for (let i = 0 ; i < initialArray.length ; i++) {
  const x = initialArray[i];
  tempArray.push(x * x);
}

const finalArray = [];
for (let i = 0 ; i < tempArray.length ; i++) {
  const x = tempArray[i];
  if (x % 3 === 0) {
    finalArray.push(x);
  }
}

return finalArray;

Transformation + Filtre (v3)

const finalArray = [];
for (let i = 0 ; i < initialArray.length ; i++) {
  const x = initialArray[i];
  const y = x * x;
  if (y % 3 === 0) {
    finalArray.push(y);
  }
}
return finalArray;

Transformation + Filtre (test)

Première conclusion

• On veut de la performance :
  • Il faut écrire le troisième code
  • Ne pas utiliser map, filter & cie…
• On veut de la lisibilité :
  • Il faut écrire le premier code
  • Négliger la performance

Est-ce vraiment ce que l'on veut ?

Retour à la théorie

Qu'est-ce qu'un langage de programmation ?

Les langages de programmation permettent de décrire […] les structures des données qui seront manipulées par l'appareil informatique, et […] d'indiquer comment sont effectuées les manipulations […].

Ils servent de moyens de communication par lesquels le programmeur communique avec l'ordinateur, mais aussi avec d'autres programmeurs.

Wikipédia

https://fr.wikipedia.org/wiki/Langage_de_programmation

Qu'est-ce qu'un langage de programmation ? (reformulation)

Un langage de programmation est un ensemble de patterns (syntaxe, paradigme) décrivant les structures de données et leurs manipulations.

Ils permettent de communiquer avec les humains et les machines.

Retour à l'exemple

// squaresWhenTriple => Communication: nom de l'opération réalisée
// initialArray      => Structure de données: Array (si typage fort)
// return            => Structure de données: Array (si typage fort)
// body              => Manipulation: ensemble des sous-manipulations
function squaresWhenTriple(initialArray) {
  return initialArray

    // Manipulation  => transformation
    // Communication => transformation
    .map(x => x * x)

    // Manipulation  => filtre
    // Communication => filtre
    .filter(x => x % 3 === 0);
}

Ce code sera

• Lu
• Compris
• Traduit
• ⇒ Par les humains ET la machine

Et les patterns ?

Map + filter

Boucle for

return initialArray
  .map(x => x * x)
  .filter(x => x % 3 === 0);

const finalArray = [];
for (let i = 0 ; i < initialArray.length ; i++) {
  const x = initialArray[i];
  const y = x * x;
  if (y % 3 === 0) {
    finalArray.push(y);
  }
}
return finalArray;

On peut convertir le code !

• Transformations automatiques
• Écrire du code lisible et maintenable
• Laisser le compilateur optimiser
  • Il y pensera tout le temps 😉

Real world: JavaScript

Boucle for

Optimisation ?

const finalArray = [];
for (
  let i = 0 ;
  i < initialArray.length ;
  i++
) {
  const x = initialArray[i];
  const y = x * x;
  if (y % 3 === 0) {
    finalArray.push(y);
  }
}
return finalArray;

const finalArray = [];
for (
  let i = 0, c = initialArray.length ;
  i < c ;
  i++
) {
  const x = initialArray[i];
  const y = x * x;
  if (y % 3 === 0) {
    finalArray.push(y);
  }
}
return finalArray;

Réalisé dans de nombreux transpileurs, tels que CoffeeScript, TypeScript et Babel (voir si toujours d'actualité)

Testons

Retestons

Conclusion

Les navigateurs font déjà de la micro-optimisation

Mais…

• Quel TTC* acceptons-nous ?
• Cas des mobiles ?

*TTC: Time-To-Compile

Remarque : Le typage JS a été refusé à cause de l'augmentation du TTC (entre autres)

Solution 1

Utiliser des librairies

• Stream vs Array
• Virtual DOM
• …

Mais…

• Quel TTD* acceptons-nous ?
• Cas des mobiles ?

TTD: Time-To-Download

Solution 2

Les transpileurs

• Pattern ⇒ performance
• Babel, Grunt, Gulp…
• TypeScript, Dart, CoffeeScript, Elm…

Conclusion

Se concentrer sur la lisibilité

• Utiliser des patterns connus
  • Implémentation
  • Conception

Laisser le compilateur/transpileur optimiser

• Il le fait et saura le faire
• Quel que soit le langage !

Liens

• JsPerf:
  • https://jsperf.com/map-filter-vs-for
• Wikipedia:
  • https://fr.wikipedia.org/wiki/Langage_de_programmation
• Svelte (framework compile-to-js):
  • https://svelte.technology
• GOTO 2015 • Benchmarking JavaScript • Vyacheslav Egorov
  • https://www.youtube.com/watch?v=g0ek4vV7nEA&t=787s