Voir le profil

React Hebdo #97: React vs Solid, Headless Components, FS-structure, Remotion, Gatsby, React-Native, Expo, Skia, Vitest, Socket, Interop 2022...

React Hebdo #97: React vs Solid, Headless Components, FS-structure, Remotion, Gatsby, React-Native, Expo, Skia, Vitest, Socket, Interop 2022...
Par Sébastien Lorber • Numéro #97 • Consulter en ligne
Bonjour à tous!
Nouveau: page LinkedIn + communauté Twitter: n'hésitez pas à rejoindre/suivre pour me donner un coup de pouce initial. Je compte y partager du contenu (en anglais) de manière informelle.
React 18: une nouvelle RC et un blog post viennent juste d'être publiés 😅 trop tard pour cette semaine, on en parle la semaine prochaine ;)
Cette semaine j'ai trouvé l'article React vs Solid vraiment intéressant. Celui sur la do-notation aussi (assez avancé).
Belle intro vidéo à Remotion en 10 minutes: si vous ne connaissez pas c'est l'occasion de découvrir!
Une nouvelle feature Vitest qui permet de co-localiser un test avec son code source dans le même fichier. Ca ne va pas plaire à tout le monde 😏 moi j'adore 😍.
Les Issues du repo React (entre autre) ont été spammées par des supporters pro-Russie qui n'ont pas apprécié le bandeau de support à l'Ukraine sur le site web.
🙏 Pour soutenir la newsletter: 

React
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”.
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.
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.
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…
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:
React-Native
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.
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:
💸 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
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:
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:
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.

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