Patterns
vs
Performances
Gaëtan Rizio
Mardi 7 février 2017
Qui suis-je ?
- Gaëtan Rizio
- Développeur à Zengularity
- Points d'intérêt professionnels :
- La lisibilité & maintenabilité du code
- La conception
- L'architecture
- L'apprentissage et l'enseignement
- Les mathématiques
- Site: https://gaetan.rizio.fr
- Github: https://github.com/kneelnrise
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
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:
- Wikipedia:
- Svelte (framework compile-to-js):
- GOTO 2015 • Benchmarking JavaScript • Vyacheslav Egorov
Patterns vs Performances
By Gaëtan Rizio
Patterns vs Performances
- 408