-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
67 lines (61 loc) · 3.76 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
<title>Hydrate Vue Todo</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="app.css" />
</head>
<body>
<a href="http://github.com/bahmutov/hydrate-vue-todo" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#70B7FD; color:#fff; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<h2>Vue app below</h2>
<div id="app" class="hidden">
<div>
Enter todo: <input v-model="newTodo" v-on:keyup.enter="addTodo"
placeholder="learn Italian" title="Enter text and press Enter">
</div>
<div>
<button v-on:click="addManyTodos()">Add many todos</button>
<button v-on:click="removeTodos()">Remove all todos</button>
</div>
<ul>
<li v-for="todo in todos">
<span v-text="todo.text"></span>
<button v-on:click="removeTodo($index)">X</button>
</li>
</ul>
</div>
<p>The above Todo example is taken pretty much verbatim from
<a href="http://vuejs.org/guide/#All_Together_Now">vuejs.org/guide</a>.
</p>
<h2>What's the problem?</h2>
<p>Modern Web application all suffer from a blank screen problem.
The framework code needs to be loaded, then the application, and only then
the DOM is updated with actual content.</p>
<p>To fully appreciate the experience, we simulate the network delays
by delaying the vue.js and application loading by 2 seconds.
Notice that during the loading delay the user sees a blank white page (bad).
</p>
<h3>What is hydration?</h3>
<p>
Turn the "Hydration" by checking the box below and reload the page.
You should see the items as you had them before almost immediately.
This is "dry" HTML snapshot saved into localStorage and loaded by
a tiny piece of code "hydration.js" as the page loads.
The "dry" HTML will be shown while the Vue.js library and the app code is being loaded;
the switch from "dry" to full app will happen automatically.
</p>
<p class="controls">
Use hydration: <input type="checkbox" name="hydrate" id="hydrate"
title="Save HTML in localStorage for faster startup on reload">
Clear local storage <button id="clear" title="Clear saved HTML from localStorage">Clear</button>
<button id="reload" title="Reload the current page">Reload</button>
</p>
<script src="src/run-hydration-or-not.js"></script>
<script src="src/hydration.js"
id="app"
verbose="true"
on="hydrate"
verbose-ui="true"></script>
<script src="src/load-app.js"></script>
</body>
</html>