Facebook's React pioneered the idea of the Virtual DOM - a clever trick which resulted in a framework that supports a declarative programming style, allows pleasant modularity, and surprising efficiency. This talk will explore the ability to represent a web application as the Virtual DOM on the server side. The Escher.jl Julia package is attempt to implement these ideas. Escher introduces two twists in the usual Virtual DOM story:
1. Extend the Virtual DOM idea to HTML5 Custom Elements. In Escher, things like event listeners, entities that send messages over web sockets are custom elements. You can attach these to other elements to make them behave in interesting ways. Escher also comes out-of-the box with a rich library of pure functions that result in DOM nodes. These DOM nodes address various needs: Markdown, Vector Graphics (via Compose), Plots (via Gadfly), LaTeX, Layouts, Typography, Styles, Input Widgets, Clickable and Keyboard behaviors, even pages, tabs, menus, slideshows are all supported out-of-the box. This is done using Escher's custom elements (mostly the bits that support FRP) and the Polymer library (everything else, pretty much).  This library is entirely functional, and deals only with immutable values.
2. Represent DOM on the server side: The Patchwork.jl package provides the ability to represent DOM on the server. It is essentially a mirror of a VDom node in virtual-dom - a pure JavaScript Virtual DOM library by Matt Esch. Escher sends the browser a JSON formatted Virtual DOM, and subsequently, sequences of patches sent as the UI needs to change.
Escher works seamlessly with Reactive.jl - an FRP library derived from the Elm language's Signal library written for Julia. The result is a strangely beautiful pure Julia web programming experience which lets you do beautiful and bold visualizations of data, write interactive / explorable explanations, and teach better.
1 favorite thumb_down thumb_up 0 comments visibility_off  Remove from Watchlist visibility  Add to Watchlist

Outline/structure of the Session

- Extending the Virtual DOM idea

    - to Web Components

    - to the server side

- Overview of Escher's library of UI functions

   - includes, vector graphics, plots, widgets, LaTeX, TeX-style predictable layouts

- Introduction to Functional Reactive Programming with Escher

- Demos of code

   - A traditional recommender system UI - 30 lines of code

   - Minesweeper in 80 lines of code

   - A stock ticker in 80 lines

   - And more...

Learning Outcome

The main outcome is the understanding that Web development does not need to be as hard as it is traditionally touted to be. Anyone who can write any kind of program in Julia can now also make interactive UIs with way less effort than the Web UI experts. Escher is a proof that we can build pleasant abstractions over the web platform. Audience will also learn about functional reactive programming.

Target Audience

UI developers, and programmers of other sorts who want make UIs

schedule Submitted 1 year ago

Comments Subscribe to Comments

comment Comment on this Proposal