React Hebdo #98: React 18 RC2, Framer Motion, 3D Avatar, Parca, React-Native, Solito, Flutter, TypeScript, Safari...
Discover more from This Week In React
React Hebdo #98: React 18 RC2, Framer Motion, 3D Avatar, Parca, React-Native, Solito, Flutter, TypeScript, Safari...
React
How to Upgrade to the React 18 Release Candidate
React 18.0.0-rc.2 vient juste de sortir (tag npm @rc). L'équipe React publie un blog post (+ 🧵 thread) pour nous préparer à l'arrivée de cette nouvelle version qui propose des features concurrentes (que l'on peut adopter incrémentalement).
Ils nous incitent à tester la release-candidate pour détecter les derniers bugs potentiels, et proposent un guide assez complet pour upgrader en documentant les breaking changes principaux. On y retrouve aussi une brève présentation de différentes nouvelles APIs.
Lisez directement ce post, il contient nombreux détails intéressants. Personnellement j'ai découvert le concept de Strict Effects et que les composants pourront maintenant render undefined.
Delightful React File/Directory Structure
Article intéractif de Josh Comeau sur ses choix en matière de structure file-system pour organiser une app React. Il explique notamment pourquoi il préfère une organisation par type plutôt que par feature. Je ne suis pas forcément d'accord avec tout, mais cela reste une lecture intéressante.
Everything about Framer Motion layout animations
Article intéractif qui présente les animations de layout avec Framer Motion. Très bien présenté, avec de nombreux exemples. J'ai bien aimé l'exemple des Tabs avec une shared layout animation: l'API est assez intuitive.
Extras:
📜 How to Use Three.js And React to Render a 3D Model of Your Self: article original qui propose de créer son propre avatar 3D, l'afficher avec React-Three-Fiber et lui faire faire du breakdance 😄 j'ai bien envie de tester ça.
📜 Profiling Next.js apps with Parca: je ne connaissais pas Parca. Cela semble être un outil de profiling intéressant pour ceux qui self-hostent leurs apps Node.js (avec Kubernetes par exemple). Dans cet exemple l'outil permet de détecter un problème de performance lié à l'usage non nécessaire d'immuabilité.
📜 What it's like to migrate a high-traffic website from Gatsby to Next.js
🧑🎓 Learn Next.js: nouvelle resource proposée par Vercel
👥 Xuan Huang: nouveau membre officiel de la core team React (travaille notamment sur React-Forget)
👥 Remix Conf Speakers annoncés
🐦 Malte Ubi: "JSX should be part of JavaScript" & Nicole Sullivan: "YES! But JSX is not enough on its own. Let me explain…"
🐦 form attribute, formAction: des APIs web qu'on (je) découvre en utilisant Remix 🤯
🐦 SolidJS signals in React + Preact/reactive addon: plusieurs expérimentations autour de la réactivité
React-Native
An update on the New Architecture Rollout
Nicola rappelle que la nouvelle architecture arrive, et présente les différentes initiatives pour préparer la communauté:
La nouvelle doc sur l'architecture
La possibilité d'activer facilement la nouvelle architecture dans React-Native 0.68, qui sort prochainement
La conversion des libs third-party
Le moteur Hermes par défaut
Solito
Fernando Rojo pousse régulièrement l'innovation dans le domaine du cross-platform (voir aussi Moti et Dripsy). Solito permet de partager encore plus de code entre web et mobile en proposant des abstractions de navigation partagées entre React-Navigation et Next.js. Ca fait un moment qu'il travaille sur ce sujet, il ne s'agit pas de la première itération. Il propose un exemple de monorepo pour bien démarrer.
Flutter is better than React Native*
*…in all the ways that don’t matter 😄
Jamon reconnais que Flutter est bon sur beaucoup d'aspects (DX, CLI, e2e tests, upgrades, performances...). Il présente de manière honnête les tradeoffs des 2 frameworks, et il n'y a pas forcément d'ultime vainqueur. Certains points importants sur lesquels Flutter peut difficilement rivaliser: le partage du code et de la connaissance entre backend/web/mobile, ainsi que la capacité à recruter.
Flutter Web vs HTML, CSS & JS: Performance Comparison
Intéressant pour un dev React-Native (et un peu lié à l'article ci-dessus) car il met bien en avant les limites de son concurrent Flutter pour supporter le web, là où React-Native-Web fonctionne bien: Flutter web n'est pas un bon choix pour les sites de contenu mais reste une bonne solution pour les apps. A noter que React-Native-Skia sur le web aura des tradeoffs similaires.
Extras:
📜 Avoid Keyboard in React Native Like a Pro: resource exhaustive qui documente avec des gifs le comportement iOS et Android de plusieurs libs de l'écosystème pour gérer le clavier virtuel: c'est clairement pas la partie la plus simple de React-Native 😅
🧑🎨 React-Native-Skia: inner shadows, animations
📦 React-Native-Performance: supporte maintenant iOS
📦 React-Native TVOS 0.66.3-2: support de Fabric sur Apple TV
📦 React-Native-Gesture-Handler 2.3: support de Fabric
💸 Jobs
Sponsorise React Hebdo pour publier une offre d'emploi
Front: Développeur Senior Full-stack / Front-end (React / NodeJS) - Remote / Paris - 60-80k€ + stock options
Front en une journée, c'est:
30 déploiements en production sur 1500 serveurs
10 MM d'évènements temps réel
plus de 100,000 utilisateurs dans plus de 7000 entreprises
Nous développons une plateforme ayant pour but de réunir tous les canaux de communications d'une entreprise, en alliant collaboration et efficacité. Front est l'outil de travail principal de nos clients et nous devons faire attention à chaque détail: Front est une app très complexe avec une grande exigence de performance. On utilise React, Redux ou encore Styled Components, le tout en Typescript.
Nous avons 350 collaborateurs, dont 80 développeurs autour de hubs à San Francisco, Paris, Chicago et Dublin. Full remote possible, « Flexible Friday », environnement de travail en anglais, Salaire entre €60K - €72K + stock option (en fonction du niveau d'expérience)
Cycle App: Lead Frontend Engineer – Remote ou Paris/Brussels – 60-80k€ (+ stock options compétitives)
Cycle, c'est un outil de collaboration pour les équipes produit : on aide les PMs, les développeurs et les designers à mieux travailler ensemble tout en prenant en compte le feedback de leurs clients. Lancé avec eFounders en 2019, on a construit un produit "no code" très flexible qui s'adapte à n'importe quelle typologie d'équipe produit. On a levé 4.5M$ avec des fonds prestigieux aux US et on s'apprête à sortir de beta.
On a de beaux défis produit en perspective et dans ce contexte on recrute plusieurs développeurs dont un Lead Frontend Engineer sur une stack moderne : real-time editor, React avec TypeScript (avec GQL codegen), GraphQL (Apollo avec cache avancé: TypePolicies, optimistic UIs), monorepo et UI-kit (styled components + storybook).
Cajoo: Dev & Architecte Fullstack - Remote - 40-90k€ (+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
A Proposal For Type Syntax in JavaScript
😱 Microsoft travaille sur une proposal TC39 (stage-0) pour apporter des annotations de type au langage JavaScript, inspiré par TypeScript (minus enums, namespaces etc...).
Attention, il ne s'agit pas pour le browser de faire du type-checking, mais simplement d'accepter la syntaxe et ignorer ces annotations (un peu comme si il s'agissait de simples commentaires). Le type-checking restera du domaine d'un outil externe (comme TypeScript, mais pas seulement).
Cela à surtout un interet en développement: on pourra directement executer du code TypeScript sans transformation dans le browser. Pour la production, on continue de bundler, car minifier et retirer les types reste utile (voir l'analogie de Ryan Cavanaugh avec la minification).
Voir aussi le site de la proposal.
Extras:
New WebKit Features in Safari 15.4: un paquet de nouveautés! Beaucoup de features qui sont maintenant disponibles dans tous les principaux navigateurs et qui vont donc progressivement devenir utilisable en production (comme les CSS container queries!).
Tao of Node - Design, Architecture & Best Practices: après son populaire Tao of React, Alex liste de manière exhaustive les principes qu'il suit pour développer ses apps Node.js.
A Complete Guide To TypeScript’s Never Type: article assez complet sur le bottom-type
neverde TypeScripttwitter-api-typescript-sdk: nouveau SDK officiel
SWC v1.2.154: minifier perf improvements
Vite 2.9 beta: much faster cold starts
GraphQL error handling to the max with Typescript, codegen and fp-ts
