-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
executable file
·435 lines (347 loc) · 14.3 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
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>reveal.js</title>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/sky.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<style>
h1, h2, h3, h4, h5, h6 {
text-transform: none !important;
}
html.dimbg .slide-background {
opacity: 0.3 !important;
filter: blur(4px);
}
.reveal .footer {
position: absolute;
bottom: 1em;
left: 1em;
font-size: 0.7em;
}
</style>
</head>
<body>
<div class="reveal">
<div class='footer'>
<a href="http://gregd.me/fullstack-scala-talk">gregd.me/fullstack-scala-talk</a>
</div>
<div class="slides">
<section data-markdown data-separator="^~~~~" data-separator-vertical="^~" data-notes="^Note:">
<script type="text/template">
### Fullstack Scala with Play and Scala.js
<br />
<p>by <a href="http://twitter.com/grogs">@grogs</a></p>
~
### About
* Backend Scala Developer @ Hotels.com
* Started using Scala in 2009
Note:
* We are hiring. Most teams are using Java, but a few of us are on Scala. I'm trying to increase that number.
It's a really nice place to work. Do some and talk to me if you're interested, because the referal bonus is really good.
* Didn't get to use it in production until 2012.
* I got into programming by hacking together pieces of PHP and JS and writing some horrible code. And along the way I've focused on backend, but the frontend is something I'm still very passionate about,
~
Today will be an introduction to Play and Scala.js.
Note:
* We'll start with an introduction to Play. Then have a look at Scala.js. And then have a look at how you can use them together, and why you might want to do that.
* By the way, how many of you are using Scala? Have played with it, maybe done the coursera course?
~~~~
### Play Framework
Note:
* Who's used Play? ...heard of it?
~
Play is a traditional MVC web framework for Scala and Java
Note:
* Play 1.0 was a Java framework, first released in 2008/2009. I remember being really impressed with it. And then trying to use it with Scala which I was learning at the time - that was a little bit painful
* Play 2.0 was written in Scala, released in 2012. But it still very much targets both Java and Scala.
* Maintained by Lightbend as part of the "Lightbend Reactive Platform", alongside Akka and Legum
~
Play is a high velocity framework.
Note:
* In the same vein as something like Ruby on Rails
* It tries to make it quick to get an app up and running
* And had everything you need to build an app out of the box. So you don't have to go and evaluate a bunch of JSON Libraries, or REST client to call external servies, instead it's all there out of the box.
~
You can create a new project with SBT
`sbt new playframework/play-scala-seed.g8`
Note:
* *Demo* creating a new play app and run it
~
It has a really quick feedback loop. "Just-hit-refresh"
Note:
* This is what got me interested in it back in 2010. I was just really impressed by this. It kind of felt like working with RoR or Django.
* *Demo* add a hello world endpoint.
* Everyone knows that scala compilation is slow, but the incremental compilation is fast. (Change hello world to hello devoxx)
** combined with this live reload functionality, as you can hopefully see, it's gives a really fast feedback loop
*** and this allows the feedback loop to be on par with ruby on rails or django
* The cost of this is that you're locked into SBT or Gradle.
** Play needs to hook into your build tool to do this.
** So using Play with Play would work, but you lose live reload and there's a few other ways in which it's just... less documented
~
It has everything you need to build web backends out-of-the-box
- Templating
- JSON library
- Dependency Injection
- REST client
- WebSockets/Server-Sent Events
Note:
**Demo**
* Templates - type safety.
** Change `content: Html` in `main.scala.html` to a `java.util.Date`.
** Refresh. Compilation error.
*** Sidenote - Compilation errors in the browser are nice, but not something you want in prod - so these only happen during development
~
### It's scalable.
* 2.6.x is powered by Akka HTTP.
* If your Controllers are async and return Futures, then you're not using a thread per request.
Note:
* 2.5.x and previous versions are using Netty
* **Demo** change `index` to get IP from ifconfig.me
```scala
def index = Action.async { implicit req =>
ws.url("hxxp://ifconfig.me")
.withHeaders(USER_AGENT -> "curl")
.get().map(r => Ok(r.body))
}
```
~
It's easy to add CoffeeScript and Less/Sass to your frontend
Note:
* So although it's a traditional MVC style framework, it's easy enough to build a rich frontend experience
* You don't need to go and learn another build tool, you can just manage these frontend dependencies from SBT
~
Play is aimed at tradional web apps with server-side templating.
Note:
* And for better or worse, I think the web is headed towards richer more complicated frontends - and Play doesn't really cover that
~
But, good for building RESTful APIs.
Note:
* I've used it on a number of projects just to provide an API, and ignored all the templating stuff.
* It's still been very valuable just for this fast reloading and ease of deployment
~
Deployment is really simple
Note:
* Heroku has built in support for it
* Demo `sbt docker:publishLocal`
* oops, no crypto secret. Play can handle signing session cookies CSRF tokens for you, but it needs an encryption secret, and it won't let you run it in production mode otherwise.
** To fix this, we just add `play.crypto.secret` to application.conf
* ok, run i can run it with `docker run -p 1337:9000 play-scala-seed:1.0-SNAPSHOT`
* then browse to it and show index and hello endpoints
* there's other ways of deploying which you can read up on.
** And this is another strength. Play is mature and has a big community. Really good documentation and lots of stuff on stackoverflow
~~~~
## Scala.js
Note:
* Who has used it? ...Heard of it?
~
So what is Scala.js ?
~
A Scala to JavaScript compiler
Note:
Started by Sébastien Doeraene at EPFL around 3.5 years ago
Hooks into the Scala compiler, and instead of emitting JVM bytecode, it emits JavaScript
~
You can use it to write your JavaScript web frontend.
But there are other usecases.
Note:
* Web frontend is where most of the community's effort is going, but there's nothing that technically limits it
* People have used it with NodeJS on the server.
* I've used that a little myself: Electron with Scala.js, which leverages NodeJS
~
To use it, add a plugin to your SBT build, and enable it for one of your projects.
Note:
* So this assumes you're using SBT. Gradle and Maven aren't supported.
* You can projects that are cross compile projects for JVM and JS, or just pure JS projects.
* Not everything works (a lot of the Java stdlib isn't available, which Scala stdlib uses).
** But there's enough for it to be usable for a lot of usecases.
~
Or clone one of the [skeleton projects](https://www.scala-js.org/libraries/skeletons.html) to get started:
- [A pure Scala.js project](https://github.com/lihaoyi/workbench-example-app)
- [Play server and Scala.js client](https://github.com/vmunier/play-with-scalajs-example)
- [Scala.js targetting NodeJS](https://github.com/rockymadden/scala-node-example)
~
This isn't like GWT.
Note:
* Google Web Toolkit was an attempt to let backend developers to write web frontends without understanding web frontends or the JavaScript ecosystem.
* A very tempting idea, but ultimately not a very successful one.
~
Why use Scala.js?
Note:
* We're quite used to web frontends being a seperate codebase with a largely seperate dev team.
* But there's a few advantages to having one codebase with shared code across the frontend and backend, which I find quite compelling
~
Share domain model and business logic across client and server.
You can refactor some code on the server and the template will be updated! <!-- .element: class="fragment" -->
Note:
* You can refactor code (e.g. rename a field on a class in your domain model) and the frontend is just update, without a coordination overhead.
* E.g. Validation logic - you want to do validation on the client-side to provide an rich interactive experience...
** But you need to run it on the server-side to make sure it can't be bypassed.
** It seems a shame to write that twice. Overhead, and there can be differences, which makes it for a poor user experience.
~
Make the client more typesafe
Catch more errors at compile time
Note:
Much moreso than JavaScript.
Even linters aren't going to get you that much typesafety. I'm sure they're getting better and better, but that can't compete with a language with a much richer type system.
~
The type safety goes further than Typescript.
In TypeScript, you can optionally add types.
In Scala.js, you can optionally go Dynamic.<!-- .element: class="fragment" -->
Note:
* Fundermentally, in typescript you can optional add types and gradually make parts of your codebase more typesafe.
* But with Scala.js, by default everything is typed and you can optionally go dynamic
** allowing you to call potentially non-existing fields or methods on an object.
** Which can be very useful for using an existing JavaScript library, but is something you really want to avoid.
~
Even your templates are typesafe
Much like Play's server side templating
[Rapture HTML Demo](https://embed.scalafiddle.io/embed?sfid=hMgI9Bu/1) <!-- .element: class="fragment" -->
Note:
* People are already used to generating HTML from code, via React.
* This is popular in Scala.js
* Jon Pretty's Rapture HTML takes this to the extreme.
* HTML element nesting constaints at compile time
* and even 'style' attribute's CSS validated at compile time.
* [Example](https://embed.scalafiddle.io/embed?sfid=hMgI9Bu/1)
* See 'Principles of Elegance' talk from ScalaDays NY 2016
~
It's more mature/production ready than you may think.
Note:
* No longer experimental (since Feb 2015).
* Really, I think there's a chicken and egg problem.
** People are hesitant to adopt Scala.js because there's not much adoption - but that's self fulfilling.
~
Already has a rich ecosystem.
~
Lots of existing pure scala libraries already cross-compile:
- Scalaz
- Cats
- Shapeless
- Monix
- Circe
- Rapture
- Most of the standard library, e.g. Futures
<!--
TODO
Dive into pure-scala libraries
Futures map very well to JavaScript promises and allow you to move away from callback hell.
-->
~
Typesafe fascades for existing libraries (varying quality):
- DOM
- jQuery
- React
- Angular
- Vue.js
- D3
<!--
TODO
TALK ABOUT REACT 1.0
Dive into the Fascades
DOM is very good
-->
~
Built for Scala.js:
- ScalaTags
- ScalaCss
- Diode
- uPickle and BooPickle
- autowire
- workbench
~
It's less crazy to use than you think.
Scala.js looks similar to JavaScript/ES6
[Demo](https://embed.scalafiddle.io/embed?sfid=8D8UXdW/6)
~~~~
## Play with Scala.js
Note:
* Finally we get to the title of the talk. Using Scala.js with Play to build web apps end to end.
* I've found Play & Scala.js to be a good combination to quite web apps end to end with Scala, and ut's very productive.
~
Vincent Munier has been maintaining a starter project which you can use.
https://github.com/vmunier/play-with-scalajs-example
Note:
* This makes a great skeleton project if you want to build an app, much like the Play start project we looked at
* Includes examples of how to do end to end tests.
~
But today let's go through a project I built with Scala.js
https://github.com/grogs/scala-course
Note:
* This is simple app which I use to teach a course on Play and Scala.js to Java developers
~
DEMO
Note:
* Project structure. Three modules.
** Shared code with our domain model, traits, shared template.
*** Model: If I refactor (e.g. rename Hotel.coordinates to latLong), the frontend and backend is updated.
*** Template: Just using a Scala for-comprehension. Helper function is just scala functions (demo extract tr to renderRow). Full power of Scala.
** Server: search page, then API endpoint
** Client:
~~~~
### Wrap up
Note:
* We've taken a look at Play, and what it offers.
* We've had an overview of Scala.js, it's status and why you might want to use it.
* And we've seen how you can use the two together to build fullstack web apps with Scala
~
# Questions?
</script>
</section>
</div>
</div>
<!--~~~~
###My experiences
~
[artimap.com](http://www.artimap.com)
Play app with a Scala.JS frontend.
Scalatags. 😃
Scala.Rx. 🤐
Google Maps API. 🤗
~
[fulfilmed.com](http://www.fulfilmed.com)
Previously used Polymer.
Akka HTTP with Scala.js React frontend.
scalajs-react-components looks good.
Wrappers for Material UI and Elemental UI and more. -->
<!--~~~~
###Resources
~
[Scala.js Website](https://www.scala-js.org/)
Tutorials, Skeleton Projects, Libraries
[Scala.js Gitter](https://gitter.im/scala-js/scala-js)
Note:
Lots of the libraries mentioned have gitter channels. But you can always go to the scala-js to get pointed in the right direction.
~
[Hands-on Scala.js](http://www.lihaoyi.com/hands-on-scala-js/) by Li Haoyi
[Scala.js SPA-tutorial](https://ochrons.github.io/scalajs-spa-tutorial/en/index.html) by Otto Chrons
[Why I bet on Scala.js](http://www.lihaoyi.com/post/FromfirstprinciplesWhyIbetonScalajs.html) by Li Haoyi-->
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
history: true,
// More info https://github.com/hakimel/reveal.js#dependencies
dependencies: [
{ src: 'plugin/markdown/marked.js' },
{ src: 'plugin/markdown/markdown.js' },
{ src: 'plugin/notes/notes.js', async: true },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
]
});
</script>
</body>
</html>