React Hebdo #88: Remix, Next.js, React 18, Storybook, Skia, Expo, Turborepo, Nx, Rising Stars, Learning Patterns...
React Hebdo #88: Remix, Next.js, React 18, Storybook, Skia, Expo, Turborepo, Nx, Rising Stars, Learning Patterns...
React
J'aime beaucoup ce format de conf. Les talks sont très courts et vont à l'essentiel (inspiré de Next.js conf? 😏). C'est facile de trouver le temps de les regarder. Mon thread Twitter permet aussi de survoler les infos importantes.
Belle année pour Storybook qui fait le point sur 2021: Webpack 5, Vite builder, automatic code splitting, plus rapide à démarrer... Il y a aussi un nouveau Plugin ESLint, et ils ont publié UI Testing Handbook.
En 2022 on continuera à voir de belles améliorations: tests, performance, ESM, stabilité, embeds et intégration avec outils de design et documentation...
Extras:
Articles sur les hooks React 18: useId et useSyncExternalStore
Create-React-App v5: upgrade attendue, support de Webpack 5
Blitz: faible traction, pourrait pivoter et devenir framework agnostic
React Three Fiber Journey: resource pour suivre le cours Three.js Journey (3D) en React
Remix 1.1: support Node.js ESM et Cloudflare Pages
Remix: pas d'export static prévu, on est encouragés à utiliser wget 🤔 et pourquoi pas?
remix-routes: CLI pour générer des routes typesafes en Remix (pour Next.js: pathpida).
React-Native
Skia est le moteur graphique 2D de Google, utilisé par Flutter, Android, Chrome, Firefox...
Un renderer Skia pour React-Native vient de sortir, supporté par Shopify, et implémenté par William Candillon et Christian Falch
Une API impérative très performante (utilise JSI, sans bridge), 100% compatible avec celle de Flutter en Dart. Compatibilité qui permet de réutiliser CanvasKit et WebAssembly pour proposer un rendu web performant via React-Native-Web 🤯 Les animations de la vidéo de présentation utilisent déjà ce support web via Remotion.
Au dessus, une API déclarative très intuitive, qui s'intègre avec les libs d'animation comme Reanimated. Tout ça finira par être dispo dans Expo!
Ricky Hanlon à React-Conf: "We are not building React for individual platforms, and we are not building for the lowest common denominator". Une différence fondamentale entre React-Native et Flutter:
Flutter lisse les différences entre plateformes: ça peut faire gagner du temps, mais ça peut coincer avec certaines plateformes (comme pour le web: perf et SEO...)
React-Native ne lisse pas ces différences, et c'est 100% volontaire. On peut choisir de lisser optionnellement, quand cela a du sens (avec ce nouveau projet par exemple)
C'est la raison pour laquelle je parie sur React: une incroyable capacité à s'interfacer avec du natif et ré-utiliser les innovations des autres écosystèmes. On le voit avec Skia, Three.js... et bientôt la VR?
Le SDK 44 est dispo, basé sur React-Native 0.64.3.
EAS Update en preview: nouveau service qui devrait améliorer la DX des Over-The-Air updates avec Expo. Rattrape le retard sur son concurrent CodePush (rollout, rollback, promote...) et se rapprocher de la DX web qu'on aime tant: deploy previews, continuous deployment...
expo-dev-client 0.8.0: nouvelle UI, meilleur gestion des erreurs, Flipper...
nouveaux modules pour customiser les couleurs de navbar et background (voir cette démo).
Upgrade des libraries Software Mansion: Reanimated, RNGH, Screens...
Extras:
React-Native doc: nouvel onglet Architecture dispo. La nouvelle doc pour adopter cette architecture (PR)
🎙️ React-Native-Radio 222 - The New Architecture with Kevin Gozali from the RN core team. Bien résumé dans la newsletter d'Andrei Calazans.
💸 Jobs
Sponsorise React Hebdo pour publier ton offre d'emploi
Nabla: Front-end engineer React senior - Paris - 55k-90k
Nabla construit une plateforme de médecine asynchrone (chat sans rendez-vous + appel vidéo si besoin), en automatisant un maximum de tâches répétitives pour que les médecins se concentrent sur le soin et que le service reste accessible à tous.
Ils ont levé 17M€, remporté un award Google Play Best Apps of 2021 et viennent de lancer la première offre payante dédiée à la santé des femmes.
Les fans de hooks React et de Typescript se sentiront à la maison, ainsi que les amateurs de GraphQL, Tailwind, Vite ou Next.js. Pas mal de technos sympa à découvrir (WebRTC et codegen notamment)
Paris 3ème, remote possible, 55k-90k en fonction de l'expérience, + BSPCE.
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)
Divers
2021 JavaScript Rising Stars
Belle vue d'ensemble des projets populaires dans l'écosystème JavaScript en 2021 (mesuré via les stars GitHub), avec commentaires. J'ai eu l'opportunité de commenter la section Build Tools.
Why TurboRepo Will Be The First Big Trend of 2022
Bonne intro à Turborepo, particulièrement utile pour ceux qui n'ont pas le temps de regarder la vidéo.
Note: Nx est un projet similaire, plus ancien, avec plus de features (belle croissance cette année). Ils ont créé une page pour comparer Nx et Turborepo. Jared Palmer commente: "Turbo aims to underdo the competition": faire moins de chose volontairement, être un outil plus simple. A mon avis, il y a de la place pour ces 2 outils qui vont continuer à se démocratiser. Voir aussi: 🎥 Video avec les créateurs Nx.
Extras:
Learning Patterns: superbe resource pour apprendre les patterns (design, rendering, performance...).
Why Vitest: Vitest veut remplacer Jest 😏
JavaScript for impatient programmers ES2022 update
