Hi, I’m Kuzen.

Recently on the official website of Svelte, I found such a headline, along with the corresponding video.

The headline reads, “Rethinking ReActivity,” which translates as Rethinking responsiveness

Now that we need to rethink, we need to throw away all the existing stuff, so let’s say we’re in the front-end development phase of many years ago, and let’s start with native HTML and JS, and think about how do we implement responsiveness

Note: Please follow the train of thought, do not pay too much attention to the code, this article hope you understand the point of view:

Design is more important based on technology, and understanding how responsive design and the thinking behind it is what I hope to write.

1. Starting point

With a thinking mindset, write down these few lines of code

<! DOCTYPEhtml>
<html lang="en">

    <head>
        <title>Document</title>
    </head>
    
    <body>
        <div id="root"></div>
    </body>
    
</html>
Copy the code

2. Dynamic and static thinking

2.1 Static HTML

HTML, as you all know, stands for Hypertext Markup Language, so let’s think of HTML code as text

Imagine that if you write several words on a book, the words on the book are static, immutable.

The same thing with HTML, we can think of it as static text, and when we write text, the text doesn’t change, we think of HTML as static

2.2 Dynamic JS

In our current development, all changes are data, of course, data is written in JS, so we understand JS as dynamic

3. Starting out — responsive thinking

Now that we have the static way to think about it, let’s look at the code we wrote earlier

How do you render dynamic content into static HTML

3.1 Bound thinking

The solution to the above problem, if not technically, is to bind the dynamic content in content to a static container, so that as things change below, they change above.

If you are thinking the same way, you are thinking the same way as Vue. Consider the v:bind syntax in Vue. Here is the pseudo-code that binds the container’s text to content

3.2 The idea of description

Another possible way to use the idea of binding to achieve responsiveness is to have a structure that describes the DOM hierarchy and content, and then render the content into immutable HTML

JSX and.tsx files in React. This is essentially a structure. We use our own templates, such as.vue,.jsx, and.tsx, to compile and parse them into an AST that describes the DOM hierarchy. Once we know the structure of the DOM, we can render it into HTML

But you might think that this idea of describing the DOM structure and then rendering to HTML is a little bit less responsive, because you know the content and then rendering, not really responsive

React is a terrible name for @reactjs. React is a terrible name for @reactjs

Technically, this structure for describing DOM content can be JSX, as you are familiar with, or virtual DOM, as you are familiar with. Think about whether either of them can be used to describe DOM structure

Technically aside, from a consumer perspective, this is really responsive, because we’re writing this code in JSX as we’re developing

React is not responsive, technically speaking, because HTML is a static structure that cannot be truly responsive

React is also responsive at the user level, which is what a framework is all about

4. Getting better – How do I notify a value change

In dynamic Js, we can change the Js variable of HTML’ binding ‘through a series of operations such as events. When the Js data of HTML binding changes, what if we tell our own compiled template (such as.jsx.vue.tsx file) that the value changes, so as to achieve a responsive experience from the user level?

In React, we can call the setState method to tell the component that a value has changed, as follows

In Vue, we update through this.count

As you can see, in React and Vue, notification component updates rely heavily on this

If you’ve heard of svelte.js, its notification mechanism works like this

This way of writing is closer to the idea of binding that we mentioned above. There is no need to call built-in methods such as setState, just need to directly manipulate JS variables, and you can achieve the responsiveness of the upper layer

5. Thinking — where is the foothold of technological innovation

It can be seen that React, Vue, and now the popular Svelte framework, the responsive user experience from the upper layer, more and more close to THE JS programming experience. Design is more and more close to js programming at the bottom, is more and more friendly to the front-end newcomer. Of course, frameworks like Svelte have far more advantages than responsive upper design and user experience. I just think from this perspective. What are the points that need to be considered in framework design

In the process of learning technology, we should think about such things as:

Based on technology and design.

From the author’s point of view, any occupation, any product, are based on design, design is the upper, vocational skills is the bottom.

For many frameworks and libraries, the author is familiar with the current situation of design, suddenly inspired by a design idea, and then from the design idea, technical solutions.

How to stand on the bottom of the professional skills, to think about the upper design, is engaged in any occupation need to think and hone. On the front end, that’s why there are architects and engineers, architects think about systems architecture, engineers think about engineering design, and hopefully you can think about more of these things as well as studying technology.

6. Summary

In today’s Internet era with so many learning resources and various technical tutorials, if you are confused in them, you can think about the viewpoints and contents elaborated in this article. If it can give you insight and improvement, it will be a long time honored;

Long dye has always wanted to write something for everyone, but did not think of the title to write, this article is also after reading Rethinking reactivity feeling to write

If you like this article, please give it a thumbs-up