2023 - Twenty-fourth Week

This weekly report mainly summarizes the content from various places.

summary: ''
Technology
Tools
Updates
- Introducing the Vercel AI SDK
Others
- Performance Doesn't Matter...Until It Does.
- Eight Rules to Become an Excellent Engineer

Technology#

ESLint guide: how to use it with confidence #

ESLint is a static code analysis tool that helps maintain and improve code quality as code is written.
ESLint allows teams to follow the standards documented in the configuration file, eliminating the need to recode and apply these standards each time.
The new ESLint configuration system, Flat config, has introduced significant changes in how ESLint is configured in projects, is supported in the CLI, and has official documentation available starting from version 8.23.0.

This article is part of a series aimed at explaining how to share ESLint configurations as external dependencies to automate code standards. It first introduces ESLint as a static code analysis tool that helps maintain and improve code quality by automatically forming opinions based on rules and issuing warnings when rules are violated. The article also reviews the main properties of the ESLint configuration object, such as rules and overrides. It then introduces a new ESLint configuration system called Flat config, which replaces the legacy system and proposes significant changes in how ESLint is configured in projects. The article concludes with a summary of the planned series, which includes mastering ESLint, migrating to flat config, creating shareable ESLint configurations, and improving the experience for more tool support.

Is React Having An Angular.js Moment?#

React Server Components introduce significant changes to React development, requiring a relearning of everything from data fetching to styling.
Existing third-party React libraries are not compatible with server components, requiring developers to code manually or wait for library authors to modify them.
React Server Components disrupt the advantages of the current React ecosystem, making it very difficult to have tools like UI toolkits, form frameworks, API clients, and SaaS integrations.

React Server Components are a new way of building web applications promoted by the React and Next.js teams. It involves a major change in how React applications are built and requires relearning. For example, data fetching now relies on the fetch method within asynchronous components, while regular React hooks can cause errors in server components. Additionally, CSS-in-JS is incompatible with server components, and debugging is very challenging. React Server Components also disrupt almost all existing third-party React libraries. This is a significant change that disrupts the existing React ecosystem, and developers may need to write a lot of code manually.

Thoughts on React vs Vue vs Everything Else in 2023 #

It is recommended to learn React and Next.js for professional purposes, as they are the most widely used front-end platforms in the industry today.
The state of front-end development is very complex and resource-intensive, making it difficult to build simple interactions without the entire toolchain.
For personal development and side projects, Vue may be more desirable because it is easier to use and less prone to misuse.

The article discusses the state of front-end frameworks and platforms and provides advice for beginners on which to learn. The author points out that React + Next.js is the preferred platform for professionals, but Vue is also a good choice for personal projects. The author also expresses frustration with the complexity and resource usage of modern front-end development. They recommend learning TypeScript and staying performance-aware in React code. The article concludes with a discussion on the rendering cycles of React and Vue.

Isomorphic Development #

Isomorphic development involves writing code that can run safely and efficiently in both server and client environments, which does not necessarily make it easier for front-end developers.
For full-stack developers, code is split between the front end and back end, and they must balance between two independent debugging environments while preventing data leaks and security vulnerabilities.
Full-stack developers must also pay attention to performance differences between the client and server, as well as issues like main database performance, query optimization, and indexing.

The article discusses the challenges of isomorphic development, where code runs in both server and client environments. The author argues that this paradigm shift does not necessarily make development easier but introduces new complexities related to debugging, security, performance, and data querying. The author also notes that current development tools are not fully equipped to handle these challenges, and developers need to acquire new knowledge and skills to work effectively in this environment. The author suggests using a new term "isomorphic development" to describe this approach.

How Vite is Compatible with Older Browsers #

Vite uses @vitejs/plugin-legacy to support older browsers by generating old files that use Babel-transpiled code.
The index.html file includes scripts that dynamically load old code based on the __vite_is_modern_browser variable.
Using type="module" and nomodule attributes in script tags allows selective execution of code based on the browser's support for module loading and ES6 syntax.

This article discusses how to use the @vitejs/plugin-legacy plugin to make Vite compatible with older browsers. The plugin generates old files for each file using Babel to produce compatible code. The article explains the code in the index.html file, which creates a script tag with the "type=module" attribute to import the main script file. It also creates a script tag to load polyfills-legacy files and index-legacy files to be compatible with older browsers. The article notes that if the browser supports modules but not the latest syntax, the plugin may have potential bugs.

How We Sped Up Search Latency with Server-sent Events in Express.js #

Using Server-sent Events (SSE) to transmit search results in sparse queries can improve user experience without changing authentication or request status.
SSE events can include fields like event and data, separated by \n\n.
Using React to integrate SSE on the client side can be somewhat tricky, but can be achieved by creating a custom wrapper around EventSource.

This article discusses the implementation of Server-sent Events (SSE) to stream search results on the HyperDX platform. SSE was chosen over Websockets due to its simplicity and compatibility with HTTP. The article provides examples of how to add SSE to Express.js routes and how to format SSE events. It also discusses querying from the client side using EventSource and provides implementation suggestions. The author recommends considering application-specific and React-specific features when implementing SSE and is willing to write follow-up articles based on feedback.

Hydration is a tree, Resumability is a map #

Hydration is an algorithm that restores lost state and event handlers when serialized to HTML by executing each component in the tree in the browser, allowing single-page application (SPA) frameworks to achieve interactivity in the browser.
Partial hydration alleviates the browser's workload by creating "interactive islands," but creates boundaries that may hinder communication between different parts of the application.
Resumability is a different algorithm that places event handlers at the root, treating all components as static, and eliminates the need for hydration or traversing components.

This article discusses different methods of adding interactivity to web applications, with a particular focus on the concepts of hydration and resumability. Hydration involves re-executing the entire application from the root to restore lost state and event handlers when serialized to HTML, while resumability treats event handlers as root, eliminating the need to download and execute all interactive components. Partial hydration and React Server Components are different variants of hydration that offer different trade-offs, while resumability is a fundamentally different algorithm. Developers can choose the approach that best suits their needs.

Compatibility Adaptation of Mobile H5 Pages on Different Android and iOS Devices #

This article discusses the importance of H5 pages in mobile application development in the mobile internet era and explores compatibility issues across different phone models, operating system versions, and browser kernel environments. It emphasizes the significance of compatibility adaptation for mobile H5 pages and provides practical examples of compatibility adaptation on Android and iOS devices. The article offers corresponding handling methods and code examples for different screen resolutions and differences in WebView. Additionally, it addresses issues related to default font sizes on mobile devices, problems in Safari browser, and common compatibility bugs and solutions. A reasonable compatibility adaptation plan can enhance the compatibility and user experience of mobile applications.

Behind the block()#

Using the block() function in Million.js can achieve ultra-optimized rendering speeds by utilizing Million.js within React components.
The compiler can extract state from React components and convert it into props that Million.js can understand, bypassing the limitations of runtime implementations.
By using different rendering methods between components, we can leverage the strengths of both and choose the right tool for specific tasks.

This article explains how to use blocks in Million.js as higher-order components (HOCs) in React, which are ultra-optimized for rendering speed. The author explains how the block() function works, how to implement it, and how to use the compiler to extract state from nested components. The article notes that using this approach may mean that performance is no longer a trade-off for migration, and similar concepts have been used in "island architecture." The article concludes by thanking Ryan Carniato for creating a proof of concept that inspired this article.

Designing a Scalable Backend in Node.js #

This article discusses three scaling challenges in a fictional Node.js backend system that categorizes user transactions to assist with personal budgeting. The first challenge involves issues that arise when users log in, with long login times and frequent failures between 3 PM and 4 PM on workdays. The article suggests monitoring key resources such as CPU, memory, and IOPs to diagnose the root causes of scaling issues and eliminate bottlenecks and failure points. The second challenge is handling burst workloads, where peak database loads originate from outside the system. The article recommends using queues to smooth out peaks and control throughput. The third challenge involves optimizing database queries to improve performance and scalability.

Monitoring key resources like CPU and memory consumption, as well as database metrics, is crucial for diagnosing scaling issues in backend systems.
Slow query monitoring can help identify failure points in the system and alleviate bottlenecks.
When facing burst workloads, using queues can smooth out peaks and control throughput.

RSC From Scratch. Part 1: Server Components #

Exploring RSC from scratch

Tools#

traf #

Find truly affected packages in monorepos

usellm #

Use large language models in your React application

monolith #

⬛️ CLI tool for saving complete web pages as a single HTML file

tinylibs - ts-writer #

TS Writer is a 1.5Kb template string template engine designed for generating code at runtime

queue #

Concurrency-adjustable asynchronous function queue

framed #

CLI tool for project management

mods #

A simple tool for using AI in the command line and pipelines, supporting OpenAI and LocalAI

react-spreadsheet-import #

Import process for Excel (.xlsx) and CSV files with automatic column matching and validation features

highlight #

highlight.io: An open-source full-stack monitoring platform. Error monitoring, session replay, logging, etc.

sd-webui-txt-img-to-3d-model #

A custom extension for sd-webui that allows you to generate 3D models from txt or images based on OpenAI Shap-E

Updates#

Introducing the Vercel AI SDK #

The Vercel AI SDK is an open-source library designed to help developers build conversational, streaming, and chat user interfaces using JavaScript and TypeScript. The SDK supports React/Next.js, Svelte/SvelteKit, and will soon support Nuxt/Vue. Vercel's AI SDK supports interoperability and provides first-class support for OpenAI, LangChain, and Hugging Face Inference. The company also launched the Chat & Prompt Playground, where developers can compare the results of various language models in real-time and generate Next.js, Svelte, and Node.js code.

Vercel has launched new tools aimed at improving the AI experience on its platform, including the Vercel AI SDK and Chat & Prompt Playground.
The Vercel AI SDK is an open-source library designed to help developers build conversational, streaming, and chat user interfaces using JavaScript and TypeScript.
The SDK supports React/Next.js, Svelte/SvelteKit, and will soon support Nuxt/Vue, providing first-class support for OpenAI, LangChain, and Hugging Face Inference.

Others#

Performance Doesn't Matter...Until It Does.#

Performance is important, but not all companies need high-performance technologies and frameworks. When building applications, the most important thing is to solve user problems. As the number of users increases, the demand for new features decreases, and stability and iteration speed become more important. Every company and project should consider long-term feature increments and iterations, defining an appropriate tipping point.

Stability and iteration speed become more important as the number of users increases.
Every company and project should consider long-term feature increments and iterations, defining an appropriate tipping point.
Technology choices should be made based on the uncertainty and needs of the project.

The world is doing its utmost day and night to make you someone else; if you want to be yourself, it means fighting the hardest battle.

-- E. E. Cummings, famous American poet of the 20th century

People rely on machines, hoping this will bring them more freedom, but it only enslaves those who own the machines.

-- Frank Herbert, author of the science fiction novel "Dune"