-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
73 lines (55 loc) · 4.58 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
<!DOCTYPE html>
<html>
<body>
<h1>MVC for the web</h1>
<p>For the impatient: start with <tt><a href="program-0.html">program-0.html`</a></tt>. View the source and read the code and the extensive comments explaining the concepts. When you understand it, move on to <tt>program-1.html</tt>, then to <tt>program-2.html</tt>, <tt>program-3.html</tt>, etc.</p>
<p><strong>Note</strong>: There are many more examples yet to write. The programs here are barely the beginning of what needs to be conveyed.</p>
<h2>Contents</h2>
<ul>
<li><a href="program-0.html">Program 0 - Observables</a></li>
<li><a href="program-1.html">Program 1 - Views</a></li>
<li><a href="program-2.html">Program 2 - View trees</a></li>
<li><a href="program-3.html">Program 3 - Deeper view trees</a></li>
<li><a href="program-4.html">Program 4 - Push protocols in models</a></li>
<li><a href="program-5.html">Program 5 - Reusable views and controllers</a></li>
<li><a href="program-6.html">Program 6 - More reusable views and controllers</a></li>
<li><a href="program-7.html">Program 7 - Composite views</a></li>
<li><a href="program-8.html">Program 8 - Manipulating the URL</a></li>
<li><a href="program-9.html">Program 9 - Releasing views</a></li>
<li><a href="program-10.html">Program 10 - Small multiples - Lists</a></li>
</ul>
<h2>For the less impatient</h2>
<p>The programs in this repository grew out of my attempts to learn how to write programs with graphical interfaces. Professionally, I needed to produce web interfaces, so I chose that substrate, though I chose to learn from the much more mature world of desktop environments, particularly Cocoa and Gtk+. This repository contains of a series of programs distilling what I have learned. They all use the set of techniques that go under the name of Model-View-Controller, or MVC.</p>
<p>MVC is often taken to be a particular architecture or organization of code. This is a misconception. MVC is a set of constraints that strongly limit how fast the complexity of code grows with the complexity of the user interface it implements. Some of the constraints isolate all user interface elements from each other via an intermediate layer, so the complexity of each user interface element is independent of how many others there are. Others organize user interface elements so they are easy to compose and reuse.</p>
<p>The examples consist of single, self contained HTML files. All CSS and JavaScript is inline in the HTML. None of the examples use any external libraries, nor have I felt their lack. Of particular note, I make full use JavaScript's prototype based object system. Trying to impose a class system in JavaScript is foolish, since the prototype based system is both simpler and more flexible. If you need to learn how to use JavaScript's object system, I recommend <a href="https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes">You Don't Know JS: `this` and Object Prototypes</a>.</p>
<p>The code depends on conservative choices of technology. The JavaScript is all ECMAScript 5, except for using ECMAScript 6's Set collection, which is fairly broadly supported. The page layouts use the traditional box model. I do use the HTML5 doctype and elements, but don't impose very onerous burdens on it. Everything should work in most modern browsers.</p>
<h2>Further work</h2>
<p>Material still to be written:</p>
<ul>
<li>Sorting and filtering small multiples - Tables</li>
<li>Tabs again as small multiples</li>
<li>Loading and syncing to remote models</li>
<li>Lazily loading data</li>
<li>Composing models - Control states and actions</li>
<li>Drag and drop</li>
<li>Undo/redo</li>
<li>Pluralization</li>
</ul>
<p>Techniques that I want to revise:</p>
<ul>
<li>Make Observable a constructor function instead of trying to provide a prototype.</li>
<li>Using the event queue to make calls to notify implicit.</li>
<li>Revise Controllers so they don't need an initialize method.</li>
<li>Factor out rendering a sequence of subviews into a single function.</li>
<li>Adding and removing classes from elements in a structured way.</li>
</ul>
<p>Technologies that weren't ready when I started this, but are now and I should use them:</p>
<ul>
<li>HTML5 context menus</li>
<li>Flexboxes</li>
<li>Grid layout</li>
<li>Internationalization API (ECMA 402)</li>
<li>ECMAScript 6 modules</li>
</ul>
</body>
</html>