React Hebdo #84: React + Rust/WASM, preloading, eBay modals, Nextra, Parallax, Expo, Skia, TypeScript, Svelte...
React
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.
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
useSyncExternalStoreStorybook + 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
SVGR 2: utilise SVGO 2, jsx runtime, ré-écrit en TS
Gatsby Conf 2022 a été annoncé pour le 2 et 3 Mars
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.
💸 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
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.
Modern CSS Reset / Global Styles: Josh Comeau commente son reset CSS
