Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

js-scala

No description
by

Julien Richard-Foy

on 13 March 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of js-scala

Web Programming in Scala using js-scala trait MyProgram extends JsScala {

def main(name: Rep[String]): Rep[Unit] = {
println("Hello " + name + "!")
}

} Println StringConcat StringConcat Const "!" "Hello " Const name val prog = new MyProgram with JsScalaExp

val jsGen = new JSGenJsScala {
val IR: prog.type = prog
}

jsGen.emitSource(prog.main, "main", out) var main = function (x0) {
var x1 = "Hello, " + x0;
var x2 = x1 + "!";
console.log(x2);
}; window.on(Click) { e =>
println(e.offsetX)
} window.addEventListener('click', function (e) {
console.log(e.offsetX);
}); window.addEventListener('clik', function (e) {
console.log(e.offetX);
}); <div class=article>
<span>{ article.name + ": " }</span>
<strong>{ article.price }</strong>
</div> var articleUi = function (article) {
var div = document.createElement('div');
div.setAttribute('class', 'article');
var span = document.createElement('span');
var name = document.createTextNode(article.name + ': ');
span.appendChild(name);
div.appendChild(span);
var strong = document.createElement('strong');
var price = document.createTextNode(article.price);
strong.appendChild(price);
div.appendChild(strong);
return div
}; <div class=article>
<span>{ article.name + ": " }</span>
<strong>{ article.price }</strong>
</div> el('ul) {
for (article <- articles) yield {
el('li)(articleUi(article))
}
} <ul>
<li><div class=article>…</div></li>
<li><div class=article>…</div></li>

</ul> for {
foo <- Ajax.get("/foo")
bar <- Ajax.get("/bar/" + foo)
baz <- Ajax.get("/baz/" + bar)
} println(baz) $.get("/foo").then(function (foo) {
$.get("/bar/" + foo).then(function (bar) {
$.get("/baz/" + bar).done(function (baz) {
console.log(baz);
});
});
}); val inc = for {
n <- get[Int]
_ <- put(n + 1)
} yield n

println(inc(0)) // { value: 0, state: 1 } val inc = get[Int].flatMap { n =>
put(n + 1).map { _ =>
n
}
} VarRead def list[A : El](as: Rep[List[A]]) =
el('ul)(
for (a <- as) yield {
el('li)(implicitly[El[A]].el(a))
}
)

case class El[A](el: Rep[A => Node])

implicit val articleEl = El[Article] { (article: Rep[Article]) =>
el('div)(…)
}

implicit val userEl = El[User] { (user: Rep[User]) =>
el('span)(…)
} Tuple2 VarRead Add Const(1) VarAssign Block VarNew Println var s = 0;
var n = s; // get
s = n + 1; // put
var result = { value: n, state: s };
console.log(result); Julien Richard-Foy, Zenexity & INRIA, Université de Rennes 1, France Basics Repairing JavaScript and Browser APIs for {
form <- document.find("form.login")
pwd <- form.find("input[name=pwd]")
} println(pwd.value) var form = document.querySelector('form.login');
if (form !== null) {
var pwd = form.querySelector('input[name=pwd]');
if (pwd !== null) {
console.log(pwd.value);
}
} def articleUi(article: Rep[Article]) =
el('div, 'class -> 'article) {
el('span)(article.name + ": "),
el('strong)(article.price)
} Scala as a Preprocessor Sharing Abstractions between Server and Client Sides Remaining Challenges val wheels = domEvents(MouseWheel)

val deltaYs = wheels map (_.wheelDeltaY)

for (deltaY <- deltaYs) println(deltaY) implicit class EventsOps[A](as: Rep[Events[A]]) {
def map[B](f: Rep[A] => Rep[B]) = Events[B] { g =>
as((a: Rep[A]) => g(f(a)))
}
} var wheels = function (callback) {
window.addEventListener('mousewheel', function (e) {
callback(e);
});
};
var deltaYs = function (callback) {
return wheels(function (e) {
return callback(e.wheelDeltaY)
});
};
deltaYs.foreach(function (deltaY) {
console.log(deltaY);
}); programming
language val hello = el('div)("Hello, World!") var hello = document.createElement('div');
hello.appendChild(
document.createTextNode('Hello, World!')
); val hello = <div>Hello, World!</div> JavaScript Scala programming
language JavaScript Scala programming
language library JavaScript Scala interpreter interpreter library generator generator e.g. OPA, Links. e.g. GWT, Kotlin, ClojureScript, Fay, etc. JavaScript Scala programming language println("Yeah") Println Const "Yeah" class User(val name: String) Questions? class User

def User(name: Rep[String]): Rep[User] =
record[User]("name" -> name)

implicit class UserOps(user: Rep[User]) {
def name: Rep[String] =
select[String](user, "name")
// define more methods here
} val either =
data("Either[+A, +B] = Left(a: A) | Right(b: B)") import either._

val intOrStr: Rep[Either[Int, String]] = Left(42)

intOrStr match {
case Left(a) => "it’s an Int: " + a,
case Right(b) => "it’s a String: " + b
}

intOrStr == Left(42) // true case class User(name: String)

object User extends rep[User] Tiark Rompf, Martin Odersky: Lightweight Modular Staging end Embedded Compilers: Abstraction without Regret for High-Level High-Performance Programming. EPFL, Lausanne, 2012. Grzegorz Kossakowski, Nada Amin, Tiark Rompf, Martin Odersky: JavaScript as an Embedded DSL. ECOOP 2012. Let me try it! http://github.com/js-scala Form(single("age" -> number(min = 18))) $(function () {
$('#form').validate({
age: { min: 18 }
});
}); def connections(vertex: Rep[Vertex], edges: Rep[List[Edge]]) =
for {
edge <- edges
if edge.orig == vertex || edge.end == vertex
} yield {
if (edge.orig == vertex) edge.end
else edge.orig
} var connections = function (vertex, edges) {
return edges.filter(function (edge) {
return edge.orig == vertex || edge.end == vertex
}).map(function (edge) {
if (edge.orig == vertex) return edge.end
else return edge.orig
})
}; def on(e: EventDef)(handler: Rep[e.Data] => Rep[Unit]): Rep[Unit] object Click extends EventDef {
type Data = MouseEvent
} window.on(KeyUp) { e =>
println(e.keyCode) // Ok
println(e.offsetX) // Compile Error
} Scala General purpose, statically typed language on the JVM object Main {
def main(args: Array[String]) {
println("Hello, World!")
}
} Object Oriented class Greeter(name: String) {
def greet() {
println(s"Hello, $name!")
}
}

new Greeter("Julien").greet() Functional Programming val greet = (name: String) =>
s"Hello, $name!"

val greets = for {
name <- List("Peter", "John", "Bill")
} yield greet(name)

greets.foreach(println) Just Great trait SuperHero extends Person with Flying
with Swimming with Running

trait Functor[F[_]] {
def fmap[A, B](f: A => B): F[A] => F[B]
} From Scala to JavaScript DOM Events DOM Events Escaping from the Callback-Hell Handling Null Values Building DOM Fragments Building DOM Fragments Building DOM Fragments Ad-hoc Polymorphism Initial Program Code Generator Generated Code Un-inverting the Control of Callback-Driven APIs Un-inverting the Control of Callback-Driven APIs Building DOM Fragments Form Validation Rules Business Logic Reifying Data Type Definitions Js-Scala statically typed share abstractions between servers and clients expressive repair browser’s APIs Immutable Programming Model Immutable Programming Model Immutable Programming Model algebraic datatypes extensible syntax modules pattern matching higher-order type constructors “for” notation def makeUser(name: Rep[String]) = {
new User(name) // Compile error
} def printUser(user: Rep[User]) = {
println(user.name) // Compile error
} Support all algebraic data types features
- structural equals
- pattern matching / folds Macros to the rescue Manual Data Type Reification def makeUser(name: Rep[String]): Rep[User] = {
User(name) // Ok
}

def printUser(user: Rep[User]) = {
println(user.name) // Ok
} dependent types
Full transcript