index.md 3.6KB
title: JavaScript et abstraction slug: javascript-abstraction date: 2015-12-07 chapo: La difficulté du choix d’une abstraction réside dans la perte de savoir-faire qu’elle entraine.
However, Vanilla JS does not mean “use no abstractions”. Programming is all about abstractions! The Vanilla JS movement, is about favoring speed, smaller abstractions and understanding of the Web Platform, over big libraries that we treat as a black box. It’s about using libraries to save time, not to skip learning.
*Introducing Bliss: A 3KB library for happier Vanilla JS* (cache)
Je suis toujours confronté à la dure réalité d’une API difficile à prendre en main lorsque je présente JavaScript à des personnes n’ayant jamais pratiqué un langage de programmation. D’un côté, il y a la chance de pouvoir avoir un feedback visuel immédiat lorsque l’on utilise la console du navigateur et en contrepartie on doit s’imposer des querySelectorAll, addEventListener et autres joyeusetés pour convertir une NodeList en Array qui sont incompréhensibles pour un débutant. Je me suis donc mis en quête d’une couche d’abstraction minimaliste pour comprendre JavaScript.
La plus intéressante que j’ai pu trouver est bling.js par Paul Irish, en une dizaine de lignes j’ai une bonne partie des raccourcis souhaités et les développeurs jQuery Full Stack Overflow (cache) ne sont pas trop perdus. Les commentaires permettent d’arriver à une version améliorée qui ne touche pas au prototype et m’ont même fait découvrir ki.js qui est à la limite de ce que je m’étais imposé en terme de taille de code. Et puis je découvre Bliss et je commence à douter. La difficulté du choix d’une abstraction réside dans la perte de savoir-faire et de curiosité qu’elle entraine.
J’arrive aux quelques lignes suivantes :
:::html
<!doctype html>
<meta charset="utf-8">
<title>Test JavaScript</title>
<style>
.turn-big {
font-size: 5em;
transition: font-size 2s;
}
</style>
<button>Click to turn big!</button>
<script>
// Do not try to understand that… for now.
// Inspired by https://gist.github.com/paulirish/12fb951a8b893a454b32
window.$ = document.querySelectorAll.bind(document)
Node.prototype.on = window.on = Node.prototype.addEventListener
NodeList.prototype.on = NodeList.prototype.addEventListener = function (name, fn) {
Array.prototype.slice.call(this).forEach(function(elem) {
elem.addEventListener(name, fn, false)
})
}
// Reactivate your brain to understand the code below.
$('button').on('click', function(event) {
event.target.classList.add('turn-big')
})
</script>
C’est encore beaucoup pour un grand débutant mais au moins ça reste propre en termes d’API et d’interactions avec le HTML. Je suis ouvert à toute suggestion et retour d’expérience pour réduire les frictions lors d’un premier contact avec JavaScript.