Newsletter WEB : Veille technologique – juillet 2022

Pas mal d’infos pour ce mois de juillet !

On a les résultats de la StackOverflow Survey (encore une enquête oui mais j’aime ça), Cypress 10 (avec du lourd), nouveau framework Deno (Fresh 🍋), nouveau framework de test qui vient concurencer Jest (Vitest), Gatsby, ES2022, … 

Pour les articles on parle de la fin du dev sur localhost, de l’IA LaMDA by Google, du CSS chez Airbnb, et de comment maintenir une librairie de composants UI. Quelques vidéos pour [les flemmards] les personnes allergiques au texte : documentaire sur Svelte(JS), Storybook en 100 secondes. 

LES NOUVEAUTES

StackOverflow Survey 2022 

logo 2022 Developer Survey - 
StackOverflow Survey 2022

Le sondage annuel de la plateforme connue de tous a publié ses résultats ! Plus de 70 000 développeurs y ont répondu en mai. Highlights : 

  • Langage le plus apprecié : Rust (TypeScript et Python pas loins derrière) 
  • Framework Web le plus apprecié : Phoenix (qui détrône Svelte) 
  • Outil le plus apprecié et voulu : Docker (Kubernetes second) 
  • 85% des developpeurs travaillent en remote partiel 

StackOverflow Survey Results 

Cypress 10 : component testing 

Welcome to Cypress

Cypress semble vouloir concurrencer testing library et les interaction tests de Storybook en lançant leur component testing ! Pour enfin pouvoir tester ses composants de manière individuelle. Cypress se sépare désormais en deux partie donc, e2e et component testing. Hâte de tester cela ! 

Cypress e2e a également droit à son lot de nouveautés, redesign complet, nouvelle config ts/js, migration automatique, meilleures erreurs, intégration git, … 

Cypress 10 release blog – Cypress component testing 

❤️Fresh 1.0 

Nouveau framework full-stack pour Deno (si vous ne connaissez pas c’est un runtime basé sur V8, le moteur de Chrome, qui vient « concurrencer » NodeJS). C’est très prometteur mais il faut revoir sa manière de penser étant donné que beaucoup plus de chose vont se passer côté serveur ! Si vous n’aimez pas lire la petite vidéo sera parfaite pour vous faire un rapide résumé ! 

Fresh release blog – Video pour les flemmards (moi) 

❤️Vitest : Un nouveau framework de test unitaire 

logo Vitest

Serait-ce la fin pour Jest ? Ce nouveau framework de TU basé sur Vite (builder JS créé par Evan You, créateur de VueJS) est très (très) rapide, ça fait du bien car Jest semble devenir de plus en plus lent. Hâte de voir ce que ça donne, par exemple VueJS (2.7) utilise désormais Vitest à la place de Karma+Jasmine. Ils annoncent une migration « effortless » depuis Jest, c’est jamais simple une migration donc je suis curieux de tester ! 

Vitest Website 

Quoi de neuf sur le web en juin ? 

Aucun texte alternatif pour cette image

Nouvelles API pour les flux sur Firefox, nouvelle API pour accèder aux fonts locales, nouveau HTTP 103 : Early Hints, mais surtout une nouvelle syntaxe pour les media queries !! 

Quoi de neuf sur le web en juin – Quoi de neuf sur chrome 102 ? 

ESLint nouvelle homepage 

Aucun texte alternatif pour cette image

Bon pas grand chose mais ESLint a refait une partie de son site et c’est super bien réussi !! Il y a aussi la v14 d’angular-eslint est sortie. 

ESLint Homepage 

OpenJS World 2022 

Début juin a eu lieu l’OpenJS World conference, un énorme évènement autout de JavaScript au Texas avec plus de 52 conférences. Ci-dessous petit recap et playlist de replay sur YouTube. 

Recap blog – YouTube Playlist Replay 

❤️Gatsby : Mise à jour ambitieuse 

Aucun texte alternatif pour cette image

Gatsby met les bouchées triples pour (re)devenir le framework le plus rapide du web ! Nouveau script component pour inclure des scripts comme GoogleAnalytics sans compromis, GraphQL Type Generation pour réduire les frictions avec les CMS, updates à l’offre commerciale (enterprise plan), SOC 2 certifié, Image CDN sorti de beta, Incremental deploys, … ils n’ont pas chômé ! Aussi, la v 4.16 et 4.17 sont sorties. 

Gatsby Launch Week – 4.16 – 4.17 

ColorJS 

Nouvelle librairie très complète et bien pensée pour manipuler des couleurs en JS. Si votre projet utilise les couleurs de manière intensive à checker ! 

ColorJS – Release Blog 

Sur quoi l’équipe de React travaille t’elle ? 

L’équipe de React souhaite donner plus de visibilité sur ce sur quoi ils travaillent. Dans cette démarche ils ont publiés plusieurs articles intitulés « React Labs ».  

  • Server components : async/await, unification des builders, … 
  • Réecriture du compileur (React Forget) 
  • API Offscreen 
  • Amélioration du chargement des assets 
  • Et bien plus ! 

React Labs : What we’ve been working on ? 

Vim 9.0 

Si certains afficionados de Vim me lisent ils seront ravis d’apprendre qu’une nouvelle version est sortie avec au programme amélioration de perf (l’objectif principal de cette version),  

Vim 9.0 

ES2022 

L’Ecma general assembly a offciellement approuvé la spécification 2022 ce qui en fait un nouveau standard ! Il a pas mal de nouveautés, je vous laisse avec deux liens qui rentrent dans le detail et un petit overview :  

  • .at() method on built-in indexables 
  • RegExp Match Indices 
  • Object.hasOwn 
  • Error cause 
  • Top-level await 
  • Class field declarations 
  • Ergonomic brand checks for private fields 

Article – Recap 

Zx 7.0 

Aucun texte alternatif pour cette image

L’outil de Google qui permet d’écrire du bash en JS sort sa version 7 ! 

  • Intégralement réécrit en TypeScript 
  • Code coverage 99% 
  • Nouvelle API pour les contextes asynchrones 
  • –eval flag 
  • REPL support 
  • Echo natif 

Release note 

❤️Safari Web Push 

Nous en parlions le mois dernier, les notifications push arrivent avec iOS 16 et MacOS Ventura. À cette occasion l’équipe de WebKit (moteur derrière Safari) est rentré dans le détail avec un article dédié. Je l’ai déjà dis mais je le redis : c’est une avancée majeure pour les PWAs !! 

WebKit Push 

Next.js 12.2 

Des features expérimentales passent en stable, de nouvelles features expérimentales font leur apparition.  

  • Middleware (Stable): Dynamic routing for your entire application. 
  • On-Demand ISR (Stable): Update content without redeploying. 
  • Edge API Routes (Experimental): High performance API endpoints. 
  • Edge SSR (Experimental): Server-render your app, at the Edge. 
  • SWC Plugins (Experimental): Extend compilation with your own plugins. 
  • Improvements to next/image: Including a new next/future/image component. 

Release blog 

Autre releases : Capacitor 4.0-betaFastify 4.2Prettier 2.7 (TS 4.7 Support)Node.js 18.4TailwindCSS 3.1Prisma 4.0 

DIVERS

📹Storybook in 100 Seconds 

Vous m’avez souvent vu parler de Storybook, mais qu’est-ce que c’est ? Si vous n’avez jamais pris le temps de le découvrir découvrez le en 100 secondes ! 

📹❤Svelte Origins: A JavaScript Documentary 

Documentaire sur Svelte, le framework JS. J’ai toujours adoré les documentaires sur la naissance de frameworks, passionnant. Puis si vous ne connaissez pas Svelte ce sera l’occasion de le découvrir !

👨 🏫Joy of React 

Nouveau cours de Josh Comeau à venir. J’ai énormément apprécié le cours de Josh sur le CSS. Il va bientôt sortir un cours React et j’ai hâte de le suivre !! Sortie prévue en 2022, il sera interactif et pas comme les autres. 

📹JSConf Budapest 2022 

Les recommandations d’articles 

The end of localhost (en) 

Aucun texte alternatif pour cette image

Perspective sur le futur intéressante qui suppose que nous aurons de moins en moins à développer en local sur nos postes, grâce à l’avancée de la 5G, fibre, et offres cloud. 

CSS Journey : Airbnb (en) 

Aucun texte alternatif pour cette image

Airbnb est passé de SASS à Aphrodite, pour passer aujourd’hui à Linaria. Ils ont étudié StyledComponents, Emotion, Treat, et se sont arrêtés sur Linaria. Ils nous expliquent pourquoi, comment ils ont contribué au projet, et les résultats de cette transition. 

Pourquoi vous devriez considérer Nx pour votre projet Angular ? (en) 

Un ingénieur de chez @Nrwl (créateur de Nx), explique pourquoi on devrait considérer d’utiliser le CLI Nx même pour uniquement un seul projet : caching, optimisations, tooling, … Je suis plutôt d’accord avec lui ! 

Photoshop sur le web (fr) 

Adobe a lancé en Beta une version web de son produit phare Photoshop. Elle serait gratuite avec des options payantes et aurait pour but de séduire d’éventuels acheteurs. Preuve que le web est très capable ! 

KDE Plasma 5.25 

L’environement Linux (mon préféré) KDE reçoit une grosse mise à jour de ses applications. Tout y passe : Bureau, Finder, Lanceur d’application, Themes, … 

Un ingénieur de Google congédié suite à une alerte levée sur LaMDA (fr) 

Aucun texte alternatif pour cette image

L’IA LaMDA de Google est trop convaincante et un ingénieur de Google s’inquiète et pense que l’IA serait sensible. 

🧡Utiliser Playwright pour écrire des tests unitaires ? (en) 

Le framework de test e2e de Microsoft sorti en 2020 a le vent en poupe. Patrick Kerschbaum l’utilise désormais aussi pour ses tests unitaires et nous explique pourquoi, ses principaux arguments sont les suivants :  

  • Same tool for E2E tests and unit tests 
  • Out-of-the-box support for TypeScript 
  • Access to features unique to Playwright 

Comment tester les performances de son appli à l’aide de Playwright (en) 

Je suis tombé sur ces slides vraiment bien faites de John Hill qui explique comment utiliser Playwright (oui encore lui ! Je vous l’ai dit il est à la mode) pour tester les performances de son application web. Ça inclut également une petite présentation de Playwright pour ceux qui ne connaissent pas.  

AbortController is your friend (en) 

Si vous ne connaissez pas AbortController je vous invite à lire cet article qui explique en détail les usecases de cette API. Il y a même une petite démo rapide. Connaître cette API ouvre de nouvelles posibilités et nouveaux patterns de développement. 

🧡Conseils pour maintenir une librairie de composants UI maison (en) 

De plus en plus d’entreprises ont leur design system propre et il faut souvent développer une librairie UI interne. Gabe Scholtz s’est déjà cassé les dents sur la maintenance d’une librairie comme ça et il nous raconte comment ça s’est passé. 

Guide complet sur la création de formulaires en React (en) 

À lire à tout prix avant de se lancer dans la création d’un formulaire en React. Ça vous évitera des erreurs basiques ainsi que des frustrations. Tout est passé en revue : accessibilité, astuces UI, state management, erreurs courantes, … 

How to useMemo and useCallback (en) 

Vous avez déjà rencontré une app React incompréhensible avec des useMemo à la chaine ? Vous pouvez probablement retirer 90% de ceux-ci atteste Nadia Makarevich. Tout est passé en revue, à quoi ça sert et comment on en est arrivé là. 

Don’t useEffect (en) 

Un nouvel article dans la doc officielle (refonte actuellement en Beta) React a fait beaucoup parler sur Reddit, en effet, beaucoup de cas où useEffect est utilisé ne sont pas forcémment utiles. Exemple : mise à jour du state basé sur les props. 

🧡The cost of convinience (en) 

Aucun texte alternatif pour cette image

Surma, DX chez Shopify (avec un blog ultra stylé), explique pourquoi l’abstraction des frameworks peut parfois être frustrante. Il passe en revue pourquoi, et les solutions possibles.