SlideShare a Scribd company logo
ПишемПишем нана ScalaScala длядля
браузерабраузера
Gleb Kanterov
gleb@kanterov.ru
ScalaJSScalaJS
JavaScriptJavaScript ScalaJSScalaJS
> ["10", "10", "10", "10"]
> .map(parseInt)
[10, NaN, 2, 3]
> List("10", "10", "10", "10")
> .map(parseInt)
List(10, 10, 10, 10)
scala-js-domscala-js-dom
def main(div: html.Div) = {
val child = dom.document
.createElement("div")
child.textContent =
"Hi from Scala-js-dom"
div.appendChild(child)
}
scalacssscalacss
val myStyle = style(
margin(12 px, auto),
&.hover(
cursor.zoomIn
),
&(media.not.handheld.landscape.maxWidth(640 px))(
width(400 px)
)
)
val button = style(
addClassNames("btn", "btn-default"),
textAlign.center
)
autowireautowire
trait Api {
def order(itemIds: List[Int]): Order
def submit(order: Order): Unit
}
val client = Ajax[Api]
val z: Future[Unit] = for {
order <- client.order(itemIds).call()
result <- client.submit(order).call()
} yield result
scala-asyncscala-async
val z: Future[Unit] = async {
val order = await(client.order(itemIds).call())
val result = await(client.submit(order).call())
result
}
scala-js-reactscala-js-react
@scalax
def render(self: This) = {
val todo = self.state.todos.count(!_.completed)
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input id="new-todo"
onChange={self.onChange}
onKeyUp={self.onKeyPress}
value={self.state.text}
placeholder="What needs to be done?"
autofocus={true}></input>
</header>
</section>
}
scodecscodec
case class Person(name: String, title: String)
object Person {
implicit val codec = Codec[Person]
}
sealed trait Tree
case class Node(l: Tree, r: Tree) extends Tree
case class Leaf(n: Int) extends Tree
object Tree {
implicit lazy val codec: Codec[Tree] = {
discriminated[Tree]
.by(uint8)
.typecase2(0, int32.as[Leaf])
.typecase2(1, lazily { (codec :: codec).as[Node] })
}
}
scalacheckscalacheck
property("reverse") = Prop.forAll { l: List[String] =>
l.reverse.reverse == l
}
property("fib") = Prop.forAll { i suchThat (_ > 2) =>
fib(i) ?= fib(i - 1) + fib(i - 2)
}
ИИ другиедругие
scalaz
scalaz-stream, scala.rx, monifu
shapeless
parboiled2
papa carlo
banana-rdf
scalajs-jquery
scalajs-angular
utest, minitest
АА такжетакже
поддержка IDE
инкрементальная компиляция
source maps
Google Closure Compiler
размеры JS
минимум - 100 Кб
TODO MVC - 250 Кб (64 Kb gzip) + react
максимум - 1Mb
ЗаключениеЗаключение
Можно скомпилировать Scala в JS
Scala код можно звать из JS, и наоборот
Производительность сопоставима с JS
Есть много библиотек
Можно все написать на ScalaJS :)
Есть альтернативы, см. Haskell, Erlang, Clojure
КонецКонец
https://twitter.com/kanterov
https://scala-js.org
https://github.com/scala-js/scala-js
https://github.com/scala-js/scala-js-dom
https://github.com/japgolly/scalacss
https://github.com/lihaoyi/autowire
https://github.com/kanterov/scala-js-react

More Related Content

Viewers also liked

Cовременный контроль качества: давай сделаем это по-быстрому...
Cовременный контроль качества: давай сделаем это по-быстрому...Cовременный контроль качества: давай сделаем это по-быстрому...
Cовременный контроль качества: давай сделаем это по-быстрому...Igor Khrol
 
SeleniumCamp 2016
SeleniumCamp 2016SeleniumCamp 2016
SeleniumCamp 2016
Igor Khrol
 
Web driver история одной миграции
Web driver   история одной миграцииWeb driver   история одной миграции
Web driver история одной миграции
Igor Khrol
 
автоматизация Flex приложений с помощью selenium rc
автоматизация Flex приложений с помощью selenium rcавтоматизация Flex приложений с помощью selenium rc
автоматизация Flex приложений с помощью selenium rcIgor Khrol
 
Повышаем надёжность тестов через JavaScript
Повышаем надёжность тестов через JavaScriptПовышаем надёжность тестов через JavaScript
Повышаем надёжность тестов через JavaScript
Igor Khrol
 
Agile Testing in Enterprise: Way to transform - SQA Days 2014
Agile Testing in Enterprise: Way to transform - SQA Days 2014Agile Testing in Enterprise: Way to transform - SQA Days 2014
Agile Testing in Enterprise: Way to transform - SQA Days 2014
Andrey Rebrov
 
Webium: Page Objects In Python (Eng)
Webium: Page Objects In Python (Eng)Webium: Page Objects In Python (Eng)
Webium: Page Objects In Python (Eng)
Uladzimir Franskevich
 
Автоматизация тестирования: доступна каждому или удел избранных?
Автоматизация тестирования: доступна каждому или удел избранных?Автоматизация тестирования: доступна каждому или удел избранных?
Автоматизация тестирования: доступна каждому или удел избранных?
SQALab
 
Good test = simple test (with selenide)
Good test = simple test (with selenide)Good test = simple test (with selenide)
Good test = simple test (with selenide)
Andrei Solntsev
 
Qa Automation - отбрасываем лишнее и тестируем суть
Qa Automation - отбрасываем лишнее и тестируем сутьQa Automation - отбрасываем лишнее и тестируем суть
Qa Automation - отбрасываем лишнее и тестируем суть
Igor Khrol
 
Типичные ошибки начинающих писать тесты на WebDriver
Типичные ошибки начинающих писать тесты на WebDriverТипичные ошибки начинающих писать тесты на WebDriver
Типичные ошибки начинающих писать тесты на WebDriver
Igor Khrol
 
Концепция QaAPI: взгляд на тестирование с другой стороны баррикад
Концепция QaAPI: взгляд на тестирование с другой стороны баррикадКонцепция QaAPI: взгляд на тестирование с другой стороны баррикад
Концепция QaAPI: взгляд на тестирование с другой стороны баррикад
SQALab
 
Автоматизация тестирования: отбрасываем лишнее и проверяем суть
Автоматизация тестирования: отбрасываем лишнее и проверяем сутьАвтоматизация тестирования: отбрасываем лишнее и проверяем суть
Автоматизация тестирования: отбрасываем лишнее и проверяем суть
SQALab
 
Test Automation Wargaming SQA Days 17
Test Automation Wargaming SQA Days 17Test Automation Wargaming SQA Days 17
Test Automation Wargaming SQA Days 17
Igor Khrol
 
Webium: Page Objects in Python
Webium: Page Objects in PythonWebium: Page Objects in Python
Webium: Page Objects in Python
Igor Khrol
 

Viewers also liked (15)

Cовременный контроль качества: давай сделаем это по-быстрому...
Cовременный контроль качества: давай сделаем это по-быстрому...Cовременный контроль качества: давай сделаем это по-быстрому...
Cовременный контроль качества: давай сделаем это по-быстрому...
 
SeleniumCamp 2016
SeleniumCamp 2016SeleniumCamp 2016
SeleniumCamp 2016
 
Web driver история одной миграции
Web driver   история одной миграцииWeb driver   история одной миграции
Web driver история одной миграции
 
автоматизация Flex приложений с помощью selenium rc
автоматизация Flex приложений с помощью selenium rcавтоматизация Flex приложений с помощью selenium rc
автоматизация Flex приложений с помощью selenium rc
 
Повышаем надёжность тестов через JavaScript
Повышаем надёжность тестов через JavaScriptПовышаем надёжность тестов через JavaScript
Повышаем надёжность тестов через JavaScript
 
Agile Testing in Enterprise: Way to transform - SQA Days 2014
Agile Testing in Enterprise: Way to transform - SQA Days 2014Agile Testing in Enterprise: Way to transform - SQA Days 2014
Agile Testing in Enterprise: Way to transform - SQA Days 2014
 
Webium: Page Objects In Python (Eng)
Webium: Page Objects In Python (Eng)Webium: Page Objects In Python (Eng)
Webium: Page Objects In Python (Eng)
 
Автоматизация тестирования: доступна каждому или удел избранных?
Автоматизация тестирования: доступна каждому или удел избранных?Автоматизация тестирования: доступна каждому или удел избранных?
Автоматизация тестирования: доступна каждому или удел избранных?
 
Good test = simple test (with selenide)
Good test = simple test (with selenide)Good test = simple test (with selenide)
Good test = simple test (with selenide)
 
Qa Automation - отбрасываем лишнее и тестируем суть
Qa Automation - отбрасываем лишнее и тестируем сутьQa Automation - отбрасываем лишнее и тестируем суть
Qa Automation - отбрасываем лишнее и тестируем суть
 
Типичные ошибки начинающих писать тесты на WebDriver
Типичные ошибки начинающих писать тесты на WebDriverТипичные ошибки начинающих писать тесты на WebDriver
Типичные ошибки начинающих писать тесты на WebDriver
 
Концепция QaAPI: взгляд на тестирование с другой стороны баррикад
Концепция QaAPI: взгляд на тестирование с другой стороны баррикадКонцепция QaAPI: взгляд на тестирование с другой стороны баррикад
Концепция QaAPI: взгляд на тестирование с другой стороны баррикад
 
Автоматизация тестирования: отбрасываем лишнее и проверяем суть
Автоматизация тестирования: отбрасываем лишнее и проверяем сутьАвтоматизация тестирования: отбрасываем лишнее и проверяем суть
Автоматизация тестирования: отбрасываем лишнее и проверяем суть
 
Test Automation Wargaming SQA Days 17
Test Automation Wargaming SQA Days 17Test Automation Wargaming SQA Days 17
Test Automation Wargaming SQA Days 17
 
Webium: Page Objects in Python
Webium: Page Objects in PythonWebium: Page Objects in Python
Webium: Page Objects in Python
 

Similar to Write code for browsers with Scala

Svg
SvgSvg
Вёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, Jammit
Вёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, JammitВёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, Jammit
Вёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, JammitAndrey Sitnik
 
Web осень 2012 лекция 10
Web осень 2012 лекция 10Web осень 2012 лекция 10
Web осень 2012 лекция 10Technopark
 
Web весна 2013 лекция 10
Web весна 2013 лекция 10Web весна 2013 лекция 10
Web весна 2013 лекция 10Technopark
 
Jsfwdays 2013-2
Jsfwdays 2013-2Jsfwdays 2013-2
Jsfwdays 2013-2
Pavlo Iuriichuk
 
Как мы документируем программные интерфейсы. YaC 2014
Как мы документируем программные интерфейсы. YaC 2014Как мы документируем программные интерфейсы. YaC 2014
Как мы документируем программные интерфейсы. YaC 2014
Yandex
 
Стажировка-2015. Разработка. Занятие 13. Сборка фронтенда
Стажировка-2015. Разработка. Занятие 13. Сборка фронтендаСтажировка-2015. Разработка. Занятие 13. Сборка фронтенда
Стажировка-2015. Разработка. Занятие 13. Сборка фронтенда
7bits
 
Scala for android
Scala for androidScala for android
Scala for android
Alexander Rusin
 
Js templating stepan_reznikov
Js templating stepan_reznikovJs templating stepan_reznikov
Js templating stepan_reznikovyaevents
 
Степан Резников "Шаблонизация на клиенте"
Степан Резников "Шаблонизация на клиенте"Степан Резников "Шаблонизация на клиенте"
Степан Резников "Шаблонизация на клиенте"
Yandex
 
всплывающее окно при закрытии сайта
всплывающее окно при закрытии сайта  всплывающее окно при закрытии сайта
всплывающее окно при закрытии сайта
Olga Pirozhenko
 
Web весна 2012 лекция 4
Web весна 2012 лекция 4Web весна 2012 лекция 4
Web весна 2012 лекция 4Technopark
 
Canvas
CanvasCanvas
Кроссбраузерные решения в рекламной сети Яндекса
Кроссбраузерные решения в рекламной сети ЯндексаКроссбраузерные решения в рекламной сети Яндекса
Кроссбраузерные решения в рекламной сети ЯндексаMedia Gorod
 
Артем Маркушев - HTML & CSS
Артем Маркушев - HTML & CSSАртем Маркушев - HTML & CSS
Артем Маркушев - HTML & CSSDataArt
 
Web весна 2012 лекция 10
Web весна 2012 лекция 10Web весна 2012 лекция 10
Web весна 2012 лекция 10Technopark
 
Alasql.js - SQL сервер на JavaScript
Alasql.js - SQL сервер на JavaScriptAlasql.js - SQL сервер на JavaScript
Alasql.js - SQL сервер на JavaScript
Andrey Gershun
 
Knockout.JS на примере 2ГИС-Онлайн
Knockout.JS на примере 2ГИС-ОнлайнKnockout.JS на примере 2ГИС-Онлайн
Knockout.JS на примере 2ГИС-ОнлайнDevDay
 
Андрей Тюпа Оптимизация верстки Sass + Compass framework
Андрей Тюпа Оптимизация верстки Sass + Compass frameworkАндрей Тюпа Оптимизация верстки Sass + Compass framework
Андрей Тюпа Оптимизация верстки Sass + Compass frameworkAlbina Tiupa
 
Knockoutjs на примере 2ГИС-Онлайн
Knockoutjs на примере 2ГИС-ОнлайнKnockoutjs на примере 2ГИС-Онлайн
Knockoutjs на примере 2ГИС-Онлайн2ГИС Технологии
 

Similar to Write code for browsers with Scala (20)

Svg
SvgSvg
Svg
 
Вёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, Jammit
Вёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, JammitВёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, Jammit
Вёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, Jammit
 
Web осень 2012 лекция 10
Web осень 2012 лекция 10Web осень 2012 лекция 10
Web осень 2012 лекция 10
 
Web весна 2013 лекция 10
Web весна 2013 лекция 10Web весна 2013 лекция 10
Web весна 2013 лекция 10
 
Jsfwdays 2013-2
Jsfwdays 2013-2Jsfwdays 2013-2
Jsfwdays 2013-2
 
Как мы документируем программные интерфейсы. YaC 2014
Как мы документируем программные интерфейсы. YaC 2014Как мы документируем программные интерфейсы. YaC 2014
Как мы документируем программные интерфейсы. YaC 2014
 
Стажировка-2015. Разработка. Занятие 13. Сборка фронтенда
Стажировка-2015. Разработка. Занятие 13. Сборка фронтендаСтажировка-2015. Разработка. Занятие 13. Сборка фронтенда
Стажировка-2015. Разработка. Занятие 13. Сборка фронтенда
 
Scala for android
Scala for androidScala for android
Scala for android
 
Js templating stepan_reznikov
Js templating stepan_reznikovJs templating stepan_reznikov
Js templating stepan_reznikov
 
Степан Резников "Шаблонизация на клиенте"
Степан Резников "Шаблонизация на клиенте"Степан Резников "Шаблонизация на клиенте"
Степан Резников "Шаблонизация на клиенте"
 
всплывающее окно при закрытии сайта
всплывающее окно при закрытии сайта  всплывающее окно при закрытии сайта
всплывающее окно при закрытии сайта
 
Web весна 2012 лекция 4
Web весна 2012 лекция 4Web весна 2012 лекция 4
Web весна 2012 лекция 4
 
Canvas
CanvasCanvas
Canvas
 
Кроссбраузерные решения в рекламной сети Яндекса
Кроссбраузерные решения в рекламной сети ЯндексаКроссбраузерные решения в рекламной сети Яндекса
Кроссбраузерные решения в рекламной сети Яндекса
 
Артем Маркушев - HTML & CSS
Артем Маркушев - HTML & CSSАртем Маркушев - HTML & CSS
Артем Маркушев - HTML & CSS
 
Web весна 2012 лекция 10
Web весна 2012 лекция 10Web весна 2012 лекция 10
Web весна 2012 лекция 10
 
Alasql.js - SQL сервер на JavaScript
Alasql.js - SQL сервер на JavaScriptAlasql.js - SQL сервер на JavaScript
Alasql.js - SQL сервер на JavaScript
 
Knockout.JS на примере 2ГИС-Онлайн
Knockout.JS на примере 2ГИС-ОнлайнKnockout.JS на примере 2ГИС-Онлайн
Knockout.JS на примере 2ГИС-Онлайн
 
Андрей Тюпа Оптимизация верстки Sass + Compass framework
Андрей Тюпа Оптимизация верстки Sass + Compass frameworkАндрей Тюпа Оптимизация верстки Sass + Compass framework
Андрей Тюпа Оптимизация верстки Sass + Compass framework
 
Knockoutjs на примере 2ГИС-Онлайн
Knockoutjs на примере 2ГИС-ОнлайнKnockoutjs на примере 2ГИС-Онлайн
Knockoutjs на примере 2ГИС-Онлайн
 

Write code for browsers with Scala