-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
338 lines (316 loc) · 13.5 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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
<!DOCTYPE html><!--[if IE]><![endif]-->
<html>
<head>
<meta charset="UTF-8" />
<title>NomJS</title>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.0/es5-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.0/es5-sham.min.js"></script>
<script src="./requestAnimationFrame-polyfill.js"></script>
<script src="./nom.js"></script>
<style>
html {
background: #222;
color: #CDE;
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}
html,body {
margin: 0;
padding: 0;
}
main {
display: block;
margin: 0 auto;
max-width: 45em;
padding: 1em;
position: relative;
}
a:link,
a:visited {
color: #8BF;
text-decoration: none;
}
a:hover,
a:focus,
a:active {
outline: none;
text-decoration: underline;
}
h1 {
background: #68B;
background: #68B linear-gradient(rgba(160, 224, 255, 0.5), rgba(160, 224, 255, 0));
box-shadow: 0 -1em 3em #68B,
inset 0 -1em 3em rgba(34, 34, 34, 0.25);
font-size: 2em;
line-height: 1;
margin: 0;
padding: 1em;
position: relative;
text-align: center;
}
h1:after {
border-radius: 0 0 100% 100%;
box-shadow: 0 1em 2em #68B;
content: '';
bottom: 1em;
left: 0;
right: 0;
top: 0;
position: absolute;
z-index: -1;
}
img {
max-width: 100%;
}
img[alt="NomJS"] {
-ms-interpolation-mode: nearest-neighbor;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: -webkit-pixelated;
image-rendering: pixelated;
vertical-align: middle;
}
blockquote {
background: #112;
border: 1px solid #79A;
border-radius: 0.25em;
color: #CDD;
font-style: italic;
margin: 1em auto;
padding: 1em;
width: 27em;
}
blockquote::before {
display: block;
height: 0px;
content: "“";
margin-left: -0.95em;
font: italic 400%/1 Cochin,Georgia,"Times New Roman",serif;
color: #8CF;
}
blockquote *:first-child {
margin-top: 0;
}
dl {
background: #112;
border: 1px solid #79A;
border-radius: 0.25em;
color: #CDD;
margin: 1em;
padding: 1em;
}
dt {
font-size: 1.25em;
font-weight: 800;
}
dd {
margin: 0.25em 0 0.75em;
}
table {
background: #112;
border: 1px solid #79A;
border-radius: 0.25em;
border-spacing: 0;
color: #CDD;
margin: 1em;
}
tbody {
}
tbody tr:nth-child(odd) {
background: rgba(160, 224, 255, 0.05);
}
th {
color: #8AC;
padding: 0.5em;
text-align: left;
}
td {
padding: 0.5em;
white-space: nowrap;
}
th:first-child {
width: 100%;
}
.looks-like-a-button {
background: #182;
border: 2px solid #222;
border-radius: 0.25em;
box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.125),
inset 0 0 1px 2px #1A3;
color: #CDE;
display: inline-block;
font-size: 24px;
font-size: 1.5rem;
font-weight: normal;
margin: 1em 0 0.5em;
padding: 0.5em 1.5em;
text-align: center;
}
.looks-like-a-button:link,
.looks-like-a-button:visited {
color: #CDE;
}
</style>
</head>
<body>
<h1>
<img alt="NomJS" src="http://merri.net/github-nomjs_720x225.png" height="185" width="592" /><br />
<a class="looks-like-a-button" href="https://github.com/Merri/nom">Download @ GitHub</a><br />
<small>1.5 kB DOM library • browser only • compact syntax</small><br />
</h1>
<main>
<p>Nom is performant, minimalist (3 public methods), dependency free library for working with the DOM.</p>
<ul>
<li><a href="#invalid-expectations">Avoid invalid expectations</a></li>
<li><a href="#no-virtual-dom">Why no Virtual DOM?</a></li>
<li><a href="#compatibility">Compatibility</a></li>
<li><a href="#examples">Examples</a></li>
<li><a href="#todomvc-benchmark">TodoMVC benchmark & screenshots</a></li>
</ul>
<h2 id="#invalid-expectations">Avoid invalid expectations</h2>
<p>NomJS is not a framework, Nom is no <a href="https://lhorie.github.io/mithril/index.html">Mithril</a>, <a href="https://muut.com/riotjs/">Riot</a> or <a href="http://facebook.github.io/react/">React</a>.</p>
<blockquote>
<p>It seems that perfection is attained, not when there is nothing more to add, but when there is nothing more to take away.</p>
<footer>— <a href="http://en.wikipedia.org/wiki/Antoine_de_Saint-Exup%C3%A9ry">Antoine de Saint Exupéry</a></footer>
</blockquote>
<p>React calls itself a library, but it tells you how to structure most of your code. Both Riot and Mithril are honest frameworks which are minimalist and performant. Riot forces you to the build tool world: Mithril does not. Yet Mithril also gives full suite of application building tools.</p>
<p>And then we have Nom, and Nom only does DOM. You can write your code whichever way you want using whatever paradigm you see fit. Nom simply gives you DOM elements and helps you render your stuff.</p>
<table>
<thead>
<tr>
<th>Feature</th>
<th>Nom</th>
<th>Mithril</th>
<th>Riot</th>
<th>React</th>
</tr>
</thead>
<tbody>
<tr>
<th>Easy to build DOM</th>
<td>Yes!</td>
<td>Yes</td>
<td>Yes</td>
<td title="It can be hard to create DL/DT/DD like structures in React">Yes*</td>
</tr>
<tr>
<th>Compact syntax</th>
<td>Yes!</td>
<td>Yes</td>
<td>Very</td>
<td title="React's JSX files tend to end up being quite verbose">Nope*</td>
</tr>
<tr>
<th>Fancy HTML syntax</th>
<td>Nope!</td>
<td title="Mithril can be modded to work with JSX">Nope*</td>
<td title="Riot has custom TAG files">Yes*</td>
<td title="React has custom JSX files">Yes*</td>
</tr>
<tr>
<th>Virtual DOM</th>
<td>Nope!</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<tr>
<th>Router</th>
<td>Nope!</td>
<td>Yes</td>
<td>Yes</td>
<td title="React-router plugin">Nope*</td>
</tr>
<tr>
<th>Size (minified + gzip)</th>
<td>1.5 kB (0.0.13)</td>
<td>7.0 kB (0.2.0)</td>
<td>4.75 kB (2.1.0)</td>
<td>34 kB (0.13.3)</td>
</tr>
</tbody>
</table>
<p>NomJS is very fast. Nom's internal code is built using pattern repetition and classic procedural style, avoiding slow code style, and preferring fastest known methods when possible. This kind of coding style doesn't make Nom as small as it could be, yet Nom is very small.</p>
<h2 id="no-virtual-dom">Why no Virtual DOM?</h2>
<p>Virtual DOM is like the coolest thing that is around here right now. NomJS doesn't have it, because frankly it isn't necessary.</p>
<p>Mithril and React work for the most part so that you build a single render function or a view that gets executed. Then a virtual DOM tree is built and diffed against existing DOM. Nom is different here.</p>
<p>Nom's elements are created once and no actual virtual tree is built on each render. Instead you provide a property update function (if necessary) which is called on each render for each element that has such a function. Changes are made only if there are changes to do. Nom also gives a special treatment to <code>children</code> property: you can pass an array of DOM elements and changes are made to DOM as array's content changes.</p>
<p>In short: binding data to elements happens outside of Nom's scope and Nom does not control it.</p>
<h2 id="compatibility">Compatibility</h2>
<p>NomJS is built for ES5 and browser standards. If you know DOM, you know Nom. Nom just makes DOM easy.</p>
<p>Nom can run in browser engines as old as IE5 as long as a <code>requestAnimationFrame</code> polyfill and <code>es5-shim</code> are provided.</p>
<h2 id="examples">Nom Examples</h2>
<dl>
<dt><a href="./todomvc/">Nom TodoMVC</a></dt>
<dd>Based on <a href="http://todomvc.com/">TodoMVC 1.3</a>.</dd>
<dt><a href="./todomvc/index-component.html">Nom TodoMVC without MVC pattern</a></dt>
<dd>Same as above with roughly 100 lines less code, but can be considered more messy.</li>
<dt><a href="./demo/todo.html">Nom todo</a></dt>
<dd>Based on <a href="http://muut.github.io/riotjs/demo/">Riot 2 todo</a>.</dd>
<dt><a href="./demo/login-oninput.html">Nom login & <code>oninput</code> demo</a></dt>
<dd>Nom adds the useful <code>oninput</code> event to IE8 and below, and patches IE9 bug.</dd>
</dl>
<h2 id="todomvc-benchmark">TodoMVC benchmark & screenshots</h2>
<p>Remember that these benchmarks are a better indicator of browser vs. browser performance. A browser side optimization can greatly vary the results.</p>
<p>The most important thing to notice is that both Nom and Mithril are amazingly fast. React is so slow that I didn't want to include it in these benchmarks (being roughly 10x slower than the Mithril TodoMVC 1.3 implementation).</p>
<p>Try it yourself: <a href="./todomvc/benchmark/">TodoMVC benchmark</a></p>
<h3>TodoMVC: 250 items</h3>
<dl>
<dt>250 items: Chrome 43</dt>
<dd><img alt="" src="todomvc/benchmark-screenshots/250-chrome-43.png" /></dd>
<dt>250 items: Firefox 38</dt>
<dd><img alt="" src="todomvc/benchmark-screenshots/250-firefox-38.png" /></dd>
<dt>250 items: Internet Explorer 11</dt>
<dd><img alt="" src="todomvc/benchmark-screenshots/250-ie-11.png" /></dd>
</dl>
<h3>TodoMVC: 500 items</h3>
<dl>
<dt>500 items: Chrome 43</dt>
<dd><img alt="" src="todomvc/benchmark-screenshots/500-chrome-43.png" /></dd>
<dt>500 items: Firefox 38</dt>
<dd><img alt="" src="todomvc/benchmark-screenshots/500-firefox-38.png" /></dd>
<dt>500 items: Internet Explorer 11</dt>
<dd><img alt="" src="todomvc/benchmark-screenshots/500-ie-11.png" /></dd>
</dl>
<h3>TodoMVC: 1,000 items</h3>
<dl>
<dt>1000 items: Chrome 43</dt>
<dd><img alt="" src="todomvc/benchmark-screenshots/1000-chrome-43.png" /></dd>
<dt>1000 items: Firefox 38</dt>
<dd><img alt="" src="todomvc/benchmark-screenshots/1000-firefox-38.png" /></dd>
<dt>1000 items: Internet Explorer 11</dt>
<dd><img alt="" src="todomvc/benchmark-screenshots/1000-ie-11.png" /></dd>
</dl>
<h3>TodoMVC: 2,500 items</h3>
<p>Only the two fastest implementations fighting from now on.</p>
<dl>
<dt>2500 items: Chrome 43</dt>
<dd><img alt="" src="todomvc/benchmark-screenshots/2500-chrome-43.png" /></dd>
<dt>2500 items: Firefox 38</dt>
<dd><img alt="" src="todomvc/benchmark-screenshots/2500-firefox-38.png" /></dd>
<dt>2500 items: Internet Explorer 11</dt>
<dd><img alt="" src="todomvc/benchmark-screenshots/2500-ie-11.png" /></dd>
</dl>
<h3>TodoMVC: 5,000 items</h3>
<dl>
<dt>5000 items: Chrome 43</dt>
<dd><img alt="" src="todomvc/benchmark-screenshots/5000-chrome-43.png" /></dd>
<dt>5000 items: Firefox 38</dt>
<dd><img alt="" src="todomvc/benchmark-screenshots/5000-firefox-38.png" /></dd>
<dt>5000 items: Internet Explorer 11</dt>
<dd><img alt="" src="todomvc/benchmark-screenshots/5000-ie-11.png" /></dd>
</dl>
<h3>TodoMVC: 10,000 items</h3>
<p>Mithril's Chrome-friendly optimizations for thousands of elements kick in.</p>
<dl>
<dt>10000 items: Chrome 43</dt>
<dd><img alt="" src="todomvc/benchmark-screenshots/10000-chrome-43.png" /></dd>
<dt>10000 items: Firefox 38</dt>
<dd><img alt="" src="todomvc/benchmark-screenshots/10000-firefox-38.png" /></dd>
</dl>
<p>All benchmarks ran on Windows 7 64-bit.</p>
</main>
</body>
</html>