scala.js for large and complex frontend apps
TRANSCRIPT
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