Aller au contenu principal

Recapt Juin 2022

· 6 minutes de lecture
Damien Buchet

Les nouveautés et nouvelles qu'il ne fallait pas manquer sur l'écosystème React / Javascript, de Juin 2022 🤗

Au programme ce mois-ci :

  • NextJS 12.2
  • Airbnb passe à Linaria pour générer son CSS
  • HTML/CSS, est-ce du dev ?
  • Farewell IE & Atom 👋
  • Strapi 4
  • Joy UI, le nouveau design system de @mui
  • Les packages / librairies / outils à surveiller
  • Et on termine par le WTF JS?

NextJS 12.2​

NextJS continue de préparer le futur de NextJS, en continuant d'améliorer ses fonctionnalités.

Ainsi les Middlewares et le On-Demand ISR sont maintenant stables et peuvent être utilisés en production. Pour rappel, le On-Demand ISR permet de mettre à jour du contenu en relançant un build d'une page directement depuis le serveur, sans avoir à rebuild tout le projet, ni devoir redéployer. Si vous êtes perdu sur les sigles SSR, CSR, SSG, ISR,... vous pouvez consulter mon précédent article à ce sujet !

NextJS propose également 3 nouvelles fonctionnalités en expérimental : le Edge API Routing, Edge SSR et SWC Plugins. Les 2 premiers sont l'utilisation du Edge Runtime, qui est un runtime plus léger que NodeJS. Pour le SWC PLugins, c'est l'utilisation du compilateur SWC pour transformer et minifier le code JS

Airbnb passe à Linaria pour générer son CSS​

Dans son blog tech, Airbnb nous explique le cheminement qui les a amené à utiliser Linaria, une solution CSS-in-JS sans runtime.

L'équipe s'est rendu compte que la plupart des bugs constatés en production étaient dus au CSS. Des feuilles de style manquantes, des styles qui s'écrasent, les développeurs qui n'osent pas supprimer du CSS lors de refacto, de peur de casser quelque chose ailleurs.

Partant de ce constat, ils ont migré tout d'abord vers une solution de CSS-in-JS maison, nommée react-with-styles, qui permet de scoper des styles, avec thème, au niveau des composants directement, au runtime (les styles sont générés dynamiquement à la volée). Bien que cette solution ait réglé la plupart de leurs soucis et régressions, ils ont néanmoins constaté une augmentation de 10% à 20% de l'utilisation CPU lors de la navigation sur leur application.

Ils ont alors décidé de comparer 3 solutions :

  • Emotion : du CSS-in-JS, avec un coût runtime faible (Emotion est notamment utilisé dans @mui)
  • Linaria : CSS-in-JS sans runtime
  • Treat : CSS-in-JS sans runtime

L'avantage des CSS-in-JS sans runtime, est que les styles sont calculés et injectés pendant le build.

Vous pouvez lire le reste de l'article, avec leurs benchmarks, pour savoir pourquoi ils ont finalement choisi Linaria !

HTML/CSS, est-ce du dev ?​

J'entend souvent des "Ah tu code en HTML / CSS ? Ouais tu codes pas vraiment en fait !"

Je n'ai jamais trop compris ces remarques. Pour moi un bon développeur qui va poser une architecture HTML/CSS propre et performante a bien plus de mérite qu'un "dev" qui ne ferait qu'empiler des plugins jQuery ou copier/coller du code StackOverflow sans comprendre ce qu'il fait.

Et pour prouver qu'on peut faire des trucs assez fous en "simple" HTML / CSS, voila quelques exemples 👇 Je mets au défi n'importe quel détracteur des dev HTML/CSS de réussir à reproduire ces comportements avec leurs langages de prédilection :)

Farewell IE & Atom 👋​

La fin d'une ère. Internet Explorer, sorti en 1995, est officiellement arrêté et sans support depuis le 15 Juin. Cible de toutes les moqueries, il a quand même contribué à l'essor du Web tel qu'on le connaît maintenant.

L'éditeur de code Atom annonce également la fin de son support et de sa disponibilité au 15 Décembre 2022. Atom n'a pas reçu de mise à jour depuis un certain temps, et souffre de la concurrence notamment de VSCode

De plus, Atom étant édité par Github, racheté par Microsoft, lui-même éditeur de VSCode, il ne faisait pas sens de garder 2 éditeurs au sein de la même organisation. Atom aura néanmoins servi aux fondations du framework Electron, qui a permis la création de mililers d'applications... dont VSCode :)

Strapi 4​

Strapi, le headless CMS passe en version 4 ! Dans cette version, qui inclut une nouvelle interface graphique, arrive surtout la possibilité de créer des plugins.

Cette nouvelle version apporte donc une nouvelle API Plugin, ainsi qu'un UI Kit sur Figma

Des améliorations ont également été apportées à la façon dont vous pouvez requêter la base de données, notamment en ajoutant les opérateurs OR, AND et NOT pour filtrer les résultats, et ne pas tout recevoir comme c'était le cas jusqu'à présent.

Joy UI, le nouveau design system de @mui​

L'équipe de @mui à l'origine du design system Material-UI pour React annonce Joy Ui, leur nouveau Design System. Il s'adresse principalement aux développeurs qui apprécient l'expérience de développement avec @mui, mais qui sont réticents au design "material" et préfèreraient avoir un look plus moderne et plus personnalisable.

Packages / Librairies / Outils​

  • Vitest Vitext se veut être le "NextJS sous ViteJS" avec une API calquée sur NextJS, ke tout propulsé par ViteJS.
  • Fresh Un Framework basé sur Deno
  • plasmo Un framework pour développer des extensions navigateur. Plasmo se veut être le "NextJS pour les extensions navigateur"
  • AutoAnimate Une librairie 0-configuration, compatible avec React, Vue, Svelte,... pour configurer automatiquement des animations de transition dans des listes
  • Component Party Une ressource intéressante qui va permettre de comparer plusieurs librairies / frameworks. Par exemple, si vous vous demandez comment déclarer un state en React, Svelte et SolidJS, cette ressource vous propose le code dans ces différents frameworks pour accomplir la même tâche. Cette ressource peut également être utile quand vous désirez vous former sur une autre librairie !
  • Symbols to Copy Une liste de plusieurs symboles à copier/coller par simple clic

WTF JS?​

Que va afficher ce console.log ?

console.log( [70, 5, 8, 50, 10, 30, 2].sort() )
Afficher la solution et les explications !

😱 [10, 2, 30, 5, 50, 70, 8] 😱

Alors pourquoi ?

On va encore se trouver face à un problème de transtypage si cher à Javascript

En effet, un .sort() en JS va s'appliquer sur des Strings, ce qui veut dire que tous les éléments du tableau vont être convertis en string avant d'effectuer le .sort(), et ce même si tous les éléments sont des nombres 🤘

Si vous souhaitez effectuer un .sort() sur un tableau de nombres, vous devez écrire vous-même votre fonction de sort

const sortArrayOfNumbers = array => arr.sort((a, b) => a - b);

sortArrayOfNumbers([70, 5, 8, 50, 10, 30, 2]) //=> [2, 5, 8, 10, 30, 50, 70]

Ne manquez pas un article !​

Envie de recevoir par email mes derniers articles et Recapt ?

Essayez de taper register <votre adresse email> dans la console 🎉