React Hebdo #104: Zag, Ultra, ClickToComponent, Tilg, Next.js, Remix, Component Party, Expo, Skia, TypeScript...
React Hebdo #104: Zag, Ultra, ClickToComponent, Tilg, Next.js, Remix, Component Party, Expo, Skia, TypeScript...
React
Click To Component
Nouvelle lib très pratique, qui permet d'ouvrir facilement le fichier source d'un composant React, avec un simple Option + Click sur l'interface. Supporte CRA, Next.js, Vite... Ne fonctionne qu'avec VS Code, mais d'autres IDEs semblent prévus, comme Intellij.
Zag
Zag est une collection de composants primitifs basés sur des state machines. Cela permet de découpler la logique du framework, et de proposer un binding pour React, Vue, Solid... Cette nouvelle solution va permettre à la lib React Chakra UI d'être adaptée plus facilement à d'autres frameworks, tout en partageant un maximum de code.
Why I don't miss React: a story about using the platform
Jack travaille chez Google sur les Chrome DevTools depuis 2 ans. Depuis, il n'utilise plus React, et partage son retour d'expérience sur sa transition vers des APIs web standardisées qui ne nécessitent pas de dépendances: formulaires, custom elements...
Moving from Next to Remix
Kristofer a migré son site personnel de Next.js vers Remix, pour s'amuser. Il donne son retour d'expérience, et partage l'impact sur le score Lighthouse. Il liste les principaux changements qu'il a du effectuer: intégration Chakra, composant Link, routing, data fetching, metadonnées...
How HashiCorp developers iterate faster with ISR
Retour d'expérience sur l'usage de Incremental Static Regeneration de Next.js pour réduire les temps de build des sites de documentation chez HashiCorp. Le nouveau mode "on-demand ISR" permet d'invalider le cache Next.js et donc de donner un feedback immédiat lors de la publication d'une update.
Extras:
💡 Next.js Router Upgrade: Next.js va supporter les nested routes, et un design qui permet d'utiliser les features React 18 et les Server Components
🧑🎨 L'outil de design 3D Spline peut maintenant exporter vers React-Three-Fiber: cela peut permettre rendre votre scene interactive
🔗 Component Party: site qui propose de comparer facilement la syntax de React avec d'autres frameworks (Vue, Svelte, Solid...) sur différents use-cases.
🏢 Convex: nouvelle database serverless temps-réel avec un binding React. Ils viennent de lever $27m et s'intègrent avec Netlify ou Vercel.
🎥 The Story of Concurrent React: 10 minutes sur l'histoire de Concurrent React, de 2016 à aujourd'hui.
📦 Ultra 1.0: le meta-framework React pour Deno vient d'annoncer sa v1
📦 React 18.1: principalement des bugfixes
📦 useTilg: un hook React pour faciliter le debug de vos composants
💸 Sponsors
App.js Conf 2022 - 8-10 Juin à Cracovie
Après deux longues années, App.js Conf revient avec une conf en personne ! Rencontrez les créateurs de React Native & Expo, apprenez des meilleurs, ou amusez-vous simplement avec d'autres développeurs du monde entier ! Notre line-up est pleine de professionnels du développement mobile prêts à partager leurs connaissances. Découvrez nos incroyables speakers ici !
En plus de la conférence de deux jours, nous avons également préparé des ateliers pratiques d'une journée! Il reste encore quelques places pour deux de nos ateliers :
Modern intro to app development with React and Expo par Lydia Hallie et Evan Bacon;
Setting up a professional development process with Expo and EAS par la team Expo team!
Réservez les billets pour un atelier avec une réduction exclusive de 20 % pour les abonnés ! Utilisez le code ThisWeekinReact20 ou suivez ce lien pour réserver votre place.
PS: moi j'y vais cette année 😉
React-Native
Expo SDK 45 beta is now available
Le nouveau SDK Expo passe en beta pour une semaine. Quelques nouveautés sympas:
React-Native 0.68.1: Expo passe sur la dernière version, mais sans activer le renderer Fabric pour l'instant
redesign de Expo Go, avec une meilleur intégration de EAS Update et la possibilité de voir et ouvrir les branches
plusieurs libs migrées vers JSI et/ou Expo Sweet Module API
nouveau CLI expo (beta), qui sera versionné et installé localement plutot que globalement
les libs wrapper Expo sont dépréciées: on peut utiliser les libs natives originales via des config plugins
React Native Skia - For Us, For You, and For Fun
Skia est le moteur 2D de Google, et vous l'utilisez très certainement: Chrome, Flutter, Android... Shopify supporte le développement de React-Native-Skia pour fournir les primitives graphiques/2D manquantes à React-Native, et ne pas être limité lors de l'implémentation d'un design complexe. La lib propose une API déclarative expressive, mais aussi une API bas-niveau impérative compatible avec Flutter, ce qui pourrait aider au support web via React-Native-Web et CanvasKit.
Extras:
📦 React-Native 0.69-rc.0: première version basée sur React 18, avec possibilité d'utiliser les features concurrent.
📦 React-Native-Graph: nouvelle librairie de graph avec animations, basée sur React-Native-Skia
🎥 Charts with React-Native-Skia: dernière video de William Candillon
🐦 React-Native-WishList preview: Marc Rousavy travaille sur une nouvelle lib de liste virtualisée performante en React-Native, qui devrait combler les lacunes de FlatList
🎥 RN.live: chaine live de Jamon Holmgren sur React-Native
📜 Using RevenueCat with Expo's Managed Workflow: montre bien la facilité avec laquelle on peut intégrer une lib native dans Expo
📜 Twitter going all in on Jetpack Compose: ça me fascine toujours autant de savoir que Twitter utilise React-Native sur le web, mais pas React-Native sur mobile 😄
📜 Apple Gets Ready to Eliminate Almost 30% of Apps in the App Store: votre vieille app pourrait être dépubliée 😅
💸 Jobs
💡 Sponsorise React Hebdo pour publier une offre d'emploi
Nabla: Front-end engineer React senior - Paris - 55k-90k
Nabla construit une plateforme de médecine asynchrone (chat sans rendez-vous + appel vidéo si besoin), en automatisant un maximum de tâches répétitives pour que les médecins se concentrent sur le soin et que le service reste accessible à tous.
Ils ont levé 17M€, remporté un award Google Play Best Apps of 2021 et viennent de lancer la première offre payante dédiée à la santé des femmes.
Les fans de hooks React et de Typescript se sentiront à la maison, ainsi que les amateurs de GraphQL, Tailwind, Vite ou Next.js. Pas mal de technos sympa à découvrir (WebRTC et codegen notamment)
Paris 3ème, remote possible, 55k-90k en fonction de l'expérience, + BSPCE.
Maki : Développeur Frontend / Fullstack Senior - 65k / 80k
La mission de Maki est de permettre à chaque entreprise de recruter des talents sur mesure. Maki propose des tests d'évaluation standardisés avant l'embauche pour identifier les meilleurs candidats et accélérer les décisions des entreprises, sans préjugés.
Si comme nous vous aimez résoudre des problèmes complexes de façon simple, à l'aide d'outils modernes (ping TypeScript, React-Query, MUI, Playwright, …), afin de proposer des expériences fluides et efficaces, le tout dans une ambiance décontractée (si si), alors venez discuter avec nous :)
Paris 9ème - full remote possible - 65k / 80k en fonction de l’expérience + BSPCE
Divers
TypeScript Error Translator
Nouvel outil en ligne qui propose de traduire vos erreurs TypeScript en langage humain, facile à comprendre, avec des explications en plus (source)
Keeping TypeScript Type Guards safe and up to date
Evoque un problème auquel je n'ai jamais 😅: si vous avez un type-guard qui se base sur un attribut d'objet, et que vous rajoutez un 2nd attribut, votre type-guard n'est plus bon mais TypeScript compile toujours.
Extras:
Web Scraping via Javascript Runtime Heap Snapshots: technique de scraping originale, qui consiste à extraire les objets JS directement en mémoire
Node 16.15: support experimental
fetchbackportéLerna is now an officially dead project. Le projet n'était pas maintenu depuis un moment. Il y a des alternatives comme Nx et Turborepo
Nx 14 vient de sortir
Zaplib post-mortem: retour d'expérience qui démontre une fois de plus que Rust et Wasm n'est pas toujours plus rapide que JavaScript
WebAssembly vs Javascript: "don't use WebAssembly primarily for performance"
google/wireit: upgrades your npm scripts to make them smarter and more efficient
