Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

An introduction to Scala.js

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

  • Be the first to like this

An introduction to Scala.js

  1. 1. An introduction to scala-js Presented By: Divyanshu Srivastava Software Consultant Knoldus Inc.
  2. 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. 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. 4. Introduction
  5. 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. 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. 7. Code Comparison: JS & Scala.js
  8. 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. 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. 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. 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. 12. Code Comparison: TypeScript & Scala.js
  13. 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. 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. 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. 16. Chart based comparison : JS, TypeScript & Scala.js
  17. 17. DEMO
  18. 18. 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.
  19. 19. ● 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
  20. 20. Thank You! divyanshu.srivastava@knoldus.com https://in.linkedin.com/in/divyanshu-sriva stava-1a4968167

×