This document discusses Scala.js, which allows developers to write Scala code and compile it to JavaScript. Some key points:
- Scala.js provides the full Scala language experience and full interoperability with JavaScript. The generated JavaScript code is as fast as handwritten JS.
- It demonstrates Scala code that performs a Twitter API request and parses the response - but this is actually compiled to JavaScript, not run natively on the JVM.
- Compared to other languages that compile to JS like TypeScript, ClojureScript and Dart, Scala.js offers strong static types, powerful functional programming capabilities, and good tooling support in IDEs like Eclipse and IntelliJ
%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein
Scala.js: Next generation front end development in Scala
1. Scala.js
Next-gen front end development in Scala
by Otto Chrons, 2015-11-04 @ HelsinkiJS
@ochrons - otto@chrons.me
2. 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()
3. 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!
4. What is Scala.js?
Write Scala, compile to JavaScript, run in browser
Full support of Scala language
Full JavaScript interoperability
As fast code as hand-written JavaScript
Generated JS code is "small enough"
Fast edit-compile-run cycle
7. Everyone wants a better JavaScript
Safer
More modular, expressive, reusable code
One language across client/server
More tool-able & better IDE support
Fewer warts
8. Why Scala.js?
Safety Expressive Interoperability Toolable
ES6/7 Still un-typed Some new
syntax
Native Still JavaScript
TypeScript Types! Some new
syntax
Native Visual Studio
IntelliJ
ClojureScript Still un-typed Very powerful
language
Complicated Similar to
JavaScript
Dart Types! 50% JS,
50% Java
Complicated Eclipse
IntelliJ
Scala.js Very strong
types!
Very powerful
language
Very good Eclipse
IntelliJ
9. Why now?
Front end evolution
Stone age
aka
JQuery era
Server-rendered HTML pages
Simple JS animations
Ajax calls to server
Direct DOM manipulation
Medieval times
Rise of the Single Page App
HTML template driven
REST APIs
Angular, Backbone, Ember, ...
Renaissance
JS centric complex apps
DOM is code-generated
GraphQL, Falcor
Rise of transpilers: TS, Babel
React, Angular 2, ...
10. Next generation
Modern times
Rise of new languages: Scala, Clojure, Dart, TS
Complex client-server systems with shared code
JS reduced to a compile target and platform
Cross-platform: mobile and web
12. 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 😌
13. How to get started?
www.scala-js.org
new website at
http://tiny.cc/sjs-new
Gitter room
https://gitter.im/scala-js/scala-js
Hinweis der Redaktion
Hello everyone, my name is Otto and I'm going to talk about how to build next gen front end applications in Scala using Scala.js
I'm a cofounder and CTO at Microtask and we've been using Scala on the server side for about 3 years and Scala.js on the front end for a little over half a year. Before that we had both GWT (java) and Angular JS apps.
Let's start by taking a short poll. How many of you use JavaScript at work, hands up! Ok, and how many know Scala or have done something with Scala? How about using Scala at a work project? Ok, not so many.
To get your brains activated, please look at the following JS code and tell me what it does. Should be quite familiar to any experienced JS developer :)
Got it yet? Yes, it fetches some data from Twitter and uses JQuery to render the parsed tweets in an element identified by "tweets".
Did you notice something strange about it? Maybe take another look. There seems to be a type definition on the function parameter, so maybe this is actually TypeScript? Well, it actually could be, but in reality it's just normal strongly typed Scala code. I bet most of you could read Scala.js code quite easily!
Now, what is Scala.js?
It's a Scala to JavaScript compiler that allows you to write normal Scala code, compile it to JS and run in a browser (or in Node.js if you want)
It supports the full range of Scala language features, which is no small feat since Scala is quite an extensive multi-paradigm language.
It also gives you full interoperability with all existing JavaScript code base, so you can use libraries like React and JQuery from your Scala code very easily.
The compiler produces highly optimized Javascript, comparable in performance to hand-written JS, sometimes even a bit faster!
Scala.js runs the produced code through Google Closure Compiler further doing DCE and minifaction, resulting in reasonably small JS file. Typically a few hundred kilobytes, including all the Scala libraries you use.
Seeing the effects of your changes is fast, not quite as fast as with some JS transpilers, but fast enough to not be annoying. we're talking about 2-5 seconds here. And you don't need to do this so often as IDE and the compiler help so much
Let's do a quick live demo to see what working with Scala.js is really like!
....
As you saw, the code is nice and readable with great support from the IDE.
There are literally hundreds of X to JavaScript compilers and transpilers out there because JavaScript is such a great platform for running code on all kinds of devices. But why do things like CoffeeScript, Dart and TypeScript exist?
As great as JavaScript is as a platform, it lacks severly as a programming language.
We all want better safety, to protect us from our own mistakes.
Having Modularity is great and a highly experssive language gets more things done in a shorter time.
Having one language across client and server, being able to reuse code and developers, which is a great benefit.
When applications get more complex, the tooling and IDE support has to be there so you don't spend half your time googling around.
And of course fewer warts that bite you when you least expect them.
So, why Scala.js? Even though ES6 brought a lot of improvements to the JS language, it's still very unsafe and lacks in the tooling department. The IDEs try their best, but they simply cannot do much when it comes to vanilla JS code.
TypeScript is addressing many issues in JS and has now support from the big players including of course Microsoft, but also Google in Angular2. But it's still Javascript :)
ClojureScript is based on Clojure, a functional language much like Lisp, making it very powerful. But as it lacks static typing, it's also hard for IDEs. Interoperability with existing Javascript is quite complicated.
Dart from Google is a new language inspired by JavaScript and Java (whether that's good or bad) and has a good type system. But its interoperability is not so great.
Scala.js being Scala of course has very strong type system and has superb IDE support as we saw in the live demo. Core focus of Scala.js has been interoperability with JS which is where it really shines compared to many alternatives. Even though the Scala language is sometimes seen as complicated, it's really easy to get started and then move on to more complex things as you get familiar with the language.
To understand why we are seeing such a boom in JS alternatives right now, we have to take a look at the evolution of front end development.
It all starts in the stone age where JQuery is the king-of-the-hill when it comes to JS programming. Web pages are rendered server side and JS is really only used for simple animations and for making UX more bearable. More advanced sites are using Ajax to make live updates by doing direct DOM manipulation.
At some point the applications started becoming more complex, so smart guys started thinking other ways of doing web apps and the Single Page App was born. Here we see a lot more JS being used, driven by HTML templates. REST APIs become the norm for communication and we get a lot of frameworks like Backbone, Ember and Angular.
But as application complixity keeps growing, devs start seeing the problems with the HTML template driven approach so a new breed of architectures like React emerge. This time JavaScript is on the center stage, doing all the work from DOM generation to server communication. The REST model gives way to more flexible communication methods like GraphQL and Falcor. Alternatives to vanilla JS start to gain traction and the whole transpiler industry is born with the likes of TypeScript and Babel etc.
But we don't want to get stuck with renaissance, what about the next generation?
As complexity and application size grows, managing and refactoring large JS projects becomes quite challenging. New languages like Scala and Clojure enter the world of front end development. I would actually say that none of you in the audience is coding vanilla JS in five years time. With nodejs the front end language got traction on the server side, but now solid server side languages are moving on the front end to facilitate sharing code in complex applications.
Over time Javascript is reduced to a compiler target, much like x86 assembly language, but continues to provide a great platform for applications.
We're now seeing the first attempts at doing real cross-platform development on mobile and web, not just by running a browser view in a mobile app, but using native controls. You can actually now write your code in Scala, compile it to Javascript and run it natively under iOS or Android using React Native.
Let's quickly look at a bit more realistic example of doing client-server in Scala.js and React
So, you've been a happy puppy with JavaScript, why would you consider learning a new language and using Scala.js?
First of all you get literally every language feature in ES6 and ES7, including the fat arrow, destructuring, string-interpolation, async/await etc.
You also get everything in TypeScript like decent types, generics, etc.
Not to mention stuff like Immutable.js, which is an immutable collection library for JavaScript. Guess what those collection algorithms are based on? Scala and Clojure collection libraries!
So, you get everything JS has to offer, plus a great language, with which programming is really fun, a truly extensive standard library, access to real functional programming and associated FP libraries and but you still can use all the JS libs you know and love. Finally you get a peace of mind; when you make that critical edit at 2am to fix a bug in production, it's just going to work ok, not blow up as an Uncaught typeerror: undefined is not a function.
If you got interested, head to the links shown on the slide and start learning. We are about to launch a new version of the Scala.js site, so please check out the lower link as well that will direct you to the beta site.
Any questions?