Voir le profil

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

React Hebdo #98: React 18 RC2, Framer Motion, 3D Avatar, Parca, React-Native, Solito, Flutter, TypeScript, Safari...
Par Sébastien Lorber • Numéro #98 • Consulter en ligne
Bonjour à tous!
4 grosses news cette semaine:
  • React 18 RC2 avec blog post officiel
  • Le rollout de la nouvelle architecture React-Native qui s'accélère
  • La proposition Microsoft pour ajouter des annotations de type dans JavaScript!
  • L'arrivée de plein d'APIs dans Safari 15.4
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
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.
Extras:
React-Native
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.
Extras:
💸 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
😱 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:
Avez-vous aimé ce numéro ?
Sébastien Lorber

Chaque semaine, je t'envoie les nouvelles les plus pertinentes pour un(e) dev React et React-Native ouvert d'esprit.

⚠️⚠️⚠️ La newsletter React change d'adresse ⚠️⚠️⚠️   
➡️ RDV sur ReactHebdo.fr 🇫🇷

Pour vous désabonner, cliquez ici.
Si on vous a fait suivre cette lettre d'information et que vous l'aimez, vous pouvez vous y abonner ici.
Propulsé par Revue
Lambda Scale - SIRET 82951115300027