This Week In React

Share this post

React Hebdo #84: React + Rust/WASM, preloading, eBay modals, Nextra, Parallax, Expo, Skia, TypeScript, Svelte...

substack.thisweekinreact.com

React Hebdo #84: React + Rust/WASM, preloading, eBay modals, Nextra, Parallax, Expo, Skia, TypeScript, Svelte...

Sébastien Lorber
Nov 30, 2021
Share this post

React Hebdo #84: React + Rust/WASM, preloading, eBay modals, Nextra, Parallax, Expo, Skia, TypeScript, Svelte...

substack.thisweekinreact.com

React

Cet article explique comment intégrer du code WebAssembly à vos applications React, en se basant sur Rust et Webpack. Ca demande un peu de gymnastique, mais ne semble pas insurmontable.

Par contre, il n'est pas évoqué ici le gain en performances qui ne sera pas forcément au rendez-vous, comme l'explique cet autre article assez détaillé: Is WebAssembly magic performance pixie dust? TL.DR: WebAssembly avec Rust ou AssemblyScript n'est pas nécessairement plus rapide que du JavaScript (cela dépend du programme, et cela risque de s'améliorer), mais permet d'avoir des performances prédictibles dès le lancement du programme, sans avoir à besoin d'attendre les optimisations JIT du moteur V8.

Note: Webpack utilise aussi des algos de hash en AssemblyScript.

eBay a publié une lib nice-modal-react utilisée en interne et donne quelques explications. Une des problématiques évoquée: vous avez sans doute un composant <MyModal> (stateless ou stateful) mais il n'est pas toujours simple de savoir ou render ce composant dans l'arbre. J'ai trouvé leur approche intéressante, assez proche également de ce que je fais: un Provider tout en haut permet de gérer le state des modales de toute l'app.

La série continue. Dans cette 3ème partie on ajoute la possibilité de pré-charger le bundle JS de la page suivante au survol d'un lien.

J'aime bien cette série d'articles car elle évoque des techniques utilisées par tous les meta-frameworks populaires: Next.js, Gatsby, Docusaurus, Remix...

Nextra est un outil pour créer des sites de contenus (docs, blog...) très facilement, basé sur Next.js et MDX. La dernière version upgrade vers MDX 2.0 et Next.js 12.

C'est une bonne alternative à Docusaurus (outil sur lequel je travaille), bien que proposant moins de features. En particulier si vous souhaitez rester dans l'écosystème Next.js et avez besoin de Server-Side-Rendering sur certaines parties de votre application.

Extras:

  • Make useRef lazy — 4 ways: propose différentes techniques pour retarder l'initialisation de la valeur d'une ref. Perso j'utilise use-constant, assez similaire à une de ces solutions.

  • Parallax Powered by CSS Custom Properties: Jhey à travaillé sur les animations du site de Kent C. Dodds et explique comment il utilise CSS vars, React, et GSAP.

  • TypeScript React props: interfaces vs type aliases: il y a quelques nuances à connaitre mais le choix importe peu dans beaucoup de cas.

  • Redux v8.0.0-beta.0: ré-écrit en TypeScript, prépare l'arrivée de React-18 avec l'usage de useSyncExternalStore

  • Storybook + Netlify CMS: montre une intégration possible entre Storybook et un CMS headless basé sur Git pour l'édition de fichiers MDX .stories.mdx: permet aux non-devs de contribuer plus facilement.

  • Remix Tutorial de 6h 🤯 avec Kent C. Dodds qui présente le tutorial Jokes App

  • Vercel supporte Remix, avec configuration automatique des headers http

  • Remix peut être déployé sur Deno

  • SVGR 2: utilise SVGO 2, jsx runtime, ré-écrit en TS

  • Gatsby Conf 2022 a été annoncé pour le 2 et 3 Mars

  • React Testing Library best practices

  • Nouvelle release React-Aria, avec un hook useLongPress

💸 Sponsors

Tu peux me soutenir et sponsoriser React Hebdo: offre d'emploi, produit, cours, agence…

Indy: la comptabilité repensée pour les indépendants

Liasse fiscale, exercice comptable, amortissement… c'est un langage que tu ne maîtrises pas ? Découvre Indy, la comptabilité repensée pour les indépendants 💪.

Grâce à la synchronisation bancaire sécurisée et à l'intelligence artificielle, les transactions bancaires sont automatiquement catégorisées. En quelques clics, les déclarations fiscales sont préremplies et télétransmises à l'administration. Un doute ou une question ? Un support client aux petits soins répond par chat sous 4 minutes 😍.

🔥 Pour essayer Indy gratuitement durant 2 mois et sans engagement, rendez-vous ici.

Être freelance, très peu pour toi ? Ils recrutent des profils tech à Lyon ! 

React-Native

Expo publie sa timeline pour déprécier la commande expo build en faveur du nouveau Expo Application Services, disponible gratuitement depuis quelques semaines. On a plus d'un an pour upgrader.

Extras:

  • How to build a universal design system using React Native for Web, Tailwind CSS and Dripsy: post intéressant sur le cross-platform. Mentionne capsize pour lisser le comportement des fonts (alignement) entre les plateformes.

  • De nouvelles démos Skia sur React-Native: FitBox, Breath, Gradient, Shaders. L'API impérative souhaite s'aligner sur celle proposée par Flutter (actuellement compatible à 90%).

  • react-native-sha: nouvelle lib qui démontre les avantages de JSI et C++: annoncée comme 160x plus rapide qu'un algo SHA en JS.

  • Je me demandais ces derniers temps pourquoi React-Native utilise JSI avec C++, et pas JSI avec Rust. J'ai trouvé quelques réponses qui ont conduit à des discussions intéressantes.

  • ffmpeg-kit: permet de faire du traitement vidéo ffmpeg sur mobile, inclus une interface React-Native.

  • Retour d'expérience EAS + Hermes

💸 Jobs

Luko | React Native Staff & Senior Engineer

Luko est la néo-assurance qui connaît la croissance la plus forte en Europe ! Notre ambition: rendre votre foyer plus sûr en travaillant de manière éthique. L’application est déjà notée 4.8/5 (iOS / Android) avec 100.000 visiteurs mensuels !

On recrute 2 profils pour rejoindre nos 6 ingénieurs React Native:

  • Staff Engineer: 80k€+

  • Senior Engineer: 60k€+

Au programme: Typescript, GraphQL, React Query, Shopify/Restyle, Testing Library, Detox, Bitrise…

CDI - Full-remote possible (notre culture) - Salaire + stock options (grille de salaire) + jours de congés illimités.

Divers

Vante les mérites de Volta pour gérer plusieurs versions de Node.js sur sa machine. Pour rappel, c'est un outil en Rust plus rapide que les outils JS.

Je suis passé à Volta avec mon nouveau Macbook M1 Pro. C'est plus rapide que nvm/avn (même si c'est peut être aussi lié au M1 ^^) et je n'ai eu aucun problème. Seul manque: il ne lit pas les fichiers .nvmrc ce qui implique de rajouter un attribut "volta" dans package.json.

Stefan explique que le besoin d'utiliser des function overloads en TypeScript est moins important depuis certaines features TypeScript (conditional types, variadic tuple types), mais si il reste cependant quelques cas d'usages intéressants à connaitre. Cet autre article est une bonne intro sur les overloads.

Extras:

  • JetBrains Fleet: JetBrains travaille sur un éditeur plus léger. J'ai toujours préféré mon Intellij à VSCode, mais l'interface en Java Swing est un peu lourde et old-school.

  • TypeScript vs JSDoc JavaScript

  • Modern CSS Reset / Global Styles: Josh Comeau commente son reset CSS

  • Introducing Svelte + Comparison with React and Vue

  • yourhome.fb.com utilise SvelteJS 😝

  • Prettier 2.5: TypeScript 4.5, MDX v2 comment syntax

  • The Vite Ecosystem

  • Publish ESM and CJS in a single package

  • What's New In DevTools (Chrome 97)

Twitter avatar for @markdalgleish
🎄🧁 Mark Dalgleish @markdalgleish
https://t.co/fhGaWwd4Nk
Image
8:42 PM ∙ Jan 18, 2023
Share this post

React Hebdo #84: React + Rust/WASM, preloading, eBay modals, Nextra, Parallax, Expo, Skia, TypeScript, Svelte...

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