JavaScript Jam Live on Wednesday
This Wednesday, join us for another JavaScript Jam Open Mic where we'll be talking about the JavaScript news of the week including Hydration vs. Resumability, TypeScript 5.1, and Jetpack AI.
Last week, we talked with speakers from SailsConf about the framework's upcoming online conference plus what makes the old school MVC framework worth using in web development circa 2023.
Stories of the Week
The Map is Not the Tree-itory
In Hydration is a tree, Resumability is a map, Manu delves into the concepts of hydration, partial hydration, React Server Components (RSC), and resumability in frontend development. Hydration is the process by which frameworks like React, Vue, Svelte, or Angular add interactivity to a previously executed server-side tree of components. This algorithm works by re-executing the whole app from the root to recover the state and event handlers.
Partial hydration, promoted by the Astro framework, challenges this process by suggesting not all parts of the tree need to be re-executed, instead creating 'islands of interactivity' to reduce the browser workload. React Server Components, however, operate through Sparse Hydration, maintaining a single root but eliminating the need to re-execute server components in the browser. Instead, React serializes the vNodes into the HTML as data.
Resumability, on the other hand, represents a fundamental shift in algorithm design. This paradigm eliminates the need for hydration or walking up components, instead placing event handlers at the root of the process, not the components. This reversal means there is no need to run user code, even for components that can re-render, treating all components as static.
The efficiency of this approach is notable, as it operates as a constant-time, O(1) architecture, unlike the O(N) nature of hydration. It's emphasized that hydration-based frameworks cannot transition to resumability without significant changes. The article concludes by indicating that while hydration, partial hydration, and RSC allow developers different trade-offs, resumability is a distinct algorithm.
TypeScript 5.1
Since the beta and RC versions, several updates have been made with the release of TypeScript 5.1. Adjustments have been done to init hooks in decorators and emission behaviors under isolatedModules. Built-in refactorings have also seen modifications.
Some features have been temporarily limited to nightly versions. However, there is an expectation to re-introduce these features in TypeScript 5.2. Alternatively, they might come in a future patch release of TypeScript 5.1. TypeScript 5.1 introduces updates such as:
- Easier implicit returns for
undefined-returning functions - Unrelated types for getter and setter accessors
- Decoupled type-checking between JSX elements and tag types
- Namespaced JSX attributes
Other enhancements include:
- Considering
typeRootsin module resolution - Linked cursors for JSX tags
- Snippet completions for
@paramJSDoc tags - Various optimizations to reduce type-checking time and computational load
Some breaking changes require a minimum runtime of ECMAScript 2020 and Node.js 14.17. Also make sure to disable upward directory walks for resolving packages.
Jetpack AI
The popular WordPress plugin, Jetpack published an article announcing the release of Jetpack AI Assistant, a new WordPress feature that leverages AI to enhance the writing process on WordPress.com and Jetpack-powered sites.
It integrates with the WP Editor and aims to reduce the time and effort spent on content creation. Availability starts with 20 free requests then $10 per month. For a limited time, it's free for all WordPress.com sites. Key features include:
- AI-Powered Content Generation: Generate blog posts, pages, lists, and tables based on user prompts.
- Adaptive Tone Adjustment: Adjust the tone of the content to meet users' preferences.
- Title & Summary Generation: Provide fitting titles and concise summaries.
- Translation Capabilities: Supports 12 languages.
- Spelling and Grammar Correction: Ensures high-quality content by rectifying potential errors.
- Conversational UI: Emulates the experience of collaborating with a co-author.
Quick Links
- François Zaninotto - Is React Having An Angular.js Moment?
- Dan Abramov - RSC From Scratch. Part 1: Server Components
- François Zaninotto - Is React Having An Angular.js Moment?
- Vishwas Gopinath - The React Ecosystem in 2023
- David Clark -
react-aria-modal - Stephan Meijer - Isomorphic Development
- Waku - Minimalistic React Framework with React Server Components
Podcasts of the Week
- JavaScript Jabber - Defining and Learning Web Fundamentals with Austin Gil
- PodRocket - The future of Svelte with Simon Holthausen
- SyntaxFM - Is JSDoc Better than TypeScript?
- SyntaxFM - OpenAI, LLMs, Math, and the Future with Andrey Mishchenko
- The Overflow - How the creator of Angular is dehydrating the web
- devtoolsFM - Athena Crisis, MooTools, and Metro with Christoph Nakazawa
- JS Party - Million Ways to Render with Aiden Bai and Tobiloba Adedeji
One More Thing
Another React Server Components double feature. This time talking about Next.js Server Actions and the perennial question of whether we're just rebuilding PHP over and over again (and if we were, what exactly is wrong with that anyway).
JavaScript Jam on the Web
Find us online at the following links:
