Scala.js Next-gen front end development in

Scala

by Otto Chrons, 2015-11-04 @ HelsinkiJS@ochrons - otto@chrons.me

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()

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!

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

Live Demo

How does Scala.js compare to ...

Opal

WebSharper

Everyone wants a better JavaScriptSaferMore modular, expressive, reusable codeOne language across client/serverMore tool-able & better IDE supportFewer warts

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

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, ...

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

Live Demo 2(if enough time)

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 😌

How to get started?

www.scala-js.orgnew website at

http://tiny.cc/sjs-new

Gitter room

https://gitter.im/scala-js/scala-js