28.03.15. Одесса. Impact Hub Odessa. Конференция JSLab. Руслан Шевченко."JavaScript как платформа компиляции" Обзор языков, компилирующихcя в javascript Подробнее: http://geekslab.co/ https://www.facebook.com/GeeksLab.co https://www.youtube.com/user/GeeksLabVideo

1. JS as PL Platform
review of languages, evaluated in JS
Ruslan Shevchenko
//lynx capital partners
@rssh1

2. JS Languages
• Why ?
• Better JavaScript (types, async, etc .. )
• Language ecosystems (C, Scala, Clojure)
• Explore ideas (tier-programming, CoP )
• Because I can ;)))

3. Coffescript
Dart
TypeScript
Traceur
Emscripten(C, C++, Rust)
Scala.js
Clojure-Script Kotlin
Java (gwt, applets)
Gopher.js
Idris
Opa
Ur/web
Asm.js
Shen

4. Coffeescript
• http://coffeescript.org/
• javascript with classes + ruby-inspired syntax
• actually used in industry
• literate programming [markdown syntax]
• syntax sugar [ =>, tuple assignment, expr.]
• “javascript + goodies from modern dynamic
language”.

5. Dart / Typescript
Google Microsoft
Class semantics + optional typing
trait/mixin
generic
syntax sugar, this scoping
async/await in process
interfaces [structural typing]

6. Traceur
• https://github.com/google/traceur-compiler
• Google
• JS [6, 7] + optional types/annotations => Js - now
• [async, async generator, =>, … , etc]

7. Async function
function t1(x) {
return new Promise(….)
}
async function f2(x) {
await t1(10);
return x2
}
async function f3(x) {
x1 = await t(10);
x2 = await f2(x1)
doSomething
}
function f3(x) {
f(function() {
f2(function(x2) {
doSomething
}
}
}
// simplified. (without error handling)
escape callback hell

8. Async generator
function* asyncGen(x) {
for(i in items) {
yield new Promise(….)
}
}
// simplified. (without error handling)
async function useGen() {
for(i on asyncGen(x)) {
… do-something
}
}

9. Async
• Other implementations:
• https://github.com/yortus/asyncawait (node-fibers)
• http://routines.ch/ (go-like channels)
• https://github.com/benjamn/es7-async-await (es7
=> es6)
• https://github.com/facebook/regenerator (es7 =>
es5)

10. asm.js
• http://asm.js
• Grown from mozilla research project. Supported
now by all major browsers [FF, chrome, next MS,
Opera]
• Subset of javascript.
• Types are set with ‘annotation operations'

11. asm.js
function AsmModule {
use “asm”;
function f(x,y) {
x=x|0; // x is int.
y = +y; // y is double
return + (y/(x+1)); // double
}
return {
f: f
}
}

12. asm.js
function AsmModule {
use “asm”;
function f(x,y) {
x=x|0; // x is int.
y = +y; // y is double
return + (y/(x+1)); // double
}
return {
f: f
}
}
- Compile to low-level efficient code
(if typechecked)
- low-level performance-critical code
- for compilers / interpreters (not people)

13. Emscripten
• http://kripken.github.io/emscripten-site/
• C, C++ => LLVM => Asm.js
• (near native speed, OpenGL support).
• // RUST support is underway.

14. Emscripten
• C, C++ ecosystem:
• curses: https://github.com/coolwanglu/
PDCurses.js
• example: http://coolwanglu.github.io/PDCurses.js/xmas.html
• vi: https://github.com/coolwanglu/vim.js
• just s/gcc/emcc/ in Makefile ;)

15. Emscripten
example: vi port

16. Emscripten
• More useful use-cases:
• Games:
• Unity 4 provide asm.js generation.
• UnrealEngine
• DosBox works perfectly
• Math: Image recognition in browser

17. Notables ecosystems
• Scala:
• scala.js: http://www.scala-js.org/ (full compiler)
• lightweight jscala macro (made in Kiev by @atlanter)
• Clojure: clojure-script: https://github.com/clojure/clojurescript
• Java: http://www.gwtproject.org/overview.html
• On the way:
• Erlang [Shen]: https://github.com/synrc/shen ( made in Kiev by @5HT )
• Go [Gopher.js]: https://github.com/gopherjs/gopherjs

18. Scala-JS
• Scala-compiler + sbt plugin. (familiar build tool to
scala developers)
• Support of javascript dependencies (WebJars)
• Typed binding to most notable JS libs
• Ports for of reactive extensions, akka

19. Scala-js
• Scala goodies, extremely useful:
• ADT (case classes)
• macroses [async/await work out of the box]
• typeclasses

20. Clojure-Script
• Clojure-compiler + lein plugin. (familiar build tool
to clojure developers)
• Support of javascript dependencies (CloJars)
• OM/React framework is ‘mainstream’ in ‘non-
mainstream world’.

21. Kotlin
• http://kotlinlang.org/
• Main Idea: ‘better java’ from jet-brains
• karra - web framework
• statistically typed CSS
• DSL for html
ol {
li("List Item 1")
li("List Item 2")
}
fieldset() {
label("Text Input")
input(inputType="text", value="Text")
}

22. JS-backed architectures:
• tier-less language
• compiler will decide, where run you code:
• frontend, backend, db…
• language-integrated persistency and forms

23. JS-backed architectures:
• OPA: http://opalang.org/
• frontend: browser,
• backend: node.js
• persistency: mongo-db
• Language: like ML with { } syntax

24. JS-backed architectures:
• Ur/Web: http://www.impredicative.com/ur/
• frontend: browser,
• backend: own server
• persistency: SQL binding to language types
• Language: like ML with Haskell typicalness
• Exists commercial applications.

25. Coffescript
Dart
TypeScript
Traceur
Emscripten(C, C++, Rust)
Scala.js
Clojure-Script Kotlin
Java (gwt, applets)
Gopher.js
Idris
Opa
Ur/web
Asm.js
Shen

26. Js-languages
• Resume, if you still want be in ‘mainstream’ JS
world:
• Static type checker [flow: http://flowtype.org/ ]
• Async [multiple implementations]
• Get used to live with this scope :(
• may-be macroses [ http://sweetjs.org/ ]

28. Thanks for attention
• Ruslan Shevchenko.
• https://github.com/rssh
• @rssh1