Le développement web est un univers en constant changement. Je le répète tellement souvent que j’ai presque l’impression de dire que cela. Généralement, le changement est déroutant, car cela nous met dans un constant mode de recherche de repères. Il faut le dire, c’est un peu épuisant.
L’aspect, à mon avis, réconfortant de ce perpétuel mode de changement est que le web évolue généralement pour le mieux. Les techniques s’améliorent, les technologies sont de plus en plus ouvertes et l’écosystème est en bonne santé. Les évolutions vont dans tous les sens et proviennent de tous les coins.
Revoir la façon de travailler
Peu importe la technologie que vous utilisez, vous travaillez similairement de la même façon:
- édition de code dans votre éditeur texte
- actualisation du contenu de votre page web
- attendre que le résultat de vos changements apparaissent à l’écran.
Le développement côté client ne se limite pas uniquement à appliquer des styles CSS et récupérer certaines valeurs avec une requête AJAX à l’aide de jQuery. Il s’avère qu’il y a un grand nombre d’applications qui favorisent une approche utilisant une majorité de leurs fonctionnalités développées côté client. Un bel exemple de cela est le service de gestion de tâches Trello qui est construit utilisant Backbone.JS.
Le principal avantage d’une approche côté client est que vous diminuez la charge imposée à vos serveurs au profit de l’augmentation de la responsabilité du rendu et de l’exécution des fonctionnalités au niveau du navigateur de vos clients. Ce changement de paradigme impose une plus grande utilisation du langage JavaScript.
Pour être clair et bref, si vous n’êtes pas confortable avec ce langage, vous devez l’être le plus rapidement possible. Le temps commence à manquer.
NodeJS
NodeJS est un bout de technologie que vous allez rencontrer de plus en plus fréquemment dans l’univers du développement web. Il s’agit d’une plateforme construite à même l’engin JavaScript qu’utilise Google Chrome, V8.
Avec cette plateforme, vous pourrez construire des applications côté serveur dans le même langage que vos applications côté client. Vous pouvez même les développer avec CoffeeScript si cela vous chante. Tout est possible, en fait.
En plus d’être conçu pour être ultrarapide et d’être capable de soutenir l’augmentation d’une charge de requêtes de façon constante, vous bénéficierez du soutien d’une communauté solide et d’un écosystème de modules et fonctionnalités assez vaste.
À titre d’exemple, en terme de possibilités, vous pourriez, par exemple, avoir une application web qui est uniquement servie par un serveur web NodeJS. Votre application pourrait dépendre du module express qui permet le développement sous un modèle similaire à Sinatra. Est-ce que vous trouvez cela sexy? Moi, oui, en tout cas.
L’avantage ultime? Vous serez en mesure de faire le débogage de vos applications NodeJS à même Google Chrome. Come on!
Grunt
Venant du monde du développement de sites web avec .NET, lorsqu’il est temps de gérer la compilation et l’agrégation des fichiers CSS et JavaScript, repose sur des librairies qui s’exécuteront lors du chargement de vos pages afin de s’assurer que vos derniers changements soient ceux chargés dans les fichiers assemblés et minimisés. SquishIt, Cassette ou même Bundle de Microsoft sont certaines des librairies que vous aurez à utiliser.
Mon expérience à ce sujet se résume à un mot : désagréable.
Lorsque ce n’est pas le compilateur de styles LESS qui abandonne le bateau en production. C’est la mise en cache des fichiers qui n’est pas invalidée pour une raison que vous allez ignorer. En plus, vous ajoutez une charge supplémentaire au chargement de la page qui ajoute inévitablement du temps au chargement initial de votre application. Pas cool.
J’ai été récemment initié à l’utilisation de Grunt pour la préparation des fichiers CSS et JavaScript d’une application web. Il s’agit d’un module NodeJS permettant l’automatisation de tâches côté client reliés à votre site web. Vous avez à votre disposition un éventail assez large d’extensions vous permettant d’avoir un contrôle sur le maximum de tâches à automatiser.
En plus d’automatiser les actions de préparation pour la livraison de votre site web, vous pouvez même automatiser le fonctionnement de Grunt et faire en sorte qu’il soit en mode watch afin qu’il surveille vos répertoires pour des modifications et qu’il procède automatiquement à automatisation de ses tâches.
LiveReload
La promesse de LiveReload est simple. Faire en sorte que vous n’ayez plus besoin de rafraîchir le contenu de votre navigateur manuellement.
LiveReload va écouter les changements qui surviennent sur votre disque dur et transmettre ceux-ci directement à votre navigateur sans intervention de votre part. Vous comprenez qu’avec cet ajout dans votre flux de travail, vous retirez une étape répétitive, sans valeur ajoutée.
Certains camarades m’ont fait part des scénarios d’utilisation limités pour cet outil. Après tout, il permet uniquement d’automatiser le rafraîchissement des contenus statiques (CSS, JavaScript et HTML). Cela fonctionne moins bien lorsque vos contenus proviennent entièrement d’un CMS.
Toutefois, je crois réellement que chaque appui de la touche F5 économisé est quand même un gain. Essayez-le au moins!
Et plus encore
L’avenir du développement web est beaucoup plus que ce billet. D’ailleurs, vous pouvez voir cette présentation de Paul Irish (YouTube) qui présente justement son point de vue sur la nouvelle vague d’outils à votre disposition pour le développement front end. Pour moi, cette présentation a été un vent de fraîcheur très à propos.
Je propose aussi d’utiliser cette page afin de vous donner un point de départ afin d’en apprendre plus sur la matière. Moi, c’est par là que je compte débuter, en tout cas.
French Coding 