29
Scala-JS

Scala js (kyiv js 30-01)

Embed Size (px)

Citation preview

Page 1: Scala js (kyiv js 30-01)

Scala-JS

Page 2: Scala js (kyiv js 30-01)

About me

Evgeniy Safronov

I am from Kherson

Software engineer in RIFL Media LLC

I love to write in JS and talk about JS

contacts:

[email protected]

skype: lambda.omega1

github.com/javacodegeek

Page 3: Scala js (kyiv js 30-01)

coffeescript, typescript, clojurescript etc.

List of languages that compile to JS

Page 5: Scala js (kyiv js 30-01)

Curious javascript problems

javascript> ["10", "10", "10", "10"].map(parseInt)

[10, NaN, 2, 3]

wtfjs.com

Page 6: Scala js (kyiv js 30-01)

Scala profile● started in 2001 at the École Polytechnique Fédérale de Lausanne by Martin

Odersky

● functional programming and object oriented programming

● very strong static type system

● was released in 2004 on JVM and .NET

● v2.0 followed in March 2006

www.scala-lang.org

Page 7: Scala js (kyiv js 30-01)

Martin Oderskyinvented Scala

co-author Java generics

he wrote a compiler for Java

he wrote a compiler for Scala

www.coursera.org/course/progfun

Page 8: Scala js (kyiv js 30-01)

Companies which choose scala

Page 9: Scala js (kyiv js 30-01)

Elitism ScalaScala developers are expensive

High barrier to entry

The successful combination of functional and object-oriented paradigms

Wide range of applications

Functional programming with immutable variables, lambdas, closures, lists, and so on

Page 10: Scala js (kyiv js 30-01)

Java codepublic class Person {

private final String firstName;

private final String lastName;

public Person(String firstName, String lastName) {

this.firstName = firstName;

this.lastName = lastName;

}

public String getFirstName() {

return firstName;

}

public String getLastName() {

return lastName;

}

}

Page 11: Scala js (kyiv js 30-01)

Scala code

class Person(val firstName: String, val lastName: String)

Page 12: Scala js (kyiv js 30-01)

Back to curious javascript problems

javascript> ["10", "10", "10", "10"].map(parseInt)

[10, NaN, 2, 3]

scala> List("10", "10", "10", "10").map(parseInt)

List(10, 10, 10, 10)

Page 13: Scala js (kyiv js 30-01)

Scala.js developers

1207 commits 702 commits

Page 14: Scala js (kyiv js 30-01)

Code examples: classes

class Person {

constructor(firstName, lastName) {

this.firstName = firstName;

this.lastName = lastName;

}

fullName() {

return `${this.firstName} ${this.lastName}`;

}

}

ES6class Person(val firstName: String, val

lastName: String) {

def fullName(): String =

s"$firstName $lastName"

}

Scala.js

Page 15: Scala js (kyiv js 30-01)

Code examples: collections

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}`);

}

}

ES6val 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}"

Scala.js

Page 16: Scala js (kyiv js 30-01)

Compiler output code

object Main extends js.JSApp{

def main() = {

var x = 0

while(x < 10) x += 3

println(x)

// 12

}

}

Scala.jsScalaJS.c.LMain$.prototype.main__V =

(function() {

var x = 0;

while ((x < 10)) {

x = ((x + 3) | 0)

};

ScalaJS.m.s_Predef$()

.println__O__V(x)

// 12

});

ES5

Page 17: Scala js (kyiv js 30-01)

How to install?install sbt (scala build tool)

config plugin ”sbt-scalajs”

Rhino presents out of the box, but you can setup V8.

http://www.scala-js.org/tutorial/basic/

Page 18: Scala js (kyiv js 30-01)

HelloApppackage helloapp.webapp

import scala.scalajs.js.JSApp

object HelloApp extends JSApp {

def main(): Unit = {

println("Hello world!")

}

}

Page 19: Scala js (kyiv js 30-01)

Using the DOMAdding the DOM library to build.sbt

import org.scalajs.dom

import dom.document

def appendPar(targetNode: dom.Node, text: String): Unit = {

val parNode = document.createElement("p")

val textNode = document.createTextNode(text)

parNode.appendChild(textNode)

targetNode.appendChild(parNode)

}

Page 20: Scala js (kyiv js 30-01)

Reacting on User Inputimport scala.scalajs.js.annotation.JSExport

@JSExport

def addClickedMessage(): Unit = {

appendPar(document.body, "You clicked the button!")

}

<button id=”click-me-button” type=”button” onClick=”tutorial.webapp.MyApp().

addClickedMessage()”>Click me!</button>

Page 21: Scala js (kyiv js 30-01)

Using jQuery

Adding the DOM library to build.sbt

import org.scalajs.jquery.jQuery

jQuery("body").append("<p>[message]</p>")

Page 22: Scala js (kyiv js 30-01)

Testingpackage tutorial.webapp

import utest._

import org.scalajs.jquery.jQuery

object MyTest extends TestSuite {

// Initialize App

HelloApp.setupUI()

def tests = TestSuite {

HelloWorld {

assert(jQuery("p:contains('Hello World')").length == 1)

}

}

}

github.com/lihaoyi/utest

Page 23: Scala js (kyiv js 30-01)

Why you should try Scala.js

New paradigms

All power of Scala

Very good IDE support (IntelliJ Scala and Eclipse ScalaDE)

Scala community

Universal application

Page 24: Scala js (kyiv js 30-01)

expansion of consciousness

Page 25: Scala js (kyiv js 30-01)

Scala.js the official Scala to JavaScript compiler http://www.scala-js.org/

https://github.com/scala-js/scala-js

https://gitter.im/scala-js/scala-js

Github info:

● 3121 commits● 41 contributors ● issues 82/1064 open/close● 36 releases● 2098 stars ● 188 forks

Page 26: Scala js (kyiv js 30-01)

Benchmarks

Page 27: Scala js (kyiv js 30-01)

Where to use it?SPA

Enterprise application

Games много кода

Page 28: Scala js (kyiv js 30-01)
Page 29: Scala js (kyiv js 30-01)

?