larlet-fr-david/david/blog/2015/cours-iut-composants-web/index.md

title: Cours IUT : Composants Web
slug: cours-iut-composants-web
date: 2015-02-02
chapo: Je suis en proie au doute depuis une semaine sur la position à adopter.

> Transmettre, apprendre : ces deux mots condensent le problème intellectuel de l’école aujourd’hui.
> Ils indiquent d’abord un ordre de succession : apprendre a supplanté transmettre. La transformation fondamentale que l’école a connue au cours du dernier demi-siècle a constitué dans la substitution d’un système culturel centré sur la transmission à un système culturel centré sur l’acte d’apprendre, où tout est supposé se jouer entre l’individu et le savoir qu’il a le désir ou le besoin d’acquérir.
> C’est cette révolution culturelle silencieuse qu’il s’agissait d’abord de comprendre.
> Ses attendus pédagogiques sont archiconnus : l’école traditionnelle s’est trompée, elle a voulu transmettre des connaissances détenues par un maître en les inculquant à des élèves passifs. Cette pédagogie de l’imposition ne marche pas. Il faut lui substituer une pédagogie active faisant de l’enfant l’acteur de la construction de ses savoirs.
>
> <cite>*Transmettre, apprendre* de Marie-Claude Blais, Marcel Gauchet et Dominique Ottavi</cite>

Je pensais qu’il suffirait de [dépiler le backlog](/david/blog/2015/cours-iut-construction-collaborative/) pour [ce cours](/david/pro/enseignement/) mais cela s’est avéré plus compliqué que prévu. **Je suis en proie au doute depuis une semaine sur la position à adopter.** Dérouler sur AngularJS comme demandé serait la solution de facilité mais j’ai l’impression qu’ils sont partis là-dessus par méconnaissance des alternatives (le marketing Google fonctionne assez bien). Du coup, je compte m’accorder une petite heure pour commencer sur les *Web Components* et sur [les deux approches possibles](http://futurice.com/blog/combining-react-flux-and-web-components) ([cache](/david/cache/b444545a4f1e8d14b077bb3ea4ce7779/)) avec [d’autres détails plus techniques](https://programmers.stackexchange.com/questions/225400/pros-and-cons-of-facebooks-react-vs-web-components-polymer) :

* vision à *court-terme* pour les [composants React](https://facebook.github.io/react/docs/reusable-components.html) et les [directives Angular](https://docs.angularjs.org/guide/directive) ;
* vision à *long-terme* pour les bibliothèques qui se basent sur des standards comme [Polymer](https://www.polymer-project.org/) et [X-Tags](http://x-tags.org/).

J’ai déjà écrit sur [les web components](/david/blog/2013/web-oriente-composants/) et même [expérimenté différentes approches](/david/blog/2013/python-javascript/) pour une conférences. Cette extensibilité [souffre de certaines critiques](https://adactio.com/journal/8276) ([cache](/david/cache/6cef4c24facfb5fd7a7f9049232b1a56/)) que je trouve parfaitement légitimes mais *standardisée ou non la machine est en marche*. Une bonne façon d’aborder également la discussion sous un angle politico-stratégique avec Google et Facebook pour rappeler l’importance du W3C. On débroussaillera aussi les différentes solutions [sous l’angle de la performance](http://www.webpagetest.org/video/compare.php?tests=141120_RG_14H8,141120_A7_14H9,141120_VR_14HA,141120_76_14HB,141120_4B_14HC,141120_6E_14HD,141120_RX_14HE,141120_NF_14HF,141120_WZ_14HG), des [mauvaises habitudes qu’ils pourraient apprendre avec AngularJS](https://javascriptkicks.com/stories/3718) ([cache](/david/cache/d93c608753d1c55ee135eebed5ba7477/)) et des [faux espoirs qu’ils pourraient avoir avec ReactJS](http://blog.andrewray.me/reactjs-for-stupid-people/) ([cache](/david/cache/352a1ada40f12fec1e986f17364605f6/)).

Une fois les bases posées, je compte leur laisser le choix de partir sur l’une des quatre solutions pour continuer et explorer les composants web. **S’ils souhaitent ne faire finalement que du AngularJS sans approfondir spécifiquement les directives je suis d’accord aussi,** à ce moment on explorera ensemble et je leur conseillerai pour la suite [un livre sur le sujet](https://books.ninja-squad.com/) écrit par des personnes de confiance qui n’hésitent pas à nous donner [quelques astuces sur les directives et leurs tests](http://blog.ninja-squad.com/2015/01/27/5-astuces-sur-les-directives-et-leurs-tests/) ([cache](/david/cache/af41d1bdcf6daa279f459c192a088ac2/)) justement.

Au niveau des petits items qui viennent compléter le *backlog* principal, ce sera l’occasion d’introduire [Bootstrap](http://getbootstrap.com/) avec notamment [UI Bootstrap](https://angular-ui.github.io/bootstrap/) et [React Bootstrap](https://react-bootstrap.github.io/). L’un des participants à la formation m’a déjà fait part de [son scepticisme vis-à-vis de Bootstrap en m’envoyant cet article](http://blog.lesieur.name/bootstrap-est-une-regression-pour-un-developpement-front-end-de-qualite/) ([cache](/david/cache/71011c9e692d3d2d30ac024dea7d23b0/)). Encore une discussion intéressante en perspective :-).