This Week In React

Share this post

React Hebdo #98: React 18 RC2, Framer Motion, 3D Avatar, Parca, React-Native, Solito, Flutter, TypeScript, Safari...

substack.thisweekinreact.com

React Hebdo #98: React 18 RC2, Framer Motion, 3D Avatar, Parca, React-Native, Solito, Flutter, TypeScript, Safari...

Sébastien Lorber
Mar 16, 2022
Share this post

React Hebdo #98: React 18 RC2, Framer Motion, 3D Avatar, Parca, React-Native, Solito, Flutter, TypeScript, Safari...

substack.thisweekinreact.com

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é.

  • 📜 Why Did And Don’t You Need To Import React

  • 📜 Automatic batching support in React 18

  • 📜 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

  • 🎙️ Remix Podcast - Season 1

  • 🐦 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é

  • 🎥 Basic React To Svelte Conversion

  • 🎥 React Query in 100 Seconds

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é:

  • Le working group

  • Le guide de migration

  • 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-Skia with Christian Falch & Jamon Holmgren

  • 📦 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

  • 🧵 What's next in React Native?

💸 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 never de TypeScript

  • twitter-api-typescript-sdk: nouveau SDK officiel

  • CSS: @when or @if

  • SWC v1.2.154: minifier perf improvements

  • Vite 2.9 beta: much faster cold starts

  • pnpm-7.0.0-beta.0

  • TypeScript PR - Optional variance annotations

  • TypeScript: optional vs. undefined

  • StackBlitz February 2022 Update

  • StackBlitz has joined the Bytecode Alliance

  • Front-end Testing Strategy

  • What's New In DevTools (Chrome 100)

  • What Is Vitest?

  • Turborepo Demo (Remote Caching & Deploying to Vercel)

  • How Storybook helps designers & developers stay in sync

  • A look at the dialog element's super powers

  • Aligning Content In Different Wrappers

  • GraphQL error handling to the max with Typescript, codegen and fp-ts

  • Typescript Tuples, and how they work

  • How to use Google Analytics in Deno Deploy

  • Partytown 0.5

Twitter avatar for @TheEhsanSarshar
Ehsan sarshar 👋 @TheEhsanSarshar
@Ksound22 https://t.co/krXbgqtHHg
Image
8:42 PM ∙ Jan 18, 2023
Share this post

React Hebdo #98: React 18 RC2, Framer Motion, 3D Avatar, Parca, React-Native, Solito, Flutter, TypeScript, Safari...

substack.thisweekinreact.com
Previous
Next
Comments
TopNewCommunity

No posts

Ready for more?

© 2023 Sébastien Lorber
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing