• Javascript

    Les frameworks Javascript évanescents : Svelte

    Dans le précédent article j’ai présenté Stencil, un framework que j’ai qualifié d’évanescent parce qu’il disparaît à la compilation pour ne laisser subsister qu’un composant web classique, enfin presque classique… Toutefois c’est quand même Svelte qui a plus de succès actuellement pour faire la même chose. Lui aussi a une phase de compilation pour générer du code directement compréhensible par les navigateurs. D’autre part il évolue rapidement et en est actuellement à la version 3. Si on fait abstraction des « grands » frameworks (React, Vue, Angular…), et qu’on regarde un peu les statistiques, on trouve Svelte en tête de l’intérêt des développeurs, suivi quand même de près par Vue et React…

  • Javascript

    Les frameworks Javascript évanescents : Stencil

    Le développement côté client est bien plus agité que celui côté serveur, au point de parfois s’y perdre si on ne procède pas à une veille vigilante. J’ai évoqué plusieurs fois les web components dans mon blog généraliste, mais aussi dans celui-ci lorsque j’ai présenté les API. Aujourd’hui il est devenu tout à fait réaliste de se passer de framework Javascript malgré l’intérêt grandissant suscité par React et Vue. A mi-chemin entre l’utilisation brute des web components et les frameworks Javascripts évolués émerge un autre mouvement très intéressant que l’on nomme disappearing frameworks ou même invisibles frameworks. L’idée générale est de pouvoir écrire du code dans le genre de celui…

  • Javascript

    Faut-il encore utiliser JQuery ?

    J’utilise JQuery depuis de nombreuses années, à tel point qu’il est devenu pour moi une évidence. Mais je lis de plus en plus d’articles qui exposent le fait que les navigateurs modernes comportent des API qui peuvent faire aussi bien, sinon mieux que JQuery. Alors il serait ridicule de ne pas creuser cette affaire pour voir exactement ce qu’il en est. Il faut parfois changer ses habitudes ! Les deux grandes capacités de JQuery résident dans la sélection et la modification des éléments du DOM et dans les requêtes Ajax. Il semblerait qu’aujourd’hui ces deux grands chapitres puissent être parfaitement assumés par les API, aussi bien au niveau des sélecteurs…

  • Javascript

    ES6 : les modules

    Lorsqu’une application JavaScript commence à prendre de l’ampleur il devient de plus en plus difficile de l’organiser et de la gérer. Il est alors judicieux de la découper en petits morceaux fonctionnels plus faciles à manipuler et dont l’intendance pose moins de problèmes. Au-delà du découpage en fonctions et classes on peut aussi découper le code en modules cohérents ayant un certain niveau d’abstraction. D’autre part un module embarque son intendance et devient facile à utiliser et réutiliser. JavaScript ne connaît malheureusement pas les espaces de noms qui existent dans de multiples langages. Avec ES5 on peut s’en sortir avec les objets et les fermetures et il existe une multitude…

  • Javascript

    ES6 : les classes

    Jusqu’à ES5 JavaScript ignore les classes et l’héritage classique. Avec ES6 on va disposer désormais de quelque chose qui se rapproche vraiment de ce qui existe dans les autres langages, même s’il s’agit juste d’une autre syntaxe pour un système objet qui reste fondamentalement le même et on peut parler ici de simulation parce que les prototypes restent toujours aux commandes ‌! Les classes ES6 introduit le mot-clé class pour créer une classe. Voici un ‌exemple : class User { constructor(name) { this.name = name; } salut() { alert('Coucou ' + this.name + ' !'); } } Si vous pratiquez des langages comme C#, Java, ou même PHP, vous ne devez…

  • Javascript

    ES6 : les promesses

    JavaScript est doué pour la programmation asynchrone. Il dispose des événements et des fonctions de retour. Avec ES6 arrivent également les promesses. On va voir cet aspect dans le présent chapitre. La programmation asynchrone Avant de vous parler des promesses on va un peu faire le point sur la programmation asynchrone… Depuis son origine JavaScript est destiné à accomplir des tâches asynchrones pour le web, par exemple lorsqu’un utilisateur clique sur un bouton. Avec node.js on retrouve cette approche asynchrone côté serveur. A la base JavaScript ne fonctionne qu’avec un thread, c’est à dire qu’à un moment donné un seul code est exécuté, contrairement à d’autres langages comme Java ou…

  • Javascript

    ES6 : boucles, itérations et générateurs

    Avec ES6 on a une nouvelle instruction de boucle : for-of. On dispose aussi de l’itération. Faisons le point dans ce chapitre. La boucle for-of Avec ES5 on a déjà plusieurs possibilités pour faire des boucles : for, do…while, while, for…in, forEach. Que nous apporte de plus for-of ? L’instruction for-of fonctionne sur des objets itérables (Array, Map, Set, String) et est destinée à remplacer for-in et forEach. La syntaxe est simple : let tableau = [1, 2]; for (let element of tableau) { console.log(element); // 1 2 } On peut utiliser break et continue dans cette boucle. A l’intérieur de la boucle on dispose de la clé et de…

  • Javascript

    ES6 : les collections avec clés (set et map)

    Avec ES5 JavaScript n’a qu’un seul type de collection : les tableaux. Le souci c’est que les tableaux ont juste une indexation numérique, on ne peut pas utiliser des clés. Alors il est toujours possible d’utiliser les objets, qui ne sont pas faits pour ça à la base, pour contourner cette limitation. ES6 introduits deux types de collections dont une avec des ‌clés pour combler cette lacune. Les ensembles (set) Un ensemble (set) est une collection de valeurs distinctes. On peut parcourir ces valeurs dans l’ordre et savoir si une valeur particulière est présente. Création d’un ensemble Un ensemble est très facile à créer avec le constructeur Set et à garnir…

  • Javascript

    ES6 : la déstructuration

    Quand on utilise JavaScript on fait beaucoup usage des objets et tableaux. Il arrive également souvent qu’on ait besoin de certaines informations d’un objet ou d’un tableau dans des variables. On peut évidemment le faire avec ES5, mais on va voir dans ce chapitre que ES6 nous offre un outil bien pratique : la destructuration.‌ Déstructurons un objet Vous avez un objet et vous voulez extraire ses données. Avec ES5 vous procédez ainsi : var identite = { nom: 'Durand', prenom: 'Pierre' }; var nom = identite.nom; var prenom = identite.prenom; console.log(nom); // Durand console.log(prenom); // Pierre On a un code simple mais il pourrait rapidement s’alourdir avec un objet…