larlet-fr-david/david/blog/2016/programmation-apprehension/index.md

title: Programmation et appréhension
slug: programmation-apprehension
date: 2016-02-01
chapo: Les savoirs s’acquièrent dans le temps, la pratique et la répétition.

> It’s unnecessary and complicated at almost every layer. At best I can congratulate someone for quickly and simply solving a problem on top of the shit that they are given. The only software that I like is one that I can easily understand and solves my problems. The amount of complexity I’m willing to tolerate is proportional to the size of the problem being solved. 
> 
> <cite>*[I hate almost all software](http://tinyclouds.org/rant.html)* ([cache](/david/cache/b932828a2ee51364e222b82b9ba4e870/))</cite>

Les [deux derniers cours](/david/pro/enseignement/) ont été dédiés au développement de petites fonctionnalités qui ont permis de révéler que [la compréhension de JavaScript](/david/blog/2016/javascript-zero/) est bien éloignée de la pratique.

Deux points bloquants ont été remontés par les étudiants :

* la syntaxe difficile à appréhender et l’on en revient à [l’abstraction](/david/blog/2015/javascript-abstraction/) ;
* les concepts liés à la programmation qui demandent du temps pour être assimilés.

## Syntaxe et abstraction

Du coup j’ai revu ma copie [une dizaine de fois](https://gist.github.com/davidbgk/62c3aed0d09599ed0886) (merci ##openweb) pour arriver à l’abstraction suivante :

    :::javascript
    window.$ = selector => Array.from(document.querySelectorAll(selector))
    window.$$ = document.querySelector.bind(document)
    window.on = Node.prototype.on = Array.prototype.on = function(type, ...rest) {
        let listener
        if (typeof rest[0] === 'function') {
            listener = rest[0]
        } else {
            const [targetNodeName, innerListener] = rest
            listener = function(event) {
                if (event.target.nodeName.toLowerCase() === targetNodeName) {
                    innerListener(event)
                }
            }
        }
        Array.concat(this).forEach(element => element.addEventListener(type, listener))
    }
    window.$.on = window.on.bind(document)
    window.trigger = Node.prototype.trigger = function(type, detail) {
        const event = new CustomEvent(type, { detail: detail })
        this.dispatchEvent(event)
    }
    Array.prototype.trigger = function(type, detail) {
        this.forEach(element => element.trigger(type, detail))
    }
    window.$.trigger = window.trigger.bind(document)

Moins de 30 lignes pour réussir à avoir du JavaScript qui permette de sélectionner des éléments et d’y associer des évènements de manière plus simple dans un contexte didactique. Un tel code permettant ensuite d’écrire :

    :::javascript
    function tests() {
        // Attaching/passing events for all titles.
        $('h1').on('changeColor', event => {
            console.log('changeColor received', event.detail)
            event.target.classList.add(`turn-${event.detail.color}`)
        })
        $('h1').on('click', event => {
            // Intentionally overcomplicated :-).
            console.log('changeColor triggered', event.target)
            event.target.trigger('changeColor', {color: event.target.innerHTML})
        })
        // Event delegation for a single item (works with many too).
        $$('ul').on('click', 'a', event => {
            event.preventDefault()
            console.log(event.target.innerHTML)
        })
        // Anonymous pub/sub.
        $.on('anonymousEvent', event => {
            console.log('anoynmous event received')
        })
        $.trigger('anonymousEvent')
    }
    on('DOMContentLoaded', tests);

C’est déjà mieux. Si je devais aller plus loin, je pense que je me tournerais vers des solutions comme [RiotJS](http://riotjs.com/) qui ont une approche par composants web et une barrière à l’entrée relativement basse. Il y aurait du matériel pédagogique à créer dans ce domaine, peut-être plus utile qu’un n-ème *framework* JS/CSS.


## Concepts et algorithmes

Ici le blocage se situe dans le découpage fonctionnel et la peur de la page blanche. Et aussi peut-être un peu dans l’appréhension qui entoure tout ce qui a trait au code.

J’ai essayé de les faire travailler en amont, de leur fournir un canvas où ils n’avaient plus qu’à compléter les parties manquantes, de commencer par définir la logique avant de coder mais aucune des approche n’a vraiment portée ses fruits. La contrainte de temps était peut-être trop importante pour ce que j’ambitionnais mais pour introduire des interactions avec l’utilisateur il faut au moins savoir manipuler des éléments et y associer des évènements… sinon on reste dans la théorie.

**Les savoirs s’acquièrent dans le temps, la pratique et la répétition. Il est difficile d’évaluer l’impact que l’on peut avoir dans une transmission.** Parfois cette itération sera percutante, parfois elle se révèlera dans la durée, d’autres fois elle aura été complètement inutile. Ces interrogations sont probablement le quotidien de tout enseignant.