This Week In React

Share this post

React Hebdo #89: Remix, Remotion, Preact, Nextra, Relay, JSI, Skia, SwiftUI, TypeScript, web3...

substack.thisweekinreact.com

React Hebdo #89: Remix, Remotion, Preact, Nextra, Relay, JSI, Skia, SwiftUI, TypeScript, web3...

Sébastien Lorber
Jan 12, 2022
Share this post

React Hebdo #89: Remix, Remotion, Preact, Nextra, Relay, JSI, Skia, SwiftUI, TypeScript, web3...

substack.thisweekinreact.com

React

Some Thoughts on Server State in Remix

Une réflexion intéressante sur la gestion du state et des appels serveurs dans Remix, qui est designé pour fonctioner aussi bien avec que sans JavaScript coté client.

Run Next and Remix on the same server

Un setup intéressant, qui montre qu'on peut mélanger Remix et Next.js dans un même serveur Node.js, ce qui peut faciliter une migration incrémentale de l'un vers l'autre

Remix, SQLite, and Prisma, Oh my!

Encore une belle démonstration des features de Remix. Le fait de pouvoir appeler Prisma depuis les loader functions est assez puissant. Cela rappelle d'autres solutions comme Next.js et les serveur components, mais de manière plus co-localisée.

Remotion 2.6

Dernière release de la lib de production vidéo en React. Le player Remotion est maintenant stable. Un nouvel Error Overlay et un template Audiogram. La prochaine release sera surement la 3.0 avec le support du rendering serverless et la possibilité d'encoder hyper rapidement ses vidéos!

Extras:

  • Avoid waterfalls of queries in Remix loaders: même si Remix arrive à paralléliser les requêtes, il faut quand même utiliser Promise.all() à l'intérieur d'une fonction loader

  • Remix recrute: remote-first, 4h d'overlap USA: ça peut passer si vous aimez travailler le soir 😉

  • Preact now has a Tutorial: un tutoriel officiel de 10 minutes

  • Relay 13.0: avec le nouveau compiler en Rust

  • Nextra 2.0 work-in-progress: une belle stack prévue pour cet outil de doc pour Next.js, de quoi concurrencer Docusaurus 😯

  • Three ways to create 3D particle effects: pour ceux qui comme moi se lancent dans Three.js 😏

React-Native

A React Native Engineer Builds A SwiftUI App

Un dev React-Native qui essaie SwiftUI. La connaissance de React et du modèle déclaratif est un plus. Retours positifs sur les animations, la navigation et le "hot reload" SwiftUI. Retours plus mitigés sur les messages d'erreur, la syntaxe imbriquée et quelques autres détails.

Extras:

  • react-native-reanimated-carousel: nouvelle lib basée sur Reanimated 2

  • Marc Rousavy nous upgrade vers JSI: react-native-jsi-image & "react-native-camera has now been deprecated in favor of react-native-vision-camera"

  • Fela: Writing state-driven styles for React & React Native

  • An overview of all keyboard types available in React Native

  • La conf app.js reviens en Juin, le CFP ouvre demain.

  • docusaurus-react-native-plugin: support React-Native-Web 😍

  • 🎥 The Matrix Reacts: 1er tutoriel React-Native-Skia de William Candillon, avec une belle intro Remotion 😉

  • 🎙️ RNR 223 - Difference between React.js and React Native?

💸 Jobs

Sponsorise React Hebdo pour publier ton 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.

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

How not to learn TypeScript

Super article de Stefan Baumgartner, plein de bons conseils avec lesquels je suis bien d'accord. Cela devrait faciliter la prise en main de TypeScript et une montée en compétence progresssive. Je découvre le flag noEmitOnError.

A New Container Query Polyfill That Just Works

Analyse de Chris Coyier sur un nouveau polyfill pour les container queries: une nouvelle feature très attendue pour l'encapsulation du responsive design (media queries) dans les frameworks basés sur les composants. Ce polyfill à l'air fonctionnel pour un usage dès aujourd'hui, mais il faudra attendre un peu pour l'utiliser avec du Server-Side-Rendering sans FOUC.

My first impressions of web3

Lecture très intéressante sur le “web 3” par le créateur de Signal qui montre que ça n'est pas encore au point. Pas mal de réponses intéressantes des leaders Web 3 (Vitalik). Lire aussi The Myth of Decentralization and Lies about Web 2.0. Ca m'a inspiré unpost LinkedIn.

NAPI-RS v2

Lib qui permet à Node.js d'intéragir de manière efficace avec du code Rust, de plus en plus utilisée dans notre tooling frontend. La v2 est un rewrite rétro-compatible qui résoud certaines limitations existantes. Le but semble à terme de supporter aussi WASM pour partager le code Rust avec le browser sans effort additionel.

Extras:

  • Browser-Vite: une solution pour faire tourner Vite dans le browser. Comparaison intéressante avec les WebContainers de StackBlitz à la fin.

  • Partytown en beta: lib pour améliorer les perfs de vos pages en offloadant les scripts third-party dans un service-worker

  • AWS Lambda supporte maintenant ES modules et top-level await!

  • Un maintainer open-source sabote volontairement ses propres libs colors & faker.js: met en avant le problème de financement open-source

  • Prettier begins paying maintainers: mais… même pas assez pour payer qu'un à plein temps 😅

  • On se demande qui va recruter Jamie Kyle… 😏

  • Svelte Core Team Mulls Rust Compiler to Further Speed Web Apps

  • Solid 1.3: des améliorations sur le server rendering qui supporte le streaming, les error boundaries et l'hydratation “Islands architecture” inspirée d'Astro

  • Tina: New Year, New CMS? Il faut vraiment que je teste, le support natif de MDX semble intéressant!

  • fast-json-stringify 3.0: reporté comme 2x plus rapide que JSON.stringify

  • TypeScript-Compiler-Notes

  • 🎥 The Story of TypeScript

  • 🎥 Imperative vs Declarative Programming

  • Design integrations for Storybook

  • Parcel 2.1

  • New in Chrome 97

  • Introducing fuite: a tool for finding memory leaks in web apps

Twitter avatar for @_chenglou
Cheng Lou @_chenglou
Using React https://t.co/lMvAsShr41
Image
8:42 PM ∙ Jan 18, 2023
Share this post

React Hebdo #89: Remix, Remotion, Preact, Nextra, Relay, JSI, Skia, SwiftUI, TypeScript, web3...

substack.thisweekinreact.com
Previous
Next
Comments
TopNewCommunity

No posts

Ready for more?

© 2023 Sébastien Lorber
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing