Discover more from This Week In React

A weekly newsletter for React and React-Native experts. Join 16749 React devs and receive by email the most important React news.

React Hebdo #77: Remix, Sapling, Expo, TypeScript, React-18, ESLint, npm, Jamstack, CSS...

Sébastien Lorber

Oct 12, 2021

React

Remix est meta-framework React sur lequel travaillent Ryan Florence et Michael Jackson, les créateurs de React-Router. Ils viennent d'annoncer que Remix sera finalement gratuit et open-sourcé sous license MIT, suite à une levée de fonds de $3M.

J'aime la vision de ce projet:

Un retour aux principes fondamentaux du web: statuscode, caching http, forms...
L'hydratation React vue comme un "progressive enhancement": la majorité de votre site doit pouvoir tourner avec JS désactivé.
Hébergement sans lock-in: compatible avec les offres clouds serverless Node.js, mais aussi Cloudflare Workers (isolats V8)

Kent C. Dodds donne tous les détails techniques de son nouveau site, qui est probablement le plus gros site fait avec Remix réalisé jusqu'a présent, et dont il fait régulièrement l'apologie. Un post assez long, impossible à résumer en quelques lignes, mais qu'il vaut au moins le coup de survoler pour avoir un aperçu d'une stack moderne.

Ce nouveau projet propose de changer la manière dont on navigue dans notre code React: au lieu de se baser sur l'arborescence du file-system, il va analyser statiquement votre code JavaScript et créer une vue de navigation sous forme d'arbre dans lequel on peut naviguer (assez similaire aux DevTools). Pour l'instant, seul React et VS Code sont supportés, mais l'idée sera probablement implémentée pour d'autres frameworks et IDEs.

Très content de voir un peu d'innovation dans le domaine de la navigation. On a beaucoup de discussions autour de l'organisation des fichiers sur le file-system qui n'ont pas beaucoup de sens pour moi: ce qui compte c'est le graph de dépendances et la facilité de navigation.

Sebastian Markbåge à publié 3 guides d'upgrades pour les auteurs de librairies et frameworks:

C'est assez technique, mais l'idée générale est que l'approche populaire basée renderToString n'est pas idéale pour les performances. Pour réduire les temps de réponse et le Time-To-First-Byte, il faut commencer à envoyer du HTML le plus tôt possible. Seulement voila: le tag <head> doit forcément être au début du document, et on ne peut le remplir correctement qu'après avoir rendu l'app React coté serveur. Pour pouvoir utiliser le streaming, il faut que les auteurs de frameworks mettent en place un système complexe de streams pour d'abord écrire un tag <head> vide qui sera rempli au moment le plus adapté (enfin, c'est ce que j'ai compris 😅).

Une bonne introduction sur l'usage de types génériques en React, avec un début simple à comprendre, une analyse de la signature du hook useState de React. On termine par l'implémentation composant <Select> qui marche aussi bien avec des string que des number.

Extras:

Stop using loading spinners: Fernando encourage à utiliser des Skeletons et donne quelques astuces TypeScript
6 Concrete Tips That Will Make Your React Pull Requests Easier To Review
Mastering Mutations in React Query
Le createur de React-Three-Fiber lance un mini-cours

React-Native

Le nouveau SDK est en beta pour une semaine, et on a déjà une première liste de highlights. Support expérimental du moteur JS Hermes sur iOS, y compris via expo-updates. On upgrade aussi vers React 17, et React-Native 0.64 (version avec Hermes qui supporte les Proxy). Il ne reste plus qu'a attendre la stabilisation et le support de quelques APIs Intl pour qu'Hermes soit adopté en masse. Pourquoi pas en faire un jour le moteur JS par défaut?

Avec l'arrivée du SDK 43, Brent explique en détail pourquoi le package react-native-unimodules est remplacé par expo.

A l'origine, le système d'unimodules était découplé et conçu pour être réutilisable par d'autres frameworks (Flutter, NativeScript...) via un jeu d'interfaces et adapters. Cette indirection supplémentaire à un cout significatif en terme de maintenance, est plus compliqué à comprendre pour les utilisateurs, et complique aussi l'implémentation de certaines features comme l'autolinking et le support des monorepos.

Le nouveau système est plus simple à comprendre, couplé à React-Native et fonctionne mieux avec les monorepos (hoisting sans symlinks). Ils prévoient aussi de réduire significativement les temps de build sur iOS.

Maintenant qu'il est possible de faire tourner facilement du code natif dans n'importe quelle app Expo, ils semblent vouloir s'attaquer à un autre problème: nous faciliter la vie pour écrire ce code natif, en utilisant la nouvelle architecture Fabric, JSI, TurboModules, Swift et Kotlin.

Avec les derniers SDKs, Expo est vraiment devenu un super framework. Cet article discrédite les myths qui ne sont plus d'actualité suite à l'arrivée de Expo Application Services, des custom dev clients.

Personnellement j'ai commencé à utiliser Expo dès 2017 sur une app éjectée pour installer Intercom et OneSignal. J'ai trouvé un avantage à rester dans l'écosystème Expo malgré le poids additionnel d'ExpoKit. Il devrait être possible à terme de "ré-injecter" cette app, quand toutes les dépendances natives supporteront les Expo config plugins.

Extras:

Demo Bluetooth + Real-time Audio FFT in Expo: une demo Expo 43 managé qui montre bien tout ce qu'il est possible de faire aujourd'hui sans éjecter.
Demo Skia + Yoga: William Candillon propose une nouvelle démo Skia avec des animations de layout flexbox.
Demo wave animation
JSI Module Example: un template de lib utilisant JSI, qui sera peut-être à terme inclus dans Bob?

💸 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)

Shotgun: Dev Fullstack Senior - Remote - 60-75k€ (+BSPCE)

Shotgun c'est une billetterie et plateforme de streaming pour des évènements electro/techno 🎶. On a déjà les plus gros évènements en France, maintenant on s'agrandit à l'international (US/Brésil/Europe) 🌎. L'équipe est composée de 13 personnes et on fait déjà plusieurs millions d'euros de volume par mois. Malgré le Covid, on vient de faire le mois le plus rentable de notre histoire.

🌴 Remote OK (tu peux aussi travailler depuis nos bureaux de Marseille ou Paris)
📈 Challenge B2C : aider les gens à sortir et s'amuser (Recommandations / Social / UX aux petits oignons)
📈 Challenge B2B : soutenir les organisateurs dans la création et la promotion de leur event (CRM / Business Intelligence / Marketing / Finance)
🤖 Côté tech : ReactNative, React, Typescript, Apollo, GraphQL, NextJS, PgSQL, Vercel (serverless)

PS: j'ai travaillé en freelance pour Shotgun, l'environnement technique est plutôt cool et les gens sympas ☺️.

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 (+ CTO)

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

Divers

Matan donne un retour d'expérience sur la migration du projet Ricos vers TypeScript, éditeur de contenu créé en JS début 2018. Certains conseils déjà bien connus (migration incrémentale hybride JS/TS, automatisation des changements via regexp et codemods...). D'autres plus originaux, comme apprendre à ses collègues à lire les erreurs TypeScript, ou encore prioriser les migrations les plus importantes.

Extras:

How Partytown's Sync Communication Works: détaille les techniques utilisées pour faire tourner les scripts third-party dans un Web Worker.
Sondage Jamstack Conf 2021: Next.js et TypeScript ont de très bons scores (croissance, taille et satisfaction). Quelques autres sont bien placés: Vite, Vue, SvelteKit, Sanity, Strapi, Rust, Go...
typescript-todo-or-die-plugin: permet de mettre une date d'expiration sur un TODO, après laquelle tsc emet des erreurs.
tsm: permet d'executer du code TypeScript directement dans Node.js. Equivalent moderne à ts-node (comparaison).
schummar-translate: utilise les string template literals de TypeScript pour extraire les paramètres ICU.
NPM 8
ESLint 8
Ouverture du sondage State Of CSS