Skip to main content

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

· 8 min read
Sébastien Lorber

Hi everyone!

The newsletter is late: a new React RFC gave me a lot of reading 😄 The article by Kent C. Dodds is quite long as well but worth it. We've got 2 articles highlighting Sandpack in 2 weeks, it's probably worth looking into!

It's moving well on the React-Native core side too, with new open discussions. We could even think that after the migration to the new architecture and the stabilization of public APIs, there could be a 1.0 release? It doesn't matter much in practice, but some apparently care deeply about having a major version.

There are also quite a few interesting new things in the frontend ecosystem. I'm particularly interested in Codeflow, Fontaine and Unplugin which may be of direct interest to Docusaurus.

Speaking of Docusaurus, I was invited to talk about it in the Changelog JS Party podcast.

💡 Check this newsletter on Twitter - visual format 🎨

To support me:

Don't miss the next email!

    💸 Sponsor​

    Sizzy - the browser for developers

    How come professionals in every other industry have specialized tools, but web developers are still stuck using the browser that their grandma is using for shopping on Amazon?

    If you're opening localhost:3000 in any other browser except Sizzy, you're wasting hours of your precious time.

    Before Sizzy: web development is stressing you out, responsive design is hard, you have an overwhelming amount of opened tabs and apps.

    After Sizzy: all the tools you need are in one place, responsive design is a breeze, no more context switching.

    You can download it here and try it for free for 14 days!

    ⚛️ React​

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

    The React team decided to go back to an async/await model to simplify the use of Server Components. Problem: it is difficult to support async/await on Client Components. So they propose to introduce a use(promise) API on the client side. Unlike other hooks, use can be called conditionally. Later it could be used with other "usables" like the React context (in reality, you can already use useContext conditionally!). Using different APIs can also be seen as a feature: it allows to distinguish Server Components from Client Components.

    This RFC gives rise to interesting debates. We wonder what the integration with data-fetching libraries will look like. The use of generators seems to be suitable for this case, but they are difficult to use in practice. We are waiting for a new RFC that will introduce a cache API.

    The Web’s Next Transition

    Kent C. Dodds offers a nice retrospective of the 3 main web architectures, very well illustrated and documented. He highlights the latest architecture, the trend of the moment: Progressively Enhanced Single-Page-Application. Remix is an implementation of this, with well thought abstractions that encourage to emulate the native behavior of the browser. I don't really agree that a server is absolutely necessary. Docusaurus is also a PESPA implementation that works well without JavaScript.

    A World-Class Code Playground with Sandpack

    Josh Comeau praises Sandpack, the CodeSandbox toolkit he uses to create interactive code playgrounds. It looks easy to use and very flexible!

    Don't miss the next email!

      💸 Sponsor​

      Chain React - The US React Native Conference - May 17-19 2023 Portland Oregon

      Chain React - The US React Native Conference - May 17-19 2023 Portland Oregon

      Chain React returning for the 4th annual premiere React Native conference in May of 2023. The best minds, companies, and partners you won't want to miss.

      • Workshops | May 17, 2023 - We have three exciting workshops for all different skill levels! These exclusive workshops happen on May 17th at the official Speaker's hotel. There, you'll learn, mingle, and get direct access to experts.

      • Conference | May 18-19, 2023 - Our main event! This is where companies announce big news, developers share secrets, and lifelong friendships are made. The main conference is never live-streamed.

      📱 React-Native​

      2022: How can we improve React Native?

      The React-Native team would like to have feedback on what needs to be improved in React-Native. Some points mentioned: CSS support (Yoga, gap, grid, shadows...), cross-platform support, version upgrades, debugging, keyboard, Metro symlinks...

      🧑‍💻 Jobs​

      🧑‍💼 Product Engineer at Causal, Remote/London/NY, $150-250k

      Causal is a Series A Startup (backed by Coatue/Accel) building an all-in-one tool for working with numbers and visualizing data. We're looking for strong React engineers who can solve difficult UX/performance challenges.

      🧑‍💼 G2i - 100% Remote React Native Jobs

      We have several roles open for developers focused on React Native! Pay is ~160k plus 10% bonus. You must have production experience with RN and be based in the US. DM @gabe_g2i to learn more and don't forget to mention This Week in React.

      💡 How to publish an offer?

      🔀 Other​

      StackBlitz Codeflow

      The StackBlitz WebContainers technology allows to run Node.js in the browser via WebAssembly. You can run VS Code, Next.js or Docusaurus directly in your browser, and not via a remote Docker container. Codeflow adds the whole layer of integration with GitHub that makes it easy to open, review or edit a pull-request by running it locally in a secure way: extremely useful for open-source projects.

      They also launched Web Publisher, a simplified editing view for Markdown files (editor, preview, save button). Very handy for contributing to documentation on Git, even for less technical users. There is a real preview of the content, and not the degraded experience of the GitHub Markdown preview. This is an important need for Docusaurus users.

      Fontaine - Automatic font fallback based on font metrics

      Permits to avoid layout shifts when loading a custom font. Makes the fallback font the same size as the final font, so that the transition is smooth and does not impact the size of the text containers. Great idea!

      🤭 Fun​

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


      Don't miss the next email!