Code interactivity everywhere
with KLIPSE

clojuTRE 2016
Yehonathan Sharvit
(symbol (js/Date))

What is KLIPSE?

(app.klipse.tech)

What is KLIPSE?

Notice the .call(null)
We'll come back to it later...

What is KLIPSE?

(map inc [1 2 3])

What is KLIPSE?

[1,2,3].map((x) => x + 1)

What is KLIPSE?

[1,2,3]*10

What is KLIPSE?

print([x + 1 for x in range(10)])

What is KLIPSE?

(defn foo[] "hello")
(foo)

Why KLIPSE?

Interactivity

Reach
Simplicity

Why KLIPSE?

Interactivity - Liveness

The code is evaluated in the browser
The readers are confident that the code executes as the author of the code claims.

Instead of:

(map inc [1 2 3])
;; returns [2 3 4]

The readers see: 

(map inc [1 2 3])

BTW, do you see the bug in the non-interactive code snippet?

Why KLIPSE?

Interactivity - Code Evaluation on the go

The code can be modified by the reader.
Now, the reader can explore the code:

  • What happens if...
    1. I'm using dec instead of inc
      (map inc [1 2 3])
    2. I'm increasing the number of elements in the vector
      (map inc [1 2 3])
  • The reader can also check edge/weird cases:
    1. Passing an empty list
      (map inc [1 2 3])
    2. Or maybe pass a map instead of a vector e.g. {:a 1 :b 2}
      (map inc [1 2 3])

Reach - Pluggable on any web page

“Why are we doing this? Because Clojure rocks, and JavaScript reaches.” — Rich Hickey

There are a lot of tools that can host code snippets.

All of them require you (the writer and the reader) to come to them.

KLIPSE takes a different approach: it comes to you (on any web page).

Simplicity - KLIPSE REPL

  1. Always there: desktop, mobile, tablet. No installation, no OS dependencies
  2. Flat layout (by @raphaelboukara): no buttons, no texts
  3. Configurable via url parameters e.g. cljs_in=(map inc (range 10))
  4. or static-fns=true

Simplicity - KLIPSE plugin

  1. Just a javascript tag:

    <link rel="stylesheet" type="text/css" href="http://app.klipse.tech/css/codemirror.css">
<script>
window.klipse_settings = {
   selector: '.language-klipse'// css selector for the html elements you want to klipsify
};
</script>
<script src="http://app.klipse.tech/plugin/js/klipse_plugin.js"></script>

  2. Flat layout: no icons, no buttons, simply the code
  3. Comes with default options but is highly configurable:
    • languages
    • editor types: CodeMirror, raw html
    • evaluation delay
    • loop evaluation delay
    • load code from gist

Plugin Configuration - Demo

A live code snippet that loads code from a gist
This gist :require code from another gist
This code runs in a loop every 3 seconds.

Here is the gist:

Here is the KLIPSE snippet with this attributes: data-loop-msec="3000" data-gist-id="viebel/08a311453c9d31378b357ced54221fb4":

And here is the HTML element colorized by the code snippet:

Live Documentation - Demo

Challenges

What's next?

Questions?

/