Scala.js:

Когда TypeScript'a уже мало

Бадальянц Юрий, 2017

О себе

Программирую с 2011 года

JavaScript

Java

Scala

TypeScript

≈ JavaScript + Статическая типизация

* и Flow

Динамическая типизация в JS

+ Быстрый старт (низкий порог входа)

+ Код пишется быстро

+ Удобно для прототипов и маленьких проектов

- Сложно поддерживать в большом проекте

- Все ошибки только в рантайме

- Сложно рефакторить и улучшать код

- Легко допустить ошибку

TypeScript

Добавляется компилятор с проверкой типов

Код легче поддерживать

Типы - документация

Легкие рефакторинги

Чем больше проект - тем больше профит

Но действительно ли TypeScript избавляет от всех проблем?

Scala

Богатые ООП и ФП возможности

Все ES5 фичи

Все ES6 фичи

Все ES7 фичи

Почти все TypeScript фичи

И многое другое

Номинальная статическая типизация

Scala.js - Scala, которая компилируется в JavaScript

var xhr = new XMLHttpRequest()

xhr.open("GET",

"https://api.twitter.com/1.1/search/" +

"tweets.json?q=%23scalajs"

)

xhr.onload = (e) => {

if (xhr.status == 200) {

var r = JSON.parse(xhr.responseText)

$("#tweets").html(parseTweets(r))

}

xhr.send()

JavaScript

Scala.js

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()

JavaScript

Scala.js

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()

var xhr = new XMLHttpRequest()

xhr.open("GET",

"https://api.twitter.com/1.1/search/" +

"tweets.json?q=%23scalajs"

)

xhr.onload = (e) => {

if (xhr.status == 200) {

var r = JSON.parse(xhr.responseText)

$("#tweets").html(parseTweets(r))

}

xhr.send()

function updateUserPassword(
    userId: String, 
    password: String
): Promise<void> {
    // implementation
}

updateUserPassword(password, userId)

function updatePasswordForUser(
    password: String, 
    userId: String
): Promise<void> {
    // implementation
}

const userId = "16c8bde9-7c3a-400d-aead-bfec582b7103"
const password = "1q2w3e4r5t"
updatePasswordForUser(password, userId)

Ошибка при

рефакторинге

class UserId {
    value: String
    constructor(str: String) {
        this.value = str
    }
}

class Password {
    value: String
    constructor(str: String) {
        this.value = str
    }
}

const userId = new UserId("16c8bde9-7c3a-400d-aead-bfec582b7103")
const password = new Password("1q2w3e4r5t")

function updatePasswordForUser(
    password: Password, 
    userId: UserId
): Promise<void> {
    // implementation
}

function updateUserPassword(
    userId: UserId, 
    password: Password
): Promise<void> {
    // implementation
}

updateUserPassword(password, userId)

updateUserPassword(password, userId) // OK!

Structural typing

class UserId {

    userId: String
    constructor(str: String) {
        this.userId = str
    }
}

class Password {
    password: String
    constructor(str: String) {
        this.password = str
    }
}

Костыль

Boilerplate

Runtime

overhead

updateUserPassword(password, userId)

updateUserPassword(password, userId) // ERROR

class UserId {

    value: String
    constructor(str: String) {
        this.value = str
    }
}

class Password {
    value: String
    constructor(str: String) {
        this.value = str
    }
}

case class UserId(value: String) extends AnyVal
case class Password(value: String) extends AnyVal

val userId = UserId("16c8bde9-7c3a-400d-aead-bfec582b7103")
val password = Password("1q2w3e4r5t")

def updatePasswordForUser(
  password: Password, 
  userId: UserId
): Future[Unit] = {
  // implementation
}

def updateUserPassword(
  userId: UserId, 
  password: Password
): Future[Unit] = {
  // implementation
}

updateUserPassword(password, userId)

updateUserPassword(password, userId) // ERROR

const libPromise: Promise<void> = someLibFunc()

function withTimeout<T>(promise: Promise<T>, timeout: number): Promise<T> {
    const timeoutPromise = new Promise((resolve, reject) => {
        setTimeout(() => reject(new Error("Promise timed out")), timeout)
    })
    return Promise.race([promise, timeoutPromise])
}

withTimeout(libPromise, 1000)
  .then((value) => {
    console.log(value)
  })
  .catch(e => {
    console.error(e)
  })

libPromise.withTimeout(1000)
  .then((value) => {
    console.log(value)
  })
  .catch(e => {
    console.error(e)
  })

Prototype

monkey

patching

val libFuture: Future[Unit] = someLibFunc()

implicit class FutureExtensions[T](val self: Future[T]) extends AnyVal {
  def withTimeout(timeout: Long): Future[T] = {
    val promise = Promise[T]()
    setTimeout(() => {
      promise.failure(new RuntimeException("Future timed out"))
    }, timeout)
    Future.firstCompletedOf(Seq(self, promise.future))
  }
}

libFuture.withTimeout(1000).onComplete {
  case Success(value) => println(value)
  case Failure(e) => println(e)
}

val timeout = 3000
getUser(someUserId, timeout)
updateUser(someUser, timeout)
deleteUser(someUserId, timeout)

val timeout = 3000
getUser(someUserId, timeout)
updateUser(someUser, timeout)
deleteUser(someUserId, timeout)

def getUser(userId: UserId, timeout: Long): Future[Option[User]]

def updateUser(user: User, timeout: Long): Future[Unit]

def deleteUser(userId: UserId, timeout: Long): Future[Unit]

def getUser(userId: UserId)(implicit timeout: Long): Future[Option[User]]
def updateUser(user: User)(implicit timeout: Long): Future[Unit]
def deleteUser(userId: UserId)(implicit timeout: Long): Future[Unit]

implicit val timeout: Long = 3000
getUser(someUserId)
updateUser(someUser)
deleteUser(someUserId)

implicit val timeout = 3000
getUser(someUserId)
updateUser(someUser)
deleteUser(someUserId)

libFuture.withTimeout(1000).onComplete {
  case Success(value) => println(value)
  case Failure(e) => println(e)
}

val sessionTime = 3600
val activeTime = 60

Неочевидно

implicit val timeout = 3000 millis
getUser(someUserId)
updateUser(someUser)
deleteUser(someUserId)

libFuture.withTimeout(1 second).onComplete {
  case Success(value) => println(value)
  case Failure(e) => println(e)
}

val sessionTime = 1 hour
val activeTime = 60 seconds

def seconds = ???

obj.seconds

obj seconds // postfix notation

1.second // implicit class + normal notation

1 second // implicit class + postfix notation

DSL

html(
  head(
    script(src:="..."),
    script(
      "alert('Hello World')"
    )
  ),
  body(
    div(
      h1(id:="title", "This is a title"),
      p("This is a big paragraph of text")
    )
  )
)

DSL

'li("class" -> itemState,
  'div("class" -> "view",
    'input("class" -> "toggle",
      "type" -> "checkbox",
      "checked" -> props.item.checked,
      "onclick" -> toggle _
    ),
    'label("ondblclick" -> editStart _, props.item.title),
    'button("class" -> "destroy",
      "onclick" -> destroy _
    )
  )
)

DSL

<footer class="info">
  <p>Double-click to edit a todo</p>
  <p>Written by <a href="https://github.com/atry">Yang Bo</a></p>
  <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>

DSL

<table border="1" cellPadding="5">
  <tbody>
    {
      for (contact <- data) yield {
        <tr>
          <td>
            {contact.name.bind}
          </td>
          <td>
            {contact.email.bind}
          </td>
        </tr>
      }
    }
  </tbody>
</table>

Полезные ссылки

http://www.scala-js.org/ - официальный сайт scala.js

https://gitter.im/scala-js/scala-js - gitter канал scala.js

http://www.lihaoyi.com/hands-on-scala-js/ - электронная книга

https://github.com/ochrons/scalajs-spa-tutorial - SPA приложение

https://telegram.me/scala_ru - русскоязычный telegram канал

Спасибо!

@lmnet89

lmnet

lmnet89@gmail.com

Бадальянц Юрий, 2017

www.linkedin.com/in/lmnet