React Hebdo #34: NextJS, Quirrel, React->SwiftUI, Lottie, Records & Tuples, npm...

React

Je partage les slides de mon talk sur Records & Tuples à FrontSide conf jeudi dernier.

Il y a une démo sympa, ou on voit que les perfs de render React peuvent être améliorées par cette prososal JS en stage 2.

Je compte faire un blog post dans la semaine pour présenter un peu mieux la démo.

Post intéressant de Maxime, dev React qui se met à SwiftUI. Montre que les connaissances React sont largement transposables à d'autres frameworks déclaratifs.

Sur le même thème, j'ai bien aimé cet article sur les loading states en SwiftUI, on y retrouve encore pas mal de ressemblances avec ce qu'on peut faire en React.

Quirrel propose de simplifier le scheduling de jobs sur un projet NextJS. Par exemple, si vous souhaitez envoyer un email marketing 1h après le signup du user.

2 options: SaaS payant ou self-hosted.

Leboncoin partage sur la migration d'un framework ReactJS legacy (RocJS) vers NextJS, en passant par un design system.

Je crois que je vous ai déjà partagé l'article original (en anglais), mais je le remet, car je vois de plus en plus de retours d'expérience de migrations réussies, ou l'étape du design system / Storybook est un élément clé.

Guillermo Rauch et Tim Neutkens participent à un Q&A, avec quelques parties assez intéressantes. Il semble que Webpack 5 pourrait avoir un impact assez conséquent sur les temps de build d'apps statiques, en plus de permettre un meilleur caching au niveau du CDN.

Olivier nous montre comment utiliser React-testing-library pour créer des tests qui vont resister aux refactorings, en restant découplé des détails d'implémentation.

ReactNative

Article complet sur l'intégration d'animations Lottie en ReactNative: de After Effects au code React, en passant par le theming...

Bonne introduction de l'API Animated de ReactNative, avec la création d'un bouton animé qui marchera aussi bien sur mobile que sur le web.

Divers

Exercice de réimplémentation des hooks React useState et useReducer, en Vue 3 Composition API. Permet de réduire un peu le boilerplate, mais les différences de fonctionnement entre Vue 3 et React restent présentes, Vue 3 étant basé sur la réactivité.

Sur les projets JavaScript / React avec une API, je crée très souvent 2 fichier: ApiClient et Api. J'explique pourquoi sur LinkedIn. Un post Dev propose une approche assez similaire.

Comment faire un test unitaire sur une fonction non exportée? Samantha présente Rewire, pour répondre à ce problème.

C'est sans doute pas une pratique à généraliser, mais c'est toujours mieux que d'exporter juste pour les tests.

Yann, dev français créateur du CMS Fireblog, nous propose un historique intéressant de la Jamstack de Jekyll à Gatsby, et le rôle de Netlify, l'apparition des CMS headless...

Pour en finir avec l'incompréhension selon laquelle votre site statique doit forcément utiliser du JavaScript et des APIs. Nicolas propose le terme Mstack, avec un focus sur le markup.

Donne plusieurs bonnes raisons pour arrêter d'utiliser le type any. 

Et en profite pour parler de plusieurs projets open-sources qu'ils ont releasé, qui pourraient bien être utiles. Je note par exemple: un parser frontmatter, un port des templates Liquid en Node, un bot qui permet de synchroniser 2 repos Git...

Les features principales: workspaces, l'installation de peerDependencies, améliorations lockfile.

Une démo qui met en avant les dangers de copier une commande sur un site, et coller dans son terminal.

Pour des raisons de privacy, 2 sites chargeant JQuery de la même URL CDN ne bénéficieront plus d'un cache navigateur partagé, permettant à un site de bénéficier du chargement déjà effectué par l'autre site.