Pleins de bon conseils de performance en Javascript
Un article qui parle des timeout en Node.js et de la manière dont ils peuvent être la cause de memory leak même en utilisant clearTimeout.
L'objet Timeout conserve un contexte qui vient de la closure utilisée lors de la déclaration et il conserve aussi les références en provenance de AsyncLocalStorage si un contexte ASL est présent.
Bref, il vaut mieux set la variable à null une fois que l'on a clear le timeout.
La syntax de Javascript est tellement nul que depuis le début du langage, tout le monde cherche à utiliser des syntaxes alternatives.
Aucune de ces syntaxes ne survit sur le long terme car cela rajoute une couche de complexité à appréhender pour les développeurs.
Ici on a une nouvelle syntaxe qui change complètement le paradigme et le flow d'exécution.
Attention à ne pas mettre ce genre de chose en prod car c'est une énorme dette technique instantanément
On a souvent besoin d'extraire le contenu d'une page web et de le convertir en markdown quand on travaille avec des LLMs.
Ce script de 75 lignes de JS utilise Playwright pour convertir n'importe quel site en document markdown
Un article très détaillé sur le fonctionnement des Cloudflare Worker (le service serverless de Cloudflare).
Beaucoup de détails sont donnés sur la manière dont Cloudflare sécurise des environnements isolés pour ses clients et notamment sur les méthodes utilisés pour mitiger les attaques Spectre
Avec la hype des framework frontend bundlé, on a des pages qui chargent constamment plusieurs Mo uniquement de Javascript.
Même de simple landing page font plusieurs Mo.
La palme de performance review à Pornhub avec seulement 1.4 Mo et bien sur Jira se positionne confortablement dans les dernières places (50 Mo)
Mention spécial à react.dev qui charge continuellement du JS jusqu'à atteindre la centaine rien qu'en scrollant quelques articles.
Un autre runtime JS fait par AWS et spécialisé dans le démarrage rapide pour leur infrastructure Lambda.
Ça vient morceler un peu plus l'écosystème JS avec de plus en plus de runtime qui supportent tous plus ou moins des choses différentes: Node, Deno, Bun, Cloudflare Worker, Edge (Vercel), WinterJS et ajd LLRT.
Au final tous ces runtime utilisent quand même la base de Node.js car niveau perfs aucun runtime ne bat v8 et son JIT dans lequel Google a investit des centaines de millions de $
Des travaux sont en cours pour la standardisation d'API de détection d'objets en Javascript.
Les premiers travaux se concentrent sur la détection de visages et des parties du visage
Il est possible d'inclure du Javascript dans une image SVG. Si elle est ouverte directement alors le Javascript sera exécuté
Une comparaison des différentes manières de cloner un objet en Javascript.
Sans surprise c'est toujours JSON.parse(JSON.stringify(object)) qui est le plus rapide et surtout le plus portable.
Une série d'articles pour améliorer la vitesse de chargement des pages web.
Si vous cherchez à installer un package Javascript qui vous avez publié en privé sur Github (Github Package), voila la solution.
Par exemple, si vous souhaitez installer le package @aschen/memorus, commencez par générer un Personnal Access Token et ajoutez le dans les secrets de votre repo puis utilisez ce job.
jobs:
whooa-awesome-job-mate:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: 20
registry-url: 'https://npm.pkg.github.com'
scope: '@aschen'
- name: Install dependencies
run: npm install -g @aschen/memorus
env:
NODE_AUTH_TOKEN: ${{ secrets.PAT }}
Des techniques pour réduire la taille d'un bundle en optimisant le treeshaking.
Notamment l'utilisation de fonctions indépendantes plutôt que des classes car une classe est exportées en entier même si on n'utilise pas toutes ses méthodes.
Les "barrel file" composés uniquement d'exports d'autres modules sont une fausse bonne idée car ils forcent à charger un nombre plus important de fichiers.
A éviter donc
Un article sur l'utilisation de React Context dans une app pour partager facilement des informations entre les composants plutôt que les passer dans les props.
L'utilisation est un peu complexe et s'apparente à de l'injection de dépendances.
On fournit les contextes en encapsulant l'application dans des balises donc attention à l'utilisation de plusieurs contextes qui s'encapsulent entre eux et réintroduisent du couplage.
// ContainerContext a besoin de LangContext
<LangContext.Provider value={translate}>
<ContainerContext.Provider value={findTasks}>
<TodoList/>
</ContainerContext.Provider>
</LangContext.Provider>
Arquero est une librairie Javascript qui permet de manipuler des données tabulaires en RAM.
Elle supporte l'algèbre relationnelle comme pour une base SQL.
C'est du même genre que Pandas en Python mais du coup pour faire de la datascience directement en Javascript!
Derrière les performances de la lib on retrouve encore une fois le format binaire Arrow
beers
.orderby(aq.desc('ibu'))
.select('name', 'style', 'ibu')
.filter(d => op.includes(op.lower(d.name), 'hop'))
.view()
Observable est une plateforme de dataviz qui propose des notebooks en Javascript.
C'est du même gout que Jupyter Notebook, très facile à manipuler et à créer, même pour des personnes pour qui le frontend n'est pas la compétence principale.
Un récapitulatif très complet sur les web component et ce qu'il est possible de faire avec.
Une belle performance algorithmique sur l'algorithme de chunking de Rollup avec 3.3s au lieu de 2 heures pour la génération du plus petit nombre de chunks.
L'auteur utilise un seul BigInt et manipule directement les bits au lieu de manipuler un Set.
Un article qui vulgarise très bien le pipeline d'exécution du code source Javascript par V8.
C'est sensiblement la même chose pour les autres moteurs présents dans Firefox (SpiderMonkey) et Safari (JavaScriptCore).
(Merci Alex pour le partage)