-
Notifications
You must be signed in to change notification settings - Fork 0
/
slides.html
206 lines (179 loc) · 10.6 KB
/
slides.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
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset='utf-8' />
<meta content='width=1024, user-scalable=no' name='viewport' />
<!-- deck.js's core css -->
<link href="deck.js/core/deck.core.css" rel="stylesheet" type="text/css"/>
<!-- deck.js extension CSS files -->
<link href="deck.js/extensions/codemirror/deck.codemirror.css" rel="stylesheet" type="text/css"/>
<link href="deck.js/extensions/goto/deck.goto.css" rel="stylesheet" type="text/css"/>
<link href="deck.js/extensions/hash/deck.hash.css" rel="stylesheet" type="text/css"/>
<link href="deck.js/extensions/menu/deck.menu.css" rel="stylesheet" type="text/css"/>
<link href="deck.js/extensions/navigation/deck.navigation.css" rel="stylesheet" type="text/css"/>
<link href="deck.js/extensions/scale/deck.scale.css" rel="stylesheet" type="text/css"/>
<link href="deck.js/extensions/status/deck.status.css" rel="stylesheet" type="text/css"/>
<!-- all css in the css dir: Keydown CSS, your custom CSS, and themes from deck.js -->
<link href="css/keydown.css" rel="stylesheet" type="text/css"/>
<link href="css/default.css" rel="stylesheet" type="text/css"/>
<link href="css/ember.css" rel="stylesheet" type="text/css"/>
<link href="css/horizontal-slide.css" rel="stylesheet" type="text/css"/>
<link href="css/swiss.css" rel="stylesheet" type="text/css"/>
<!-- Modernizr (provided for legacy browsers) -->
<script src="deck.js/support/modernizr.custom.js" type="text/javascript"></script>
</head>
<body class='deck-container keydown'>
<section class='slide'>
<div class='spacer top'></div>
<div class='content'>
<h1>Ember.js</h1>
</div>
<div class='spacer bottom'></div>
</section>
<section class='slide'>
<div class='spacer top'></div>
<div class='content'>
<h2>Who are we?</h2>
<p>David J. Hamilton - The Believer</p>
<p>Matthew Kocher - The Skeptic</p>
</div>
<div class='spacer bottom'></div>
</section>
<section class='left slide'>
<div class='spacer top'></div>
<div class='content'>
<h2>Overview</h2>
<ul>
<li>Starting from the ground up</li>
<li>Team of 6 rails developers with jQuery/Backbone experience</li>
</ul>
<p>Goal of the project is to take a fresh look at Vertical Response's ten years of success, and position the company for the next ten. Building a real app, planning for real load levels, but willing to invest the time to use something which will make for a better user experience.</p>
</div>
<div class='spacer bottom'></div>
</section>
<section class='left slide'>
<div class='spacer top'></div>
<div class='content'>
<h2>Getting Started</h2>
<p>Two day spike - try it out, wrap Jasmine around it.</p>
<p>Get bindings working in our own sandbox, explore view/template linking. Write some Jasmine model specs.</p>
<p>Didn't understand Ember controllers vs Rails controllers</p>
<p>In parallel, starting a rails back end, omniauth, beginnings of a domain model.</p>
</div>
<div class='spacer bottom'></div>
</section>
<section class='left slide'>
<div class='spacer top'></div>
<div class='content'>
<h2>Ember Data</h2>
<p>Seemed to be <strong><em>the way forward</em></strong> though not <strong><em>production ready™</em></strong>. (we've got the first of many pull requests open already)</p>
<p>Different model - not request/response but synchronization.</p>
<p>API Being defined as we speak. <code>Todo.Models.Item.find(1)</code> just started working last week.</p>
</div>
<div class='spacer bottom'></div>
</section>
<section class='left slide'>
<div class='spacer top'></div>
<div class='content'>
<h2>App structure</h2>
<p>Examples online for the most part use globals and bind directly to the right instance. This makes us throw up in our mouths a little bit.</p>
<p>Lacking a Rails 5 minute blog or J2EE pet store canonical app.</p>
<p>Slowly been ripping out every <code>Ember.Xyz.create({})</code> that we thought was right and replacing with <code>Ember.Xyz.extend({})</code></p>
</div>
<div class='spacer bottom'></div>
</section>
<section class='left slide'>
<div class='spacer top'></div>
<div class='content'>
<h2>Testing with Jasmine</h2>
<p>Mock the clock - The DOM is slow. Ember batches DOM updates using a run loop. Mock the clock, tick the clock.</p>
<p><code>Ember.testing</code> not documented, seems to just replace <code>jasmine.Clock.tick(1)</code> with <code>Ember.run()</code></p>
<p>Test Pollution</p>
<p>Write helper functions - For instance, render a view and attach to the test dom.</p>
<p>Test are slow - our view tests are > 90% of our suite time.</p>
</div>
<div class='spacer bottom'></div>
</section>
<section class='left slide'>
<div class='spacer top'></div>
<div class='content'>
<h2>Open questions</h2>
<p>Do we have to write the ember data rails adapter?</p>
<p>Are controllers global? When should they be instantiated? When should they be destroyed?</p>
<p>Where are the apps? Travis-ci.org has been useful, but it's a bit of a special case app. Todo examples are not big enough to drive out reusable patterns.</p>
</div>
<div class='spacer bottom'></div>
</section>
<section class='left slide'>
<div class='spacer top'></div>
<div class='content'>
<h2>Open questions (continued)</h2>
<p>Shelling out the jQuery - Yes, we know we can make things display conditionally based on view/controller state. This seems heavyweight for a drop down menu, can we just have Ember trigger jQuery code?</p>
<p>Contributing Upstream - How long does a pull request take?</p>
</div>
<div class='spacer bottom'></div>
</section>
<section class='left slide'>
<div class='spacer top'></div>
<div class='content'>
<h2>Conclusions</h2>
<p>We like it. The parts that are done are solid, but there are plenty of places where features you expect just aren't there or are undocumented.</p>
<p>Slides available at <a href="http://bit.ly/emberjs">http://bit.ly/emberjs</a></p>
</div>
<div class='spacer bottom'></div>
</section>
<!-- deck.js navigation extension -->
<a class='deck-prev-link' href='#' title='Previous'>←</a>
<a class='deck-next-link' href='#' title='Next'>→</a>
<!-- deck.js hash extension -->
<a class='deck-permalink' href='.' title='Permalink to this slide'>#</a>
<!-- deck.js status extension -->
<p class='deck-status'>
<span class='deck-status-current'></span>
/
<span class='deck-status-total'></span>
</p>
<!-- jQuery & deck.js -->
<script src="deck.js/support/jquery.1.6.4.min.js" type="text/javascript"></script>
<script src="deck.js/core/deck.core.js" type="text/javascript"></script>
<!-- deck.js extension JS files -->
<script src="deck.js/extensions/codemirror/codemirror.js" type="text/javascript"></script>
<script src="deck.js/extensions/codemirror/deck.codemirror.js" type="text/javascript"></script>
<script src="deck.js/extensions/codemirror/mode/clike/clike.js" type="text/javascript"></script>
<script src="deck.js/extensions/codemirror/mode/clojure/clojure.js" type="text/javascript"></script>
<script src="deck.js/extensions/codemirror/mode/coffeescript/coffeescript.js" type="text/javascript"></script>
<script src="deck.js/extensions/codemirror/mode/css/css.js" type="text/javascript"></script>
<script src="deck.js/extensions/codemirror/mode/diff/diff.js" type="text/javascript"></script>
<script src="deck.js/extensions/codemirror/mode/haskell/haskell.js" type="text/javascript"></script>
<script src="deck.js/extensions/codemirror/mode/htmlmixed/htmlmixed.js" type="text/javascript"></script>
<script src="deck.js/extensions/codemirror/mode/javascript/javascript.js" type="text/javascript"></script>
<script src="deck.js/extensions/codemirror/mode/lua/lua.js" type="text/javascript"></script>
<script src="deck.js/extensions/codemirror/mode/php/php.js" type="text/javascript"></script>
<script src="deck.js/extensions/codemirror/mode/plsql/plsql.js" type="text/javascript"></script>
<script src="deck.js/extensions/codemirror/mode/python/python.js" type="text/javascript"></script>
<script src="deck.js/extensions/codemirror/mode/r/r.js" type="text/javascript"></script>
<script src="deck.js/extensions/codemirror/mode/rst/rst.js" type="text/javascript"></script>
<script src="deck.js/extensions/codemirror/mode/ruby/ruby.js" type="text/javascript"></script>
<script src="deck.js/extensions/codemirror/mode/scheme/scheme.js" type="text/javascript"></script>
<script src="deck.js/extensions/codemirror/mode/smalltalk/smalltalk.js" type="text/javascript"></script>
<script src="deck.js/extensions/codemirror/mode/sparql/sparql.js" type="text/javascript"></script>
<script src="deck.js/extensions/codemirror/mode/stex/stex.js" type="text/javascript"></script>
<script src="deck.js/extensions/codemirror/mode/velocity/velocity.js" type="text/javascript"></script>
<script src="deck.js/extensions/codemirror/mode/xml/xml.js" type="text/javascript"></script>
<script src="deck.js/extensions/codemirror/mode/xmlpure/xmlpure.js" type="text/javascript"></script>
<script src="deck.js/extensions/codemirror/mode/yaml/yaml.js" type="text/javascript"></script>
<script src="deck.js/extensions/goto/deck.goto.js" type="text/javascript"></script>
<script src="deck.js/extensions/hash/deck.hash.js" type="text/javascript"></script>
<script src="deck.js/extensions/menu/deck.menu.js" type="text/javascript"></script>
<script src="deck.js/extensions/navigation/deck.navigation.js" type="text/javascript"></script>
<script src="deck.js/extensions/scale/deck.scale.js" type="text/javascript"></script>
<script src="deck.js/extensions/status/deck.status.js" type="text/javascript"></script>
<!-- your custom JS here, including call to initialize deck.js-codemirror -->
<script src="js/ember.js" type="text/javascript"></script>
<!-- Initialize the deck. -->
<script type='text/javascript'>
$(function() { $.deck('.slide'); });
</script>
</body>
</html>