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.

• 📜 How to manage the useEffect dependency array like a pro?

• 📜 A Deep Dive Comparison Between useMemo And useCallback

• 📜 Hosting a React App with OpenFaaS

• 📜 Improving Web Performance with React Hydration Strategies

• 🧵 Sebastian Markbåge: "One day, React will switch to only ESM"

• 🐦 Classic vs Shorthand Props

• 🎥 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:

• 📜 What makes Hermes engine (React Native) fast?

• 📜 How we made our React Native tests run 5x faster

• 🧑‍🎨 React-Native-Skia v0.1.105: animations, drop shadow...

• 🐦 Expo deprecating expo-app-auth

• 🐦 @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.

• 📦 react-native-reanimated-zoom

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

• Introducing Socket

• What's Really Going On Inside Your node_modules Folder?

• Why Vulnerability Scanning Isn't Enough To Protect Your App

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 --shard option, paralléliser les tests sur sa CI

• WebGPU — All of the cores, none of the canvas

• SPAs were a mistake

• Steve Schoger tips on dark mode

• Progressive enhancement + dark mode switch

• How to add types for Object.fromEntries

• Introducing The XState CLI

• New to the web platform in February 2022

• Safari Technology Preview 141

• New CSS Features In 2022

• Can you get pwned with CSS?

• Parcel CSS 1.5

• "Chrome 99 rolled out this week, with Cascade Layers on by default."

• Web devs rally to challenge Apple App Store browser rules

• Thoughts On Markdown

• Flightcontrol: world-class deployment DX natively to your AWS

• Cloudflare: Steps we've taken around Cloudflare's services in Ukraine, Belarus, and Russia

• Renovated Home For WAPM WebAssembly package manager

• A new year, a new MDN

Jacob Hands ⠕ @jachands

web dev: It's simple! https://t.co/MYJIEUg13q

8:42 PM ∙ Jan 18, 2023