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
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Leverage the World Wide West with Farwest</title>
<!-- metadata -->
<meta charset="utf8" />
<meta name="generator" content="S5" />
<meta name="version" content="S5 1.1" />
<meta name="presdate" content="20120329" />
<meta name="author" content="Loïc Hoguin" />
<meta name="company" content="Nine Nines" />
<!-- configuration parameters -->
<meta name="defaultView" content="slideshow" />
<meta name="controlVis" content="visible" />
<!-- style sheet links -->
<link rel="stylesheet" href="ui/default/slides.css" type="text/css" media="projection" id="slideProj" />
<link rel="stylesheet" href="ui/default/outline.css" type="text/css" media="screen" id="outlineStyle" />
<link rel="stylesheet" href="ui/default/print.css" type="text/css" media="print" id="slidePrint" />
<link rel="stylesheet" href="ui/default/opera.css" type="text/css" media="projection" id="operaFix" />
<!-- S5 JS -->
<script src="ui/default/slides.js" type="text/javascript"></script>
</head>
<body>
<div class="layout">
<div id="controls"><!-- DO NOT EDIT --></div>
<div id="currentSlide"><!-- DO NOT EDIT --></div>
<div id="header">
<div id="sub_header"></div>
<div id="logo"><img src="ui/img/logo.svg"/></div>
</div>
<div id="footer">
<div id="footer_shadow"></div>
<h1>Erlang Factory SF Bay Area 2012</h1>
<h2>Farwest</h2>
</div>
</div>
<div class="presentation">
<div class="slide">
<h1>Leverage the World Wide West with Farwest</h1>
<h2>Coming soon to a desert near you.</h2>
<h3>Loïc Hoguin - @lhoguin</h3>
<h4>Erlang Cowboy and Nine Nines Founder</h4>
</div>
<div class="slide">
<h1>How soon?</h1>
<ul>
<li>Farwest is the result of months of research</li>
<li>It still needs a few months of development</li>
<li>Early feedback is more than welcome</li>
</ul>
</div>
<div class="slide">
<h1>Current solutions in Erlang</h1>
</div>
<div class="slide">
<h1>Nitrogen</h1>
<ul>
<li>Web development for Erlang developers</li>
<li>HTML built using Erlang records</li>
<li>Built-in JS for many components and actions</li>
</ul>
</div>
<div class="slide">
<h1>ChicagoBoss</h1>
<ul>
<li>Erlang development for Rails developers</li>
<li>ErlyDTL templates</li>
<li>No constraints on frontend libraries used</li>
</ul>
</div>
<div class="slide">
<h1>Zotonic</h1>
<ul>
<li>The Erlang CMS</li>
<li>Big plugin-based architecture, with ErlyDTL templates</li>
<li>Many constraints on how the development should be done</li>
</ul>
</div>
<div class="slide">
<h1>Lightweight server solution</h1>
<ul>
<li>Choose your own <s>adventure</s> server</li>
<li>No constraint on any frontend or backend libraries</li>
<li>A lot more work to set everything up</li>
</ul>
</div>
<div class="slide">
<h1>Problems</h1>
</div>
<div class="slide">
<h1>Erlang developers suck at Frontend</h1>
<ul>
<li>They know how to write code, not UI</li>
<li>Writing HTML in Erlang doesn't make them better</li>
<li>UIs created by Erlang developers generally suck</li>
<li>The Erlang developer should never touch frontend code</li>
</ul>
</div>
<div class="slide">
<h1>Frontend developers and Erlang</h1>
<ul>
<li>They don't know what Erlang is</li>
<li>They just need templates and assets</li>
<li>They need to be able to write or update the templates</li>
<li>They should do so without any Erlang knowledge</li>
</ul>
</div>
<div class="slide">
<h1>They have different concerns</h1>
<ul>
<li>These concerns shouldn't overlap</li>
<li>They need a common language to exchange information</li>
</ul>
</div>
<div class="slide">
<h1>REST is the key</h1>
<ul>
<li>Erlang developers know REST</li>
<li>Frontend developers already use REST APIs</li>
<li>Make REST the common language between both sides</li>
</ul>
</div>
<div class="slide">
<h1>Farwest</h1>
</div>
<div class="slide">
<h1>Farwest for Erlang developers</h1>
<ul>
<li>Strictly work only on backend logic</li>
<li>No HTML, CSS or JS; it's the Frontend guy's job!</li>
<li>REST API developer</li>
<li>Get data in and out, that's it</li>
<li>Same old Cowboy REST development you're used to do</li>
</ul>
</div>
<div class="slide">
<h1>Farwest is for Frontend developers</h1>
<ul>
<li>Because they make your app pretty and easy to use</li>
<li>None of the following Farwest features require Erlang knowledge</li>
</ul>
</div>
<div class="slide">
<h1>Installation and setup</h1>
<ul>
<li>Install Erlang</li>
<li>Download and untar a blank project template</li>
<li>Start the server with ./start.sh</li>
<li>This gives you a link to the integrated development interface</li>
</ul>
</div>
<div class="slide">
<h1>Continuous development</h1>
<ul>
<li>Automatic code recompilation and reload</li>
<li>Including templates, CSS and JS</li>
<li>Only a refresh of the page is needed to view the changes</li>
</ul>
</div>
<div class="slide">
<h1>Built for REST</h1>
<ul>
<li>Development tools for REST, with a Web UI</li>
<li>Javascript libraries to simplify REST manipulation</li>
<li>Crawlers can still retrieve your content using GET</li>
</ul>
</div>
<div class="slide">
<h1>Backend API documentation</h1>
<ul>
<li>Automatically generated</li>
<li>Partially built using the resources exports</li>
<li>Partially built from the edoc comments</li>
<li>Available through the API explorer tool</li>
</ul>
</div>
<div class="slide">
<h1>Bullet enabled</h1>
<ul>
<li>Always connected bidirectional stream with the server</li>
<li>Receive server events as soon as they happen</li>
<li>Events are mapped to JS callbacks</li>
<li>Reply directly without opening a new connection</li>
</ul>
</div>
<div class="slide">
<h1>REST over Bullet</h1>
<ul>
<li>Call the API over the Bullet stream</li>
<li>Request is sent as JSON, converted to a Req object, then dispatched</li>
<li>Request is asynchronous, similar to jQuery.ajax()</li>
</ul>
</div>
<div class="slide">
<h1>Routing</h1>
<ul>
<li>Uses Cowboy's dispatch list mechanism</li>
<li>Includes a tool for configuring the dispatch list</li>
<li>Dispatch list is reloaded live</li>
</ul>
</div>
<div class="slide">
<h1>Quick application scaffolding</h1>
<ul>
<li>Predefined API enabled by default</li>
<li>/data/: direct data storage access</li>
<li>/dispatch/: direct dispatch list access</li>
<li>/env/: direct environment data access</li>
<li>/farwest/: development tools Web UI</li>
</ul>
</div>
<div class="slide">
<h1>Map URIs to data</h1>
<ul>
<li>Map a URI to a scaffolding resource handler</li>
<li>Resource handler receives a list of data queries</li>
<li>URI components and query string can be used in queries</li>
<li>Templates receive the queried data</li>
<li>Configurable using the dispatch and query Web UIs</li>
</ul>
</div>
<div class="slide">
<h1>Not just scaffolding</h1>
<ul>
<li>You can choose to keep these features enabled</li>
<li>After adding some authentication of course</li>
<li>They let the end user extend your application</li>
<li>Like a wiki, but with separate data and templates</li>
</ul>
</div>
<div class="slide">
<h1>Remember?</h1>
<ul>
<li>None of this requires Erlang knowledge</li>
<li>They can write their application without knowing Erlang</li>
<li>They can write their application before the backend is ready</li>
<li>They may not even need a custom backend API</li>
</ul>
</div>
<div class="slide">
<h1>Farwest is still Erlang</h1>
<ul>
<li>Concurrent</li>
<li>Fault-tolerant</li>
<li>Easily distributed</li>
<li>And one more thing...</li>
</ul>
</div>
<div class="slide">
<h1>Live frontend upgrades</h1>
<ul>
<li>Available as part of release upgrades</li>
<li>Upgrade the page's CSS, JS or media files live</li>
<li>When not possible, a callback can be called instead</li>
<li>This one obviously requires an Erlang developer</li>
</ul>
</div>
<div class="slide">
<h1>Technical overview</h1>
</div>
<div class="slide">
<h1>Modular Farwest</h1>
<ul>
<li>Base Farwest contains the core, tools and scaffolding</li>
<li>Plugins are rebar dependencies</li>
<li>Write your application as a standard OTP application</li>
<li>Or write many Farwest plugins for reusability</li>
</ul>
</div>
<div class="slide">
<h1>Farwest plugins</h1>
<ul>
<li>Plugins are OTP applications</li>
<li>At startup, plugins register themselves with Farwest</li>
<li>They provide resources, OTP services, assets, tools</li>
</ul>
</div>
<div class="slide">
<h1>OTP compliant</h1>
<ul>
<li>Generate OTP releases of your applications</li>
<li>Upgrade Farwest or its plugins</li>
<li>Connect several Farwest nodes</li>
</ul>
</div>
<div class="slide">
<h1>Made for the web</h1>
<ul>
<li>Automatic minifying and merging of CSS/JS files</li>
<li>User authentication (plugins)</li>
<li>Internationalization and unicode support</li>
</ul>
</div>
<div class="slide">
<h1>Dependencies</h1>
<ul>
<li>Cowboy, Bullet, Sheriff, Goldrush/Saloon</li>
<li>ErlyDTL, JSX</li>
<li>Gproc</li>
<li>Bootstrap, jQuery</li>
<li>Undecided storage backend</li>
</ul>
</div>
<div class="slide">
<h1>Undependencies</h1>
<ul>
<li>You don't have to use most dependencies</li>
<li>Farwest does not enforce how you build the application</li>
</ul>
</div>
<div class="slide">
<h1>License</h1>
<ul>
<li>ISC License (BSD simplified)</li>
<li>Same as Cowboy</li>
</ul>
</div>
<div class="slide">
<h1>Timeline</h1>
<ul>
<li>March 29th, 2012: This talk</li>
<li>April 2nd, 2012: First commits</li>
<li>EUC, 2012: Alpha</li>
<li>London, 2012: Beta</li>
</ul>
</div>
<div class="slide">
<h1>You can help</h1>
<ul>
<li>Follow the project</li>
<li>Try it out as soon as it becomes available</li>
<li>Send patches</li>
<li>Sponsor the project</li>
</ul>
</div>
<div class="slide">
<h1>Links</h1>
<ul>
<li>https://github.com/extend/farwest</li>
<li>http://ninenines.eu</li>
<li>#erlounge on Freenode</li>
</ul>
</div>
<div class="slide">
<h1>Questions?</h1>
</div>
</div>
</body>
</html>
|
