From Islands Architecture, there are multiple volumes on the front end

Hello everyone, I'm Casson.

Recently, Remix Ryan Florence , the irritable brother of the team, has successively attacked several frameworks of friends and businessmen, such as:

• spray SolidStart copy Remix the document

• Next.js copy Remix the API design

• Tucao Astro , Qwik no new ideas

Of course, these tweets were deleted by my brother in less than a day 🤫 .

We're not going to talk about the right and wrong of these things today.

I would like to ask students who do not often pay attention to the development of new front-end wheels , if your inner activities are:

What kind of framework are these TMs? I don't know any of them?

Today, we start from the idea of --- Islands Architecture Astro that was complained about by Ryan to see how many volumes the front end has.

Welcome to join the human high-quality front-end framework group , with flying

What is Islands Architecture

The concept of Islands Architecture (Island Architecture) was originally proposed by Katie Sylor-Miller , a front-end architect at Etsy , in 2019 and popularized by Preact author Jason Miller in the article islands-architecture .

This is an architecture based on SSR (server-side rendering). To understand his characteristics, we need to understand the defects of tradition SSR .

In the traditional SSR , when the first screen is rendered, the server will output the HTML structure to the browser.

When the browser renders HTML , the initialization logic of the front-end framework is executed, which is HTML structure binding event. This step is called hydrate (water injection).

When hydrate completes, the page can only respond to user interaction.

That is, only when all components of the entire page hydrate are complete, can any component on the page respond to user interaction.

Chrome LightHouse The TTI (Time to Interactive) metric in the benchmark is used to measure the time it takes for a page to become fully interactive .

The traditional SSR architecture's page will continue to rise as the application volume grows, TTI .

The purpose of 孤岛架构 is to optimize the SSR architecture TTI indicator problem.

Under the 孤岛架构 architecture, the components are divided into:

• interactive component
• Non-interactive components above the fold

For example, in the following page structure:

• The non-interactive components above the fold include Content , Advertisement , Footer (white part)
• Interactive components include Header , Sliderbar , Image Carousel (color part)

The non-interactive components above the fold will output to the browser SSR HTML , while the interactive components will be rendered asynchronously and concurrently in the browser.

Interactive components are like HTML an island in the ocean, hence the name 孤岛架构 .

孤岛架构 The components with higher interaction priority can be made interactive first, and the remaining low-priority components can be slowed down hydrate .

In this way, before the page hydrate is completed, the important components are already interactive, which can reduce the TTI indicator.

What is the practical significance of 孤岛架构 ? For example, for an e-commerce website, it is obvious that the interactivity of the buy now button is higher than the interactivity of the feedback button .

SSR allow users to see the page earlier, 孤岛架构 make the important part of the page (buy now button) clickable earlier. Behind this, is a higher purchase rate, more money~~~

A framework for implementing Islands Architecture

Currently, the full stack frameworks that implement 孤岛架构 are mainly Astro and Qwik .

Astro

The characteristics of Astro are: as a full-stack framework, it mainly controls the overall structure, and has no requirements for the front-end framework required for the realization of specific services.

也就是说，开发者可以在Astro d90d32c75c158b5fb09c741459fc5bf9---中使用React 、 Vue 、 Preact 、 Svelte框架Implement specific business logic, or even mix components from other frameworks in one .astro component.

比如，在下面例子中.astro 7d1f28c90585ddaa71a5d6a67b0c2f84---组件中引入了React 、 Vue 、 Svelte三款框架的组件：

Qwik

Qwik的作者是builder.io的CTO miško hevery （同时也是Angular / AngularJS ）。

The characteristics of this framework are: ultra-fine-grained 孤岛架构 , and the granularity is controllable by developers.

For Astro , 孤岛架构 the applicable objects are components. And in Qwik , 孤岛架构 the finest granularity is a method in the component .

For example, here is the HelloWorld component (it can be found that Qwik uses a syntax similar to React ):

The corresponding page rendering effect:

Open the browser Network panel, how many JS requests will this page have?

Since this is a static component with no logic, the answer is: no JS request.

Let's take a look at the classic counter Counter component, compared with HelloWorld , the logic of the state change of the click button is added, and the code is as follows:

The corresponding page rendering effect:

Open the browser Network panel, how many JS requests will this page have?

The answer remains: no JS request.

Note that in the code of these two components, the definition component is component$ , and there is a $ symbol.

In Counter , the onClick$ callback also has a $ symbol.

In Qwik , the functions with the suffix $ are lazy loaded .

The granularity of 孤岛架构 6efb6dd6e3e25cf1e90aa630ad42c497--- depends on how finely $ is defined.

For example, in Counter , onClick$ with $ suffix, then the click callback is lazy loaded, so the first screen rendering will not include the logic corresponding JS the click- JS code.

After clicking the button, two JS requests will be initiated. The first request returns the logic after the click :

The second one JS request returns the logic of component re-render :

After these two pieces of code are executed, Counter becomes 1.

Inspecting the element will find that before clicking, the button on:click attribute holds the address where the logic is located :

After clicking, the code will be downloaded from the corresponding address JS and the corresponding logic will be executed.

React

为什么文章开头暴躁老哥吐槽Astro 、 Qwik没有什么新鲜理念呢，这是因为React 孤岛架构 concept of development.

In React this concept is called Selective Hydration .

Specifically, in the SSR scenario, the component wrapped by the Suspense component will be used as an interactive component under 孤岛架构 .

Front end with multiple rolls

Although the full stack framework under 孤岛架构 has many advantages (fast first screen rendering, TTI short), it is not a panacea.

It is more suitable for scenes with high requirements on the rendering speed of the first screen and TTI, but the overall page interaction is not complicated , such as:

• E-commerce page
• blog
• Documentation

对于重交互性的Web应用（比如后台管理系统、社区）， SSR （ Next.js ）或CSR (using the front-end framework directly).

It can be seen that the application scenario of 孤岛架构 is not large, but its implementation difficulty is much higher than that of CSR or the traditional SSR .

Most developers will probably never use 孤岛架构 in their lifetime.

Even in such a small segment, so many competitors have emerged.

Front end, it's so curly...