Scala.js Safety & Sanity in the wild west of the web Li Haoyi, - - PowerPoint PPT Presentation

▶
scala js
SMART_READER_LITE
LIVE PREVIEW

Scala.js Safety & Sanity in the wild west of the web Li Haoyi, - - PowerPoint PPT Presentation

Aug 27, 2023 34 likes •557 views

Scala.js Safety & Sanity in the wild west of the web Li Haoyi, Dropbox, 20 July 2015 1.1 Who am I and what is Scala.js? - Haoyi works on devtools @ Dropbox - Previously web-infra - Previously-previously DfB web - Scala.js isnt a

slide-1
SLIDE 1

Scala.js

Safety & Sanity in the wild west of the web Li Haoyi, Dropbox, 20 July 2015

slide-2
SLIDE 2

1.1 Who am I and what is Scala.js?

  • Haoyi works on devtools @ Dropbox
  • Previously web-infra
  • Previously-previously DfB web
  • Scala.js isn’t a Dropbox thing
  • Originally PhD project from some guy in Switzerland
  • Reasonably active open-source community
  • Not used @ Dropbox at all
slide-3
SLIDE 3

1.2 What is Scala.js?

Write Scala, Run Javascript, Make Website! Compiler takes care of in between 100s of kb of code, ~0.9-4x slower as “raw” JS Supports entire Scala language, many libraries

slide-4
SLIDE 4

1.3 Javascript

var xhr = new XMLHttpRequest() xhr.open("GET", "http://api.openweathermap.org/" + "data/2.5/weather?q=Singapore" ) xhr.onload = function(e){ if (xhr.status === 200) document.body.textContent = xhr.responseText } xhr.send()

slide-5
SLIDE 5

1.4 Javascript ES6

let xhr = new XMLHttpRequest() xhr.open("GET", "http://api.openweathermap.org/" + "data/2.5/weather?q=Singapore" ) xhr.onload = (e) => { if (xhr.status === 200) document.body.textContent = xhr.responseText } xhr.send()

slide-6
SLIDE 6

1.4 Javascript ES6

let xhr = new XMLHttpRequest() xhr.open("GET", "http://api.openweathermap.org/" + "data/2.5/weather?q=Singapore" ) xhr.onload = (e) => { if (xhr.status === 200) document.body.textContent = xhr.responseText } xhr.send()

slide-7
SLIDE 7

1.5 Scala.js

val xhr = new XMLHttpRequest() xhr.open("GET", "http://api.openweathermap.org/" + "data/2.5/weather?q=Singapore" ) xhr.onload = (e: Event) => { if (xhr.status == 200) document.body.textContent = xhr.responseText } xhr.send()

slide-8
SLIDE 8

1.6 Scala.js

val xhr = new XMLHttpRequest() xhr.open("GET", "http://api.openweathermap.org/" + "data/2.5/weather?q=Singapore" ) xhr.onload = (e: Event) => { if (xhr.status == 200) document.body.textContent = xhr.responseText } xhr.send()

slide-9
SLIDE 9

1.7 Scala.js to Javascript

val (obj, misc) = objects(i) val t = obj.intersectionTime(ray) if (t > Epsilon && t < length - Epsilon){ visible = false } var tup = self.Ve.objects[i] if (null !== tup)

  • bj = tup._1, misc = tup._2

else throw (new MatchError).init(tup) var t = obj.intersectionTime(ray) t > Example$().Epsilon && t < length - Example$().Epsilon && (visible = !1)

slide-10
SLIDE 10

1.7 Scala.js to Javascript

val (obj, misc) = objects(i) val t = obj.intersectionTime(ray) if (t > Epsilon && t < length - Epsilon){ visible = false } var tup = self.Ve.objects[i] if (null !== tup)

  • bj = tup._1, misc = tup._2

else throw (new MatchError).init(tup) var t = obj.intersectionTime(ray) t > Example$().Epsilon && t < length - Example$().Epsilon && (visible = !1)

slide-11
SLIDE 11

1.7 Scala.js to Javascript

val (obj, misc) = objects(i) val t = obj.intersectionTime(ray) if (t > Epsilon && t < length - Epsilon){ visible = false } var tup = self.Ve.objects[i] if (null !== tup)

  • bj = tup._1, misc = tup._2

else throw (new MatchError).init(tup) var t = obj.intersectionTime(ray) t > Example$().Epsilon && t < length - Example$().Epsilon && (visible = !1)

slide-12
SLIDE 12

1.7 What is Scala.js

val (obj, misc) = objects(i) val t = obj.intersectionTime(ray) if (t > Epsilon && t < length - Epsilon){ visible = false } var tup = self.Ve.objects[i] if (null !== tup)

  • bj = tup._1, misc = tup._2

else throw (new MatchError).init(tup) var t = obj.intersectionTime(ray) t > Example$().Epsilon && t < length - Example$().Epsilon && (visible = !1)

slide-13
SLIDE 13

Live Demo

Starting Out

slide-14
SLIDE 14

1.8 Notes from the Demo

Fast turn-around time Compile errors when you make a mistake Accurate in-editor autocomplete

slide-15
SLIDE 15

Opal

WebSharper

2.1 How does Scala.js compare to...

slide-16
SLIDE 16

2.2 Everyone wants a better web

Safer More modular, expressive, reusable code One language across client/server Async support More tool-able & better tooling Fewer warts

slide-17
SLIDE 17

2.3 Safety

Uncaught TypeError: undefined is not a function

  • .extend.trim

b d.fx.step.(anonymous function)

  • .fx.update
  • .fx.step

F

  • .fx.custom
slide-18
SLIDE 18

2.4 More Expressive

race = (winner, runners...) -> print winner, runners race = function() { var winner = arguments[0] var runners = 2 <= arguments.length ? slice.call(arguments, 1) : []; print(winner, runners); };

slide-19
SLIDE 19

2.5 One language for client/server

# This has been ported to our Python Emstring class # Please keep them both in sync if you need to change something! class Emstring @em_snippet: (s, maxchars=50, location=0.75) -> new Emstring(s.toString()).snippet( maxchars, location ).toString()

slide-20
SLIDE 20

2.6 Async

ajaxFoo((a) => bar(a, (b) => baz(a, (c) => b + c ) ) ) async{ var a = wait(ajaxFoo()) wait(bar(a)) + wait(baz(a)) }

slide-21
SLIDE 21

2.7 More Toolable/Better Tooling

slide-22
SLIDE 22

2.8 Fewer Warts

javascript> ["10", "10", "10", "10"].map(parseInt) [10, NaN, 2, 3] // WTF

slide-23
SLIDE 23

4.1 What is a web application?

Server

Browser Browser

Database Server

slide-24
SLIDE 24

4.1 What is a web application?

Server

Browser Browser

Database Server

slide-25
SLIDE 25

4.1 What is a web application?

Server

Browser Browser

Database Server

DANGER DANGER DANGER Safety M a y b e S a f t e t y ? DANGER

slide-26
SLIDE 26

4.1 What is a web application?

Server

Browser Browser

Database Server

DANGER DANGER DANGER Safety M a y b e S a f t e t y ? Safety

slide-27
SLIDE 27

4.2 Typed HTML!

div( float.left, p("I am cow"), p("Hear me moo") ) <div style="float: left"> <p>I am cow</p> <p>Hear me moo</p> </div>

slide-28
SLIDE 28

4.2 Typed HTML!

div( float.elft, p("I am cow"), p("Hear me moo") ) value elft is not a member of object float float.elft, ^ Compilation failed

slide-29
SLIDE 29

4.2 Typed HTML!

dvi( float.left, p("I am cow"), p("Hear me moo") ) Not found: value dvi dvi( ^ Compilation failed

slide-30
SLIDE 30

4.3 What is a web application?

Server

Browser Browser

Database Server

DANGER DANGER Safety M a y b e S a f t e t y ? Safety Safety

slide-31
SLIDE 31

4.4 Hygienic, Typed CSS!

trait Simple{ def btn = cls( color := "red", height := 125 ) def fade = cls.hover(

  • pacity := 0.5

) } .$pkg-Simple-btn{ color: red; height: 125px; } .$pkg-Simple-fade:hover{

  • pacity: 0.5;

}

slide-32
SLIDE 32

4.4 Hygienic, Typed CSS!

trait Simple{ def btn = cls( color := "red", height := 125 ) def fade = cls.hover(

  • pacity := 0.5

) } .$pkg-Simple-btn{ color: red; height: 125px; } .$pkg-Simple-fade:hover{

  • pacity: 0.5;

}

slide-33
SLIDE 33

4.4 Hygienic, Typed CSS!

trait Simple{ def btn = cls( colro := "red", height := 125 ) def fade = cls.hover(

  • pacity := 0.5

) } Not found: value colro colro := "red" ^ Compilation failed

slide-34
SLIDE 34

4.4 Hygienic, Typed CSS!

trait Simple{ def btn = cls( color := "red", height := 125 ) def fade = cls.hovre(

  • pacity := 0.5

) } value hovre is not a member of

  • bject cls

def fade = cls.hovre( ^ Compilation failed

slide-35
SLIDE 35

4.5 Hygienic, Typed CSS!

val x = div( cls := """ $pkg-Simple-btn $pkg-Simple-fade """, h1(...), p(...) ) <div class=" $pkg-Simple-btn $pkg-Simple-fade"> <h1>...</h1> <p>...</p> </div>

slide-36
SLIDE 36

4.5 Hygienic, Typed CSS!

import Simple._ val x = div( btn, fade, h1(...), p(...) ) <div class=" $pkg-Simple-btn $pkg-Simple-fade"> <h1>...</h1> <p>...</p> </div>

slide-37
SLIDE 37

4.5 Hygienic, Typed CSS!

import Simple._ val x = div( btn, fadee, h1(...), p(...) ) Not found: value fadee fadee, ^ Compilation failed

slide-38
SLIDE 38

4.6 What is a web application?

Server

Browser Browser

Database Server

DANGER Safety M a y b e S a f t e t y ? Safety Safety Safety

slide-39
SLIDE 39

4.7 Ajax!

var xhr = new XMLHttpRequest() xhr.open("http://www.bit.ly") xhr.onload = (x) => { ... } xhr.send() import dom._ var xhr = new XMLHttpRequest() xhr.open("http://www.bit.ly") xhr.onload = (x: Event) => { ... } xhr.send()

slide-40
SLIDE 40

4.7 Ajax!

// Javascript $j.ajax("/api/list", { data: inputBox.value,

  • nComplete: function(res){ ... }

})

slide-41
SLIDE 41

4.7 Ajax!

// Javascript $j.ajax("/api/list", { data: inputBox.value,

  • nComplete: function(res){ ... }

})

How do we know this correct?

slide-42
SLIDE 42

4.7 Ajax!

// Javascript $j.ajax("/api/list", { data: inputBox.value,

  • nComplete: function(res){ ... }

})

How do we know this correct? And this value?

slide-43
SLIDE 43

4.7 Ajax!

// Javascript $j.ajax("/api/list", { data: inputBox.value,

  • nComplete: function(res){ ... }

})

How do we know this correct? And this value? And that we’re using this res the right way?

slide-44
SLIDE 44

4.7 Typed Ajax!

// Javascript $j.ajax("/api/list", { data: inputBox.value,

  • nComplete: function(res){ ... }

}) // Scala.js val res = Ajax[Api].list(inputBox.value).call()

slide-45
SLIDE 45

Live Demo

Typed Ajax

slide-46
SLIDE 46

5.1 What is a web application?

Server

Browser Browser

Database Server

Safety M a y b e S a f t e t y ? Safety Safety Safety Safety

slide-47
SLIDE 47

5.2 Scala.js gives you...

  • Shared client-server code
  • Shared client-server libraries
  • A reasonable language to write the client in
slide-48
SLIDE 48

5.3 Scala.js gives you...

Everything that

  • ES6 gives (string-interp, const, class, =>, …)
  • Typescript gives (types, generics, …)
  • Persistent collections,
  • Monads, macros, mixins, ...
  • Higher kinded types, virtual classes, ...
slide-49
SLIDE 49

5.3 Scala.js does not give you

undefined is not a function Mal-formed HTML Un-used CSS classes Using un-defined CSS classes CSS class-name collisions Mal-formed Ajax requests

slide-50
SLIDE 50

Fun uses of Scala.js

Ray Tracing Platform Games TodoMVC Djinni.js

slide-51
SLIDE 51

5.4 Safety & Sanity on the Web

Shared code between Client & Server Enforce safety throughout the entire application, not just the Javascript Not 12 months from now, but today!

slide-52
SLIDE 52

Questions?