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

Bonjour à tous!

4 grosses news cette semaine:

Coté React, 2 articles intéractifs assez sympa.

Coté React-Native, Solito offre une abstraction cross-platform commune à React-Navigation et Next.js. De belles comparaisons avec Flutter.

La future landing page de la newsletter est bientôt prête. Je suis pas hyper bon en design alors n'hésitez pas à me donner des conseils 😅

🙏 Pour soutenir la newsletter: 

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.

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.

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.

Nicola rappelle que la nouvelle architecture arrive, et présente les différentes initiatives pour préparer la communauté:

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.

*…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.

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.

Sponsorise React Hebdo pour publier une offre d'emploi

Front en une journée, c'est:

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

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.

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