Aller au contenu principal

📨 #120: use RFC, Sandpack, Progressive enhancement, Streaming, Storybook, React-Native, Codeflow, Fontaine, Unplugin, Node.js 19, TypeRunner...

· 9 minutes de lecture
Sébastien Lorber
Sébastien Lorber
Editeur - Mainteneur de Docusaurus

Salut à tous !

La newsletter est en retard: une nouvelle RFC React m'a donné beaucoup de lecture 😄 L'article de Kent C. Dodds est assez long également mais vaut le coup. On a 2 articles qui mettent en avant Sandpack en 2 semaines, ça vaut sans doute le coup de s'y intéresser!

Ca bouge bien coté React-Native core également, avec de nouvelles discussions ouvertes. On pourrait même penser qu'après la migration vers la nouvelle architecture et la stabilisation des APIs publiques, il pourrait y avoir une release 1.0?

Il y a aussi pas mal de nouveautés intéressantes dans l'écosystème frontend. Je suis particulièrement intéressé par Codeflow, Fontaine et Unplugin qui peuvent avoir un intérêt direct pour Docusaurus.

En parlant de Docusaurus, voir aussi:

💡 Consulter cette newsletter sur Twitter - format visuel 🎨

Pour me soutenir:

Ne manque pas le prochain email !

    💸 Sponsor​

    Sizzy - le navigateur pour les développeurs

    Les professionnels de tous les autres secteurs d'activité disposent d'outils spécialisés, mais les développeurs Web sont toujours obligés d'utiliser le navigateur que leur grand-mère utilise pour faire ses courses sur Amazon ?

    Si vous ouvrez localhost:3000 dans un autre navigateur que Sizzy, vous perdez des heures de votre temps précieux.

    Avant Sizzy: le développement web vous stresse, le responsive design est difficile, vous avez une quantité écrasante d'onglets et d'applications ouverts.

    Après Sizzy: tous les outils dont vous avez besoin sont au même endroit, le responsive design est un jeu d'enfant, plus de changement de contexte.

    Vous pouvez le télécharger ici et l'essayer gratuitement pendant 14 jours !

    ⚛️ React​

    React RFC: First class support for promises and async/await

    L'équipe React a décidé de revenir sur un modèle async/await pour simplifier l'usage des Server Components. Problème: il est difficile de supporter async/await sur les Client Components. Ils proposent donc d'introduire une API use(promise) coté client. Contrairement aux autres hooks, on peut appeler use conditionnellement. Plus tard on pourra l'utiliser avec d'autres "usables" comme le context React (en vrai, on peut déjà utiliser useContext conditionnellement!). Utiliser des APIs différente peut aussi être vu comme une feature: cela permet de bien distinguer les Server Components des Client Components.

    Cette RFC donne lieu a des débats intéressants. On se demande a quoi ressemblera l'intégration avec les librairies de data-fetching. L'usage de générateurs semble adapté au cas de figure, mais ils sont difficiles à utiliser en pratique. On est en attente d'une nouvelle RFC qui proposera une API de cache.

    The Web’s Next Transition

    Kent C. Dodds propose une belle rétrospective des 3 grandes architectures web, très bien illustré et documenté. Il met en avant la dernière architecture, tendance du moment: Progressively Enhanced Single-Page-Application. Remix en est une implémentation, avec des abstractions bien pensées qui incitent a émuler le comportement natif du navigateur. Je ne suis pas d'accord sur la nécessité absolue d'un serveur. Docusaurus est aussi une implémentation PESPA qui fonctionne bien sans JavaScript.

    A World-Class Code Playground with Sandpack

    Josh Comeau vante les mérites de Sandpack, la boite a outils de CodeSandbox qu'il utilise pour créer des code playgrounds intéractifs. Cela à l'air simple d'utilisation et très fléxible!

    Ne manque pas le prochain email !

      💸 Sponsor​

      premier octet - Agence de développement React

      Premier Octet - Agence de développement React

      Premier Octet est une agence de développement d'applications web et mobile. Depuis 2008, nous accompagnons de nombreux clients grâce à notre expertise en React et React Native.

      Plus concrètement, nous intervenons en développement, conseil, audit ou formation, sur des thématiques JavaScript serveur et front. Nos projets embarquent des technologies open source telles que :

      • Next.js
      • Nest.js
      • ChakraUI
      • NativeBase
      • Strapi

      N'hésitez pas à aller voir notre site premieroctet.com pour plus d'informations !

      📱 React-Native​

      2022: How can we improve React Native?

      L'équipe React-Native aimerait avoir avis retour sur ce qu'il faut améliorer dans React-Native. Quelques points mentionnés: le support CSS (Yoga, gap, grid, shadows...), le support cross-platform, les montées de version, le debugging, le clavier, les symlinks Metro...

      🧑‍💻Jobs​

      🧑‍💼 Matters - Senior Software Engineer (React/Node)

      Envie de challenges et de contribuer à des réussites entrepreneuriales ? Rejoins notre startup studio pour construire des produits variés et complexes dans une culture devOps, une stack JS, des code reviews, tests et déploiements automatisés. Paris, remote flexible, 50K€-65K€.

      🧑‍💼 Masteos - Lead ReactJS - Hybride ou Remote - 75-90k€

      Masteos réinvente l’expérience de l’investissement locatif, en proposant un parcours entièrement dématérialisé et un accompagnement de haut niveau aux particuliers qui souhaitent acheter un bien pour le louer.

      🧑‍💼 Linxea - Lead Dev React.js - 60-75k€

      Plateforme leader de l’épargne en ligne. Stack tech : ReactJS, Redux, Saga, Formik, Storybook, Webpack, Typescript. Skills : architecture, développement, pratiques craft (clean architecture, clean code ,TDD), mentoring et formation des équipes. Paris 75008 - 2j de TT/sem.

      💡 Comment publier une offre d'emploi ?

      🇫🇷 En français​

      💡Tu peux m'envoyer ton contenu: sebastien@thisweekinreact.com !

      🔀 Autre​

      StackBlitz Codeflow

      La technologie StackBlitz WebContainers permet de faire tourner Node.js dans le navigateur via WebAssembly. On peut executer VS Code, Next.js ou Docusaurus directement dans votre navigateur, et non pas via un conteur Docker distant. Codeflow vient rajouter toute la couche d'intégration avec GitHub qui permet d'ouvrir facilement une pull-request ou de lancer l'execution du code d'une pull-request en local pour une revue de code.

      Ils ont aussi lancé Web Publisher, une vue d'édition simplifiée pour éditer des fichiers Markdown (éditeur, preview, bouton save). Très pratique pour contribuer à de la documentation sur Git, même pour les utilisateurs moins techniques. Il y a une véritable preview du contenu, et non pas l'expérience dégradée de la preview GitHub. C'est un besoin important pour les utilisateurs Docusaurus.

      Fontaine - Automatic font fallback based on font metrics

      Propose d'éviter les layout shifts liés au chargement d'une font custom. Fait en sorte que la font de fallback ait la même dimension que la font finale, pour que la transition soit douce et n'impacte pas la taille des conteneurs texte. Super idée!

      🤭 Fun​

      Meme - When an ESLint rule is a warning instead of an error. - oh no - anyway (nobody cares)


      Ne manque pas le prochain email !