my blog https://overreacted.io
wip
+59
-4
+59
-4
public/untitled/index.md
+59
-4
public/untitled/index.md
···
122
122
</html>
123
123
```
124
124
125
-
But we don't *have to* turn our "imaginary" HTML into "real" HTML right away. We can stay in the imaginary land for a bit longer by turning *the entire thing* into JSON. Note how in this case, `style` can remain completely intact as an object within:
125
+
But we don't *have to* turn our "imaginary" HTML into "real" HTML right away. We can stay in the imaginary land for a bit longer by turning *the entire thing* into JSON.
126
+
127
+
Note how in this case, `style` can remain completely intact as an object within:
126
128
127
129
```js {6,10}
128
130
["html", {
···
143
145
144
146
We can *then* easily turn this JSON into the "real" HTML if we want. But JSON is a *richer* representation because it preserves objects in a way that is easy to parse.
145
147
146
-
Going forward, we'll co-evolve these two different but useful representations.
148
+
This isn't particularly interesting or useful yet.
149
+
150
+
But going forward, we'll co-evolve these two representations.
147
151
148
152
---
149
153
···
164
168
}
165
169
```
166
170
167
-
Now let's read this stuff from the disk.
171
+
But we could grab them from somewhere else.
172
+
173
+
Let's read the data from the filesystem:
168
174
169
175
```js {3-4}
170
176
<html>
···
200
206
}
201
207
```
202
208
203
-
We'll have to amend our specification. We'll say that if a custom tag like `Greeting` is asynchronous, we'll *wait* for its output. Other than that, there'll be no difference in the final output. Both HTML and JSON will be the same as before.
209
+
We'll have to slightly amend our specification to allow this. To *send* HTML, we'll have to *wait* for all custom tags to resolve (and to be replaced with their output).
210
+
211
+
The end result is still the same:
212
+
213
+
```js
214
+
["html", {
215
+
children: ["body", {
216
+
children: [
217
+
["p", {
218
+
children: "Hello, Alice",
219
+
style: { color: "purple" }
220
+
}],
221
+
["p", {
222
+
children: "Hello, Bob",
223
+
style: { color: "pink" }
224
+
}]
225
+
]
226
+
}]
227
+
}]
228
+
```
229
+
230
+
Or, in the "real" HTML form:
231
+
232
+
```js
233
+
<html>
234
+
<body>
235
+
<p style="color: purple">Hello, Alice</p>
236
+
<p style="color: pink">Hello, Bob</p>
237
+
</body>
238
+
</html>
239
+
```
240
+
241
+
But it's nice to think of it like this:
242
+
243
+
```js
244
+
<html>
245
+
<body>
246
+
<Greeting username="alice123" />
247
+
<Greeting username="bob456" />
248
+
</body>
249
+
</html>
250
+
```
251
+
252
+
These are self-contained abstractions that can load their own data.
253
+
254
+
Cool beans!
255
+
256
+
---
257
+
258
+
### Event Handlers