JSJam Live, Wednesday at 12pm PT
This week we'll be continuing our React Rally collaboration with David Khourshid and Shirley Wu so get ready cause whether you like it or not we're gonna be talking about state machines! Make sure to set a reminder here. Last week we had an all star panel featuring Tejas Kumar and Mark Erikson. Check out the recording here.
Stories of the Week
One Step Closer to RSC with Redwood v6
RedwoodJS has taken a significant step into the future with their release of Redwood v6.0.0. It brings a plethora of updates including:
- The integration of Vite, a build tool that launches the development server over twice as fast as Webpack.
- The enhanced speed of Prisma v5 utilizing a new JSON-based wire protocol.
- Storybook v7 is its first major release filled with new features and fixes in over two years.
- A revamp of Redwood's router to employ Suspense, laying the foundation for future streaming and the integration of React Server Components.
- The default logging experience has been streamlined to reduce verbosity thanks to the community's contributions.
- The team also provided an upgrade guide with further details.
Astro 3.0 Beta and 2.10 Release
The release of Astro 2.10 brought a very exciting new feature for those interested in the new View Transition API which seeks to give MPAs the power of SPAs. It is now possible to persist state across different pages using View Transitions. This is important because it closes the gab between what is possible with MPAs using View Transitions and current day SPAs.
The initial release of the
<ViewTransition /> router allowed for smooth page transitions but would re-render stateful elements. Version 2.10 introduces the
transition:persist directive to the API, allowing for the preservation of the state of DOM elements during transitions between pages. Using
transition:persist, elements like videos can continue playing even as users navigate between pages.
For example, adding this directive to a
<video> tag will ensure its current state is transferred to the next page if that video is present there. This feature is not limited to videos but is also applicable to client-side framework components. For instance, the state of a counter can be maintained across pages. To learn more, check out the View Transitions Guide.
Astro also introduced the first beta version of Astro 3.0, available as
email@example.com. This release mainly focuses on deprecating and removing outdated patterns, but users should be cautious as there might be compatibility issues or breaking changes. The beta is still undergoing rapid changes. Key changes in this release include:
- HTML compression is now enabled by default.
- API routes have adopted capitalized method names, e.g.,
export function GET() ....
- Adapters can now communicate the features they support, such as page-specific entrypoints and compatibility with Sharp/Squoosh.
The complete list of changes can be found in the changelog. Although there's no documentation on breaking changes yet, a guide is in progress. More details on the changes will be provided as the release of 3.0 approaches. A release candidate will be available once all breaking changes are addressed, and the stable version of 3.0 is anticipated for late August to early September.
- Dave Rupert - If Web Components are so great, why am I not using them?
- Marco Salazar, Pete Hunt - Speeding up the dbt docs by 20x with RSCs
- Alice Alexandra Moore - Understanding React Server Components
- Rayan Kazi - How to Send Emails with React Using Resend
- Bun Guides - A collection of code samples and walkthroughs for Bun
Podcasts of the Week
- SyntaxFM - Standard Server JS - Deno, Workers, Bun and More
- PodRocket - Next-generation React architectures with Mikael Brevik
- PodRocket - Angular in 2023 with Minko Gechev
- SyntaxFM - Remix with Ryan Florence
- Shop Talk - Shawn Wang on AI
- React Round Up - Migrating to React Query from Redux with Pierre Hedkvist
- Whiskey Web and Whatnot - TypeScript, React, API Issues with Matt Pocock
One More Thing
Jack Herrington continues to provide the best cutting edge tips for React with Know App Router Secret: Promises For Props:
Find us online at the following links: