React Hebdo #80: Next.js 12, Edge Functions, useMyContext, Hermes, React-Freeze, Skia, Drispy, Bun, TC39, Cloudflare...

React

Next.js 12 a été annoncé à la conférence Next.js, dont je conseille de regarder au moins la keynote. Une très belle release avec de nombreuses d'innovations qui exposent la vision générale: une DX et des performances au top, la puissance du dynamique (SSR) à la vitesse du static (SSG/CDN).

Le nouveau compiler Rust SWC entre en activité pour replacer Babel (sauf si vous avez une config Babel sur mesure) et permet d'améliorer très significativement les temps de build et de refresh, en particulier sur les gros projets. Contrairement à esbuild, SWC est modulaire et souhaite proposer un système de plugin. Il faudra cependant du temps avant que tous les plugins Babel qu'on utilise soient utilisables avec SWC, mais l'équipe Next.js souhaite implémenter le support de Styled-Components, Emotion et Relay.

Un nouveau système de middleware pour supporter de nombreux use-cases: redirects, analytics, auth, feature flags, AB-testing... Cela repose sur leur nouvelle infra Edge Functions (j'en parle en détails plus bas).

Support expérimental de React 18, avec React.lazy coté serveur, le support du streaming SSR (via la nouvelle infra Edge Functions), et des React server components, que je n'attendais pas si tôt dans un framework 😍. Ils travaillent aussi sur un component <Data> (similaire à <Suspense>) et un système de caching au niveau composant.

Support des modules ES, et des URLs imports, qui permet d'importer du code (ou des images) directement depuis un CDN compatible ES comme Skypack, ou les outils de design avant-gardistes comme Framer (Handshake).

Je suis tout à fait d'accord avec cet article qui propose de créer sa propre abstraction au dessus d'un context React, via useMyContext() et <MyContextProvider> . Il existe de nombreuses raisons d'introduire un peu d'indirection supplémentaire, et Vladimir donne de bons exemples

Extras:

• 🎥 Next.js conf 2021: la playlist Youtube complète. La keynote de 30min résume bien l'ensemble des innovations. Pas mal d'autres sujets intéressants, je n'ai pas eu le temps de regarder.

• 🎥 Next.js 12 is a Beast,: video de Fireship qui présente les innovations en 5min: pour les plus pressés!

• How to Use Next.js Middleware: un article intéractif sympa qui présente des use-cases pour le nouveau système de middleware Next.js

• Building an effective Image Component: l'équipe Aurora de Google explique les décisions de design derrière le composant Image de Next.js

• Use Next.js 12 on Netlify: Netlify supporte déjà le nouveau système de middelware de Next.js 12 via sa propre infra Edge.

• Next.js Stories RFC: une RFC pour une intégration de Next.js avec Storybook, avec un système de génération de stories orignal pour réduire la maintenance manuelle.

• Ouverture des inscriptions pour React.js conf 2021. Repose sur le Virtual Event Starter Kit open-sourcé par Vercel.

• 🧵 Everything @vercel announce for Next.js 12 in simple terms

• Why hooks are the best thing to happen to React

React-Native

On le sentait venir: Hermes va très probablement devenir le moteur JavaScript par défaut sur toutes les plateformes React-Native! Et donc progressivement remplacer JSC (JavaScriptCore), le moteur derrière iOS/Safari. Pour rappel, Hermes améliore significativement le TTI/Time-To-Interactive (temps de démarrage de l'app) via une compilation en bytecode pendant le build (AOT/Ahead-Of-Time), mais ça n'est plus son seul avantage:

• Réduction des temps de pause via le garbage collector Hades , très important pour la nouvelle architecture et le renderer Fabric

• Un transformer Babel devrait améliorer encore plus le TTI!

• Intégration performante avec JSI

• Meilleur expérience de debugging

Lorsqu'on utilise une stack navigation, les écrans se superposent les uns au dessus des autres. Mais si vos écrans sont tous connectés au même state React (via context, Redux...), alors il est fort probable que React re-render inutilement des écrans invisibles, et les updates sont retardées sur l'écran au dessus de la stack

React-Freeze est une librairie expérimentale de Software Mansion qui permet de figer les écrans en dessous de la stack pour s'assurer que ceux du dessus s'updatent plus rapidement. Cela s'intègre automatiquement avec React-Native-Screens et donc React-Navigation.

🧵 Rick Hanlon mentionne que dans le futur React pourrait dé-prioriser les updates des écrans non-visibles.

Extras:

• Demos Remotion + Skia: William Candillon propose 3 nouvelles démos avec l'usage de Skia sur le web (Remotion étant basé sur le web). On peut supposer que ces démos sont implémentées avec une abstraction cross-platform en React-Native.

• Dripsy v3: Fernando Rojo a annoncé la nouvelle version de sa lib qui simplifie le dev cross-platform via React-Native. Il a aussi présenté un talk à la conf Next.js sur le sujet.

💸 Jobs

Cajoo: Dev Fullstack - Remote - 40-75k€ (+BSPCE)

Cajoo veut créer le supermarché de demain 🛒 Nous sommes présents dans 10 villes en France et suite à un investissement de 40M$ de Carrefour nous étoffons l'équipe tech pour créer la stack tech du futur du retail. Les squads s'insèrent dans les 3 streams:

• 🛍️ Consumer: App B2C en React Native, back-office React, backend Hasura & lambdas Node/Typescript

• 🏭 Warehouse: PWA React avec XState pour les opérateur en entrepôt, back-office React, backend Hasura & NestJS

• 🚴 Delivery: App coursiers en React Native sur Expo, back-office React, backend Hasura & lambdas Node/Typescript via Serverless

Notre code est typé de bout en bout avec Hasura en backend qui génère des endpoints GraphQL que nous consommons en frontend avec Apollo et un typing fort via Typescript.

• 🌴 Remote pour les équipes Tech, Produit et Data (avec possibilité de venir dans nos locaux dans le 8ème à Paris)

• 🏄‍♂️🏔️ Offsite chaque trimestre dans un endroit sympa en France (Hossegor, Chamonix)

Une offre ci-dessous t'intéresse? Réponds à cet email!

Smallable: dev React senior - CDI Paris 50-60k (+ CTO)

Ask Mona: dev React confirmé - CDI Paris 45-50k

Hublo: Node.js React senior - CDI Paris/remote 60-70k (+ EM)

Habx: React TS - CDI Paris - 38-50k

Ponicode: dev JS/React - CDI Paris 40-65k

Shift: dev React senior - CDI Paris/remote 50-60k

Choose: dev React-Native - CDI Paris 50-60k

Splio: dev fullstack React/NodeJS senior - CDI Paris 60-70k

F4: dev NodeJS - CDI Paris 40-50k

Aria: dev NodeJS - CDI Paris - 45-60k

HD Rain: dev backend Node.js React - CDI Toulouse 38-45k

Teester: dev frontend React - CDI Nantes 40-45k

Divers

Vercel propose maintenant des Edge Functions pour compléter son offre serverless. Ces Edge Functions sont basées sur les Cloudflare Workers, des isolats V8 qui tournent @ edge au plus près de l'utilisateur, sans cold boot. Il s'agit d'une solution différente des Serverless Functions existantes (basées sur AWS Lambda). En gros, Vercel propose une meilleur DX au dessus de l'infra Cloudflare, de la même manière qu'ils l'ont fait avec AWS. Cet ancien blog post explique bien les différences: Vercel Serverless Functions vs Cloudflare Workers.

A noter que le concurrent Netlify utilise sa propre infra pour ses Edge Handlers. 🧵 Un dev Netlify trouve l'intégration Vercel élégante.

Les dernières progressions de stage pour les proposals JavaScript. Error Cause passe déjà en stage 4! Array grouping en stage 2. Du progrès également sur les APIs Intl, et plusieurs proposals passent en stage 1.

Extras:

• Custom Headers for Cloudflare Pages: Cloudflare pages propose maintenant des fichiers _redirects et _headers, comme Netlify. Je ne sais pas si c'est 100% compatible, mais ça serait intéressant pour la portabilité si acteurs Jamstack adoptaient un format identique.

• "I want Bun": la phrase à taper pour être invité sur le repo GitHub de Bun, bundler très rapide écrit en Zig qui semble s'inspirer de esbuild et souhaite proposer une toolchain complète. Le projet n'est pas production-ready mais les benchmarks semblent prometteurs.

• 🧵 Dan Abramov donne son avis sur Tailwind

• Type | Treat 2021: Orta propose des mini-challenges TypeScript "spooky" pour Halloween

• Supercharge Your NodeJS With Rust

• Reimagine Atomic CSS

• The CSS-in-React Landscape

Twitter Dev @TwitterDev

Doctors: Googling stuff online does not make you a doctor Developers: https://t.co/mrju5ypPkb