React Hebdo 17# - React, ReactNative, Gatsby, Flip, TypeScript, dark mode...

React

Josh Comeau explique comment rajouter des fonctions serverless à son site Gatsby, intégré au workflow CI Netlify (git push -> deploy).

Web Animations API (WAAPI), FLIP, React... L'auteur nous présente aussi sa lib React-easy-flip.

Ca ne fait pas de mal de le rappeler, tellement ces erreurs sont courantes:

• mutations du state

• non-usage de la forme fonctionnelle

• lecture du state juste après setState

Post intéressant de Jared Palmer qui explique pourquoi il préfère NextJS à Gatsby, avec des arguments plutôt solides.

Une issue CRA donne les raisons d'éviter l'usage de l'interface React.FC 

ReactNative

Nouveau projet de galerie photo ReactNative en Reanimated 2, par un des contributeurs de la nouvelle implémentation.

Avec pager, pinch zoom... 

Liste d'apps ReactNative open-source

Post bien expliqué sur la nouvelle archi React-Native

Exemple de mise en place d'une transition light<->dark mode animée en React Native avec Reanimated transitions

Shared element transitions dans react-native-navigation (Android, Kotlin au programme).

Divers

Les devices ont des spécificitées de plus en plus variées. Le design mobile-first marche dans la majorité des cas, mais c'est de moins en moins le cas. Canva raisonne en "capacity-first".

Axel Rauschmayer rend disponible gratuitement son livre au format HTML.

ECMAScript 4 (prévu pour 2008) n'a jamais été releasé. On est passé directement de ES3 a ES5. Analyse des features qu'on aurait pu avoir...

Certains disaient qu'il n'y avait pas encore grand chose de prévu pour TS4. Cette nouvelle feature change la donne. Devrait aider a typer certains usecases un peu avancés (méthode FP curry par ex).

Exemple d'utilisation de ce nouveau comment (TS 3.9) sur les tests, quand on veut vérifier que l'utilisateur utilise bien une API avec les types attendus (particulièrement les utilisateurs JS qui n'auront pas d'erreur à la compilation)

Il vaut mieux ne pas le modéliser le "color scheme" avec booléen, car d'autres valeurs sont à prévoir.

No(t) Rollup -> Nollup
Encore un nouvel outil qui propose d'améliorer l'expérience en dev.