|
1234567891011121314151617181920212223242526272829303132333435363738394041424344 |
- 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.
- >
- > <cite>*[Introducing Bliss: A 3KB library for happier Vanilla JS](http://lea.verou.me/2015/12/introducing-bliss-a-3kb-library-for-happier-vanilla-js/)* ([cache](/david/cache/5d5b6602ee225a8262987bded2b6ac2b/))</cite>
-
- 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](/david/pro/enseignement/). D’un côté, il y a la chance de pouvoir avoir un [feedback visuel](/david/blog/2013/tdd-conception-emergente/) 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](https://github.com/davidbgk/comprendre-javascript) JavaScript.
-
- La plus intéressante que j’ai pu trouver est [bling.js par Paul Irish](https://gist.github.com/paulirish/12fb951a8b893a454b32), en une dizaine de lignes j’ai une bonne partie des raccourcis souhaités et les développeurs jQuery [Full Stack Overflow](https://www.christianheilmann.com/2015/07/17/the-full-stackoverflow-developer/) ([cache](/david/cache/dd3b7b13443bac5d9fe0011426026429/)) 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](https://github.com/dciccale/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](http://blissfuljs.com/) 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.
|
