React Hebdo #73: React-Native, Skia, Deno, TypeScript, Jest, SWR, Stately, Relay, Stitches, Solid, App History, TC39...

React

Un framework React pour Deno qui mise sur la modernité. Support des modules ES, streaming server-side rendering, React 18, pas de bundling, lazy routing... Projet récent (alpha), donc a suivre dans le temps. Pourrait un jour concurrencer Next.js?

Les snapshots Jest sont souvent décriés par les développeurs React expérimentés. Ils testent trop de détail d'implémentation et cassent trop souvent. Cet article décrit les problèmes, et met en avant quelques usages légitimes avec React.

Perso j'aime bien les snapshots Jest, mais j'avoue que j'en ai un usage très limité avec React et le VDOM: je les utilise plutôt coté Node.js pour les messages d'erreur (inline) et les gros state sur lesquels créer des fixtures peut être assez verbeux. Les snapshots Jest doivent faire parti du process de code review. Si vous ne regardez pas le diff, autant s'en passer!

Il existe plusieurs façons de typer les props de ses composants React en TypeScript, en particulier quand un composant en utilise un autre qui a lui même ses propres props. Cet article propose de typer un composant de 3 façons différentes, et analyse les avantages/inconvénients de chaque approche en terme de lisibilité du code.

Retour d'expérience sur la maintenance dans le temps de la webapp Bedrock, commencée en 2014 en React 0.x. Un post complet, et les leçons ne s'appliquent pas qu'a React: automatisations, CI, tests, monitoring, feature flipping, AB testing, gestion des dépendances, de la sécurité, de la dette technique...

Extras:

• React polymorphic components with TypeScript

• Migrating Notion's marketing site to Next.js

• Nouveau Stately Vizualizer (state machines)

• SWR 1.0 (data fetching, Vercel)

• Relay 12.0 (client GraphQL)

• Stitches 1.0 (CSS-in-JS)

• React Render Tracker

• Hashnode est la plate-forme idéale pour les développeurs qui souhaitent se connecter à la communauté tout en conservant la propriété de leur contenu et de leur domaine.

• Hashnode facilite l'usage d'un nom de domaine personnalisé: le référencement du domaine que vous créez au fil du temps vous appartient, et non à la plate-forme.

• Au-delà des aspects techniques, Hashnode dispose d'une audience massive et en croisssante pour votre contenu, dès le premier jour.

• Vous possédez ce que vous créez sans avoir à tout construire à partir de zéro, et Hashnode vous connecte avec vos futurs fans, qui attendent avec impatience de vous découvrir.

• En bonus: support de Markdown, coloration syntaxique, sauvegardes automatiques GitHub, et aucune publicité ou paywall, à jamais.

• Démarrez votre blog et rejoignez la communauté mondiale des développeurs sur Hashnode dès aujourd'hui!

ReactNative

William Candillon dévoile une d'API qui permet de faire tourner Skia (moteur 2D derrière Flutter et Chrome) dans React-Native!

C'est déjà le 2eme projet qui propose de porter Skia sur React-Native (après React-Native-Skia). Cette nouvelle solution reste dans la philosophie React, avec plus d'escape hatches, et la possibilité d'utiliser Skia sur une partie de son app seulement sans forcément tout render avec, donc une adoption incrémentale facilitée.

Une API impérative bas niveau pour l'instant (pas encore open-sourcée). J'attends de voir avec impatience ce qui sera construit au dessus. Niveau cross-platform, ça devrait tenir la route également. Sur le web le bundle sera potentiellement plus lourd à cause de CanvasKit (comme pour Flutter).

Voir aussi le thread de Christian Falch avec une vidéo et plusieurs démos. Un élément me semble important: React-Native pourrait être meilleur que Flutter pour mélanger des vues Skia avec des vues natives.

L'équipe React-Native partage sa vision multi-plateforme de sa technologie qui historiquement est plutôt utilisée sur mobile iOS / Android. Le progrès sur une plateforme React-Native peut bénéficier à d'autres plateformes. Il ne faut pas nécessairement voir les plateformes natives comme des concurrents, mais plutôt comme des sources d'inspiration, et React-Native peut être un catalyseur qui permet de propager certaines pratiques d'un écosystème à l'autre.

Des détails intéressants sur l'usage de React-Native sur Desktop et VR.

Un article intéressant qui décrit comment tout l'univers mobile passe progressivement sur un modèle d'UI déclaratif, initié par React-Native.

Donne un bon aperçu de l'univers mobile en 2021: React-Native, Flutter, SwiftUI, Jetpack Compose... Quelques bouts de code qui se ressemblent d'une plateforme à l'autre. Et si le "Learn Once, Write Everywhere" de React pouvait en fait s'élargir à d'autres languages et frameworks?

Je ne partage pas toutes les opinions de l'auteur sur React-Native (voir discussions Twitter). Il n'a pas l'air de trouver un grand intérêt au partage de code entre plateformes, et parle surtout de iOS et Android. Pour autant, on voit de nombreux retours d'expérience qui démontrent bien l'intérêt du code sharing (pas qu'en JS: C++, Kotlin Multiplatform Mobile...

Voir aussi les autres posts de la série Increment sur le dev mobile.

Extras:

• Preparing Your App for iOS 15 and Android 12

• React-Native-Screens 3.6

• Reanimated 2.3-alpha.3: nouvelle doc des Layout Animations

• Shared Elements 3.1.2: support de React-Navigation 6

• Bottom Sheet 4.0

• Fabric feature flag: un booléen permet d'activer le renderer

• Metro-Minify-Esbuild

Jobs

Shotgun: Dev Fullstack Senior - Remote - 60-75k€ (+BSPCE)

Shotgun c'est une billetterie et plateforme de streaming pour des évènements electro/techno 🎶. On a déjà les plus gros évènements en France, maintenant on s'agrandit à l'international (US/Brésil/Europe) 🌎. L'équipe est composée de 13 personnes et on fait déjà plusieurs millions d'euros de volume par mois. Malgré le Covid, on vient de faire le mois le plus rentable de notre histoire.

• 🌴 Remote OK (tu peux aussi travailler depuis nos bureaux de Marseille ou Paris)

• 📈 Challenge B2C : aider les gens à sortir et s'amuser (Recommandations / Social / UX aux petits oignons)

• 📈 Challenge B2B : soutenir les organisateurs dans la création et la promotion de leur event (CRM / Business Intelligence / Marketing / Finance)

• 🤖 Côté tech : ReactNative, React, Typescript, Apollo, GraphQL, NextJS, PgSQL, Vercel (serverless)

PS: j'ai travaillé en freelance pour Shotgun, l'environnement technique est plutôt cool et les gens sympas ☺️.

Une offre ci-dessous t'intéresse? Contacte moi à cet email!

Ask Mona: dev React confirmé - CDI Paris 45-50k

Ponicode: dev JS/React - CDI Paris 40-65k

Shift: dev React senior - CDI Paris 50-60k

Alkemics: dev Python/React - CDI Paris/remote

Choose: dev React-Native - CDI Paris 50-60k

Bloom: dev fullstack NodeJS/React senior - CDI Neuilly 60-70k

Splio: dev fullstack React/NodeJS senior - CDI Paris 60-70k

F4: dev NodeJS - CDI Paris 40-50k

Aria: dev NodeJS - CDI Paris - 45-60k

Divers

Les SPAs reposent actuellement sur l'API History, mais celle-ci n'a pas été prévue à la base pour les usages qu'on en fait aujourd'hui, et présente de nombreuses limitations. Un exemple: j'ai cherché récemment comment connaitre la "direction" d'un event popstate et je n'ai pas trouvé de solution.

App History est une proposition WICG prévue pour Chrome 95 (flag experimental), et permettrait de combler ces lacunes, en donnant plus de contrôle et d'events pour manipuler l'historique de navigation.

Leur API event.transitionWhile(loadPageAsync()) semble particulièrement intéressante pour avoir un support natif des navigations qui font des requêtes (fetch de bundle JS ou data), en donnant un feedback normalisé à l'utilisateur,. Cela pourrait bien s'intégrer avec React 18 et le pattern render-as-you-fetch.

Sur le même sujet: voir les APIs close watcher et shared elements transition.

De nouvelles proposals ECMAScript progressent. Mes coups de coeur:

• Change Array By Copy (stage 2): permettent de modifier les arrays de manière immuable.

• Pipeline operator (stage 2): c'est la variante "hack style" qui progresse (avec des réserves si j'ai bien compris)

• Class Static Blocks (stage 4): j'aimais bien utiliser ça en Java il y a 10 ans ^^ pas sur d'en avoir trop besoin aujourd'hui car je n'aime pas trop les classes, mais c'est tout de même sympa

Charlie Gerard nous propose une introduction à Solid, un framework qui a de très bons benchmarks et semble intéresser de plus en plus de monde. On peut dire que le code ressemble d'ailleurs beaucoup à (createEffect, createMemo) sauf que le runtime est assez différent: réactif, utilise de vrais noeuds DOM et se base sur des proxys pour tracker les dépendances et updates.

Extras:

• TypeScript 4.4

• TypeScript: tail-recursive evaluation of conditional types

• Type Guards In TypeScript

• Rome pourrait ré-utiliser le compiler swc

• GitHub CLI 2.0

• Does shadow DOM improve style performance?

• What's New In DevTools (Chrome 94)

• Access modern GPU features with WebGPU

• Why Electron apps are fine