Scala.js: Next generation front end development in Scala
•Download as PPTX, PDF•
7 likes•3,028 views
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
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Scala.js: Next generation front end development in Scala
Similar to Scala.js: Next generation front end development in Scala (20)
Recently uploaded
Recently uploaded (20)
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
- 5. Live Demo
- 6. How does Scala.js compare to ... Opal WebSharper
- 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
- 11. Live Demo 2 (if enough time)
- 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
Editor's Notes
- 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?