-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcljs.html
309 lines (205 loc) · 12.4 KB
/
cljs.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
<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chapter 4: ClojureScript — ClojureBridgeMN Documentation November 4-5, 2016 documentation</title>
<link rel="stylesheet" href="_static/css/theme.css" type="text/css" />
<link rel="index" title="Index"
href="genindex.html"/>
<link rel="search" title="Search" href="search.html"/>
<link rel="top" title="ClojureBridgeMN Documentation November 4-5, 2016 documentation" href="index.html"/>
<link rel="up" title="Track 2" href="track2.html"/>
<link rel="next" title="Clojure Resources" href="resources.html"/>
<link rel="prev" title="Chapter 3: Concurrency" href="concurrency.html"/>
<script src="_static/js/modernizr.min.js"></script>
</head>
<body class="wy-body-for-nav" role="document">
<div class="wy-grid-for-nav">
<nav data-toggle="wy-nav-shift" class="wy-nav-side">
<div class="wy-side-scroll">
<div class="wy-side-nav-search">
<a href="index.html" class="icon icon-home"> ClojureBridgeMN Documentation
</a>
<div class="version">
Saturday Nov 5 2016 @ 15:59:08 futuro
</div>
<div role="search">
<form id="rtd-search-form" class="wy-form" action="search.html" method="get">
<input type="text" name="q" placeholder="Search docs" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
</div>
</div>
<div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
<ul class="current">
<li class="toctree-l1"><a class="reference internal" href="setup.html">Installfest</a></li>
<li class="toctree-l1"><a class="reference internal" href="welcome.html">Welcome to ClojureBridge</a></li>
<li class="toctree-l1"><a class="reference internal" href="track1.html">Track 1</a></li>
<li class="toctree-l1 current"><a class="reference internal" href="track2.html">Track 2</a><ul class="current">
<li class="toctree-l2"><a class="reference internal" href="clojure_functional.html">Chapter 1: Clojure as a functional language</a></li>
<li class="toctree-l2"><a class="reference internal" href="koans.html">Chapter 2: Clojure Koans</a></li>
<li class="toctree-l2"><a class="reference internal" href="concurrency.html">Chapter 3: Concurrency</a></li>
<li class="toctree-l2 current"><a class="current reference internal" href="#">Chapter 4: ClojureScript</a><ul>
<li class="toctree-l3"><a class="reference internal" href="#watch-the-flappy-bird-demo-video">Watch the flappy bird demo video</a></li>
<li class="toctree-l3"><a class="reference internal" href="#clone-flappy-bird-demo">Clone flappy-bird-demo</a></li>
<li class="toctree-l3"><a class="reference internal" href="#try-clojurescript-with-flappy-bird">Try ClojureScript with flappy bird</a></li>
<li class="toctree-l3"><a class="reference internal" href="#going-further">Going further</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="resources.html">Clojure Resources</a></li>
<li class="toctree-l1"><a class="reference internal" href="community.html">Connect with the Clojure Community</a></li>
</ul>
</div>
</div>
</nav>
<section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">
<nav class="wy-nav-top" role="navigation" aria-label="top navigation">
<i data-toggle="wy-nav-top" class="fa fa-bars"></i>
<a href="index.html">ClojureBridgeMN Documentation</a>
</nav>
<div class="wy-nav-content">
<div class="rst-content">
<div role="navigation" aria-label="breadcrumbs navigation">
<ul class="wy-breadcrumbs">
<li><a href="index.html">Docs</a> »</li>
<li><a href="track2.html">Track 2</a> »</li>
<li>Chapter 4: ClojureScript</li>
<li class="wy-breadcrumbs-aside">
<a href="_sources/cljs.txt" rel="nofollow"> View page source</a>
</li>
</ul>
<hr/>
</div>
<div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
<div itemprop="articleBody">
<div class="section" id="chapter-4-clojurescript">
<h1>Chapter 4: ClojureScript<a class="headerlink" href="#chapter-4-clojurescript" title="Permalink to this headline">¶</a></h1>
<p>This exercise is to simply give you:</p>
<ul class="simple">
<li>a taste of interactive development using ClojureScript (you get a CLJS REPL <em>in the browser</em>)</li>
<li>examples of JavaScript interop</li>
<li>pointers to go further</li>
</ul>
<div class="section" id="watch-the-flappy-bird-demo-video">
<h2>Watch the flappy bird demo video<a class="headerlink" href="#watch-the-flappy-bird-demo-video" title="Permalink to this headline">¶</a></h2>
<p>The <a class="reference external" href="https://www.youtube.com/watch?v=KZjFVdU8VLI">video</a> only 6 minutes, but gives you the context for flappy-bird.</p>
<p>Next read (but don’t follow the instructions yet) the <a class="reference external" href="http://rigsomelight.com/2014/05/01/interactive-programming-flappy-bird-clojurescript.html">blog post</a> about this flappy bird demo.</p>
</div>
<div class="section" id="clone-flappy-bird-demo">
<h2>Clone flappy-bird-demo<a class="headerlink" href="#clone-flappy-bird-demo" title="Permalink to this headline">¶</a></h2>
<p>We’ve updated the flappy-bird-demo in our ClojureBridgeMN organization so
you can benefit from the latest versions of libraries. After you
clone it check out our branch with the modifications (because we’re
hoping Bruce will accept our changes in a Pull Request).</p>
<div class="highlight-none"><div class="highlight"><pre><span></span>clojurista@mylaptop$ git clone git clone https://github.com/clojurebridge-minneapolis/flappy-bird-demo.git
clojurista@mylaptop$ git checkout tmarble/ClojureBridgeMN-track2
</pre></div>
</div>
</div>
<div class="section" id="try-clojurescript-with-flappy-bird">
<h2>Try ClojureScript with flappy bird<a class="headerlink" href="#try-clojurescript-with-flappy-bird" title="Permalink to this headline">¶</a></h2>
<p>Use <strong><a class="reference external" href="https://github.com/bhauman/lein-figwheel/">lein figwheel</a></strong> to
create an interactive browser REPL:</p>
<div class="highlight-none"><div class="highlight"><pre><span></span>clojurista@mylaptop$ lein figwheel
Figwheel: Cleaning because dependencies changed
Figwheel: Cutting some fruit, just a sec ...
Retrieving figwheel/figwheel/0.5.4-7/figwheel-0.5.4-7.pom from clojars
Retrieving ...
Figwheel: Validating the configuration found in project.clj
Figwheel: Configuration Valid :)
Figwheel: Starting server at http://0.0.0.0:3449
Figwheel: Watching build - flappy-bird-demo
Figwheel: Cleaning build - flappy-bird-demo
Compiling "resources/public/js/flappy_bird_demo.js" from ["src"]...
Successfully compiled "resources/public/js/flappy_bird_demo.js" in 13.933 seconds.
Figwheel: Starting CSS Watcher for paths ["resources/public/css"]
Launching ClojureScript REPL for build: flappy-bird-demo
Figwheel Controls:
(stop-autobuild) ;; stops Figwheel autobuilder
(start-autobuild [id ...]) ;; starts autobuilder focused on optional ids
(switch-to-build id ...) ;; switches autobuilder to different build
(reset-autobuild) ;; stops, cleans, and starts autobuilder
(reload-config) ;; reloads build config and resets autobuild
(build-once [id ...]) ;; builds source one time
(clean-builds [id ..]) ;; deletes compiled cljs target files
(print-config [id ...]) ;; prints out build configurations
(fig-status) ;; displays current state of system
Switch REPL build focus:
:cljs/quit ;; allows you to switch REPL to another build
Docs: (doc function-name-here)
Exit: Control+C or :cljs/quit
Results: Stored in vars *1, *2, *3, *e holds last exception object
Prompt will show when Figwheel connects to your application
To quit, type: :cljs/quit
cljs.user=> (println 123)
123
nil
cljs.user=> (.-location (.-document js/window))
#object[Location http://0.0.0.0:3449/]
cljs.user=> :cljs/quit
clojurista@mylaptop$
</pre></div>
</div>
<p>Open your browser to <a class="reference external" href="http://localhost:3449">http://localhost:3449</a></p>
<p>Turn on your developer console.</p>
<p>When you type <code class="docutils literal"><span class="pre">(println</span> <span class="pre">123)</span></code> you are interacting with the browser <em>live</em>!</p>
<p>You can try some JavaScript interop with <code class="docutils literal"><span class="pre">(.-location</span> <span class="pre">(.-document</span> <span class="pre">js/window))</span></code></p>
<p>Now open the ClojureScript source file in your editor: <code class="docutils literal"><span class="pre">src/flappy_bird_demo/core.cljs</span></code></p>
<p>See the string for the button label <code class="docutils literal"><span class="pre">"START"</span></code> on line 187. Change it to <code class="docutils literal"><span class="pre">"START</span> <span class="pre">now!"</span></code> and see the browser <em>update automatically</em> when you save <code class="docutils literal"><span class="pre">core.cljs</span></code>.</p>
<p>Press the <strong>START now!</strong> button to start playing! Use your mouse button to <strong>JUMP</strong>!</p>
<p>To quit a CLJS REPL type <code class="docutils literal"><span class="pre">:cljs/quit</span></code></p>
</div>
<div class="section" id="going-further">
<h2>Going further<a class="headerlink" href="#going-further" title="Permalink to this headline">¶</a></h2>
<ul class="simple">
<li><a class="reference external" href="http://clojurescript.org">ClojureScript.org</a></li>
<li><a class="reference external" href="https://github.com/bhauman/lein-figwheel/">lein-figwheel</a></li>
<li><a class="reference external" href="https://github.com/martinklepsch/tenzing">tenzing</a></li>
<li><a class="reference external" href="https://github.com/viebel/klipse">klipse</a> and the <a class="reference external" href="http://blog.klipse.tech/clojure/2016/06/07/klipse-plugin-tuto.html">klipse/clojure blog</a></li>
</ul>
</div>
</div>
</div>
</div>
<footer>
<div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
<a href="resources.html" class="btn btn-neutral float-right" title="Clojure Resources" accesskey="n">Next <span class="fa fa-arrow-circle-right"></span></a>
<a href="concurrency.html" class="btn btn-neutral" title="Chapter 3: Concurrency" accesskey="p"><span class="fa fa-arrow-circle-left"></span> Previous</a>
</div>
<hr/>
<div role="contentinfo">
<p>
© Copyright 2016 ClojureBridgeMN volunteers.
</p>
</div>
Built with <a href="http://sphinx-doc.org/">Sphinx</a> using a <a href="https://github.com/snide/sphinx_rtd_theme">theme</a> provided by <a href="https://readthedocs.org">Read the Docs</a>.
</footer>
</div>
</div>
</section>
</div>
<script type="text/javascript">
var DOCUMENTATION_OPTIONS = {
URL_ROOT:'./',
VERSION:'November 4-5, 2016',
COLLAPSE_INDEX:false,
FILE_SUFFIX:'.html',
HAS_SOURCE: true
};
</script>
<script type="text/javascript" src="_static/jquery.js"></script>
<script type="text/javascript" src="_static/underscore.js"></script>
<script type="text/javascript" src="_static/doctools.js"></script>
<script type="text/javascript" src="_static/js/theme.js"></script>
<script type="text/javascript">
jQuery(function () {
SphinxRtdTheme.StickyNav.enable();
});
</script>
</body>
</html>