` above is mimicked as a virtual node in the following JavaScript object:
62 |
63 | ```js
64 | const divVNode = {
65 | type: 'div',
66 | props: {
67 | style: 'color: red'
68 | }
69 | children: ['Hello World!']
70 | };
71 | ```
72 |
73 | We can notice that the virtual node has three properties:
74 |
75 | - `tag`: stores the tag name of the element as a string.
76 | - `props`: stores the properties and attributes of the element as an object.
77 | - `children`: stores virtual node children of the element as an array.
78 |
79 | Using virtual nodes, we can model what the current UI looks like, and what we want it to change to when we update the UI.
80 |
81 | Let's say I want to change the text inside the `
` from `"Hello World!"` to `"Hello Universe!"`. Using the DOM, we can imperatively make the change:
82 |
83 | ```js
84 | //
Hello World!
85 | const div = document.createElement('div');
86 | div.style = 'color: red';
87 | div.textContent = 'Hello World!';
88 |
89 | // Change from "Hello World!" to "Hello Universe!"
90 | div.textContent = 'Hello Universe!';
91 | ```
92 |
93 | But with Virtual DOM, I can just specify what the current UI looks like (old virtual node) and what I want it to look like (new virtual node).
94 |
95 | ```js
96 | const oldVNode = {
97 | type: 'div',
98 | props: {
99 | style: 'color: red'
100 | }
101 | children: ['Hello World!']
102 | };
103 |
104 | const newVNode = {
105 | type: 'div',
106 | props: {
107 | style: 'color: red'
108 | }
109 | children: ['Hello Universe!']
110 | };
111 | ```
112 |
113 | However, to make the Virtual DOM actually apply the change to the UI, we need to calculate the difference between the old virtual node and the new virtual node.
114 |
115 | ```diff
116 | {
117 | type: 'div',
118 | props: {
119 | style: 'color: red'
120 | }
121 | - children: ['Hello World!']
122 | + children: ['Hello Universe!']
123 | };
124 | ```
125 |
126 | Once we know the difference, the Virtual DOM can change the UI:
127 |
128 | ```js
129 | div.replaceChild(newChild, oldChild);
130 | ```
131 |
132 | Instead of replacing the whole UI, the Virtual DOM only makes necessary changes.
133 |
134 | ### Build Your Own Virtual DOM
(part 2)
135 |
136 | In this exercise, we will mimic the [**✦ Million.js**](https://github.com/aidenybai/million) Virtual DOM API. Our API will consist of three main functions: `m`, `createElement`, and `patch`.
137 |
138 | #### `m(tag, props, children)`
139 |
140 | The `m` function is a helper function that creates virtual nodes. A virtual node contains three properties:
141 |
142 | - `tag`: tag name of the virtual node as a string.
143 | - `props`: properties/attributes of the node as an object.
144 | - `children`: children of the virtual node as an array.
145 |
146 | An example implementation of the `m` helper function is below:
147 |
148 | ```js
149 | const m = (tag, props = {}, children = []) => ({
150 | tag,
151 | props,
152 | children,
153 | });
154 | ```
155 |
156 | This way, it is less cumbersome to create virtual nodes.
157 |
158 | ```js
159 | m('div', { style: 'color: red' }, ['Hello World!']);
160 | ```
161 |
162 | #### `createElement(vnode)`
163 |
164 | The `createElement` function turns a virtual node into a real DOM element. This is important because we'll be using this in our `patch` function.
165 |
166 | The implementation is as follows:
167 |
168 | 1. Return text node if the virtual node is text.
169 | 2. Create a new DOM node with the `tag` property of the virtual node.
170 | 3. Iterate over the virtual node `props` and add them to the DOM node.
171 | 4. Iterate over the `children`, recursively call `createElement` on each child and add them to the DOM node.
172 |
173 | ```js
174 | const createElement = (vnode) => {
175 | if (typeof vnode === 'string') {
176 | return document.createTextNode(vnode);
177 | }
178 | const el = document.createElement(vnode.tag);
179 | for (const prop in vnode.props) {
180 | el[prop] = vnode.props[prop];
181 | }
182 | for (const child of vnode.children) {
183 | el.appendChild(createElement(child));
184 | }
185 | return el;
186 | };
187 | ```
188 |
189 | This way, we can convert virtual nodes to DOM nodes easily:
190 |
191 | ```jsx
192 | //
Hello World!
193 | createElement(
194 | m('div', { style: 'color: red' }, ['Hello World!'])
195 | );
196 | ```
197 |
198 | #### `patch(el, newVNode, oldVNode)`
199 |
200 | The `patch` function takes an existing DOM node, old virtual node, and new virtual node.
201 |
202 | The implementation is as follows:
203 |
204 | 1. Calculate the difference between the two virtual nodes.
205 | 2. If virtual node is a `string`, replace the text content of the DOM node with the new node.
206 | 3. If virtual node is an `object`, update node if `tag`, `props`, or `children` are different.
207 |
208 | ```js
209 | const patch = (el, newVNode, oldVNode) => {
210 | if (!newVNode && newVNode !== '') return el.remove();
211 | if (
212 | typeof oldVNode === 'string' ||
213 | typeof newVNode === 'string'
214 | ) {
215 | if (oldVNode !== newVNode) {
216 | return el.replaceWith(createElement(newVNode));
217 | }
218 | } else {
219 | if (oldVNode.tag !== newVNode.tag) {
220 | return el.replaceWith(createElement(newVNode));
221 | }
222 |
223 | // patch props
224 | for (const prop in {
225 | ...oldVNode.props,
226 | ...newVNode.props,
227 | }) {
228 | if (newVNode.props[prop] === undefined) {
229 | delete el[prop];
230 | } else if (
231 | oldVNode.props[prop] === undefined ||
232 | oldVNode.props[prop] !== newVNode.props[prop]
233 | ) {
234 | el[prop] = newVNode.props[prop];
235 | }
236 | }
237 |
238 | // patch children
239 | for (let i = oldVNode.children.length - 1; i >= 0; --i) {
240 | patch(
241 | el.childNodes[i],
242 | newVNode.children[i],
243 | oldVNode.children[i]
244 | );
245 | }
246 |
247 | for (
248 | let i = oldVNode.children.length;
249 | i < newVNode.children.length;
250 | i++
251 | ) {
252 | el.appendChild(createElement(newVNode.children[i]));
253 | }
254 | }
255 | };
256 | ```
257 |
258 | This way, we can update UI with the `patch` function.
259 |
260 | ```js
261 | const oldVNode = m('div', { style: 'color: red' }, [
262 | 'Hello World!',
263 | ]);
264 | const newVNode = m('div', { style: 'color: red' }, [
265 | 'Hello Universe!',
266 | ]);
267 | const el = createElement(oldVNode);
268 |
269 | //
Hello World!
270 | patch(el, oldVNode, newVNode);
271 | //
Hello Universe!
272 | ```
273 |
274 | And we've finished our Virtual DOM! Check out the [live example here](https://codesandbox.io/s/virtual-dom-example-8nte0o).
275 |
276 | ### Virtual DOM is Pure Overhead
(right now)
277 |
278 | > _["Virtual DOM is pure overhead"](https://svelte.dev/blog/virtual-dom-is-pure-overhead) --Rich Harris, 2018_
279 |
280 | In the present, Virtual DOM implementations incur computation cost when calculating the differences between old and new virtual nodes.
281 |
282 | Even with extremely efficient diffing algorithms (like [`list-diff2`](https://www.npmjs.com/package/list-diff2)), when virtual node trees become greater than double digits of virtual nodes, the [cost of diffing becomes significant](https://svelte.dev/blog/virtual-dom-is-pure-overhead).
283 |
284 | Tree diffing algorithms are notoriously slow. Time complexity can range from `O(n)` to `O(n^3)` depending on the complexity of the virtual node tree. This is a far cry from DOM manipulation, which is `O(1)` in most cases.
285 |
286 | ### Future of Virtual DOM
287 |
288 | > _["Compilers are the New Frameworks"](https://tomdale.net/2017/09/compilers-are-the-new-frameworks/) --Tom Dale, 2017_
289 |
290 | In 2017, Tom Dale, the creator of [Ember](https://emberjs.com/), was one of the first open source zealots to advocate for the use of compilers for JavaScript UI libraries.
291 |
292 | In 2022, we now know Tom Dale's bet was spot on. The JavaScript ecosystem has seen the rise in ["compiled"](https://tomdale.net/2017/09/compilers-are-the-new-frameworks/) libraries like [Solid](https://www.solidjs.com/) and [Svelte](https://svelte.dev/), which forgo the Virtual DOM. These libraries skip unnecessary rendering by using a compiler to prerender beforehand and only generating code when used.
293 |
294 | Virtual DOM, on the other hand, lags behind on this trend. Current Virtual DOM libraries are inherently not compatible with a "on-demand" compiler. As a result, Virtual DOM render speeds are often **slower than modern "No Virtual DOM" UI libraries** by several magnitudes.
295 |
296 | If we want Virtual DOM to be competitive in render speeds in the future, we need to **redesign Virtual DOM to allow for compiler augmentation**.
297 |
298 | #### ✦ Million.js
299 |
300 | Check out the current effort to bring compilers to Virtual DOM at [**✦ Million.js**](https://github.com/aidenybai/million). We're already [**2-3x faster**](https://millionjs.org/benchmarks/official-benchmarks) than the current non-compiled Virtual DOM libraries.
301 |
--------------------------------------------------------------------------------
/src/styles/global.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --background: #010204;
3 | --highlight: #282a36;
4 | --main: #8a8f98;
5 | --semibold: #b0b2b6;
6 | --bold: #cdced1;
7 | --underline: #494d64;
8 | --million-progress-bar-color: #5e6ad2;
9 | --sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
10 | 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
11 | sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
12 | 'Segoe UI Symbol', 'Noto Color Emoji';
13 | --mono: 'Roboto Mono', ui-monospace, SFMono-Regular, SF Mono,
14 | Menlo, Consolas, Liberation Mono, monospace;
15 | }
16 |
17 | ::selection {
18 | background: var(--highlight);
19 | color: #fff;
20 | }
21 |
22 | html {
23 | width: 100%;
24 | height: 100%;
25 | }
26 |
27 | body {
28 | font-family: var(--sans);
29 | font-weight: 400;
30 | display: flex;
31 | padding: 0.75rem;
32 | background: var(--background);
33 | color: var(--main);
34 | }
35 |
36 | .blur {
37 | filter: blur(0.2rem);
38 | }
39 |
40 | .glow {
41 | position: absolute;
42 | left: 0;
43 | top: 0;
44 | bottom: 0;
45 | right: 0;
46 | opacity: 0.1;
47 | pointer-events: none;
48 | background-image: conic-gradient(
49 | from 230.29deg at 51.63%52.16%,
50 | #2400ff 0deg,
51 | #0087ff 67.5deg,
52 | #ff1d7a 198.75deg,
53 | #f5381b 251.25deg,
54 | #ff5335 301.88deg,
55 | #691eff 360deg
56 | );
57 | filter: blur(15rem);
58 | z-index: -1;
59 | }
60 |
61 | p,
62 | li,
63 | summary {
64 | font-size: 1.15rem;
65 | letter-spacing: 0.01rem;
66 | line-height: 1.8rem;
67 | }
68 |
69 | code {
70 | font-size: 1.1rem;
71 | font-family: var(--mono);
72 | }
73 |
74 | h1,
75 | h2,
76 | h3,
77 | h4,
78 | h5 {
79 | color: var(--bold);
80 | }
81 |
82 | strong,
83 | a {
84 | font-weight: 500;
85 | color: var(--semibold);
86 | }
87 |
88 | h1,
89 | h2,
90 | h3,
91 | h4,
92 | h5,
93 | h6 {
94 | margin-top: 3rem;
95 | margin-bottom: 1rem;
96 | }
97 |
98 | h2,
99 | h3 {
100 | font-family: 'EB Garamond', serif;
101 | }
102 |
103 | h2 {
104 | font-size: 2.7rem;
105 | }
106 |
107 | h3 {
108 | font-size: 2rem;
109 | }
110 |
111 | h3 > a {
112 | font-weight: 600 !important;
113 | color: #fff !important;
114 | }
115 |
116 | a {
117 | text-underline-position: from-font;
118 | text-decoration-skip-ink: all;
119 | text-decoration-color: var(--underline);
120 | text-underline-offset: -1px;
121 | text-decoration-line: underline;
122 | text-decoration-thickness: from-font;
123 | transition: all 0.1s ease;
124 | text-decoration-style: solid;
125 | }
126 |
127 | a:hover {
128 | background: var(--highlight);
129 | border-radius: 0.3rem;
130 | }
131 |
132 | ol {
133 | counter-reset: item;
134 | }
135 |
136 | ol li {
137 | display: block;
138 | }
139 |
140 | ol li:before {
141 | content: counter(item) '. ';
142 | counter-increment: item;
143 | }
144 |
145 | blockquote {
146 | margin: 20px 0 30px;
147 | padding-left: 20px;
148 | border-left: 5px solid var(--highlight);
149 | }
150 |
151 | .header {
152 | align-items: center;
153 | display: flex;
154 | }
155 |
156 | .headshot {
157 | width: 3rem;
158 | height: 3rem;
159 | flex-direction: row;
160 | margin: 0 0.5rem 0 0;
161 | border-radius: 100%;
162 | animation: spin 4s ease-in-out infinite;
163 | }
164 |
165 | .headshot:hover {
166 | animation-play-state: paused;
167 | }
168 |
169 | .container {
170 | max-width: 45rem;
171 | width: 45rem;
172 | margin-left: auto;
173 | margin-right: auto;
174 | margin-top: 2rem;
175 | margin-bottom: 4rem;
176 | }
177 |
178 | .boba {
179 | width: 100%;
180 | border-radius: 0.3rem;
181 | }
182 |
183 | .footer {
184 | margin-top: 3.5rem;
185 | font-size: 0.9rem;
186 | padding-left: auto;
187 | display: flex;
188 | }
189 |
190 | .home {
191 | margin-left: auto;
192 | }
193 |
194 | .fade {
195 | opacity: 0.5;
196 | }
197 |
198 | .astro-code {
199 | padding: 1.5rem;
200 | border-radius: 0.5rem;
201 | overflow-x: auto;
202 | white-space: pre-wrap;
203 | word-wrap: break-word;
204 | }
205 |
206 | @keyframes spin {
207 | 100% {
208 | -webkit-transform: rotate(360deg);
209 | transform: rotate(360deg);
210 | }
211 | }
212 |
--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 | "github": {
3 | "silent": true
4 | },
5 | "redirects": [
6 | {
7 | "source": "/work/million-js",
8 | "destination": "https://millionjs.org/research",
9 | "permanent": true
10 | }
11 | ]
12 | }
13 |
--------------------------------------------------------------------------------
32 |
33 | {content.title}
34 |