LinuxFr.org : les dépêches de JavaScript

Sortie de µJS, une bibliothèque JavaScript légère pour dynamiser un site sans framework

2026-03-10T18:36:34+01:00

µJS est une bibliothèque JavaScript open source (licence MIT) qui permet de rendre un site web dynamique sans recourir à un framework frontend lourd. Elle s’inspire de pjax, Turbo et HTMX, avec pour objectif d’être plus simple et plus légère.

Principe de fonctionnement

µJS intercepte les clics sur les liens et les soumissions de formulaires pour charger les pages via AJAX, au lieu de déclencher un rechargement complet du navigateur. Le contenu récupéré remplace tout ou partie de la page courante. Le résultat : une navigation fluide, sans rechargement visible, sans écrire une seule ligne de JavaScript.

Aucune étape de build, aucune dépendance, compatible avec n’importe quel backend (PHP, Python, Go, Ruby…).

lien nᵒ 1 : Site officiel
lien nᵒ 2 : Playground interactif
lien nᵒ 3 : Dépôt GitHub
lien nᵒ 4 : Article de blog

Fonctionnalités principales

Mode patch : mettre à jour plusieurs fragments du DOM en une seule requête, via des attributs mu-patch-target dans la réponse HTML du serveur
SSE : mises à jour en temps réel via Server-Sent Events
DOM morphing : préservation de l’état du DOM (focus, scroll, transitions CSS) via idiomorph
View Transitions : animations fluides entre les états de page, via l’API native du navigateur
Prefetch : préchargement de la page cible au survol d’un lien
Polling : rafraîchissement automatique d’un fragment à intervalle régulier
Verbes HTTP complets : GET, POST, PUT, PATCH, DELETE sur n’importe quel élément
Barre de progression : intégrée, sans dépendance externe

Installation

Via CDN :

<script src="https://cdn.jsdelivr.net/npm/@digicreon/mujs/dist/mu.min.js"></script>
<script>mu.init();</script>

Via npm :

npm install @digicreon/mujs

Par défaut, tous les liens internes sont interceptés automatiquement. Le <body> de la page cible remplace le <body> courant.

<!DOCTYPE html>
<html>
<head>
    <title>Mon site</title>
</head>
<body>
    <nav>
        <a href="/">Accueil</a>
        <a href="/articles">Articles</a>
        <a href="/contact">Contact</a>
    </nav>

    <main id="contenu">
        <p>Contenu de la page.</p>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/@digicreon/mujs/dist/mu.min.js"></script>
    <script>mu.init();</script>
</body>
</html>

Aucun attribut supplémentaire. Les boutons retour/avant du navigateur fonctionnent, l’URL est mise à jour, le titre de la page aussi.

Pour ne remplacer qu’un fragment de la page plutôt que le <body> entier :

<a href="/articles" mu-target="#contenu" mu-source="#contenu">Articles</a>

Dans ce cas, µJS va récupérer la page /articles, va extraire l’élément #contenu de la réponse, et remplace l’élément #contenu courant avec.

Si tous les changements de pages se font dans l’élément #contenu, on peut généraliser dans la configuration (pour éviter d’avoir à mettre des attributs mu-target et mu-source sur tous les liens) :

<script>
mu.init({
    target: "#contenu",
    source: "#contenu"
});
</script>

Exemple 2 : recherche en direct avec debounce

<input type="text" name="q"
       mu-trigger="change"
       mu-debounce="300"
       mu-url="/recherche"
       mu-target="#resultats"
       mu-source="#resultats"
       mu-mode="update">

<div id="resultats"></div>

Le serveur reçoit une requête GET vers /recherche?q=... et retourne un fragment HTML. µJS l'injecte dans #resultats. Aucun JavaScript à écrire côté client.

Exemple 3 : mise à jour de plusieurs fragments en une seule requête (patch mode)

Côté HTML :

<form action="/commentaire/ajouter" method="post" mu-mode="patch">
    <textarea name="contenu"></textarea>
    <button type="submit">Envoyer</button>
</form>

<ul id="commentaires">
    <!-- liste des commentaires -->
</ul>

<span id="compteur">3 commentaires</span>

Le serveur retourne plusieurs fragments HTML dans une seule réponse. Chaque fragment indique sa cible via mu-patch-target :

<!-- Ajoute le nouveau commentaire à la liste -->
<li class="commentaire" mu-patch-target="#commentaires" mu-patch-mode="append">
    <p>Le nouveau commentaire</p>
</li>

<!-- Met à jour le compteur -->
<span mu-patch-target="#compteur">4 commentaires</span>

<!-- Réinitialise le formulaire -->
<form action="/commentaire/ajouter" method="post" mu-patch-target="form">
    <textarea name="contenu"></textarea>
    <button type="submit">Envoyer</button>
</form>

Une seule requête HTTP, trois fragments mis à jour simultanément. Le serveur garde le contrôle total sur ce qui est mis à jour et comment.

Télécharger ce contenu au format EPUB

Commentaires : voir le flux Atom ouvrir dans le navigateur

QuickJS version 2025-04-26 et QuickJS-NG version 0.10

2025-05-16T10:27:15+02:00

Finalement Fabrice Bellard est comme tout le monde, lui aussi numérote ses versions avec des dates, c'est plus simple. Voici donc la version annuelle de QuickJS (licence MIT), son moteur JavaScript incorporable et compact (le binaire Linux 64 bits fait 757 kiB). QuickJS est compatible avec ECMAScript 2023 — sauf pour les appels tails que les auteurs ne trouvent pas indispensables — et passe presque toute la suite de tests ECMAScript (en sélectionnant ES2023).

En 2023, pour revivifier un développement un peu dormant, la fourche QuickJS-NG a été lancée (par un des contributeurs de Jitsi). QuickJS-NG est intéressant pour ceux qui veulent utiliser cmake et compiler le projet sous Windows avec le compilateur C Microsoft. Il intègre aussi le support de quelques fonctionnalités récentes de la norme JavaScript que QuickJS ne supporte pas encore. (Je cite Fabrice Bellard). Les différences ne sont pas énormes. La version 0.10 est toute neuve.

Ci-après, Fabrice Bellard m'a très gentiment expliqué les principaux changements de QuickJS.

lien nᵒ 1 : Documentation QuickJS Javascript Engine
lien nᵒ 2 : Page de QuickJS chez Fabrice Bellard
lien nᵒ 3 : Démo dans la machine virtuelle JSLinux
lien nᵒ 4 : QuickJS sur Github
lien nᵒ 5 : Documentation de QuickJS-NG
lien nᵒ 6 : QuickJS-NG sur Github (avec les notes de version)

Changements les plus importants dans QuickJS 2025-04-26

Les explications viennent de Fabrice Bellard :

La suppression d'extensions non standardisées que j'avais ajoutées pour avoir des nombres flottants en précision arbitraire et la surcharge des opérateurs. Précision historique : j'ai créé QuickJS au début afin d'avoir une calculatrice avec une syntaxe compatible JavaScript. L'idée était de pouvoir manipuler des entiers ou des nombres flottants en précision arbitraire, des polynômes ou des matrices tout en utilisant une syntaxe familière. D'où des extensions au langage JavaScript présentes dans QuickJS. Mais ces extensions étaient compliquées et source de bugs, donc j'ai décidé de les supprimer. La calculatrice est maintenant un projet à part¹.
L'implémentation des BigInt se reposait sur la librairie libbf que j'ai supprimée avec les extensions non standardisées. Il y a donc une nouvelle implémentation des BigInt, plus rapide et plus simple.
La réimplémentation des "weak references" avec le support de fonctions présentes dans ES2023. QuickJS-NG les supportait déjà mais avec une implémentation qui utilise plus de mémoire, est moins efficace et surtout potentiellement incorrecte en présence de cycles.
La concaténation de petites chaînes de caractères est plus rapide grâce à l'utilisation de "ropes". Beaucoup de programmes fabriquent de longues chaînes de caractères en concaténant des petites chaînes de caractères avec une grosse s = ""; for(i=0;i<n;i++) s += "a". C'est une méthode déconseillée car inefficace, mais les moteurs JavaScript comme V8, SpiderMonkey ou JavaScriptCore l'optimisent donc elle est très utilisée.
Ajout des numéros de colonne dans les erreurs. QuickJS-NG le faisait déjà mais la méthode ne me convenait pas. Celle utilisée dans QuickJS est plus simple et (normalement) plus précise.
Les nombres flottants sont maintenant analysés et convertis en chaînes de caractères sans utiliser la librairie C. Cela est nécessaire pour être complètement compatible avec la norme JavaScript et accroître la portabilité du code.

Principaux changements de QuickJS-NG 0.10

Implémentation de Array.fromAsync
supporte os.Worker sur Windows
ajout du mode de build parserless
ajout de os.exePath()
ajouts des hooks Promise
correction des Promise non gérés
nouvelle implémentation de BigInt par Fabrice Bellard (voir ci-dessus)
et divers…

Sous-projets

QuickJS héberge des bibliothèque C qu'on peut utiliser pour d'autres projets :

libregexp : une bibliothèque Regexp petite et rapide, totalement conforme aux spécifications Javascript ES2023.
libunicode : une petite bibliothèque Unicode supportant les conversions de casse, la normalisation unicode, les requêtes unicode scriptées, les requêtes unicode de catégorie générale et toutes les propriétés unicode binaires.
dtoa : une petite bibliothèque pour l'impression et l'analyse syntaxique en float64.

Téléchargements

Les binaires sont dispos avec jsvu (JavaScript Version Updater, de Google) ou esvu (ECMAScript Version Updater, projet communautaire), ainsi qu'en téléchargement depuis les sites respectifs. Fabrice Bellard a aussi préparé des binaires QuickJS construits avec la Libc Cosmopolitan pour Linux, Mac, Windows, FreeBSD, OpenBSD, NetBSD tant sur les architectures ARM64 que x86_64.

NumCalc n'est pas encore indépendant de QuickJS, mais c'est le but. Pour l'instant la nouvelle calculatrice (bfcalc) n'est disponible qu'en ligne de commande. ↩

Télécharger ce contenu au format EPUB

Commentaires : voir le flux Atom ouvrir dans le navigateur

Deno 2.0 est là

2024-12-04T08:25:54+01:00

Le temps où Node.js régnait en maître comme la solution incontournable pour exécuter du code JavaScript côté serveur est-il révolu ? En tout cas, il a aujourd’hui des challengers de taille comme Bun (qui pourrait lui aussi mériter une dépêche) ou Deno. C'est donc de ce dernier qu'il sera question dans cette dépêche, à l'occasion de la sortie de sa version 2.0

lien nᵒ 1 : Annonce sur le blog officiel
lien nᵒ 2 : Site officiel de Deno
lien nᵒ 3 : JSR

Sommaire

Pour rappel

Deno est un runtime JavaScript et TypeScript. Il a vu le jour suite au constat de Ryan Dahl (créateur aussi de Node.js), que Node avait des problèmes de conceptions, et qu'il était nécessaire de repartir de zéro en tenant compte de l'expérience de Node pour ne pas refaire les mêmes erreurs. Il imagine Deno comme un runtime avec un modèle de sécurité par défaut plus strict. Les programmes Deno n'ont pas accès au système de fichiers, au réseau ou à l'environnement, sauf si on leur accorde explicitement ces permissions. Deno est écrit en Rust, et se base sur le moteur JavaScript V8 de Google. Deno se distingue également de Node en offrant la possibilité d'importer les dépendances via des URL, mettant en cache chaque module lors de l’importation pour améliorer la vitesse d’exécution.

La mascotte !

La première chose notable quand on passe de Node.js à Deno, c'est sa mascotte ! En effet, même si Node.js possède bien une petite tortue comme mascotte, celle-ci n'est utilisée nulle part ! Personnellement, j'ai toujours trouvé bien plus chouettes les projets qui ont des petites bestioles comme mascotte (Mozilla, Tux …). Et chez Deno, le dinosaure mascotte est omniprésent sur tout le site. Et en plus, à l'occasion de la version 2.0, on peut habiller notre dino sur la home page du projet ! Et ça c'est cool ! Voici le mien, qui est en compagnie de Ferris, la mascotte officieuse de Rust !

Bon, comme je ne suis pas sûr que tout le monde partage ma passion pour les mascottes, on va passer au côté plus technique ! 🤣

Deno 1.x, des débuts difficiles !

La version 1.0 sortie en mai 2020 a du mal à se faire une place et reste dans l'ombre de son grand frère. En effet, même si Deno offre un grand lot de nouveautés et est plus sécurisé par défaut, la très large adoption de Node et le fait que les projets développés pour Node ne sont pas forcément compatibles avec Deno rend l’adoption de ce dernier difficile. De plus, l'utilisation de CDN plutôt que d'installer les dépendances localement (dans le répertoire node_modules) a certes de nombreux avantages, mais cela rend votre projet dépendant de disponibilité du réseau ou peut entraîner des problèmes de performances si le CDN est éloigné géographiquement.

Les nouveautés de la version 2.0

Deno est désormais 100% compatible avec Node.js, et un gestionnaire de paquets officiel a vu le jour. Vous pouvez maintenant utiliser deno add et deno removepour ajouter ou retirer un paquet à votre projet.

Autour du projet Deno, JavaScript Registry (JSR) un dépôt de paquets JavaScript universel !

Le registre NPM s'est construit autour de Node.js afin de gérer facilement les dépendances de nos projets. Il a donc été développé pour Node.js à une époque où Node était la seule solution pour exécuter du code JavaScript côté serveur. En près de 15 ans, le registre NPM a rassemblé un peu moins de 3 millions de paquets et a très largement rempli sa mission toutes ces années. Mais aujourd'hui, la situation a changé, il existe plusieurs runtimes pouvant exécuter du code JavaScript (ou TypeScript) côté serveur. Et du côté front-end, les frameworks se sont multipliés et sont devenus de plus en plus complexes et nécessitent aussi l'utilisation d'un gestionnaire de paquets. Un registre de paquets fondé autour de Node.js uniquement est donc beaucoup moins pertinent qu'en 2010.
C'est donc pourquoi, à l'initiative du projet Deno, un nouveau registre de paquets JavaScript et TypeScript universel pointe aujourd'hui le bout de son nez. Il s'agit donc de JSR (JavaScript Registry).

Dans JSR, quand on va sur la page d'un paquet, en haut à droite, on a les logos des environnements compatibles avec le paquet :

Performances du runtime

Niveau performance, ça donne quoi ?

On voit souvent l'affirmation que Deno serait plus rapide que Node.js. Mais ça donne quoi en réalité ?

J'ai voulu faire un petit test sans prétentions pour voir ce que ça donne. Je voulais faire des tests plus poussés sur différents systèmes d'exploitation et architectures, mais par manque de temps, le test sera donc fait sur un seul système et un seul ordinateur et il s'agit d'un Mac… Un comble pour LinuxFr.org, mais c'est l'ordinateur que j'avais à disposition à ce moment-là. Mais sinon, je ne porte pas spécialement Apple dans mon cœur, bien au contraire !

J'ai testé l’exécution d'une même API sur Node. et Deno pour voir les différences de performance entre ces solutions. Pour ce test, j'ai utilisé une API Rest que j'ai développée pour le site de la société AudioSoft. J'ai fait la même requête POST 10 fois sur la même route avec les mêmes données. Il est important de préciser que c'est la première fois que je fais ce genre de tests, et que je ne fais peut-être pas tout dans les règles de l'art. Il y a des éléments extérieurs à Node et Deno qui peuvent influencer les scores. Notamment, la base de données utilisée pour le test était accessible via Internet, et des différences de débit ont pu fausser les tests.

Test sur un MacBook Pro (2,6 GHz Intel Core i7 6 cœurs, AMD Radeon Pro 5300M 4 Go Intel UHD Graphics 630 1536 Mo, 16 Go 2667 MHz DDR4) sous macOS Sonoma

Node: Le temps moyen pour exécuter le test de 126 millisecondes

Deno: Le temps moyen pour exécuter le test de 93 millisecondes

Performances du gestionnaire de paquets

Comme dit précédemment, Deno c'est aussi un gestionnaire de paquets. J'ai donc trouvé intéressant de tester les principaux gestionnaires de paquets sur différents environnements.
Pour ce test je me base sur la même API Rest que pour le test précédant, les dépendances à installer pour cette API sont : bcrypt, body-parser, dotenv, express, jsonwebtoken, mariadb, multer, mysql2, nodemailer, et sequelize. Le test a été fait sur un MacBook Pro. Pour effectuer ce test, le cache des gestionnaires de paquets ont été nettoyés et les fichiers-verrous supprimés.

Avec NPM, l'installation a mis 10 secondes.

Avec Deno, l'installation a mis 1 seconde.

Avec Bun, l'installation a mis 3 secondes.

On voit très clairement que NPM est beaucoup plus lent que ses deux concurrents. L'écart est plus faible entre Deno et Bun. Mais Deno est bien le plus rapide des trois.

Avant de réaliser ce test, j'en ai effectué un en oubliant de nettoyer le cache et de supprimer package-lock.json. Les résultats étaient alors 8 secondes pour NPM, 5 secondes pour Deno et 4 secondes pour Bun. Il est logique de constater que NPM est plus rapide, en revanche, je trouve surprenant que Deno et Bun aient été ralentis. Il est possible que les gestionnaires de paquets aient parcouru package-lock.json pour garder les versions présentes dans ce fichier, ce qui les aurait tous les trois ralentis. Et NPM a peut-être pu bénéficier de son cache (car je l'utilise bien plus que les deux autres sur mon ordinateur), Deno et Bun eux n'avaient peut-être pas grand-chose dans leurs caches, ont donc été ralentis. Il est donc important de supprimer les lockfile en cas de migration d'un projet.

Comme je le disais plus haut, c'est la première fois que j'effectue ce genre de test comparatif. Si vous avez des conseils sur les bonnes méthodes pour faire des tests plus fiables, ça m’intéresse !

Deno 2.1 est là

Étant donné que j'ai mis environ un siècle pour rédiger cette dépêche, Deno 2.1 est sortie entre temps ! 🤣
Je vous liste donc les principales nouveautés apportées à la version 2.1 sans les commenter 😉

Support natif de WebAssembly (Wasm) : Il est désormais possible d'importer directement des modules Wasm, simplifiant leur utilisation et améliorant les performances.
Version Long Term Support (LTS) : Deno 2.1 inaugure la première version LTS, garantissant des correctifs de bugs et des améliorations de performance pendant… Six mois… On n'est pas encore aux 30 mois des versions LTS de Node.js… Cela viendra peut-être plus tard. 🙂
Commande deno init --npm vite : Cette commande simplifie la création de nouveaux projets en utilisant des outils comme Vite, en automatisant l'initialisation et en réduisant la configuration manuelle.
Gestion des dépendances : Introduction de la commande deno outdated pour gérer les mises à jour des dépendances JSR et npm.

Conclusion

Si vous êtes développeur Node.js, je vous conseille de vous intéresser à Deno, et même à Bun. Je ne sais pas si ces deux runtime sont totalement prêts pour des projets en production (par exemple, Deno 2.1 n'a que 6 mois de durée de vie, ce qui est plutôt contraignant pour les serveurs.). Mais peut-être que dans un futur proche, il sera cohérent de migrer vers l'un de ces deux-là.

Télécharger ce contenu au format EPUB

Commentaires : voir le flux Atom ouvrir dans le navigateur

WebDAV Manager, un client WebDAV ultra-léger en JS

2022-10-11T10:17:11+02:00

À l’occasion de mon travail sur l’intégration du protocole WebDAV au gestionnaire d’association Garradin j’ai développé un petit client WebDAV JavaScript permettant avec son navigateur web d’envoyer et télécharger des fichiers, gérer les répertoires, prévisualiser les images et autres fichiers, mais aussi éditer directement des fichiers textes.

lien nᵒ 1 : WebDAV Manager
lien nᵒ 2 : Capture d'écran
lien nᵒ 3 : Démo (ne fonctionne qu'avec un serveur WebDAV autorisant les accès JavaScript distants)

L’utilisation principale est d’intégrer directement ce client à votre serveur WebDAV pour proposer une interface web agréable, mais il peut aussi permettre d’utiliser n’importe quel serveur WebDAV depuis son navigateur, sans rien installer (à condition que le serveur WebDAV l’autorise, via les entêtes CORS adéquats, voir la documentation).

Le client permet :

création et suppression de répertoires
suppression de fichiers
création et édition de fichiers textes
renommer et déplacer les fichiers et répertoires
envoi de fichier depuis le navigateur
envoi de fichier par copier/coller
envoi de fichier par glisser et déposer
prévisualisation dans le navigateur des images, textes, vidéos, fichiers audio, du MarkDown et des PDF
prévisualisation du MarkDown lors de l’édition
téléchargement des fichiers
dispo en anglais et français

Le client ne fait que 8 Ko de JavaScript (gzippé), et n’a besoin d’aucune dépendance, pas de NPM ni rien, juste un fichier JS et un fichier CSS à déposer.

Il a été testé avec mod_dav et NextCloud avec succès.

Télécharger ce contenu au format EPUB

Commentaires : voir le flux Atom ouvrir dans le navigateur

Sortie de Deno 1.0

2020-05-15T18:57:53+02:00

Deno est un possible successeur à Node.js. Ryan Dahl, qui est l’auteur à l’origine de Node.js, a présenté lors d’une conférence il y a deux ans une liste de dix choses qu’il regrette à propos de Node.js. À partir de cette liste, il a voulu créer un nouveau moteur d’exécution de script qui tourne en dehors du navigateur mais qui en reprend les conventions. Le projet s’appelle Deno et il vient d’atteindre la version 1.0.

lien nᵒ 1 : Annonce de la sortie de la v1
lien nᵒ 2 : Le code source de Deno sur GitHub
lien nᵒ 3 : Présentation des dix choses que Ryan Dahl regrette à propos de Node.js

D’un point de vue technique, Deno est codé en Rust et repose toujours sur V8. Le code exécuté est désormais du TypeScript et le fonctionnement est plus proche d’un navigateur Web. Par exemple, il utilise les mêmes API que celles fournies par les navigateurs quand cela fait sens, plutôt que de proposer des API propres (p. ex. fetch plutôt que le http.get de Node.js pour faire des requêtes HTTP).

Avant d’aller plus loin, voici le très attendu exemple de serveur Web qui répond avec un Hello World :

import { serve } from "https://deno.land/[email protected]/http/server.ts";

for await (const req of serve({ port: 8000 })) {
  req.respond({ body: "Hello World\n" });
}

On peut tout de suite remarquer que Deno prend le même chemin que Go pour la gestion des dépendances, à savoir une approche décentralisée et qui ne nécessite pas d’outils tiers comme npm. On peut directement importer un fichier TypeScript venant d’Internet.

Pour celles et ceux que ça ferait bondir sur leur chaise vis‑à‑vis de la sécurité, la réponse tient en deux parties :

Deno a une approche bac à sable par défaut : par défaut, un script ne peut pas accéder au système de fichiers ou à Internet (un peu comme dans un navigateur), et l’utilisateur doit explicitement passer une option comme --allow-net pour donner la permission ;
Deno a un système de cache qui fait que l’on peut faire fonctionner un script en téléchargeant une première fois les dépendances, en les vérifiant, et elles ne bougeront plus ensuite tant que les URL du script ne bougeront pas ; il est également possible de faire du vendoring facilement (il suffit de republier les dépendances sur un serveur Web que l’on contrôle).

Dans les différences avec Node.js, on peut également citer l’utilisation des Promise à la place des callbacks, souvent utilisées via async/await. Cela va notamment régler le problème de back‑pressure qui avait conduit à rendre complexe les API de Node.js (EventEmitter, fonction pause à appeler manuellement, etc.).

Ryan Dahl liste quelques limitations connues de Deno :

Deno est encore très jeune (2 ans) et va continuer à évoluer assez rapidement (là où Node.js est beaucoup plus stable) ;
Deno fournit un module TypeScript de comptabilité avec les API de Node.js pour aider au portage, mais ce module est encore loin d’être complet et n’est pas suffisant en l’état pour profiter des nombreux paquets npm qui dépendent souvent de ces API ;
les performances du serveur HTTP ne dépassent pas celles de Node.js (légèrement moins de requêtes par seconde mais une meilleure latence moyenne) ;
le typage statique de TypeScript est très lent (une piste évoquée est de réécrire tsc en Rust) ;
il n’y a pas encore d’interface stable pour permettre l’écriture de greffons ou d’extensions ;
enfin, les usages et bonnes pratiques autour de Deno restent à découvrir.

Télécharger ce contenu au format EPUB

Commentaires : voir le flux Atom ouvrir dans le navigateur

Les travaux de Marijn Haverbeke

2020-05-04T15:50:44+02:00

Marijn Haverbeke est un développeur que j’apprécie beaucoup. Ses projets sont pour la plupart écrits en JavaScript, langage que j’apprécie habituellement que moyennement, mais la qualité de son code le rend plaisant à lire. Et c’est toujours très bien documenté ! Comme ses travaux n’ont pas encore eu beaucoup d’échos sur LinuxFr.org, je me propose de vous les présenter.

lien nᵒ 1 : La page personnelle de Marijn Haverbeke
lien nᵒ 2 : Eloquent JavaScript
lien nᵒ 3 : ProseMirror
lien nᵒ 4 : CodeMirror
lien nᵒ 5 : Lezer
lien nᵒ 6 : Financer ses travaux

Commençons par Eloquent JavaScript. C’est un ouvrage, dont la version en ligne est gratuite, qui enseigne le JavaScript. Il est régulièrement cité comme étant ce qui se fait de mieux pour les débutants qui veulent apprendre le JS.

ProseMirror est une boîte à outils pour construire des éditeurs Web de texte riche. En particulier, il inclut les fondations permettant de faire de l’édition collaborative. J’ai découvert ce projet lors du développement de cozy-notes (cf. la dépêche des nouvelles de Cozy) et j’ai été impressionné par la qualité : les concepts de base sont bien expliqués, le code est modulaire et bien organisé, on sent une grande maîtrise du sujet, aussi bien sur les manipulations du DOM dans le navigateur que sur les aspects algorithmiques pour l’intégration automatique des changements lors de l’édition collaborative.

CodeMirror est le pendant de ProseMirror pour le code : c’est un éditeur de code en ligne, avec coloration syntaxique, thèmes, auto‐complétion, recherche, intégration d’outils de « lint », etc. Il est utilisé par les outils de développement de votre navigateur et par beaucoup d’autres projets.

En parlant de CodeMirror, la version actuelle est la 5 et la version 6, en cours de développement, sera une réécriture complète. Parmi les nouveautés, il y aura une meilleure accessibilité, une prise en charge améliorée des écrans tactiles et une meilleure analyse du contenu. Pour cela, le projet Lezer a été développé. C’est un outil pour écrire des analyseurs (parsers).

Vous vous souvenez peut‑être de Lex et Yacc. Là, c’est la même chose mais avec des objectifs liés à CodeMirror : déjà, le parser va être en JavaScript. Ensuite, on charge à minimiser le poids à télécharger pour le parser. Le parser doit également être rapide et pouvoir travailler de manière incrémentale. Enfin, il doit être tolérant aux erreurs : si une personne est en train de taper du code dans CodeMirror, ce serait dommage qu’elle ne puisse pas profiter de la coloration syntaxique tant qu’elle n’a pas fini l’instruction ou le bloc en cours.

Lezer permet d’écrire un fichier .grammar qui représente la grammaire à analyser, avec des points d’entrée pour brancher du code JavaScript. Tout cela est ensuite transformé en analyseur JS qui pourra être utilisé dans CodeMirror ou ailleurs. À titre d’exemple, voici à quoi ressemble le fichier .grammar pour décrire la syntaxe JSON :

@top JsonText { value }

value { True | False | Null | Number | String | Object | Array }

String { string }
Object { "{" list<Property>? "}" }
Array  { "[" list<value>? "]" }

Property { PropertyName ":" value }
PropertyName { string }


@tokens {
  True  { "true" }
  False { "false" }
  Null  { "null" }

  Number { '-'? int frac? exp?  }
  int  { '0' | $[1-9] std.digit* }
  frac { '.' std.digit+ }
  exp  { $[eE] $[+\-]? std.digit+ }

  string { '"' char* '"' }
  char { $[\u{20}\u{21}\u{23}-\u{5b}\u{5d}-\u{10ffff}] | "\" esc }
  esc  { $["\/bfnrt] | "u" hex hex hex hex }
  hex  { $[0-9a-fA-F] }

  whitespace { $[ \n\r\t] }
}

@skip { whitespace }
list<item> { item ("," item)* }

@detectDelim

Pour finir, si vous appréciez comme moi les travaux de Marijn Haverbeke, vous pouvez financer leur maintenance via un don sur https://marijnhaverbeke.nl/fund/.

Télécharger ce contenu au format EPUB

Commentaires : voir le flux Atom ouvrir dans le navigateur

Illico Editor : rétrospective 2017-2018

2019-01-08T18:44:06+01:00

En quelques mots, Illico Editor est un couteau suisse de la qualification de données qui :

s’adresse à tous et à toutes (pas uniquement à des experts en informatique) ;
simplifie le nettoyage de données (corriger, restructurer des données issues d’un tableur, d’une base de données, d’une application métier) ;
simplifie leur exploitation (indicateurs statistiques simples ou complexes, lister, filtrer, enrichir ou croiser avec d’autres sources, etc.).

L’application a été entièrement revisitée en 2017 et 2018 pour créer une nouvelle expérience utilisateur…

lien nᵒ 1 : Site officiel
lien nᵒ 2 : Dépêche LinuxFr.org d’avril 2017 : présentation détaillée et usages

Sommaire

Philosophie

Illico…

suit la philosophie ASAP (As Simple As Possible) ;
mixe HTML 5, JS, CSS 3 ;
ne requiert ni installation, ni code tiers, ni serveur Web ou de base de données ;
est publié sous licence GPL.

et s’utilise :

en ligne sur le site officiel : http://illico.tuxfamily.org ;
en local, en téléchargeant un ZIP (qui contient la copie du site Web).

Les nouveautés

Depuis la précédente dépêche d’avril 2017, plus de vingt versions d’Illico ont été publiées.

Les améliorations portent sur trois aspects majeurs :

l’interface utilisateur ;
la performance et accessibilité (couverture documentaire) du code ;
l’aide aux utilisateurs : qualité de la documentation utilisateur et des tutoriels.

En plus du périmètre fonctionnel :

nouvelles fonctionnalités ou transformations de données ;
corrections ;
nouvelles options et paramètres.

Les aspects majeurs et les nouvelles fonctionnalités sont présentés ci‐dessous.

1. Interface utilisateur

1.1 Concepts

L’interface utilisateur a été réécrite pour :

s’adapter à la généralisation des écrans de plus grande taille : présentation plus claire des paramètres :
- libellés des paramètres,
- positionnement des champs et paramètres ;
regrouper les fonctionnalités de manière cohérente :
- chargements de données,
- transformations et fonctions d’analyse,
- préférences utilisateur ;
préférer des mécanismes standards HTML/JS/CSS pour alléger le code et simplifier la maintenance :
- info-bulles,
- règles CSS,
- réduire l’usage des tableaux HTML ;
faciliter la navigation de l’IHM vers la documentation :
- pour chaque groupe de transformation, un lien pointe vers la documentation correspondante ;
utiliser un thème visuel plus agréable.

1.2 Pour illustrer

Recherche de doublons

1.3 Exportations

Les exportations — nom de l’onglet ou nom du fichier — sont désormais systématiquement horodatées.

1.4 Journal de bord

Le journal de bord consigne toutes les transformations avec leurs paramètres et les résultats : nombre de valeurs modifiées, nouveau nombre de colonnes, etc.

Désormais, le journal de bord consigne également le nom des exportations CSV, ce qui permet d’un coup d’œil d’évaluer l’état des données de telle ou telle exportation ou sauvegarde.

1.5 Restitutions dans de nouveaux onglets

Le visuel a été retravaillé pour :

le journal de bord ;
les exportations de données ;
les exportations de tableaux de synthèse.

Exportation de données

Numérotation des lignes et colonnes + guide visuel sous le curseur (ligne grisée)

Tableaux de synthèse

Ce module est équivalent au fait d’enchaîner plusieurs tableaux croisés dynamiques.

Les boutons (=>) permettent de récupérer le tableau de synthèse (données agrégées) ou les données détaillées.

2. Accessibilité du code source

Plusieurs revues de code ont permis d’améliorer :

la documentation JSDoc : en moyenne 100 lignes d’instructions strictes (sans compter les lignes vides) sont expliquées par 24 lignes de commentaires ; soit en moyenne une ligne de commentaire toutes les quatre LOC ;
les algorithmes : simplification ;
les conventions de nommage : noms de variables et des fonctions ;
l’empreinte mémoire : minimisation la taille des variables intermédiaires ;
l’utilisation de mécanismes natifs CSS : remplacement de code JS par du code CSS lorsque c’était possible ;
la gestion de jeu de données volumineux : exportations de données via l’objet JS Blob.

Pour rappel, les indicateurs de qualité (JSLint, longueurs des fonctions, etc.) sont recalculés à chaque version et consultables au chapitre Architecture.

3. Documentation utilisateur et tutoriels

Les textes et captures d’écran de la documentation utilisateur ont été revus et corrigés en cohérence avec la nouvelle interface graphique. Les tutoriels ont été relus/réécrits/corrigés.

4. Nouvelles transformations

Colonnes

Recréer une filiation (relation parent‐enfant)

Dans un jeu de données avec deux colonnes parent‐enfant : retrace une filiation parent, grands‐parents, etc., pour chaque enfant.

Lignes

Compacter les lignes (agrégats : calculs, listes)

Résume à une seule ligne plusieurs lignes qui ont un même identifiant. En fonction des options, les données sont soit écrasées (celles de la première occurrence prévaut) soit agrégées (somme, liste de valeurs, etc.).

Décaler vers le haut ou le bas

Décale toutes les valeurs d’une colonne vers le haut ou le bas, en suivant (selon l’option sélectionnée) une autre colonne d’identifiants. Comportement proche de la fonction LAG du logiciel SAS.

Valeurs en liste : agrégats et combinaisons

Calculer un ratio de similarité entre deux listes de valeurs

Pour deux colonnes décrivant à chaque ligne des listes de valeurs (séparées par un espace, une virgule, etc.), indique le ratio de similarité. Par exemple, « 4/6 » indique que sur six éléments, quatre éléments sont en communs, indépendamment de leur ordre.

Agrégats

Conversion dans un système de comptage mixte

Convertit les valeurs d’une colonne dans un système de comptage (jusqu’à sept niveaux). Par exemple :

convertir des secondes en : nombre de semaines + nombre de jours + nombre d’heures, etc. ;
convertir un stock en : nombre de palettes, de caisses, de camions, etc.

Intervalles

Recherche d’une valeur dans un intervalle

Pour deux colonnes décrivant un intervalle et une colonne de données, indique à chaque ligne si la donnée est située avant, après ou incluse dans l’intervalle.

Combiner deux intervalles

Produit une combinaison de deux intervalles :

union : intervalle englobant les deux ;
intersection : plus petit intervalle commun.

Autre nouveauté : nouvelle année…

Bonne et heureuse année 2019 !

Télécharger ce contenu au format EPUB

Commentaires : voir le flux Atom ouvrir dans le navigateur

Oui, Illico !

2017-04-10T10:22:39+02:00

Toute ressemblance avec des personnes existantes ou ayant existé est purement fortuite.
> Dis Arnaud, tu n’aurais pas un outil magique pour m’aider à nettoyer mes données et m’éviter d’y passer ~~ma journée~~ ~~ma soirée~~ mon week‐end ? :(
> Si, Illico !

En très court, Illico propose un catalogue de fonctionnalités prêtes à l’emploi, génériques (paramétrables) pour améliorer la qualité des données.

Et en une minute, Illico, c’est quoi ?

Illico Editor est un couteau suisse de la qualification de données, en JS/HTML, publié sous licence GPL v3. L’outil s’adresse à tous et toutes (et pas uniquement à des expert·e·s informatiques) et permet de manipuler, corriger, re‐structurer des données en quelques clics. Par exemple, des données issues d’un tableur, d’une base de données, d’une application métier, etc., que l’on souhaite corriger ou pour lesquelles on souhaite établir des indicateurs statistiques simples ou complexes, lister et filtrer ces données, les enrichir avec d’autres sources, etc.

lien nᵒ 1 : site Web

Sommaire

Qu’est‐ce que ça peut m’apporter ?

À l’usage, les gains de temps observés se situent à plusieurs niveaux :

durant la phase d'exploration de données (analyse)

Les acteurs métiers (comptabilité, RH, administratif, etc.) sont autonomes durant cette phase ; sans Illico, les collègues de l'informatique devaient jusqu'à présent leur développer des routines (macro, scripts, programme dédié) de corrections de données ou de transformation de la structure des données comme des pivots de colonnes/lignes.
Ces développements sont souvent trop en lien avec la structure des données ou avec le langage de programmation fétiche du développeur et à chaque nouveau chantier qualité de données il fallait re-développer (parfois dans une autre techno).

Généralement juste ajouter une nouvelle colonne imposait de vérifier toutes les routines : c'était très sensible aux données et au final assez laborieux.

S'il s'agit d'un projet de reprise de données (exemple : export d'une base de données, nettoyage puis ré-importation), des fonctionnalités très typées base de données (champs null, valeurs uniques, longueurs des champs, normalisation selon Merise, etc.) sont présentes dans Illico.

durant la phase de correction

Les acteurs métiers peuvent corriger en masse dans Illico et le résultat sera exporté dans un fichier CSV (ou par un copier-coller global vers un tableur). On évite ainsi de manipuler des données de production et aussi de devoir créer un environnement de test juste pour permettre aux utilisateurs de vérifier/corriger leurs données.

Illico produit un journal de bord, une sorte de documentation auto-générée par l'outil.
Une fois que les acteurs métiers ont réalisé un premier nettoyage et que des équipes informatiques doivent implémenter/automatiser les mêmes étapes (dans un ETL, un sas de nettoyage de données, etc.), Illico et le journal de bord deviennent une aide précieuse pour tester rapidement la qualité de l'implémentation.

durant la phase de restitution

Illico permet de produire des tableaux de synthèse (exemple tableaux croisés dynamiques à plusieurs niveaux de profondeur),

en général (exemples)

Vous connaissez sûrement ces situations :

pour un nouveau projet informatique, on a besoin de transformer des données d'un format à un autre dans la phase de chargement initial de données ;
pour tout projet de refonte d'application avec reprise des données, on cherche à passer d'un format source à un format cible (exemple : la structure de la base de données relationnelles est différente) ;
dans le cas de préparation d'un annuaire ou d'une liste d'individus à contacter (préparation d'un publipostage, ou mass-mailing), on veut harmoniser la présentation des informations (majuscules etc.) ;
dans les métiers supports (administratif, RH, compta, etc.), on souhaite créer une liste d'individus (liste des promouvables, liste des personnes à évaluer, liste des personnes éligibles, etc.) en appliquant successivement plusieurs règles métiers d'ajout/soustraction :
- liste de départ : tout le monde ;
- on filtre : on conserve ceux qui ont droit ;
- on soustrait : ceux qui ont déjà eu ;
- on ajoute : ceux qui n'ont pas pu avoir ;
- on soustrait : ceux qui partiront avant la date d'effet ;
- on rajoute : ceux qui arriveront d'ici la date d'effet.

Sans outil, ce type de gymnastique peut devenir très chronophage.

Pourquoi un outil de plus ?

le constat

Quel que soit votre métier et votre besoin, il vous faudra une excellente connaissance des données ET un outil particulièrement accessible et souple. Mais quel outil ? un tableur, une base de données, une base du type Access, Kexi ou FileMaker, un script, une nouvelle application dédiée ? …
Existe-il un outil qui couvre tous les types d'actions ? ou un-e collègue qui connaisse tous les outils/techno qui pourrait servir ici ? et qui soit disponible pour vous aider ?

Faut-il faire monter en compétence les acteurs métiers à des outils techniques (SQL ? macro VBA ?) ou former les programmeurs à des problématiques métiers ? À l'exception des administrateurs technico-fonctionnels, avoir une double expertise ne semble pas très pertinent (surtout si l'expert-comptable ne se sert du SQL que 2 fois dans l'année).

Est-ce un problème insoluble ?

la solution théorique

La solution paraît simple sur le papier :

apporter un outil accessible aux utilisateurs métiers pour s'affranchir d'un coût d'apprentissage technique très conséquent ;
(pour faire simple) que cet outil soit aussi efficace qu'un développeur/adminDB.

Illico : un outil ou une approche ?

Il existe actuellement des outils très pertinents pour aider au nettoyage des données. Certains peuvent s'avérer assez lourds (licence, techno, machine puissante, dépendances) ou juste inconnus/hors de portée des acteurs métiers qui en ont besoin.

Illico tente de pallier à cela dans une approche originale où toutes les fonctionnalités se présentent de la même manière et demandent (selon les paramètres, et en moyenne) entre 2 et 4 clics.

Par exemple, les actions suivantes se réalisent de la même façon :

faire un pivot complexe ;
mixer des colonnes A et B avec une règle spécifique (exemple : prendre la valeur de B quand celle de A est vide sinon prendre celle de A) ;
visualiser un tableau croisé dynamique ;
traiter des données en liste (dans une même cellule/case) ;
faire un pivot ou mettre une colonne en majuscule ;
supprimer les lignes vides.

Il n'y a en réalité pas de raison pour que mettre une colonne en minuscule soit plus simple à programmer que faire une différence symétrique entre deux sources de données. À l'oral, il faut 2-3 secondes de plus pour l'exprimer ? eh bien dans Illico, ce sera 2-3 clics supplémentaires, pas plus !

En pratique, ça se passe comment ?

livré clé en main

Vous pouvez tester ou utiliser la version en ligne (les données ne quittent pas votre poste) ou la télécharger en local :

téléchargez ;
décompressez ;
ouvrez la page index.html (c'est une copie conforme du site officiel qui inclut la documentation et le tutoriel de prise en main) ;
cliquez sur « accès direct », vous y êtes.

Vous pouvez consulter la documentation utilisateur complète avec des exemples ou tout simplement suivre le tutoriel de prise en main (qui comprend un fichier d'exemple).

le moins d'étapes possibles

Dans Illico, il n'y a pas d'étapes préliminaires de description du format de la source de données (nombre de colonnes, types de données, etc.).

Vous copier-collez vos données depuis un tableur ou vous importez un fichier CSV et dans les deux cas le séparateur de colonne est automatiquement détecté (vous pouvez le forcer au besoin) ;
vous appliquez une transformation ;
vous analysez le nouvel état des données ;
vous exportez, annulez ou poursuivez avec une autre transformation.

un petit aperçu

le domaine de valeur

Équivalent à un tableau croisé dynamique sur 1 dimension avec total et ratio… en 1 clic.

Le tableau de synthèse est exportable au format HTML ou CSV.

l'analyse et traitement des doublons

Il est possible d'identifier les doublons sur plusieurs colonnes (le même nom, les mêmes nom et prénom, les mêmes nom et prénom et email, etc.).

Au choix, le traitement des doublons sera de les :

filtrer (conserver) ;
exclure (suppression) ;
marquer (ajoute une colonne en début de tableau avec un identifiant pour chaque groupe de doublons) ;
marquer et filtrer ;
analyser (tableau de synthèse).

exploration de données

Enchaînements de tableaux croisés dynamiques

On compte le nombre de vacations :

par service (axe service) ;
puis lorsque l'on clique sur le service, un second tableau la répartition des vacations par individu (axe contact).

À chaque tableau de synthèse, le jeu de données correspondant est exportable HTML ou CSV ainsi que le tableau de synthèse.

Illico, en résumé

fonctionnalités utilisateur

import CSV : UTF-8 ou ISO-8859-1 ;
export CSV : UTF-8 (+ BOM) ;
import/export par copier-coller ;
possibilité d'annuler la dernière transformation ;
journal de bord intégré (qui indique aussi les actions annulées) ;
plus de 100 transformations de données :
- analyser : formats de données, tri à plat ;
- croiser, enrichir ou exclure depuis deux sources ;
- modifier en masse ou selon des conditions ;
- opérations sur des listes (plusieurs valeurs dans une même cellule/case) ;
- convertir des formats ;
- rapprocher : accents, suppression des "blancs" (trim), distance d'édition ;
- filtrer, dédoublonner, échantillonner ;
- agréger, explorer : tableaux croisés dynamiques ;
- pivoter, transposer ;
- et bien d'autres !

code source

environ 10 000 lignes de LOC strictes (HTML/JS) ;
code-source JS principal = 1/3 de commentaires, 2/3 d'instructions ;
environ 280 fonctions JS ;
0 dépendance/bibliothèque/code-tiers ;
le code est vérifié sous JSHint.

à propos du code-source JS

rares dépendances entre les fonctions (limite les effets de bord) ;
la quasi-totalité des algorithmes sont basés sur des parcours de tableaux ;
le code-source JS suit une convention de nommage des variables en fonction de leur usage (i j k pour un compteur, v pour une valeur du tableau de données (String), t pour un texte plutôt long, n pour un nombre, e pour un élément HTML, a pour un array, etc.).

// quand on lit
a[i] // a représente un array simple (i est un numérique)

// quand on lit
a[v] // a représente un array associatif (v est une chaîne).

Ce qui permet à la lecture de toujours savoir sur quel type d'objet on est.

Et les variables les moins utilisées ont des noms plus explicites.

Les algorithmes assez courts + la convention de nommage + des fonctions cloisonnées permettent de visualiser les 3/4 des fonctions dans la hauteur de l'écran sans scroller (40 LOC pour un 15").

Nota bene : les revues de code sont l'occasion soit de clarifier la convention soit de rectifier les noms des variables dans le code source respecter au mieux la convention.

La convention est indiquée dans la rubrique architecture de la documentation.

Cas concrets d'utilisation

tableaux croisés dynamiques

Un logiciel métier RH (ressources humaines) exporte un listing des situations des agents mais d'une façon qui ne permet pas d'utiliser des tableaux croisés dynamiques ;
Illico permet de basculer des colonnes, des groupes de colonnes en autant de lignes (pivot) pour se retrouver sur un format plus facile à utiliser.

données d'annuaire

Un export d'un annuaire fournit des coordonnées sous la forme

Mr X  | téléphone : 0123456789, fax : 032165478
Mme Y | email : [email protected], téléphone : 0546789123

Illico permet, en une opération, de transformer les coordonnées en trois colonnes : téléphone, fax, email, quelque soit l'ordre des informations qui y figuraient.

normalisation

Pour préparer une base de données relationnelles, on a au départ un grand fichier de données et il faut créer les identifiants (clé primaire/étrangère) pour les relations entre les deux tables. Illico va normaliser (normalisation Merise) les données et préparer un identifiant).

En une opération, Illico remplace les valeurs par les identifiants et affiche la table de correspondance.

vérifier des données avant de les charger en base

Avant de charger un csv dans une base de données, on cherche souvent à vérifier la longueur des champs, si les valeurs sont uniques, si le type alpha ou numérique est bien respecté, les valeurs minimum et maximum pour des numériques, etc. Illico permet de vérifier cela en un seul clic.

Une autre fonctionnalité supprime les lignes qui ne contiennent aucune valeur pour certaines colonnes. Cela évite de charger des données en base de données et d'avoir des rejets lors de l'import ou plus exactement, cela permet de détecter en amont de l'import toutes les lignes qui vont être rejetées.

préparer des jointures

Lors d'une jointure (croisement) entre deux sources de données A et B par exemple deux tables d'une base de données relationnelle, il est difficile de connaître rapidement les données de A qui ne sont pas dans B et en même temps celles de B qui ne sont pas dans A.

À partir de deux fichiers CSV (A et B), Illico produit un tableau de synthèse avec ces informations et permet de choisir la jointure que l'on souhaite réaliser.

Cela permet aussi de détecter avant la jointure les cardinalités entre les deux sources. Par exemple on s'attend à trouver uniquement du 1-1 entre deux sources. Et quand on simule, on observe avec la simulation du 1-0 (des valeurs de A sont absentes de B), du 1-1 (des valeurs de A se retrouvent dans B) et du 1-n (des valeurs de A se retrouvent à plusieurs reprises dans B).

préparer des données multi-lignes

Pour constituer un annuaire agréable à consulter, on peut partir d'une liste d'individus avec en colonne : le nom, le prénom, la fonction, les coordonnées et l'email et d'autres données.

Pour des raisons esthétiques, on souhaite présenter les données autrement avec, pour une même ligne du tableau, regrouper dans la même cellule/case du tableau les informations suivantes

NOM Prénom
fonction (en rouge)
coordonnées
email (lien cliquable)

NOM Prénom
fonction (en rouge)
coordonnées
email (lien cliquable)

Comme Illico repose sur HTML/JS, il est facile d'intégrer des balises HTML de mise en forme (couleur, gras, a/href) et un saut de ligne BR et de les récupérer par copier-coller vers un tableur ou un traitement de texte.

Ici, il y a trois étapes :

la couleur ;
la balise a/href pour l'email ;
la concaténation de 5 colonnes.

Nota bene : des transformations sont disponibles pour le gras, l'italique, le barré, augmenter/diminuer la taille, mettre en couleur, ou enlever la mise en forme. Des options permettent à tout moment d'interpréter ou au contraire de rendre apparente/visible ces balises/mises en forme HTML sans les interpréter.

Télécharger ce contenu au format EPUB

Commentaires : voir le flux Atom ouvrir dans le navigateur

Angular 2 est en version finale, Ninja Squad vous met le pied à l’étrier

2016-09-19T13:43:19+02:00

Ninja Squad proposait un e‐book sur Angular 2 quand ce framework n’était alors qu’en bêta (cf. la dépêche précédente Deviens un Ninja avec Angular 2 : un e‐book sans DRM à prix libre et en soutien à l’EFF).
Cette semaine, Angular 2 est — enfin — passé en version finale. Ce qui signifie qu’il est utilisable sans trop de crainte en production (plus de changements incompatibles) et qu’il est donc temps de s’y mettre sérieusement.

Après l’e‐book (à jour de la dernière version), Ninja Squad propose désormais un « pack pro », proposant de mettre en pratique la théorie apprise dans l’e‐book en construisant pas à pas une application complète, avec une batterie de tests fournie couvrant le code produit à 100 % : à chaque étape, on soumet sa solution, dont la qualité est analysée ; un score est donné ; on peut alors améliorer son implémentation, ou sauter les trois exercices suivants, ou même tricher en consultant la solution fournie respectant les bonnes pratiques et l’état de l’art ; on suit ainsi sa progression dans la trentaine d’exercices proposés (entre 3 et 5 jours de travail).

Cela devrait faire gagner des heures sur vos projets personnels et professionnels, en ayant toujours sous la main du code fonctionnel et à jour des dernières versions couvrant l’essentiel des cas d’usage d’une application d’entreprise (les mises à jour sont évidemment gratuites).

Tarif normal : 199 €.
Code de réduction pour les lecteurs de LinuxFr.org : LinuxFrRocks, -30 % pour les 20 premiers acheteurs.

La plate‐forme est testable gratuitement sur les six premiers exercices : https://angular2-exercises.ninja-squad.com/.

N. D. M. : la licence de l’e‐book (201 pages A4) interdit explicitement la vente, l’utilisation commerciale et la redistribution. Le site annonce actuellement environ 2 800 acheteurs et 114 packs pro, ayant généré 6 452 € de dons à l’EFF.

lien nᵒ 1 : Angular 2 Pro Pack Platform by Ninja Squad
lien nᵒ 2 : Site de vente du Pack Pro Angular 2 par Ninja Squad

Télécharger ce contenu au format EPUB

Commentaires : voir le flux Atom ouvrir dans le navigateur

Sortie de Electron 1.0

2016-05-14T11:22:28+02:00

Electron permet de construire des applications de bureau multi-plateformes avec les technologies du web (HTML, CSS et JS). Il était initialement développé par Github pour son éditeur de texte Atom et est maintenant un projet à part entière. Il vient d'atteindre la version 1.0, signe d'une certaine maturité.

lien nᵒ 1 : Annonce de la sortie de la version 1.0 d'Electron
lien nᵒ 2 : Site officiel d'Electron
lien nᵒ 3 : Awesome Electron, une compilation de liens sur Electron

D'un point de vue technique, une application Electron se compose de 2 parties : un processus principal et une (ou plusieurs) fenêtre(s). Le processus principal est un node.js et il sert à contrôler l'application. Il peut lancer une ou plusieurs fenêtres, qui ne sont rien d'autres que le navigateur Chromium dépouillé de son interface. Les processus peuvent communiquer entre eux via un système d'IPC.

Electron offre une intégration avec les trois principaux systèmes d'exploitation (Linux, OSX et Windows), que ce soit pour les icônes de lancement, la tray icon, les notifications, la gestion de l'énergie, etc. Il vient également avec certains outils. On peut citer devtron, un complément à l'inspecteur de Chromium qui simplifie le développement, spectron, un framework de tests, ou encore electron-builder pour faire des installeurs et mises à jour automatiques.

Electron souffre toutefois de certaines limitations. Embarquer Chromium et Node.js veut dire que la moindre application pèse plus de 100 Mo. L'intégration avec les différents systèmes d'exploitation est encore incomplète et fonctionne parfois de manière déroutante (la tray icon qui ne s'affiche pas dans certains environnements par exemple). Electron-builder est très compliqué à mettre en place pour de la cross compilation. Espérons que Github continuera à travailler pour améliorer tout ça.

Il existe déjà de belles applications avec Electron :

J'ai cité Atom, l'éditeur de texte de Github.
Dans un style très proche, Microsoft a utilisé Electron pour Visual Studio Code.
Nylas N1 est un client de courriel.
Web Torrent Desktop permet de visionner des films depuis un torrent en cours de téléchargement (c'est un portage de la version web qui permet également de faire passerelle entre les deux).
Black Screen est un terminal pour le 21^e siècle.

Et j'espère pouvoir vous parler d'une autre application Electron bientôt.

Télécharger ce contenu au format EPUB

Commentaires : voir le flux Atom ouvrir dans le navigateur

Node.js passe la sixième vitesse

2016-05-12T10:20:13+02:00

Node.js est la principale implémentation du langage JavaScript côté serveur. Elle utilise V8, le moteur JavaScript de Google Chrome, et vient d’atteindre la version 6.0.0 le 26 avril 2016.

La montée de version de V8 vers la version 5.0 a d'ailleurs permis une meilleure prise en charge d'ES6, avec 93 % des fonctionnalités couvertes. Parmi les autres nouveautés, on trouve des performances accrues (notamment pour le chargement des modules), une meilleure stabilité et utilisabilité des API JavaScript (notamment Buffer et File System).

Peu de temps après la sortie de la version 6.0.0, des failles OpenSSL ont été annoncées, ce qui a conduit à la sortie d'une version 6.1.0.

lien nᵒ 1 : Annonce de la sortie de node.js 6.0.0
lien nᵒ 2 : Le site officiel de node.js
lien nᵒ 3 : Mise à jour de sécurité suite aux failles OpenSSL
lien nᵒ 4 : Prise en charge d'ES6 par les différentes versions de node.js
lien nᵒ 5 : Une présentation d'async/await
lien nᵒ 6 : Retour d'expérience sur un an d'utilisation de node.js

Les différentes versions

Ce n'est pas facile de suivre les différentes branches de node.js suite au fork io.js, qui a ensuite refusionné avec node.js. Toutefois, la situation n'est que temporaire et on devrait y voir plus clair d'ici la fin de l'année. En attendant, voici un petit résumé :

node.js 0.10 : une vieille version, qui est toujours celle packagée par Debian notamment, est en phase de maintenance jusqu'à octobre 2016 (ensuite, ce sera les oubliettes)
node.js 0.12 : pareil, mais la phase de maintenance durera jusque décembre 2016
node.js 4 : c'est la version LTS actuelle. Elle sera en LTS Active jusqu'avril 2017, puis passera en phase de maintenance pour une année supplémentaire
node.js 5 : c'est juste une version de développement et elle s'arrêtera dans 2 mois
node.js 6 : c'est également une version de développement (current) et deviendra une version LTS en octobre 2016. D'ici là, il pourra encore y avoir des changements assez conséquents (montée de version de V8 notamment).

Donc, pour le moment, il est recommandé d'utiliser node.js 4 en production et de commencer à faire tourner des tests avec node.js 6 dans les environnements d'intégration continue pour détecter les régressions. À noter que pas mal de modules npm compilés sont en train d'être corrigés pour node.js 6.

Npm3

Node.js 5 et 6 viennent avec npm3 et non plus npm2. Ce changement est majeur.

Avec npm2, les dépendances d'une dépendance s'installaient dans le répertoire node_modules de la dépendance. Et donc, on pouvait avoir un même module avec deux versions différentes au sein d'un même projet, si deux dépendances incluaient ce module dans des versions différentes. Avec npm3, ce n'est plus le cas. Toutes les dépendances (directes et indirectes) sont installées dans le node_modules du projet.

Ce changement a permis de régler pas mal de problèmes sous Windows, où les dépendances de dépendances de dépendances de… (vous voyez l'idée) avaient des chemins très longs, trop longs pour Windows. Il permet également de s'assurer qu'un module n'est installé qu'une seule fois par projet, ce qui est très utile pour les projets front-end qui utilisent npm.

Par contre, le passage à npm3 n'a pas que des bons côtés. Ce changement a introduit pas mal de régressions et la situation commence juste à se stabiliser. Npm3 est également de façon notoire bien plus lent que npm2.

ES6, ES7 et la suite

ES6, ou ES2015, la version actuelle du standard qui décrit le langage JavaScript est le fruit d'un long travail et les implémentations des moteurs JavaScript supportent la plupart des fonctionnalités. Que ce soit chez Google, Mozilla, Microsoft ou Apple, on est proche des 100 %, avec jusque quelques bugs sur des cas très particuliers ou la volonté de ne pas implémenter les Tail Calls Optimisation (car ils posent des problèmes).

Pour autant, tout n'est pas rose. Les nouvelles fonctionnalités ne sont pas aussi optimisées que le reste. Les benchmarks montrent qu'il est fréquent que du code ES6 soit entre un et trois ordres de grandeur plus lent que son équivalent en ES5. Les moteurs vont combler ces différences mais cela risque de prendre encore quelques mois ou années.

Autre point noir : les modules d'ES6. L'équipe derrière node.js a fait une proposition pour prendre en charge les modules d'ES6 (en disant que s'ils vont faire les modules d'ES6, ce sera de cette façon, mais il se peut aussi qu'ils ne fassent rien car ils considèrent que les modules d'ES6 sont une mauvaise chose et que le standard devrait étudier à nouveau cette question). Cette proposition n'a pas plu à une partie de la communauté car elle introduit l'extension .mjs, ce qui va poser problème pour les modules qui seront utilisables à la fois par node.js et les navigateurs. On a donc eu le droit à une contre-proposition et les noms d'oiseau ont volé une nouvelle fois sur Twitter. La situation semble enlisée pour le moment.

ES7, ou ES2016, est beaucoup plus léger. C'est principalement l'arrivée de l'opérateur ** pour calculer des puissances et de Array.prototype.includes pour savoir si un élément fait partie d'un tableau.

Par contre, on attend toujours async/await. Cette solution devrait permettre d'écrire du code asynchrone de manière beaucoup plus propre et est même décrite comme la solution miracle depuis plusieurs années. Seul problème, aucun moteur JS ne l'a implémentée pour le moment.

Télécharger ce contenu au format EPUB

Commentaires : voir le flux Atom ouvrir dans le navigateur

Et si JavaScript allait droit dans le mur ?

2016-03-04T15:59:51+01:00

Cette dépêche pose la question de l’avenir du JavaScript. Celui‐-ci continue de gagner en popularité, mais aussi en complexité. L’auteur du journal a étudié d’autres langages encore peu connus (Elixir, Elm, Pony, Oden et Crystal) et ceux‐ci lui ont fait sauter aux yeux les défauts du JavaScript. Il s’interroge donc sur le futur de ce langage.

Dans les commentaires du journal, de nombreux développeurs ont fait un retour sur leur expérience. Certains apprécient le JavaScript (souvent, un sous‐ensemble de ce langage qui va à l’encontre des dernières nouveautés). D’autres, souhaiteraient fortement s’en débarrasser, mais quasiment tous sont d’accord sur le fait qu’il va rester grâce à son monopole sur les navigateurs).

Certains ont encouragé à essayer leur langage de prédilection : Go, OCaml, ClojureScript, etc.

Enfin, on peut également retrouver un certain espoir avec WebAssembly (le successeur d’asm.js), qui permettrait à de nombreux langages d’être compilés vers la plate‐forme Web.

lien nᵒ 1 : Journal à l’origine de la dépêche
lien nᵒ 2 : Crystal
lien nᵒ 3 : Pony
lien nᵒ 4 : Oden
lien nᵒ 5 : Elm
lien nᵒ 6 : Elixir

Always bet on JS — Brendan Eich

Je me pose pas mal de questions sur l’avenir du JavaScript. D’un côté, il semble plus fort que jamais et ses surcouches (CoffeeScript, PureScript, etc.) ne sont plus à la mode. De l’autre, ses défauts me sautent de plus en plus aux yeux.

Je passe pas mal de temps à regarder de nouveaux langages de programmation. La plupart resteront expérimentaux, mais de temps à autre, un langage perce. Ce fut par exemple le cas de Go, il y a quelques années. Ceci dit, ma motivation principale quand j’étudie ces nouveaux langages n’est pas tant de trouver le futur langage qui deviendra à la mode que d’apprendre de nouvelles façons de penser et de programmer. Voici un petit tour très très succinct des derniers langages qui ont retenu mon attention :

Crystal est un langage dont la syntaxe s’inspire très fortement du Ruby, mais qui est compilé et non pas interprété. Cela lui donne des performances bien plus avantageuses et offre le filet de sécurité qu’est le typage statique (sans avoir à ne jamais écrire le moindre type !) ;
Pony est un langage orienté objets, avec un modèle d’actors (similaire à celui d’Erlang ou Akka) et un système de capacités (capabilities) très intéressant. La syntaxe est très agréable et on retrouve de nombreuses structures tirées des langages fonctionnels (pattern matching, application partielle d’une fonction) ;
Oden est un langage qui vise à profiter de l’écosystème golang, mais avec un langage plus fonctionnel. On retrouve ainsi du typage statique, avec la prise en charge du polymorphisme, ainsi qu’une syntaxe plus épurée que le Go ;
Elm est un langage fonctionnel pour écrire des applications dans un navigateur. Prenez React, Redux, Immutuable.js, enlevez beaucoup de bruit pour ne garder que l’essentiel, poussez le concept un peu plus loin, et Elm pourrait bien être ce que vous obtenez ;
Elixir est déjà plus établi que les langages précédents. C’est un langage qui permet de profiter de la machinerie d’Erlang quand on est allergique à sa syntaxe. Au passage, on gagne aussi des outils bien pratiques.

Bien sûr, il y aurait beaucoup plus à dire sur chacun de ses langages, mais ce qui m’intéresse ici est qu’ils apportent beaucoup de mécanismes qui me manquent cruellement quand je code en JavaScript.

L’asynchrone

JavaScript, avec son Event Loop et ses callbacks dans tous les sens, était à la pointe de la gestion de l’asynchrone il y a quinze ou vingt ans. Maintenant, CSP est devenu populaire, et à juste titre.

JavaScript n’est pas resté immobile. On a vu apparaître les Promise, puis certains ont détourné les générateurs. On parle beaucoup d’async/await. Il n’empêche, on est toujours dans un bourbier, coincé entre des API qui utilisent parfois des callbacks, parfois des promises.

Async/await est présenté comme une solution miracle depuis un bout de temps mais n’avance que très lentement. Il n’a pas été intégré à ES6, il ne passera pas dans ES2016 et ça semble mal parti pour ES2017. Et pour cause, aucun moteur JavaScript des principaux navigateur n’a d’implémentation pour lui. Côté Node.js, pas mieux, on attend sur V8 et il n’y aura pas de version LTS qui prendra en charge async/await avant un paquet de temps. On peut jouer avec Babel en attendant, mais ça reste un jeu, pas quelque chose que l’on peut espérer utiliser en production et encore moins dans un projet libre.

La confiance dans le code

La confiance dans le code passe naturellement par les tests. Mais ceux‐ci ne sont pas parfaits et ne devraient en aucun cas être notre seul moyen d’avoir confiance dans le code que l’on écrit. D’ailleurs, les autres langages précédemment cités sont très riches en enseignements de ce côté‐là.

Il y a bien sûr l’immutabilité (on ne modifie jamais un objet ou une valeur, on en crée un nouveau avec les informations mises à jour). Côté JS, const permet juste d’éviter de réassigner une valeur à une variable, mais si cette valeur est un objet ou un tableau, il est toujours possible de le modifier. On a également Object.freeze et Object.seal, mais, franchement, vous avez déjà vu des gens recommander d’utiliser ça à une large échelle ? Non, c’est trop compliqué en pratique, surtout quand on utilise des dépendances externes.

Le typage statique est également très intéressant pour détecter des erreurs. Et Elm en fait un usage très instructif : non seulement, il détecte les erreurs, mais il explique pourquoi et permet d’apprendre certaines subtilités du langage (parfois, on gagne juste un temps fou en détectant une typo).

Ici, l’héritage du JavaScript pèse lourd dans la balance. Il y a trop de pièges, trop de comportements qui demandent une attention permanente (perdre le this, se tromper dans la portée d’une variable).

Les outils

J’en ai parlé au‐dessus : le compilateur d’Elm fait des merveilles. Elixir a également des outils très solides. Plusieurs des langages ci‐dessus ont des fmt, à la manière de gofmt, pour formater le code d’une manière standard. Je ne suis pas un utilisateur d’EDI, mon Neovim me convient bien, mais ça ne veut pas dire que je refuse l’aide d’outils pour m’aider dans mes activités de codage.

Et là encore, JavaScript est à la traîne. Oh, il ne manque pas d’outils ! C’est même l’inverse, on croule sous les gulp, grunt, broccoli, brunch, webpack, browserify, rollup, babel, estlint, jslint, jscs, jshint, etc. Et on s’y perd. D’un projet à l’autre, ce n’est jamais la même chose, jamais les mêmes règles pour le lint. Un coup, ce sont des require CommonJS, l’autre des import/export d’ES6. Et je ne parle même pas du temps fou qu’il faut passer pour réussir à les compiler. Et quand vous avez un outil qui marche, vous pouvez être sûr que dans quelques mois, ses greffons pour faire du Sass ou générer des sprites ne seront plus maintenus. Ce n’est pas pour rien que l’expression JavaScript fatigue est très à la mode.

Un écosystème verdoyant

On parle souvent du nombre impressionnant de paquets publiés sur npmjs.com. Pourtant, quand on y regarde de plus près, c’est loin d’être reluisant. On trouve des tonnes de paquets qui sont des expérimentations qui n’ont jamais dépassé le stade de la version 0.0.x. Ensuite, il y a tous ces greffons d’intégration d’un outil avec l’autre (sails-generate-backend-gulp-webpack pour donner un exemple du ridicule que l’on atteint).

La bibliothèque standard de JavaScript me désole toujours autant. Il y a bien lodash, mais, franchement, j’aimerais bien avoir pick ou debounce dans la bibliothèque standard.

Node.js ne fait pas mieux. Il faut toujours installer un paquet pour faire un mkdir -p, ou un rm -rf (d’ailleurs, vous risquez de vous retrouver avec rimraf et del si vous ne faites pas attention).

Enfin, certaines entreprises ont les dents longues et il n’est pas rare d’en venir aux « drames » pour parfois faire avancer les choses. On se rappelle du fork io.js pour soustraire Node.js de l’emprise de Joyent. Plus récemment, c’est le principal contributeur d’express qui a jeté l’éponge (et même deux fois) pour des raisons similaires. On peut aussi s’amuser de GitHub transformé en bac à sable. Mais, ce qui est sûr, c’est qu’il y a bien des progrès à faire dans ce domaine.

La complexité du langage

Dernier point, avec ES6 et les versions futures, je trouve le langage de plus en plus complexe. Mais surtout cette complexité ne répond pas à mes besoins. C’est sûrement très bien d’avoir des décorateurs des observables et des symboles. Mais je trouve déjà les styles de code JavaScript très disparates et je ne pense pas qu’ajouter de nouvelles fonctionnalités comme celles‐ci apportent vraiment quelque chose de suffisamment intéressant pour compenser la complexité induite.

Au final, je suis de plus en plus déçu. Il y a sûrement certains points qui me sont personnels et d’autres qui sont partagés par la communauté. En tout cas, je vois cela comme une grosse faiblesse du JavaScript, et comme je ne vois pas les choses changer dans les prochains mois ou années, j’ai l’impression que le JavaScript va droit dans le mur. Je vais bien sûr continuer à utiliser du JavaScript au quotidien. Sa place dans les navigateurs en fait quelque chose de trop difficile à éviter. Mais je vais aussi continuer à regarder ce qui se fait ailleurs et probablement finir par détester le JavaScript.

Et vous, quels sont vos langages du moment ? Et que font‐ils mieux que JavaScript ?

Télécharger ce contenu au format EPUB

Commentaires : voir le flux Atom ouvrir dans le navigateur

Sortie de iTowns v1.0 : framework web pour la donnée géographique 3D

2016-02-20T10:46:48+01:00

Le projet iTowns est heureux d'annoncer la sortie de la première version OpenSource de iTowns, un nouveau framework de visualisation de données 3D géospatiales.

iTowns est un framework web écrit en Javascript/WebGL basé sur THREE.js pour la visualisation de données géographiques 3D, permettant également des mesures précises en 3D. Son premier but est la visualisation d'images type "street view" et de nuages de points LIDAR terrestre, mais il supporte bien d'autres types de données.

La version 1.0 est la première version OpenSource de iTowns, publiée sous license CeCILL-B. Il s'agit du cœur de l'application originelle iTowns développée ces dernières années au laboratoire de recherche MATIS de l'IGN. L'IGN a travaillé ces derniers mois sur la transition de cet outil depuis un logiciel interne vers un projet ouvert et libre.

lien nᵒ 1 : Site web iTowns
lien nᵒ 2 : Vidéo de démonstration
lien nᵒ 3 : Démo avec données IGN
lien nᵒ 4 : Télécharger la version 1
lien nᵒ 5 : iTowns sur GitHub

Vidéo de démonstration : https://vimeo.com/154052505
Cette version est une "technology preview" et fournit les fonctionnalités suivantes :

Chargement et projection d'images orientées sur un mesh (cube ou modèle de batiment)
Chargement et affichage d'images panoramiques
Chargement d'images de profondeur panoramiques et rendu en 3D
Chargement de multipolygones 2D avec hauteur ( empreinte de bati) depuis un WFS ou un fichier local, et triangulation pour créer des modèles de batiments. Ce mesh peut alors être utilisé pour projeter des textures.
Navigation dans les données avec mécanisme de "click & go"
Chargement et affichage de nuages de points à partir de fichiers PLY
Chargement et affichage de modèles 3D texturés ( B3D, 3DS)
API simple de programmation

Pour l'occasion un nouveau site web a été mis en place et l'IGN a fourni un jeu de données qui peut être visualisé dans la démo en ligne. Vous pouvez télécharger iTowns Version 1.0 sur github.

OpenSource

iTowns est une organisation Opensource informelle, qui délivre des composants logiciels pour la visualisation de données géospatiales 3D sur le web. Le projet iTowns est ouvert aux contributions de toute personne de la communauté. Vous pouvez forker le project sur GitHub et envoyer des Pull Requests, et nous aurons plaisir à les intégrer. N'hésitez pas à consulter le wiki iTowns pour des informations générales sur comment contribuer.

Collaboration

Les 3 et 4 février 2016 dernier a eu lieu un codesprint iTowns, hébergé par IGNFab à Paris. Il a rassemblé environ 15 développeurs et a permis de finaliser la version 1.0, de travailler sur l'organisation du projet, la documentation et les démos, ainsi que la conception de la prochaine génération du framework. Un PSC ("Project Steering Comittee") a été formé avec Alexandre Devaux (IGN) comme président.

Cette collaboration a été efficace, et un bon démarrage pour tous les développeurs désireux de travailler ensemble sur la visualisation de données 3D. N'hésitez pas à rentrer en contact avec les développeurs si vous êtes intéressés pour collaborer sur le projet.

Remerciements

iTowns est issue de travaux originaux du laboratoire MATIS de l'IGN. Il a été financé par divers programmes de recherche impliquant l'ANR, Cap Digital, UPMC, Mines ParisTec, CNRS, LCPC.

Télécharger ce contenu au format EPUB

Commentaires : voir le flux Atom ouvrir dans le navigateur

Deviens un Ninja avec Angular 2 : un ebook sans DRM à prix libre et en soutien à l'EFF

2016-01-24T15:32:23+01:00

Deviens un Ninja avec Angular 2 : un ebook sans DRM à prix libre et en soutien à l'Electronic Frontier Fondation (EFF).

Ninja Squad propose un livre permettant d'apprendre à maîtriser le framework web Angular 2. Sur le modèle des Humble Bundle, cet ebook est proposé à prix libre, et en soutien optionnel à une association : l'EFF, qui défend un Internet libre dans le monde.

Si Angular 2 est encore en beta, cet ebook vous donnera toutes les clés pour connaître ses prérequis (ECMAScript 6, TypeScript, Web Components), découvrir sa philosophie (ce qui a évolué depuis la version précédente AngularJS), et construire une véritable application.

Les mises à jour de l'ebook seront fournies gratuitement.

NdM: la licence interdit explicitement la vente, l'utilisation commerciale et la redistribution.

lien nᵒ 1 : Deviens un Ninja avec Angular 2

Télécharger ce contenu au format EPUB

Commentaires : voir le flux Atom ouvrir dans le navigateur

ECMAScript 2015 est approuvé

2015-06-29T09:09:14+02:00

La spécification ECMAScript 6^e édition a été approuvée le 17 juin 2015 sous le nom ECMAScript 2015.

Parmi les nouveautés, il faut noter l'arrivée des classes, des modules, des fonctions fléchées, des boucles for-of, des générateurs, des proxies et de plusieurs nouvelles méthodes.

lien nᵒ 1 : Standard ECMA-262
lien nᵒ 2 : ECMAScript 6 — New Features
lien nᵒ 3 : ECMAScript sur Wikipédia
lien nᵒ 4 : Support d'ECMAScript 6 par Mozilla
lien nᵒ 5 : Le tableau de compatibilité (de Kangax)

Sommaire

Cette nouvelle édition permet de rattraper le retard face au JavaScript déjà implémenté dans les navigateurs. De ce fait, l'arrivée des mots clés const et let n'est pas si nouvelle. Par contre, la spécification ne correspond pas toujours aux implémentations, et certaines fonctionnalités devront être revues.

Constante et variable

La déclaration const permet de créer une constante nommée accessible uniquement en lecture.

const PI = 3.141593;
PI > 3.0;

L'instruction let permet de déclarer une variable dont la portée est celle du bloc courant, éventuellement en initialisant sa valeur.

function letTest() {
    let x = 31;
    if (true) {
        let x = 71;  // c'est une variable différente
        console.log(x);  // 71
    }
    console.log(x);  // 31
}

Classe

Durant le développement de la spécification, plusieurs propositions ont été élaborées pour la gestion des classes. La solution retenue est plutôt minimale. La classe contient un constructeur et des méthodes. L'héritage simple est géré. À cela s'ajoutent des méthodes get et set, et des membres statiques.

class Fruit {
    constructor (couleur) {
        this.couleur = couleur;
    }
    static choisirCouleur() {
        return ['rouge', 'jaune', 'bleu', 'vert', 'orange', 'mauve'];
    }
    toString () { 
        return "fruit";
    }
}

class Pomme extends Fruit {
    constructor (couleur, sorte) {
        super(couleur);
        this.sorte = sorte;
    }
    get saveur() {
        return this.sorte + " " + this.couleur;
    }
    toString () { 
        return super.toString() + " : pomme";
    }
}

let maPomme = new Pomme('jaune', 'Délicieuse');

Fonction fléchée

Une expression de fonction fléchée (arrow function en anglais) permet d'avoir une syntaxe plus courte que les expressions de fonction et permet de lier la valeur this de façon lexicale. Les fonctions fléchées sont obligatoirement anonymes.

Les fonction fléchées peuvent être utilisées suivant deux syntaxes différentes :

param => expression

qui est équivalente à

function(param) {return param.expression}

ou sous la forme

([param] [, param]) => {instructions}

qui est équivalente à

function([param] [, param]) {
   instructions
}

Bien que la fonction fléchée soit nécessairement anonyme elle-même, elle peut néanmoins être mappée sur une variable.

var simple = a => a > 15 ? 15 : a;
var complexe = (a, b) => {
    if (a > b) {
        return a;
    } else {
        return b;
    }
}

Une fonction fléchée ne définit pas son propre this. Elle utilise celui disponible dans son contexte.

var robert = {
    _nom: "Robert",
    _amis: [],
    imprimerAmis() {
        this._amis.forEach(f =>
        console.log(this._nom + " connaît " + f));
    }
}

Affecter par décomposition

L'affectation par décomposition (destructuring en anglais) est une expression qui permet d'extraire des données d'un tableau ou d'un objet grâce à une syntaxe dont la forme ressemble à la structure du tableau ou de l'objet. La syntaxe est semblable à ce qu'offre Perl ou Python.

Décomposition d'un tableau

var list = [ 1, 2, 3 ];
var [ a, , b ] = list;
[ b, a ] = [ a, b ];

Décomposition d'un objet

var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true 

var {p: toto, q: truc} = o;

console.log(toto); // 42
console.log(truc); // true

Opérateur de décomposition

L'opérateur de décomposition permet de développer une expression lorsque plusieurs arguments ou plusieurs éléments sont nécessaires.

var params = [ "salut", true, 7 ];
var other = [ 1, 2, ...params ]; // [ 1, 2, "salut", true, 7 ]
f(1, 2, ...params) === 9;

var str = "foo";
var chars = [ ...str ]; // [ "f", "o", "o" ]

Paramètres

Un paramètre du reste permet de représenter un nombre indéfini d'arguments sous forme d'un tableau.

function f (x, y, ...a) {
    return (x + y) * a.length;
}
f(1, 2, "salut", true, 7) === 9;

Un paramètre par défaut permet d'initialiser des paramètres lors de l'appel de la fonction si la valeur passée est nulle (au sens où il n'y a aucune valeur de passée) ou undefined.

function f (x, y = 7, z = 42) {
    return x + y + z;
}
f(1) === 50;

Décomposition

Les valeurs des tableaux et les propriétés des objets passés en paramètre à une fonction seront décomposées.

function f ([ name, val ]) {
    console.log(name, val);
}
function g ({ name: n, val: v }) { 
    console.log(n, v);
}
function h ({ name, val }) {
    console.log(name, val);
}
f([ "bar", 42 ]);
g({ name: "foo", val: 7 });
h({ name: "bar", val: 42 });

Nouvelles notations

Raccourcis pour les noms de propriétés

Une notation raccourcie permet de créer une propriété qui porte le nom de sa variable d'origine.

var a = "toto", b = 42, c = {};
var o = { a, b, c };

Raccourcis pour les noms de méthodes

Une notation raccourcie permet de ne plus utiliser le mot-clé function.

var o = {
    property([parameters]) {},
    get property() {},
    set property(value) {},
    * generator() {}
};

Noms calculés pour les propriétés

Une expression entre crochets [] peut être calculée en tant que nom d'une propriété.

var prop = "toto";
var o = {
    [prop]: "hey",
    ["tr" + "uc"]: "ho"
};

Itérateur

L'instruction for-of permet de créer une boucle qui parcourt un objet itérable.

let fibonacci = {
    [Symbol.iterator]() {
        let pre = 0, cur = 1;
        return {
            next () {
                [ pre, cur ] = [ cur, pre + cur ];
                return { done: false, value: cur };
            }
        };
    }
}

for (let n of fibonacci) {
    if (n > 1000)
        break;
    console.log(n);
}

Générateur

Un générateur est une fonction qu'il est possible de quitter puis de reprendre. Le contexte d'un générateur (les liaisons avec ses variables) est sauvegardé entre les reprises successives.

function* range (start, end, step) {
    while (start < end) {
        yield start;
        start += step;
    }
}

for (let i of range(0, 10, 2)) {
    console.log(i); // 0, 2, 4, 6, 8
}

Promise

L'objet Promise (pour « promesse ») est utilisé pour réaliser des opérations de façon asynchrone. Une promesse est dans un de ces états :

en attente : état initial, la promesse n'est ni remplie, ni rompue ;
tenue : l'opération a réussi ;
rompue : l'opération a échoué ;
acquittée : la promesse est tenue ou rompue mais elle n'est plus en attente.

Le constructeur de l'objet Promise prend en argument une fonction avec deux paramètres : resolve et reject. Si la promesse est tenue, on appelle la fonction resolve() avec le résultat. Si elle est rompue, on appelle la fonction reject() avec la raison.

var p1 = new Promise((resolve, reject) => {
    setTimeout(() => resolve(1), 1000);
});

La méthode then() prend deux arguments qui sont deux fonctions callback à utiliser en cas de complétion ou d'échec de la Promise. Elle renvoie une Promise, on peut donc facilement enchaîner plusieurs appels à cette méthode.

p1.then((valeur) => {
    console.log(valeur); // 1
    return valeur + 1;
}).then((valeur) => {
    console.log(valeur); // 2
});

Module

Les modules permettent de créer de nouveaux espaces de noms, et ainsi limiter la pollution de l'espace de nom global.

Import

// someApp.js
import * as math from "lib/math";
console.log("2π = " + math.sum(math.pi, math.pi));

Export

// lib/math.js
export function sum (x, y) { return x + y };
export var pi = 3.141593;

Réflexion

Proxy

L'objet Proxy est utilisé afin de définir un comportement sur mesure pour certaines opérations fondamentales (par exemple, l'accès aux propriétés, les affectations, les énumérations, les appels de fonctions, etc.).

var handler = {
    get: function(cible, nom){
        return nom in cible ? cible[nom] : 37;
    }
};

var p = new Proxy({}, handler);
p.a = 1;
p.b = undefined;

p.a === 1;
p.b === undefined;
'c' in p === false;
p.c === 37;

Reflect

Reflect est un objet natif qui fournit des méthodes pour les opérations qui peuvent être interceptées (via les proxies). Reflect n'est pas une fonction (y compris pour construire un objet).

let obj = { a: 1 };
Object.defineProperty(obj, "b", { value: 2 });
obj[Symbol("c")] = 3;
Reflect.ownKeys(obj); // [ "a", "b", Symbol(c) ]

Nouvelles méthodes

Voici quelques exemples de nouvelles méthodes qui ont été ajoutées aux objets standards.

Object

La méthode Object.assign() est utilisée afin de copier les valeurs de toutes les propriétés directes (non héritées) d'un objet qui sont énumérables sur un autre objet cible.

var dst = { quux: 0 };
var src1 = { foo: 1, bar: 2 };
var src2 = { foo: 3, baz: 4 };
Object.assign(dst, src1, src2);

La méthode Object.setPrototypeOf() définit le prototype d'un objet donné avec un autre objet ou null.

function Parent(){}
function Child(){}
Object.setPrototypeOf(Child.prototype, Parent.prototype);
new Child instanceof Child;  // true
new Child instanceof Parent; // true

Array

La méthode find() renvoie une valeur contenue dans le tableau si un élément du tableau respecte une condition donnée par la fonction de test passée en argument.

[ 1, 3, 4, 2 ].find(x => x > 3); // 4

String

Les méthodes startsWith(), endsWith() et includes() renvoient un booléen indiquant, respectivement, si la chaîne de caractères commence par, se termine par ou contient la deuxième chaîne de caractères fournie en argument.

"hello".startsWith("ello", 1); // true
"hello".endsWith("hell", 4); // true
"hello".includes("ell"); // true
"hello".includes("ell", 1); // true
"hello".includes("ell", 2); // false

La méthode repeat() construit et renvoie une nouvelle chaîne de caractères qui contient le nombre de copies demandées de la chaîne de caractères sur laquelle la méthode a été appelée, concaténées les unes aux autres.

" ".repeat(4 * depth);
"foo".repeat(3);

Number

La méthode Number.isSafeInteger() permet de déterminer si la valeur, passée en argument, est un entier représentable correctement en ECMAScript (c'est-à-dire un nombre compris entre -(2⁵³ -1) et 2⁵³ -1).

Number.isSafeInteger(42) === true;
Number.isSafeInteger(9007199254740992) === false;

Autres fonctionnalités

Les nombres octaux et binaires sous une forme littérale
Les tableaux typés
Les gabarits de chaînes de caractères
Les objets Map et Set et leurs équivalents avec références faibles
Amélioration de la gestion de l'Unicode pour les chaînes de caractères et les expressions rationnelles

Il ne reste plus qu'à attendre que toutes ces nouveautés arrivent jusqu'à votre navigateur préféré.

Conversion

La conversion des nouveautés du ECMAScript 2015 vers le langage compris par les précédentes implémentations peut se faire à l'aide d'outils. Plusieurs nouveautés peuvent être implémentées par ECMAScript lui-même.

Compilateur

Il est possible de faire appel à un compilateur pour convertir les nouvelles fonctionnalités du langage vers du code compatible avec les anciennes implémentations. Il est plus facile de compiler le code depuis le serveur et envoyer seulement le résultat au client.

Babel est un de ces compilateurs. Tous les exemples proposés ici compilent avec Babel. Une application Web permet de tester ses connaissances depuis un navigateur sans installer quoi que ce soit. Par contre, elle ne traduit pas les nouvelles méthodes. Il faut faire appel à d'autres outils pour avoir une application fonctionnelle.

API

Des bibliothèques sont disponibles pour l'implémentation des nouvelles API.

core-js implémente les nouveaux objets et les nouvelles méthodes du langage. Elle s'utilise en complément d'un compilateur comme Babel.

Télécharger ce contenu au format EPUB

Commentaires : voir le flux Atom ouvrir dans le navigateur

RapydScript, le JavaScript qui se déguise en Python

2015-04-29T08:11:56+02:00

RapydScript est un langage qui se compile en JavaScript, avec une syntaxe et des fonctionnalités qui se veulent proches de Python. Pour ceux qui connaissent coffeeScript, RapydScript est pareil mais inspiré par la lisibilité de Python. Il ne s'agit pas d'une nouvelle tentative de faire tourner Python dans le navigateur, comme par exemple Pyjamas. RapydScript reste du JavaScript, il n'introduit aucune limitation ni surcoût. Il paraît juste plus propre et donne l'impression d'écrire du Python.

Ses quelques fonctionnalités :

comme CoffeeScript, RapydScript répare les incohérences et inconsistances de JavaScript ;
un système de classes similaire à Python ;
support des listes en compréhensions ;
des exceptions comme en Python ;
des modules, plus flexibles que les modules Python ;
des arguments optionnels pour les fonctions, comme en Python ;
des décorateurs (sans arguments) ;
un système d'héritage plus puissant que celui de Python et plus clair que celui de JavaScript ;
le support d'objets (dictionnaires) avec fonctions anonymes, comme en JavaScript ;
la possibilité d’appeler n'importe quelle fonction, méthode, code JavaScript ou appel au DOM de n'importe quel framework, sans syntaxe spéciale ;
le choix entre les méthodes et fonctions à la Python ou leurs équivalents JavaScript ;
RapydScript s'auto-compile, c'est à dire que le compilateur est lui-même écrit en RapydScript et compile en JavaScript.

lien nᵒ 1 : Site officiel
lien nᵒ 2 : Le manuel entier
lien nᵒ 3 : Une discussion Reddit
lien nᵒ 4 : Github
lien nᵒ 5 : Le groupe de discussion

Sommaire

Installation
Bibliothèque standard
Exemples
Autres outils
Conclusion

Voici un court exemple qui utilise JQuery :

class Popup:
    def __init__(self, containterId):
        # pop-up class will give us absolute position, high z-index and center the container
        self.$popup = $('#' + containerId).addClass('pop-up').mouseout(def():
            self.hide() # unlike 'this', 'self' will reference the object itself
        )
        self._$darkbg = $('#dark-bg') # overlays background with a dim layer to draw focus to the pop-up
    def show(self):
        self._$darkbg.show()
        self.$popup.show()
    def hide(self):
        self._$darkbg.hide()
        self.$popup.hide()

msg = Popup('my-popup')
msg.show()

Notons toutefois quelques limitations :

le source mapping n'est pas implémenté, mais l'auteur compte le faire ;
pas shell (repl) non plus, mais l'auteur le souhaite également ;
RapydScript a quelques bugs connus.

Installation

Comme d'habitude avec les applications Node.js, on utilise npm :
npm install rapydscript -g

Bibliothèque standard

Il est assez facile de faire tourner un code Python existant dans le navigateur car RapydScript a ré-implenté quelques bibliothèques standard de Python. Par exemple si vous utilisez range, print, ou list.append, il vous suffit d'importer la stdlib.js de rapydscript. Soit par un import explicite dans votre HTML, soit par la ligne import stlib dans votre code .pyj.

Il existe aussi le module math, re, unittest, random et yql.

Mais si vous écrivez du nouveau code, il est conseillé de se baser sur les bibliothèques JavaScript existantes, plus fournies.

Exemples

Appel à JavaScript

Si jamais vous devez appeler directement du JavaScript à cause d'une limitation de RapydScript, vous pouvez le faire avec la fonction JS :
JS('module').exports # meilleur équivalent à JS('module.exports')

Définir des fonctions

Une fonction tout à fait classique en RapydScript :

#regular
def fibonacci(n):
    if n == 0: return 0
    elif n == 1: return 1
    else: return fibinacci(n-1) + fibinacci(n-2)
a = fibinacci(8)

L'équivalent en JavaScript :

function fibonacci(n) {
    if (n === 0) {
        return 0;
    } else if (n === 1) {
        return 1;
    } else {
        return fibinacci(n - 1) + fibinacci(n - 2);
    }
}
a = fibonacci(8);

Utiliser des fonctions anonymes :

# anonymous
math = {
    add:    def(a, b): return a+b;,
    sub:    def(a, b): return a-b;,
    mul:    def(a, b): return a*b;,
    div:    def(a, b): return a/b;,
    roots:  def(a, b, c):
        r = Math.sqrt(b*b - 4*a*c)
        d = 2*a
        return (-b + r)/d, (-b - r)/d
}

Des arguments optionnels comme en Python :

# with optional arguments
def get(item, quantity=1):
return [item for i in range(quantity)]
a = get('hammer')
b = get('nail', 3)

Ce qui produit le JavaScript suivant :

function get(item, quantity) {
    if (typeof quantity === "undefined") quantity = 1;
    return (function() {
        var _$rapyd$_Iter = range(quantity), _$rapyd$_Result = [], i;
        for (var _$rapyd$_Index = 0; _$rapyd$_Index < _$rapyd$_Iter.length; _$rapyd$_Index++) {
            i = _$rapyd$_Iter[_$rapyd$_Index];
            _$rapyd$_Result.push(item);
        }
        return _$rapyd$_Result;
    })();
}
a = get("hammer");
b = get("nail", 3);

// les deux fonctions utilitaires créées:
function range(start, stop, step) {
    if (arguments.length <= 1) {
        stop = start || 0;
        start = 0;
    }
    step = arguments[2] || 1;
    var length = Math.max (Math.ceil ((stop - start) / step) , 0);
    var idx = 0;
    var range = new Array(length);
    while (idx < length) {
        range[idx++] = start;
        start += step;
    }
    return range;
}
function _$rapyd$_print() {
    var args, output;
    args = [].slice.call(arguments, 0);
    output = JSON.stringify(args);
    if ("console" in window) console.log(output.substr(1, output.length-2));
}

L'usage de décorateurs (sans arguments) :

# and finally, decorated
def makebold(fn):
    return def():
        return "<b>" + fn() + "</b>"

def makeitalic(fn):
    return def():
        return "<i>" + fn() + "</i>"

@makebold
@makeitalic
def hello():
    return "hello world"

Example: écrire une chaîne de callbacks

On fait souvent appel à une suite de callbacks en JavaScript. C'est tout à fait facile en RapydScript :

params = {
    width:  50,
    height: 30,
    onclick:    def(event):
        alert("you clicked me"),
    onmouseover:    def(event):
        $(this).css('background', 'red')
    ,
    onmouseout: def(event):
        # reset the background
        $(this).css('background', '')
}

Pour plus de détails, voyez "chaining blocks" dans la documentation.

Autres outils

RapydScript est assez jeune et n'a pas autant d'outils que, par exemple, CoffeeScript, mais on commence à voir des extensions pour Django ou d'autres outils Node, comme Gulp ou Grunt, ce qui permet de l'intégrer facilement à son projet AngularJS ou autre.

Conclusion

Nous n'avons pas expliqué tout le fonctionnement de RapydScript, pour cela il y a la bonne documentation. Nous espérons vous avoir fait miroiter de nouveau ce vieux rêve: écrire une application web dans un seul langage, en Python.

Télécharger ce contenu au format EPUB

Commentaires : voir le flux Atom ouvrir dans le navigateur

Worldwide Meteor 1.0 Day le 6 novembre 2014 chez Numa (Paris)

2014-11-05T22:44:18+01:00

Rejoignez nous à Paris jeudi 6 novembre vers 18h30 chez Numa pour un événement unique : le Worldwide Meteor 1.0 Day ! Meteor est une plate‐forme open source facilitant le développement d’applications modernes Internet et mobiles en JavaScript.

Toute la communauté Meteor organise des meetups simultanément à travers le monde le 6 novembre ; ouvert à tous ceux qui sont intéressés à en apprendre plus sur la plate-forme Meteor.

Vous aurez la chance de rencontrer des développeurs d'applications réalisées avec Meteor, jouer avec les nouveaux exemples et tutoriels ainsi que de participer à une session de questions/réponses via Hangouts avec un développeur du Meteor Development Group et d'experts de la communauté.

lien nᵒ 1 : Worldwide Meteor 1.0 Day - Paris
lien nᵒ 2 : Dépêche LinuxFR sur la sortie de Meteor 1.0
lien nᵒ 3 : Morea
lien nᵒ 4 : Amazon AWS
lien nᵒ 5 : Numa
lien nᵒ 6 : Meteor
lien nᵒ 7 : Worldwide Meteor 1.0 Day

Avec le soutien de Morea et d’Amazon AWS nous aurons des bonus à distribuer aux plus méritants d'entre-vous. N'oubliez pas d'apporter vos ordinateurs portables pour tester et développer ensemble en Meteor pendant la soirée.

Si vous avez développé une application Meteor, n'hésitez pas à nous contacter afin de la présenter pendant la session “Show & Tell”. Cela peut être tout type de projet, petit ou grand, une application complexe ou juste quelque chose que vous avez fait rapidement un week-end.

Lieu :

Numa, 39 rue du Caire, Paris

Planning :

18h30 - Ouverture des portes.
19h00 - Introduction à Meteor. Présentation des nouveaux tutoriels et exemples.
19h30 - Install party. L’occasion pour tout le monde d’installer Meteor et déployer un des exemples.
19h59 - Courte pause. Prenez une photo de groupe et tweetez la. :)
20h00 - Q & A. Hangout en direct avec la core team de Meteor ou des experts de la communauté Meteor (préparez vos questions à l’avance).
20h30 - Lunch
20h45 - Show & Tell. Vous avez développé une application avec Meteor ? Nous voulons la voir ! Courtes démos informelles ou courtes présentations des développeurs Meteor Français.
vers 21h00 - Ouverture du co-programmation / networking. Objectif: Construire quelque chose de cool avec ce que vous venez d'apprendre.

Télécharger ce contenu au format EPUB

Commentaires : voir le flux Atom ouvrir dans le navigateur

Meteor 1.0

2014-10-31T09:01:36+01:00

Meteor est une plate‐forme open source facilitant le développement d’applications modernes Internet et mobiles en JavaScript. Il offre des fonctions de mise à jour automatique des interfaces permettant le travail collaboratif temps réel et des interfaces intuitives assurant la même expérience utilisateur qu’une application de bureau. Ces applications peuvent s’exécuter dans un navigateur Web, ainsi que sur tous les appareils mobiles (applications natives avec Cordova/PhoneGap).

Meteor 1.0 est sorti hier soir, annoncé par Matt DeBergalis du MDG (Meteor Developpement Group). Cette version assure la stabilité de l’API, qui jusqu’alors évoluait fortement entre chaque version.

Voyez sa description en seconde partie de l’article…

lien nᵒ 1 : La dépêche sur le blog de Meteor
lien nᵒ 2 : Meteor France
lien nᵒ 3 : Le site officiel de Meteor
lien nᵒ 4 : La documentation officielle
lien nᵒ 5 : Le tutoriel officiel
lien nᵒ 6 : L’architecture Meteor
lien nᵒ 7 : Les greffons de la communauté
lien nᵒ 8 : Meetup Meteor-Paris
lien nᵒ 9 : Une analyse des performances de Meteor côté serveur (NodeJS)

Meteor est composé d’une poignée de greffons noyau (core packages) développés par le MDG et de plus de 2 400 greffons développés par la communauté, dont des membres de Meteor France. Afin de comprendre comment est constituée l’architecture logicielle de Meteor, nous vous invitons à consulter l’explication sur le site de Meteor.

Nouveau avec Meteor ? Les trois pistes suivantes devraient vous aider :

tout d’abord, un nouveau tutoriel décrivant le développement pas à pas d’un outil collaboratif et introduisant chaque élément composant Meteor ;
ensuite, de nouveaux exemples d’applications ont aussi fait leur apparition, afin que vous puissiez consulter leur architecture. La première est une application de « À faire » (TODO) avec des tâches privées et partagées. La deuxième est une application de marché local avec partage de photos, utilisées par des commerces de proximité afin de créer une véritable communauté autour de leur activité. Agrémentée d’une authentification Twitter et de la prise en charge des appareils photo sur mobile, cette application totalise moins de 1 000 lignes de pur JavaScript ;
enfin, pour célébrer la sortie de la version 1.0, les responsables de Discover Meteor ont lancé une édition gratuite de leur excellent livre en ligne. Vous avez huit jours pour profiter de cette offre.

Meteor reçoit en France un soutien important de Morea et d’Amazon AWS qui sont les sponsors principaux des événements organisés par Meteor France via leur groupe Meetup Meteor Paris.

Télécharger ce contenu au format EPUB

Commentaires : voir le flux Atom ouvrir dans le navigateur

Un ebook sur AngularJS à prix libre et pour une bonne cause

2014-09-04T14:13:52+02:00

Devenez un Ninja avec AngularJS : un ebook à prix libre et en soutien à une association caritative.

Ninja Squad propose un livre permettant de découvrir ou d'approfondir ses connaissances du framework web AngularJS. Sur le modèle des Humble Bundle, cet ebook est proposé à prix libre, et en soutien optionnel à une association caritative : Docteur Souris, qui fournit des ordinateurs et des accès internet sécurisés pour les enfants hospitalisés.

Si AngularJS est un framework web extrêmement puissant, il est aussi très exigeant. Il permet d'atteindre des vitesses de développement inégalées, pour peu que l'on prenne le temps de le maîtriser.
Ce livre devrait vous permettre de comprendre en détails tous les principes et pratiques d'AngularJS, des bases aux dernières nouveautés introduites par la version 1.3.

lien nᵒ 1 : Devenez un Ninja avec AngularJS

Télécharger ce contenu au format EPUB

Commentaires : voir le flux Atom ouvrir dans le navigateur

Intercooler.js

2014-07-05T11:15:41+02:00

Intercooler.js est une énième, mais nouvelle bibliothèque JavaScript pour les sites web orientés client lourd.

Elle propose un mécanisme déclaratif assez intéressant : le comportement de l'interface est codé dans les attributs de balises HTML standard.
Elle simplifie la vie du développeur en évitant de devoir intégrer des évènements sur des sélecteurs JQuery (ou ses concurrents) : celui-ci a le choix de provoquer un appel AJAX ou un appel interne sur une fonction javascript, de manière déclarative dans le code HTML.

Intercooler est basé sur le concept de Partial View Controller. Dans cette approche, le serveur renvoi des fragments de HTML à intégrer dans l'interface.

lien nᵒ 1 : Le site du framework
lien nᵒ 2 : Introduction rapide au framework
lien nᵒ 3 : API

Quelques exemples valent mieux qu'un long discours :

Cet exemple montre comment provoquer un appel AJAX lors d'un clic dans une div.

<div ic-src="/example/click">
        You have not yet clicked the button
</div>
<button class="btn btn-primary" ic-post-to="/example/click">
        Click Me!
</button>

Si l'utilisateur clique sur le bouton, le contenu de la div ayant l'attribut ic-src="/example/click" sera remplacé par le retour de l'appel AJAX en POST à l'URL /example/click.

Mais grâce à la fonction addURLHandler(handler), on peut faire en sorte que l'URL /example soit captée en interne :

(function () {
            var clicks = 0;
            Intercooler.addURLHandler({
              'url': '/example/click',
              'get': function () {
                return 'You have clicked the button ' + clicks + ' times'
              },
              'post': function(){
                clicks++;
              }
            });
          })();

Bref, cette bibliothèque offre des possibilités affriolantes, même si elle est encore jeune.
Elle permettrait même à un webdesigner peu versé dans le développement de rajouter un peu d'interactivité dans ses pages.

Télécharger ce contenu au format EPUB

Commentaires : voir le flux Atom ouvrir dans le navigateur

Proxy HTTP(s) gatejs

2014-06-20T12:46:12+02:00

gatejs est un nouveau mandataire/proxy HTTP(s) (forward & reverse) qui a pour vocation de remplacer squid, nginx, varnish ou encore apache, dans leurs fonctions de proxy (forward & reverse). Il est publié sous licence GPLv3.

Il est développé en JavaScript (2/3) et en C++ (1/3). Il est prévu que la proportion de C++ se réduise au fil du temps. Ce proxy utilise le moteur Javascript V8 et nodejs.

Il a été initialement conçu pour offrir plus de flexibilité sur l'interception et le traitement d'informations en HTTP.

Pour ceux qui ne sont pas pro-JavaScript, il est important de préciser que les performances de gatejs sont proches, voire dans certains cas, supérieures à nginx.

De plus, l'utilisation de Javascript permet d'augmenter la lisibilité des codes, de les factoriser et de renforcer la sécurité, surtout pour des opérations complexes.

Les configurations sont écrites au moyen de la notation d'objets Javascript (JSON).

lien nᵒ 1 : gatejs sur Github
lien nᵒ 2 : Wiki gatejs sur Github

Ci-dessous une liste de fonctionnalités déjà implémentées :

gestion de HTTP 0.9, 1.0, 1.1, Websocket, quic, spdy ;
gestion de SSL forward & reverse + SNI ;
reverse proxy, stream primary & secondary, pondération, détection de panne, load-sharing iphash / round-robin ;
le forward proxy peut transmettre les requêtes en utilisant le champ Host HTTP, mais peut aussi utiliser l'adresse de destination directement ;
implémentation généralisée de TPROXY qui permet de spoofer les adresses IP (source ou destination) pour une utilisation totalement transparente ;
système de cache ACN (Associative Cache Network) qui permet de mettre en cache les données HTTP forward et/ou reverse et de les partager entre différents serveurs via du multicast ;
gestionnaire de greffons très simple mais scalable à souhait ;
traitement des requêtes HTTP par un système de pipeline et d'opcodes ;
gestion de l'exécution parallèle de plusieurs workers autonomes ;
gestion de l'utilisation simultanée des options forward et reverse proxy.

Les sources de gatejs étaient fermées pendant plusieurs années, mais différentes raisons ont amené ses créateurs à rendre ouvert ce travail.

Aujourd'hui, gatejs est utilisable en production, les codes initiaux ont déjà vécu et vivent encore en production depuis plusieurs années.

Nous aimerions maintenant pousser gatejs plus loin avec une communauté de développeurs et utilisateurs fidèles.

Télécharger ce contenu au format EPUB

Commentaires : voir le flux Atom ouvrir dans le navigateur

Retour d'expérience sur sql.js

2014-06-15T11:33:49+02:00

J'aimerais parler ici de mon expérience lors du développement de sql.js, un port de SQLite en JavaScript. Pour ceux qui ne s’intéressent pas aux technologies du web, la deuxième partie de cette dépêche pourrait quand même vous intéresser, on va parler de SQLite.

Note : cette dépêche a initialement été postée en tant que journal.

lien nᵒ 1 : Page GitHub du Projet
lien nᵒ 2 : Démonstation, qui permet d’exécuter du SQL, mais aussi de lire, modifier, puis sauvegarder des bases
lien nᵒ 3 : Page officielle de emscripten
lien nᵒ 4 : SQLite, le SGBD le plus cool qui soit

Sommaire

Web moderne
SQLite
Quand on mélange les deux…
Conclusion

Web moderne

Ceux d'entre vous qui s'intéressent aux technologies modernes du web ont certainement entendu parler d’emscripten et d’asm.js.

Emscripten est un compilateur de bytecode LLVM en JavaScript. Il permet de compiler du code C ou C++ en JavaScript, très simplement. Le code JavaScript généré n’est bien sûr pas aussi rapide que le code natif équivalent, mais les performances sont assez bonnes. Sur Firefox, avec asm.js, le code tourne à peu près deux fois plus lentement que la version native. Le principal inconvénient que je trouve à emscripten est qu'il faut, pour l'utiliser sous Linux, télécharger et compiler sa propre version de LLVM et de clang, ce qui est long et pas pratique à mettre à jour.

asm.js, quant à lui, est un sous-ensemble de JavaScript conçu pour être facile à optimiser, et ainsi pouvoir s'exécuter rapidement. La syntaxe est dégueulasse, mais c'est pas grave, emscripten génère du code asm.js pour nous.

SQLite

Vous connaissez certainement déjà SQLite3, le moteur de bases de données le plus utilisé au monde. Si vous vous y êtes déjà un peu intéressé, vous connaissez sûrement ses caractéristiques, qui le rendent unique :

Une base de données est stockée dans un seul fichier.
Le binaire SQLite est minuscule (moins d'un Mo), et la bibliothèque SQLite peut être liée statiquement dans votre programme. Tout le code source tient dans un fichier sqlite3.c de 5 Mo.
Le code a été placé dans le domaine public.
Les données sont typées dynamiquement. Une même colonne peut contenir un entier, un nombre à virgule flottante, et une chaîne de caractères, par exemple.

Par contre, vous ne connaissez peut-être pas SQLite4, une évolution de SQLite3 (par les mêmes développeurs), qui n’a pas encore de version stable (et que j’ai aussi porté en JavaScript). Cette version apporte de bien meilleures performances, et surtout, elle utilise un système de base de données de type clef-valeur, que l'on peut changer à la volée.

Et ça, c’est génial ! Cela signifie que l'on pourra bientôt profiter de tous les avantages de SQLite même pour de grosses bases de données. Il suffira d’utiliser un système de base de données clef-valeur qui supporte les grands ensembles de données, comme LevelDB.

Quand on mélange les deux…

sql.js, avant

sql.js, un port de SQLite en JavaScript, était au départ un projet de kripken, le créateur et principal mainteneur d’emscripten, qui date de début 2012. Le port fonctionnait, mais question fonctionnalités, on restait un peu sur sa faim : une seule méthode db.exec, qui exécutait du SQL et retournait les résultats dans un format pas pratique. Les données étaient toujours converties en chaînes de caractères avant d’être retournées. Le projet n’avait aucun test unitaire, le dernier commit date d’il y a plus d’un an, et l’auteur ne répond plus sur le bugtracker… (NdM.: voir le commentaire indiquant que l'auteur a depuis incorporé la contribution)

Pourtant, le projet semble avoir des utilisateurs. 104 forks et 883 stars sur github, et plusieurs téléchargements par jour sur npm à l’heure où j’écris ces lignes.

sql.js, maintenant

Je suis étudiant, et lors d’un TD, j’ai eu besoin de pouvoir tester des commandes en SQL, sur un ordi avec rien du tout d’installé. Je ne connaissais pas encore SQLfiddle, mais j’avais déjà entendu parler de sql.js, donc j’ai utilisé sa démonstration en ligne.

Le soir, en rentrant chez moi, très agaçé des petits défauts de la démonstration que j'avais utilisée, j'ai forké le projet, et commencé à travailler sur une meilleure interface graphique. Quand j'ai été content de moi, j’ai fait une pull request. Comme l’auteur tardait à répondre, j’ai commencé à bidouiller le reste du code. Et de fil en aiguille, j'ai fini par réécrire tout le code, à changer l’API pour avoir quelque chose de facile à utiliser, à ajouter des tests, de la documentation… Et je suis assez fier de l’état du projet aujourd’hui.

Il est utilisable sans modification à la fois depuis node.js, dans le navigateur, et en tant que web worker. Il est disponible sur npm, et s’utilise avec un simple :

var sql = require('sql.js');
var db = new sql.Database();

Il retourne les données dans leur format original, y-compris les BLOBs, retournés sous forme de tableau d’octets :

var res = db.exec("SELECT * FROM table1; SELECT * FROM table2");
// Ce qui peut retourner:
[
    {columns:['a','b'], values:[[0,'hello'],[1,'world']]}, //Le contenu de table1
    {columns:['c','d'], values:[[null,[1,2,3]],[42,'blabla'],[666,666]]} //Celui de table2
    // Et oui, la colonne d contient des données de types différents. C’est possible grâce à SQLite. C’est impossible avec presque tous les autres SGBD
]

Et il permet d'utiliser des requêtes préparées (prepared statements), auxquelles on associe les paramètres que l'on veut, sans risquer de vilaines injections SQL :

db.run("INSERT INTO table1 VALUES (?,?)", [3,[121,111,117,99,114,97,99,107,101,100,105,116]]);

Mais aussi :

var stmt = db.prepare("SELECT * FROM table1 WHERE a=$aval AND b=$bval");
var result = stmt.getAsObject({$aval : 1, $bval : 'world'});
// result contient maintenant:
{a:1, b:'world'}

Comment ça marche

SQLite est distribué sous différentes formes, dont une qui est particulièrement pratique : l’amalgamation. C’est un unique fichier .c de 5Mo qui contient tout le code, et que l’on peut compiler sans aucune bibliothèque externe:

gcc -DSQLITE_OMIT_LOAD_EXTENSION -DSQLITE_THREADSAFE=0 -c sqlite3.c

Et on peut aussi le compiler, sans aucune modification, avec emscripten. Il suffit de remplacer gcc par emcc dans la commande précédente, et le tour est joué.

Vous allez peut-être trouver bizarre que ça juste marche. En effet, le code de SQLite fait plein de trucs que l’on ne peut pas faire de base en JavaScript dans un navigateur, comme par exemple ouvrir des fichiers, ou simplement accéder à la mémoire à partir de pointeurs.

Heureusement, emscripten s’occupe de tout ça pour nous. Il fabrique un grand tableau d’entiers en JavaScript qui contiendra toute la mémoire de notre programme. Les performances ne sont pas trop mauvaises grâce aux [typed arrays (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays). Les pointeurs ne sont dès lors plus que des index dans ce tableau. Il implémente également les fonctions fopen, fwrite, etc. en émulant un système de fichiers entièrement en mémoire. L’inconvénient étant bien sûr que l’on a beaucoup moins de place pour stocker ses données.

Mon travail consiste alors uniquement à définir les bonnes options de compilation, et à écrire le code qui va faire l’interface entre les programmes en JavaScript et le code compilé, en JavaScript lui aussi. En effet, appeler directement le code résultant de la compilation par emscripten serait terriblement rebutant : ça parle de pointeurs partout, il faut allouer et désallouer de la mémoire dès que l’on veut faire des trucs compliqués, on n’a accès qu’à une série de fonctions, et pas à des objets qui contiennent des méthodes…

Pour avoir un code un peu plus léger, j’ai choisi le CoffeeScript, langage par excellence du web moderne.

Pour vous donner un exemple du genre de code qui fait l’interface, voilà la fonction prepare, qui permet de créer une requête préparée :

    'prepare': (sql, params) ->
        setValue apiTemp, 0, 'i32'
        @handleError sqlite3_prepare_v2 @db, sql, -1, apiTemp, NULL
        pStmt = getValue apiTemp, 'i32' #  pointer to a statement, or null
        if pStmt is NULL then throw 'Nothing to prepare'
        stmt = new Statement pStmt, this
        if params? then stmt.bind params
        @statements.push stmt
        return stmt

On voit bien que tout le vrai travail est fait par les fonctions compilées de SQLite, mon code se contentant de la gestion des erreurs, de la mémoire, et de la conversion des données dans un format utile au programmeur JavaScript.

Conclusion

Aujourd’hui, on fait tout ce qu’on veut sur le web, et bientôt, ce sera encore mieux. Les trucs funs qui sont pour bientôt : ECMASCRIPT 6, aka Harmony, emscripten SDK pour Linux, sqlite4.js…

Télécharger ce contenu au format EPUB

Commentaires : voir le flux Atom ouvrir dans le navigateur

Atelier Back to Basics : Javascript

2014-05-28T15:54:44+02:00

L’association Silex Labs propose une série de quatre ateliers pour travailler ensemble avec des outils devenus incontournables et partager des retours d’expériences sur les bonnes pratiques d’organisation et de travail collaboratif. Le prochain aura lieu le mercredi 28 mai de 19h à 21h à l’IESA Multimédia (Paris) sur le thème Javascript (après ceux sur HTML5 et CSS3, et avant celui sur Node.js le 18 juin).

NdM : l'inscription coûte 15 € (ou une adhésion annuelle à Silex Labs couvrant tous les ateliers).

lien nᵒ 1 : Ateliers B to B (Back to Basics) #3 : Utilisation de JavaScript
lien nᵒ 2 : Ateliers B to B (Back to Basics) #4 : Débuter Node.js

Chaque atelier commencera par une courte partie théorique sur la technologie présentée et sera suivie d’exercices pratiques. Au fur et à mesure des ateliers, les participants créeront leur site "CV" contenant leur parcours professionnel ainsi qu’un formulaire de contact. À la fin du cycle, les participants connaîtront les principaux langages du développement web et des ressources seront mises à leur disposition afin d’approfondir leurs connaissances.

Au programme de cet atelier

JavaScript est un langage qui est lu et exécuté par votre navigateur – le client – (donc directement sur votre ordinateur) et qui permet de créer des réactions en réponse à des événements sur la page ou à des actions de l’utilisateur. Par exemple :

un clic sur un lien qui affiche un texte masqué progressivement ;
un compteur qui défile ;
l’apparition renouvelée d’actualités sans que le navigateur ne demande à nouveau la page au serveur ;
etc.

La théorie :

pourquoi du JavaScript ?
l'invention du JS.

La pratique :

créer un fichier de code JavaScript ;
lier son JavaScript à son site ;
afficher un message dans le navigateur (par exemple une alerte) ;
faire des additions en JS ;
utiliser des variables ;
créer des fonctions ;
valider son formulaire avec JavaScript ;
interagir avec son site (DOM) pour afficher des messages d’erreur.

Cet atelier sera animé par Yannick Dominguez, développeur de web app depuis 2008, utilisateur de git et github depuis 2011 et principal contributeur de la bibliothèque Cocktail (Haxe)

Date et lieu

Réservez votre mercredi 28 mai de 19h à 21h et venez à l’IESA Multimédia 5 rue Saint-Augustin, 75002 Paris.

Inscrivez-vous vite !

A propos des ateliers "Industrial Workflow"

L’association Silex Labs est composée des communautés des projets open source que nous soutenons (Silex, Haxe, amfphp). Elle regroupe les différents métiers du numérique des designers aux développeurs en passant par des intégrateurs, des chefs de projets …

Dans le domaine du développement, les outils sont en constante évolution. Il est donc important de permettre à chacun de se mettre à la page pour gagner en productivité et en compétence.

C’est pourquoi, Silex Labs a décidé d’organiser une série d’ateliers pour travailler ensemble avec des outils devenus incontournables et ainsi partager des retours d’expériences sur les bonnes pratiques d’organisation et de travail collaboratif.

Télécharger ce contenu au format EPUB

Commentaires : voir le flux Atom ouvrir dans le navigateur

La troisième rencontre de la communauté JavaScript de Lille - Jeudi 25 juillet 2013

2013-07-22T16:00:34+02:00

Tous les passionnés de JavaScript ont rendez-vous au CoworkingLille pour discuter de JavaScript. L'accueil des participants se fera dès 19H30 au CoworkingLille au 10 rue de la Piquerie 59000 Lille.

Dans la communauté JavaScript les promises (en français, promesse, engagement) font l'actualité. Selon le Wiki CommonJS, une promise, en JavaScript, est un objet représentant une valeur qui pourrait être retournée par l'exécution d'une opération unique (souvent asynchrone). Nicolas Froidure nous fera, lors de cette rencontre, une présentation de cette nouvelle techno et de son expérience acquise pendant le développement de Liar.

Vous pouvez trouver sur ce lien la spécification des promises (polyfill inside).

Cette présentation sera suivie d'une table ronde sur NodeJS, la production et les outils existants. Nous aborderons les différentes approches :

Tous les retours d'expériences sont les bienvenus avec des exemples d'application en production à l'appui.

ChtiJS sur Twitter : @chtijs

lien nᵒ 1 : Inscription

Télécharger ce contenu au format EPUB

Commentaires : voir le flux Atom ouvrir dans le navigateur

Apéro Web à Nancy

2013-07-08T22:24:40+02:00

Après Bash, un nouvel Apéro Web se déroulera à Nancy le 18 Juillet 2013 au Classico (1 Rue Général Hoche) à 19h. Le but de ces évènements est de partager, discuter sur ces thèmes autour du Web, dans une ambiance agréable. Le thème de la soirée du 18/07 sera Node.js :

« JavaScript sort de son navigateur pour vous en mettre plein les yeux avec Node.js. Plus qu'un serveur web de nouvelle de génération, Node.js est une plateforme avec une communauté et des outils autant destinés au serveur qu'au client.

Durant cette introduction, les spécificités de Node.js seront décortiquées : event-driven model, non-blocking I/O, CommonJs, packages, etc. Puis, nous vous présenterons un des outils de l'univers node: Grunt.js, le task-runner sortira de son terrier pour vous aider à automatiser vos projets Javascript. »

lien nᵒ 1 : Event sur Google +
lien nᵒ 2 : Plan d'accès

Télécharger ce contenu au format EPUB

Commentaires : voir le flux Atom ouvrir dans le navigateur

LinuxFr.org : les dépêches de JavaScript

Sortie de µJS, une bibliothèque JavaScript légère pour dynamiser un site sans framework

Principe de fonctionnement

Fonctionnalités principales

Installation

Exemple 1 : navigation AJAX sans configuration

Exemple 2 : recherche en direct avec debounce

Exemple 3 : mise à jour de plusieurs fragments en une seule requête (patch mode)

QuickJS version 2025-04-26 et QuickJS-NG version 0.10

Changements les plus importants dans QuickJS 2025-04-26

Principaux changements de QuickJS-NG 0.10

Sous-projets

Téléchargements

Deno 2.0 est là

Sommaire

Pour rappel

La mascotte !

Deno 1.x, des débuts difficiles !

Les nouveautés de la version 2.0

Autour du projet Deno, JavaScript Registry (JSR) un dépôt de paquets JavaScript universel !

Performances du runtime

Test sur un MacBook Pro (2,6 GHz Intel Core i7 6 cœurs, AMD Radeon Pro 5300M 4 Go Intel UHD Graphics 630 1536 Mo, 16 Go 2667 MHz DDR4) sous macOS Sonoma

Node: Le temps moyen pour exécuter le test de 126 millisecondes

Deno: Le temps moyen pour exécuter le test de 93 millisecondes

Performances du gestionnaire de paquets

Deno 2.1 est là

Conclusion

WebDAV Manager, un client WebDAV ultra-léger en JS

Sortie de Deno 1.0

Les travaux de Marijn Haverbeke

Illico Editor : rétrospective 2017-2018

Sommaire

Philosophie

Les nouveautés

1. Interface utilisateur

1.1 Concepts

1.2 Pour illustrer

Menu et chargement de CSV

Recherche de doublons

1.3 Exportations

1.4 Journal de bord

1.5 Restitutions dans de nouveaux onglets

Exportation de données

Tableaux de synthèse

2. Accessibilité du code source

3. Documentation utilisateur et tutoriels

4. Nouvelles transformations

Colonnes

Recréer une filiation (relation parent‐enfant)

Lignes

Compacter les lignes (agrégats : calculs, listes)

Décaler vers le haut ou le bas

Valeurs en liste : agrégats et combinaisons

Calculer un ratio de similarité entre deux listes de valeurs

Agrégats

Conversion dans un système de comptage mixte

Intervalles

Recherche d’une valeur dans un intervalle

Combiner deux intervalles

Autre nouveauté : nouvelle année…

Oui, Illico !

Et en une minute, Illico, c’est quoi ?

Sommaire

Qu’est‐ce que ça peut m’apporter ?

durant la phase d'exploration de données (analyse)

durant la phase de correction

durant la phase de restitution

en général (exemples)

Pourquoi un outil de plus ?

le constat

la solution théorique

Illico : un outil ou une approche ?

En pratique, ça se passe comment ?

livré clé en main

le moins d'étapes possibles

un petit aperçu

Illico, en résumé

fonctionnalités utilisateur

code source

à propos du code-source JS

Oui, Illico !

Et en une minute, Illico, c’est quoi ?

Qu’est‐ce que ça peut m’apporter ?

Et si JavaScript allait droit dans le mur ?