React Hebdo #97: React vs Solid, Headless Components, FS-structure, Remotion, Gatsby, React-Native, Expo, Skia, Vitest, Socket, Interop 2022...
Discover more from This Week In React
React Hebdo #97: React vs Solid, Headless Components, FS-structure, Remotion, Gatsby, React-Native, Expo, Skia, Vitest, Socket, Interop 2022...
React
Solid.js feels like what I always wanted React to be
Explique pourquoi Solid est plus simple que React. Solid est réactif, qui update directement le DOM (sans virtual DOM). La fonction de rendue n'est appelée qu'une seule fois, même si le state change, et il n'y a pas de problèmes de stale closure. Un bon article pour découvrir les différences entre ces 2 frameworks.
Je trouve Solid vraiment intéressant. A court terme ça peut être une très bonne alternative à React pour les apps web. J'attends cependant de voir l'usage pratique des innovations de React 18 car je pense que le virtual DOM présente un interet pour les "concurrent features".
Headless components in React and why I stopped using a UI library for our design system
Nir raconte son histoire: de l'usage de React-Bootstrap et MUI à l'implémentation d'un autocomplete en partant de 0, pour finir par utiliser une lib headless qui encapsule le comportement et l'accessibilité. Une bonne intro pour comprendre l'interet des libs headless, qui liste aussi les libs populaires de l'écosystème.
Screaming Architecture: Evolution of a React folder structure and why to group by features right away
Johannes nous montre comment il refactor progressivement sa structure file-system pour garder son app maintenable dans le temps. Un cheminement de pensée intéressant. Je ne pense pas qu'il y ait de solution universelle qui convienne à tout le monde. Personnellement j'aime les arborescences fractales, et j'aimerais beaucoup que les IDEs proposent de tagger les fichiers.
What’s New at GatsbyConf 2022
Gatsby propose maintenant un Image CDN qui permet de réduire les temps de build et optimiser le chargement (Note: Netlify propose un équivalent). D'autres améliorations notables annoncées: incremental deploys, support complet de TypeScript, GitHub Enterprise, trailing slash...
Hooks: React’s do-notation
Pour les amateurs de FP. Devansh explique qu'on peut convertir chaque hooks en render-prop, mais pas l'inverse, et qu'il ne s'agit que d'un sucre syntaxique pour éviter le "callback hell". Il fait le rapprochement avec la do-notation de Haskell et ses monads, et propose une solution pour le rendu conditionnel de hooks React.
Extras:
🇫🇷 Améliorer les performances de React: article complet et en français ;)
📜 Building Pages in Storybook: Storybook n'est pas limité au design system et peut aussi être utilisé sur des pages complètes. La nouvelle fonction
play()semble utile pour reproduire rapidement certains edge cases de son app.🧵 Sebastian Markbåge: "One day, React will switch to only ESM"
🎥 Remotion + Fireship: bonne intro pour découvrir Remotion
🎥 10 React Antipatterns to Avoid: Fireship propose d'éviter quelques anti-patterns React. Un bon rappel.
React-Native
Expo: EAS Update Preview Progress
Expo partage ses avancées sur EAS Update, le nouveau système d'updates Over-The-Air actuellement en preview. Il est possible d'associer un release channel à une branche Git et de faire du continuous delivery. Ils ont aussi amélioré les performances, la sécurité, et travaillent sur une UI web pour simplifier l'usage.
React Native + Github Action = ❤️
Propose un workflow complet pour automatiser le build d'apps React-Native. Le build est déclenché lorsqu'une nouvelle release GitHub est détectée. Il y a un peu de boulot, mais ça démontre que Fastlane n'est peut être plus aussi indispensable.
Extras:
🧑🎨 React-Native-Skia v0.1.105: animations, drop shadow...
🐦 @margelo_io (Marc Rousavy) partage des tips React-Native
📦 Stacks: ensemble de primitives React-Native pour créer vos layouts. Encapsule la pratique d'éviter les marges. La v2.0 vient de sortir.
💸 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
Socket: Secure your JavaScript supply chain
Nouvel outil pour détecter les failles de sécurité de type supply-chain: les libs npm compromises que vous utilisez dans vos apps.
Propose une approche différente et pro-active: plutôt que de rechercher des vulnérabilités connues, assume que tout package npm peut être compromis et recherche des indicateurs en se basant sur l'historique des packages qui ont déjà été compromis. Un outil à adopter rapidement, vu le nombre d'attaques de ce type en forte augmentation. Lire aussi:
Interop 2022: browsers working together to improve the web for developers
Les équipes des principaux browsers vont travailler ensemble en 2022 pour améliorer la compatibilité sur 15 points qui sont particulièrement douloureux pour les développeurs aujourd'hui. Il y a même un dashboard avec un score de compatibilité pour chaque browser. On retrouve entre autres les cascade layers, color functions, viewport units, scroll, subgrid...
Extras:
Vitest v0.6: avec une super innovation: In-source testing permet de co-localiser ses tests avec le code source.
Monorepos are changing how teams build software: Vercel donne 4 bonnes raisons pour adopter le monorepo
The
<selectmenu>HTML element: un nouveau composant HTML pourrait remplacer progressivement<select>Future Javascript: ShadowRealms: feature TC39 passée en stage-3 recemment. Permet d'executer du code en isolation.
Implementing Node.js URL parser in WebAssembly with Rust: retour d'expérience intéressant: utiliser Rust compilé en WASM n'a pas amélioré les performances
Jest
--shardoption, paralléliser les tests sur sa CI"Chrome 99 rolled out this week, with Cascade Layers on by default."
Flightcontrol: world-class deployment DX natively to your AWS
Cloudflare: Steps we've taken around Cloudflare's services in Ukraine, Belarus, and Russia
