Scala.js: Next generation front end development in Scala
-
Upload
otto-chrons -
Category
Software
-
view
2.508 -
download
0
Transcript of Scala.js: Next generation front end development in Scala
![Page 1: Scala.js: Next generation front end development in Scala](https://reader033.fdocuments.in/reader033/viewer/2022061306/5888abc11a28ab80248b4f49/html5/thumbnails/1.jpg)
Scala.js Next-gen front end development in
Scala
by Otto Chrons, 2015-11-04 @ HelsinkiJS@ochrons - [email protected]
![Page 2: Scala.js: Next generation front end development in Scala](https://reader033.fdocuments.in/reader033/viewer/2022061306/5888abc11a28ab80248b4f49/html5/thumbnails/2.jpg)
What does this JavaScript do?var xhr = new XMLHttpRequest()
xhr.open("GET", "https://api.twitter.com/1.1/search/" + "tweets.json?q=%23scalajs")xhr.onload = (e: Event) => { if (xhr.status == 200) { var r = JSON.parse(xhr.responseText) $("#tweets").html(parseTweets(r)) }}xhr.send()
![Page 3: Scala.js: Next generation front end development in Scala](https://reader033.fdocuments.in/reader033/viewer/2022061306/5888abc11a28ab80248b4f49/html5/thumbnails/3.jpg)
Is it actually JavaScript? Look again!var xhr = new XMLHttpRequest()
xhr.open("GET", "https://api.twitter.com/1.1/search/" + "tweets.json?q=%23scalajs")xhr.onload = (e: Event) => { if (xhr.status == 200) { var r = JSON.parse(xhr.responseText) $("#tweets").html(parseTweets(r)) }}xhr.send()
It's strongly typed Scala,really!
![Page 4: Scala.js: Next generation front end development in Scala](https://reader033.fdocuments.in/reader033/viewer/2022061306/5888abc11a28ab80248b4f49/html5/thumbnails/4.jpg)
What is Scala.js?Write Scala, compile to JavaScript, run in browserFull support of Scala languageFull JavaScript interoperabilityAs fast code as hand-written JavaScriptGenerated JS code is "small enough"Fast edit-compile-run cycle
![Page 5: Scala.js: Next generation front end development in Scala](https://reader033.fdocuments.in/reader033/viewer/2022061306/5888abc11a28ab80248b4f49/html5/thumbnails/5.jpg)
Live Demo
![Page 6: Scala.js: Next generation front end development in Scala](https://reader033.fdocuments.in/reader033/viewer/2022061306/5888abc11a28ab80248b4f49/html5/thumbnails/6.jpg)
How does Scala.js compare to ...
Opal
WebSharper
![Page 7: Scala.js: Next generation front end development in Scala](https://reader033.fdocuments.in/reader033/viewer/2022061306/5888abc11a28ab80248b4f49/html5/thumbnails/7.jpg)
Everyone wants a better JavaScriptSaferMore modular, expressive, reusable codeOne language across client/serverMore tool-able & better IDE supportFewer warts
![Page 8: Scala.js: Next generation front end development in Scala](https://reader033.fdocuments.in/reader033/viewer/2022061306/5888abc11a28ab80248b4f49/html5/thumbnails/8.jpg)
Why Scala.js?Safety Expressive Interoperabi
lityToolable
ES6/7 Still un-typed Some new syntax
Native Still JavaScript
TypeScript Types! Some new syntax
Native Visual StudioIntelliJ
ClojureScript
Still un-typed Very powerful language
Complicated Similar to JavaScript
Dart Types! 50% JS, 50% Java
Complicated EclipseIntelliJ
Scala.js Very strong types!
Very powerful language
Very good EclipseIntelliJ
![Page 9: Scala.js: Next generation front end development in Scala](https://reader033.fdocuments.in/reader033/viewer/2022061306/5888abc11a28ab80248b4f49/html5/thumbnails/9.jpg)
Why now?Front end evolution
Stone ageaka
JQuery era
Server-rendered HTML pagesSimple JS animationsAjax calls to serverDirect DOM manipulation
Medieval times
Rise of the Single Page AppHTML template drivenREST APIs
Angular, Backbone, Ember, ...
Renaissance
JS centric complex appsDOM is code-generatedGraphQL, FalcorRise of transpilers: TS, Babel
React, Angular 2, ...
![Page 10: Scala.js: Next generation front end development in Scala](https://reader033.fdocuments.in/reader033/viewer/2022061306/5888abc11a28ab80248b4f49/html5/thumbnails/10.jpg)
Next generationModern times
Rise of new languages: Scala, Clojure, Dart, TSComplex client-server systems with shared codeJS reduced to a compile target and platformCross-platform: mobile and web
![Page 11: Scala.js: Next generation front end development in Scala](https://reader033.fdocuments.in/reader033/viewer/2022061306/5888abc11a28ab80248b4f49/html5/thumbnails/11.jpg)
Live Demo 2(if enough time)
![Page 12: Scala.js: Next generation front end development in Scala](https://reader033.fdocuments.in/reader033/viewer/2022061306/5888abc11a28ab80248b4f49/html5/thumbnails/12.jpg)
What do JS developers get from Scala.js?Everything in ES6/7 (=>, destructuring, string-interpolation, ...)Everything in TypeScript (types, generics, ...)Everything in Immutable.js (immutable collections)
+Great language, extensive standard library, functional programming, access to all JS libs and peace of mind 😌
![Page 13: Scala.js: Next generation front end development in Scala](https://reader033.fdocuments.in/reader033/viewer/2022061306/5888abc11a28ab80248b4f49/html5/thumbnails/13.jpg)
How to get started?
www.scala-js.orgnew website at
http://tiny.cc/sjs-new
Gitter room
https://gitter.im/scala-js/scala-js