React Hebdo #40: Boop!, Closures, Code Smells, Nextra, Purview, ReactNative 0.64, TypeScript...

React

Encore un super article de Josh Comeau, sur les petites animations spring qu'il rajoute au survol d'un élément.

Kent C Dodds nous décrit un bug souvent présent dans les codebases utilisant les classes: l'usage de "this" dans les processus asynchrones, et l'accès a des attributs qui changent dans le temps. Avec les hooks, ce problème disparait naturellement (plus de "this").

Liste 7 code smells qu'on retrouve assez souvent dans les codebases. Difficile de faire une liste exhaustive des problèmes les plus courants, mais lors de mes missions de conseil React, ces problèmes reviennent très souvent.

Passe en revue quelques solutions modernes avec du rendu coté serveur. On parle brièvement de Redwood, Turbolinks, Phoenix LiveView... 

J'y ai surtout découvert Purview, qui semble vouloir proposer un équivalent de Phoenix LiveView pour NodeJS.

Un générateur de site statique de documentation reposant sur Next.js est développé par des devs Vercel. Propose une solution très simple d'usage, basée sur des conventions.

ReactNative

Après quelques difficultés techniques, ReactNative 0.64 est enfin dispo en release candidate.

• React 17

• Inline require par défaut

• Hermes pour iOS

• Hermes Proxy

• Android minSDK 21+

• ...

J'attends avec impatience une annonce officielle de Microsoft pour le support de Hermes sur iOS.

Note: ça a l'air de bouger sur le support de Intl dans Hermes, qui ne semble plus avoir autant de limites qu'avant.

Coinbase explique comment ils ont profilé leurs problèmes de performances. Présente une solution originale pour l'optimisation du rendu des écrans react-navigation qui n'ont pas le focus.

William Candillon et Jonny Burger discutent du problème classique du clavier virtuel qui masque les inputs, et de la difficulté à trouver une solution cross-platform. Divergence d'implémentation entre iOS et Android, de l'effet de android:windowSoftInputMode, fonctionnement avec Expo...

De mon coté, je créé toujours un composant AppKeyboardAvoidingView, dans lequel j'encapsule le comportement souhaité, pour avoir un usage consistant sur toute l'application, et j'utilise souvent react-native-keyboard-aware-scroll-view.

Satya nous propose une intégration entre react-natigation et le composant Modal de React Native.

Divers

Stefan Baumgarten commence une série d'articles "Tidy TypeScript" où il compte partager certaines de ses convictions

Pour son 1er article, il donne de bonnes raisons de privilégier les union types par rapport aux enums.

J'ai également cette opinion, et rappelons que Bloomberg nous conseillait la même chose.

Mise à jour de la doc TypeScript sur la performance des temps de compilation.

• Preferring Interfaces Over Intersections

• Using Type Annotations

• Preferring Base Types Over Unions

Au même moment, Stefan Baumgartner publie Prefer type aliases over interfaces 🤪.

La proposal TC39 qui permet de "wrapper" une exception pour rajouter du context (gros manque pour moi) est passée en stage 2.

On reproche souvent à ReactNative (et autres frameworks cross-platform) d'être en "retard" par rapport à la plateforme cible, et de moins bien performer. 

Cet article montre bien que le problème n'est pas si simple, et explique certaines limites actuelles de SwiftUI.

Article complet qui propose une syntaxe imaginaire de déclaration de variable JavaScript, et la solution technique pour la transpiler en syntaxe valide (parsing en AST, transformation, génération de code).

Dans le même genre, je vous conseille également le Babel handbook.

Un language de programmation qui propose d'écrire des fichiers .wasp peu verbeux qui seront compilés en application full-stack.

Semble un peu expérimental, mais à surveiller.