Slides for my talk at MetaRefresh 2015. Made with https://github.com/shashi/Escher.jl

layout.jl

# An infinite number of mathematicians walk into a bar...

using Color

colors = distinguishable_colors(9)

box(w, h, n) =
    empty |> fillcolor(colors[n % 9 + 1]) |> size(w, h)

cut(w, h, ::(Escher.Vertical, Bool)) =
    (w, h/2)
cut(w, h, ::Any) =
    (w/2, h)

stack(w, h, d, n) =
    n == 0 ?
        empty :
        flow(d[1][1], [ box(cut(w, h, d[1])..., n),
            stack(cut(w, h, d[1])..., vcat(d[2:end], d[1]), n-1)], reverse=d[1][2])


directions = [
    (vertical, false),
    (horizontal, true),
    (vertical, true),
    (horizontal, false)
]

main(win) = inset(Escher.middle,
             size(100vw, 100vh, empty),
             stack(80vmin, 80vmin, directions, 24) |> paper(2))

slides.jl

using Gadfly
using Markdown

codebox(c, output=eval(parse(c))) =
    codemirror(c, linenumbers=false) |> width(30em), hskip(1em), output

front = vbox(
    title(4, "UIs as Values"),
    vskip(4em),
    title(3, "Shashi Gowda"),
    title(1, "@g0wda"),
    title(1, "github.com/shashi")
)

julia = vbox(
    title(3, "Julia"), 
    vskip(1em),
    hline(),
    vskip(1em),
    title(2, "A fresh approach to technical computing"),
    vskip(1em),
    hbox(flex(), title(1, "julialang.org"))
)

slidebody(body) = body |> fontsize(1.5em) |> fontweight(400)

lastsummer = vbox(
    title(3, "Let's make a UI framework!"),
    vskip(1em),
    md"""

$(vskip(1em))

**Painless**

- No boiler-plate
- Not even HTML/CSS/JS -- just Julia.
- No explicit DOM manipulation or AJAX/WebSocket setup

$(vskip(1em))

**Powerful**

- A rich library
- Super modular
""" |> slidebody

)

intro = vbox(
     title(3, "What is a UI?"),
     latex("view = f(data)", block=true) |> fontsize(2em)
) |> packacross(center)

hello = hbox(
    codebox("""plaintext("Hello, World!")""", plaintext("Hello, World!"))...
)

hellotypo = vbox(
    title(4, "Hello, World"),
    title(3, "Hello, World"),
    title(2, "Hello, World"),
    title(1, "Hello, World"),
    h1("Hello, World"),
    h2("Hello, World"),
    h3("Hello, World"),
    h4("Hello, World")
) |> pad(2em)

lorem = "絒翗"

ehlo2 = """
box1 = fillcolor(
  "tomato",
    pad(2em,
      plaintext("$lorem")))
"""

hello2 = hbox(
    codebox(ehlo2)...
)

ehlo3 = """
box2 = plaintext("$lorem") |>
     pad(2em) |>
     fillcolor("steelblue")
"""
hello3 = hbox(
    codebox(ehlo3)...
)

pt = hbox(codebox("""

plt = plot([sin, cos], 0, 6)
""")...)

pt2 = hbox(codebox("""

plt2 = plot(x=[1:1000],
     y=cumsum(randn(1000)),
     Geom.line)""")...)


vbox_demo = hbox(codebox("""
vert = vbox(
    box1,
    box2
)
""")...)

vbox_demo2 = hbox(codebox("""
vert = vbox(
    box1,
    vskip(2em),
    box2
)
""")...)

hbox_demo = hbox(codebox("""
horiz = hbox(
    box1,
    hskip(2em),
    box2
)
""")...)

hbox_demo2 = hbox(codebox("""
horiz2 = hbox(
    box1,
    hskip(1em),
    flex(box2),
    hskip(1em),
    box1,
) |> width(30em)
""")...)

hbox_demo3 = hbox(codebox("""
vbox(
 horiz2,
 vskip(1em),
 horiz2
)
""")...)

tbs, pgs = wire(tabs([hbox(icon("home"), hskip(1em), "Home"),
                  hbox(icon("info-outline"), hskip(1em),  "Plot 1"),
                  hbox(icon("settings"), hskip(1em), "Plot 2")]),
             pages([hellotypo, plt, plt2]), :tabschannel, :selected)

tabs_demo = hbox(codebox("""
t, p = wire(
    tabs([hbox(icon("home"), hskip(1em), "Home"),
          hbox(icon("info-outline"), hskip(1em),  "Plot 1"),
          hbox(icon("settings"), hskip(1em), "Plot 2")]),
    pages([hellotypo, plt, plt2]), :tabschannel, :selected)

vbox(
     toolbar([
        iconbutton("face"),
        "My App",
        flex(),
        iconbutton("search")]),
     maxwidth(30em, t),
     pad(1em, p)
)
""",
    vbox(toolbar([iconbutton("face"), "My App", flex(), iconbutton("search")]),
         maxwidth(30em, tbs),
         pad(1em, pgs)) |> size(40vw, 80vh)
 )...)


plt_slider = hbox(codebox("""
vbox(
    slider(0:0.01:2π),
    plot(x -> sin(x), 0, 6)
)
""")...)

plt_slider2 = hbox(codebox("""
phaseᵗ = Input(0.0)

plot_with_phase(phase) =
    vbox(
        slider(0:0.01:2π) >>> phaseᵗ,
        plot(x -> sin(x + phase), 0, 6)
    )

plot_with_phase(π/4)

""",
vbox(
    slider(0:0.01:2π),
    plot(x -> sin(x + π/4), 0, 6)
)
)...)

phaseᵗ = Input(0.0)

plot_with_phase(phase) =
    vbox(
        slider(0:0.01:2π) >>> phaseᵗ,
        plot(x -> sin(x + phase), 0, 6)
    )
plt_slider3 = lift(phaseᵗ) do phase
   hbox(codebox("""
phaseᵗ = Input(0.0)

plot_with_phase(phase) =
    vbox(
        slider(0:0.01:2π) >>> phaseᵗ,
        plot(x -> sin(x + phase), 0, 6)
    )

lift(plot_with_phase, phaseᵗ)
""",
plot_with_phase(phase))...)
end

using Compose

function sierpinski(n)
    if n == 0
        compose(context(), polygon([(1,1), (0,1), (1/2, 0)]))
    else
        t = sierpinski(n - 1)
        compose(context(),
                (context(1/4,   0, 1/2, 1/2), t),
                (context(  0, 1/2, 1/2, 1/2), t),
                (context(1/2, 1/2, 1/2, 1/2), t))
    end
end

varying = vbox(
    title(2, "Varying UIs"),
    vbox(
        vskip(1em),
        latex("view\_1 = f(data\_1)"),
        vskip(1em),
        latex("view\_2 = f(data\_2)"),
    ) |> fontsize(2em)
)

varying2 = vbox(
    title(2, "Varying UIs"),
    vbox(
        vskip(1em),
        latex("view\_1 = f(data\_1)"),
        vskip(1em),
        latex("view\_2 = f(data\_2)"),
        vskip(1em),
        latex("patches = diff(view\_2, view\_1)"),
        vskip(1em),
        latex("view\_2 = applyPatches(view\_1, patches)"),
    ) |> fontsize(2em)
)

thesis = vbox(
    title(3, "Values? o.O"),
    vskip(1em),
    md"""
- UIs in Escher are *immutable* values

$(vskip(1em))

- these values are more similar to numbers than DOM objects

$(vskip(1em))

- Think `hbox(a, b)` as being similar to `1 + 2`
""" |> fontsize(2em)
)

canv = vbox(
    title(3, "Escher.jl"),
    vskip(1em),
    title(2, "https://github.com/shashi/Escher.jl")
)
pt = render(pt)
pt2 = render(pt2)
tabs_demo = render(tabs_demo)
plt_slider = render(plt_slider)
plt_slider2 = render(plt_slider2)

credits = vbox(
    title(2, "Credits"),
    vskip(1em),
    title(1, "Evan Czaplicki - Elm (elm-lang.org)"),
    vskip(1em),
    title(1, "Matt Esch - Virtual DOM (github.com/Matt-Esch/virtual-dom)"),
    vskip(1em),
    title(1, "Viral Shah, Alan Edelman and MIT")
)
function main(window)
    push!(window.assets, "animation")
    push!(window.assets, "latex")
    push!(window.assets, "codemirror")
    push!(window.assets, "layout2")
    push!(window.assets, "icons")
    push!(window.assets, "widgets")

    lyt = include(Pkg.dir("Escher", "examples", "layout.jl"))(window) |> render

    lift(plt_slider3) do plt3
        slideshow([
            front,
            julia,
            lastsummer,
            canv,
            intro,
            hello,
            hello2,
            hello3,
            vbox_demo,
            vbox_demo2,
            hbox_demo,
            hbox_demo2,
            hbox_demo3,
            lyt,
            pt,
            pt2,
            tabs_demo,
            title(2, "How does it render?"),
            image("/assets/img/staticui.png"),
            varying,
            plt_slider,
            plt_slider2,
            plt3,
            title(2, md"Now how does *that* work?"),
            varying2,
            image("/assets/img/dynamicui.png"),
            thesis,
            credits,
            title(3, "Thanks!"),
        ], transitions="slide-from-right cross-fade")
    end
end