Scala.js for large and complex frontend apps

by Otto Chrons, 2016-05-26@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 languageStraightforward JavaScript interoperabilityAs fast code as hand-written JavaScriptGenerated JS code is "small enough"Fast edit-compile-run cycle

Live Demo

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

All JS libraries should be authored in TypeScript

- André Staltz, author of Cycle.js

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, Elm, TSComplex client-server systems with shared codeJS reduced to a compile target and a platformCross-platform: mobile and web

Large and complex frontend appsDefined by

Large code base, 10+kLoC

All UI functionality defined in JavaScript, a Single Page App using a JS framework like React, Angular2, Ember

Complex interactions with the server: streams, reactive, Falcor, GraphQL

Offline support, sharing business logic code with server

Large development team

ChallengesAdopting a large code base

Finding your way around the code

RefactoringMaking changes without breaking stuff

Client-server communicationKeeping client and server data models in sync

Managing large frontend apps

JavaScript Scala.js

Typing TypeScript, Flow Built-in

Functional React, Flux, Redux, Cycle.js

Built-in

Immutability Immutable.js, Seamless-Immutable Built-in

Tooling Gulp, Bower, Babel, JSX, npm, Webpack, Browserify

SBT

Live Demo

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 😌

Why Scala.js?

Stack Overflow Developer Survey 2016: Most Loved

Why Scala.js?

Stack Overflow Developer Survey 2016: Top Paying Tech

Why Scala.js?Syntax similar to JavaScript, you can get started easilySuperb IDE supportLearning Scala makes you a better JavaScript programmer!Broad and active ecosystemProduction ready

Large Scala.js apps in the wildQuerki - open source online information tool - 9k LoC

Metabolicanalyzer - 14k LoC

App.theseventhsense.com - 9k LoC

Network management GUI - 31k LoC

Finance-tech app - 31k LoC (UI) + 20k LoC (shared)

How to get started?

www.scala-js.org

Gitter room

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