Scala.js compiles to JavaScript with two major goals in mind: interoperability with JavaScript libraries, and portability with respect to Scala/JVM. With the rise of WebAssembly as an alternative to JavaScript in the browser, one cannot help but wonder whether we could compile Scala.js to WebAssembly, with the promise of better performance. Unfortunately, WebAssembly quickly appears as a siren, and the path to it navigates between Charybdis and Scylla, the threats to interoperability and portability. Watch in this, you will explore a whole lot of features of Scala to build a simple front-end application using Scala.js. And if you are developing any web application in Scala, you don’t need to sacrifice javascript interoperability.

1. An introduction to scala-js
Presented By: Divyanshu Srivastava
Software Consultant
Knoldus Inc.

2. About Knoldus
Knoldus is a technology consulting firm with focus on modernizing the digital systems
at the pace your business demands.
DevOps
Functional. Reactive. Cloud Native

3. Our Agenda
● Introduction to Scala.js
● Code Comparison: JS & Scala.js
● Code Comparison: TypeScript & Scala.js
● Chart based comparison : JS, TypeScript & Scala.js
● Demo
● Community Support
● References

4. Introduction

5. The Scala Programming Language
Scala combines object-oriented and functional
programming in one concise, high-level language.
Scala's static types help avoid bugs in complex
applications, and its JVM and JavaScript runtimes let
you build high-performance systems with easy access
to huge ecosystems of libraries.
- scala-lang.org

6. Why Scala.js?
● Correctness :-
Strong typing guarantees our code to be free from silly mistakes.
● Performance :-
Scala.js optimizes our Scala code into highly efficient JavaScript.
● Interoperability:-
We can use any JavaScript library right from our Scala.js code,
either in a statically or dynamically typed way, including most popular
one React and AngularJs
● Excellent editor support: -
With Scala.js, typos and type-errors are immediately caught and
shown on our editor, without even needing to compile our code,
refactor any field or method with ease.

7. Code Comparison: JS & Scala.js

8. JS & Scala.js
class Person
{
constructor(firstName, lastName)
{
this.firstName = firstName;
this.lastName = lastName;
}
fullName()
{
return `${this.firstName} ${this.lastName}`;
}
}
class Person(val firstName: String,
val lastName: String)
{
def fullName(): String =
s"$firstName $lastName"
}

9. JS & Scala.js
console.log("Hello World!"); println("Hello World!")
const names = persons
.map(p =>p.firstName);
val names = persons
.map(p => p.firstName)
val names = persons.map(_.firstName)

10. JS & Scala.js
const personMap = new Map([
[10, new Person("Roger", "Moore")],
[20, new Person("James", "Bond")]]);
const names = [];
for (const [key, person] of personMap)
{
if (key > 15)
{
names.push(`${key} = ${person.firstName}`);
}
}
val personMap = Map(
10 -> new Person("Roger", "Moore"),
20 -> new Person("James", "Bond"))
val names = for
{
(key, person) <- personMap
if key > 15
} yield s"$key = ${person.firstName}"

11. JS & Scala.js
const xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost:8080”);
xhr.onload = (e) =>
{
if (xhr.status === 200)
{
const r =
JSON.parse(xhr.responseText);
$("#id").html(parse(r));
}
};
xhr.send();
val xhr = new XMLHttpRequest()
xhr.open("GET", "http://localhost:8080”)
xhr.onload =
{
(e: Event) =>
if (xhr.status == 200)
{
val r =
JSON.parse(xhr.responseText)
$("#id").html(parse(r))
}
}
xhr.send()

12. Code Comparison: TypeScript & Scala.js

13. TypeScript & Scala.js
class Person
{
public firstName: String;
public lastName: String;
constructor(firstName: string,
lastName: string)
{
this.firstName = firstName;
this.lastName = lastName;
}
fullName()
{
return `${this.firstName} ${this.lastName}`;
}
}
class Person(val firstName: String,
val lastName: String)
{
def fullName(): String =
s"$firstName $lastName"
}

14. TypeScript & Scala.js
console.log("Hello World!"); println("Hello World!")
const names = persons
.map(p =>p.firstName);
val names = persons
.map(p => p.firstName)
val names = persons.map(_.firstName)

15. TypeScript & Scala.js
const personMap = new Map<number, Person>([
[10, new Person("Roger", "Moore")],
[20, new Person("James", "Bond")]]);
const names = new Array<string>();
for (const [key, person] of personMap)
{
if (key > 15)
{
names.push(`${key} = ${person.firstName}`);
}
}
val personMap = Map(
10 -> new Person("Roger", "Moore"),
20 -> new Person("James", "Bond"))
val names = for
{
(key, person) <- personMap
if key > 15
} yield s"$key = ${person.firstName}"

16. Chart based comparison : JS, TypeScript & Scala.js

18. DEMO

19. Community Support
● https://stackoverflow.com/users/1829647/sjrd -> @sjrd author of scala-js and very much active to
answer the query related to Scala-js.
● https://stackoverflow.com/ -> Stack Overflow has good community support for scala-js with tag as
[scala.js].
● https://gitter.im/scala-js/scala-js -> Gitter channel for scala-js for quick and fast response.

20. ● https://www.scala-js.org/
● https://www.scala-js.org/doc/sjs-for-js/
● https://www.lihaoyi.com/hands-on-scala-js/#GettingStarted
● https://www.scala-lang.org/
References

21. Thank You!
divyanshu.srivastava@knoldus.com
https://in.linkedin.com/in/divyanshu-sriva
stava-1a4968167