[alert type=white ]Attention, cet article s’adresse à un public ayant un minimum de connaissances en informatique.[/alert]
[divider]Le contexte[/divider]
Derrière ce titre un peu racoleur se trouve une réalité que j’ai pu observer de nombreuses fois dans mon entourage. Depuis quelques années, deux tendances s’entrechoquent dans le développement web. D’un côté, nous cherchons sans cesse à optimiser nos environnements de travail en automatisant la majorité des tâches pénibles (eh oui, la programmation en quelque sorte comme du travail à la chaine…). Mais de l’autre, cette pléthore d’outils rend de plus en plus complexe l’apprentissage du néophyte.
Revenons quelques années en arrière : à quoi ressemblait le développement d’une interface web, c’est-à-dire le site que vous voyez à proprement parler ? Un logiciel de traitement de texte, éventuellement un Ide (un traitement de texte sous stéroïdes), un environnement pour tester notre code… et c’est tout ! Le développeur souhaitant faire une interface en html/JavaScript/css (retenez ces noms !) écrivait uniquement de l’html/JavaScript/css. Éventuellement on apprenait à utiliser une grosse boîte à outils pour certaines tâches, appelée Framework, telle que « bootstrap » dans les interfaces web. Mais ce fonctionnement a rapidement montré les limites inhérentes aux technologies…
[divider]L’évolution[/divider]
Un exemple simple : le CSS permet de définir différents éléments de style, comme la couleur d’un élément. Après avoir passé des heures à chercher la nuance de vert pour un projet, je décide de colorer 10 éléments différents de mon interface dans cette couleur. Pas de soucis, mais je dois définir clairement quelle nuance de vert correspond à chaque élément. En fait, je souhaite changer de vert, finalement. Il faut alors changer manuellement les 10 éléments verts. Sur un projet qui ne possède qu’un seul fichier CSS, cela va encore, mais sur un gros projet partagé par une équipe… Pour cela, pas de soucis, nous avons créé les préprocesseurs CSS ! Dans notre cas, ils vont nous permettre de définir une seule fois « mon vert = blahablah » et ensuite « cet élément est de la couleur : mon vert ». Ainsi, il n’y a plus qu’une seule ligne à modifier en cas de changement. Mais le débutant doit maintenant apprendre à utiliser un outil supplémentaire : le préprocesseur qu’il faut ajouter à la liste, qui devient maintenant HTML/JavaScript/css/préprocesseur.
Parlons maintenant du flux de travail. Voici l’exemple d’un flux de travail ancienne génération :
Écriture de l’html -> écriture du CSS -> écriture du JavaScript -> insertion des scripts et css dans l’html -> recharger le navigateur pour tester
Notez que dans les effets, nous mélangeons ces étapes, mais qu’il est bien plus complexe de vouloir commencer par le CSS ou le JavaScript.
Ajoutons maintenant les préprocesseurs qui vont compiler le CSS.
Écriture de l’html -> écriture du CSS ->Compilation du CSS-> écriture du JavaScript -> insertion des scripts et css dans l’html -> recharger le navigateur pour tester
Sans parler des tâches hors du flux, comme rechercher et télécharger des scripts existants (ex : Jquery) ou d’interface (ex : Bootstrap). Cela représente alors un certains nombre d’étapes que nous aimerions pouvoir automatiser. Eh bien là encore, cela a été fait !
Citons-en en vrac :
- Grunt/gulp : Automatiseront le flux de production, de l’insertion des scripts à la compilation automatique, jusqu’au rechargement automatique du navigateur.
- Bower : Nous permettra de télécharger bien plus simplement les outils nécessaires (jquery/bootsrap) pour les fournir à Grunt ou Gulp.
- npm : Plateforme serveur permettant de regrouper et utiliser les outils de développement web cités.
Le néophyte doit dès lors apprendre à utiliser Grunt/Bower/npm/html/JavaScript/css/préprocesseur…
Mais mettre en place ces outils d’automatisation prend un certain temps. Et si on automatisait la mise en place d’automatisation ? C’est ce que fait yeoman qui permet d’avoir un environnement de travail/flux de production/démarrage du projet, le tout en une seule commande. C’en est presque magique.
[divider]La pédagogie ?[/divider]
Mais le vrai problème se pose quand cela prend presque plus de temps d’apprendre à utiliser les outils nécessaires que d’intégrer les bases du développement web. Un deuxième problème se pose, celui-là plus important. En effet, ces outils nous évitent de devoir passer par certaines étapes de la programmation. Mais ces étapes sont nécessaires dans l’apprentissage ! Le débutant a alors deux choix qui s’offrent à lui : Ne pas utiliser ces outils et apprendre la base nécessaire pour comprendre ce qu’il fait. Cela sera pédagogiquement intéressant, mais frustrant car le débutant sera ralenti par la lourdeur des anciens flux de travail. Ou céder à la facilité de l’utilisation du tout automatique. Il arrivera alors vite à un résultat intéressant, mais sans vraiment comprendre ce qui se déroule en dessous.
Transposons-nous dans un autre contexte: Un pâtissier doit-il apprendre à faire une pâte complexe qu’une machine pourra faire avec un résultat totalement équivalent ? Telle est la question.
[divider]C’est grave docteur ?[/divider]
Plus la technologie avance, plus il semble complexe pour un débutant de prendre le train en marche… Notez cela dit que ce principe s’applique principalement à toute technologie gravitant autour de la tendance du JavaScript, et que ce phénomène est surtout présent dans le développement d’interfaces web. Cela étant, il peut également se retrouver dans le développement de serveurs web voire d’applications mobile (qui tendent à se rapprocher des sites internet d’un point de vue technique).
Mais rassurez-vous, la modernité a du bon pour le développement web, et c’est que nous nous efforcerons de vous démontrer par de futurs articles.
