strangeloop2013-jasongilman-visualizationdrivendevelopment

8/9/2019 StrangeLoop2013-JasonGilman-VisualizationDrivenDevelopment

1/70

VisualizationDrivenDevelopment

Jason Gilman

@jasongilmanelement 84

Thursday, November 28, 13


2/70

About Me



3/70

Are we at the pinnacle ofcomputing?



4/70

Of course not!



5/70

Computer

Source: Heinz NixdorfMuseumsForum

Developer

Communication



6/70

?

1. Write code 2. Execution

NullPointerException

3. Output

What's happening?



7/70

Tool BeltLogging Debugger REPL



8/70

Deciencies:Computer

Complicated State

Logs,

stack traces,alerts

Developer



9/70

Which of these is bigger?

550mm 3m



10/70

Which of these is bigger?

source: commons.wikimedia.org/wiki/File:Baseball_(crop).jpg



11/70

Steam SetMinidumpSteamID: Caching Steam ID: 76561198025064504 [API loaded no]


12/70

Steam_SetMinidumpSteamID: Caching Steam ID: 76561198025064504 [API loaded no]Endless Space(863,0xac65aa28) malloc: *** error for object 0x20afa84c: pointer being freed was not allocated*** set a breakpoint in malloc_error_break to debugEndless Space(863,0xac65aa28) malloc: *** error for object 0x20afa94b: pointer being freed was not allocated*** set a breakpoint in malloc_error_break to debugEndless Space(863,0xac65aa28) malloc: *** error for object 0x92d3552: pointer being freed was not allocated*** set a breakpoint in malloc_error_break to debugEndless Space(863,0xac65aa28) malloc: *** error for object 0x20afa94b: pointer being freed was not allocated*** set a breakpoint in malloc_error_break to debugEndless Space(863,0xac65aa28) malloc: *** error for object 0x9169d52: pointer being freed was not allocated*** set a breakpoint in malloc_error_break to debugEndless Space(863,0xac65aa28) malloc: *** error for object 0x20afa94b: pointer being freed was not allocated*** set a breakpoint in malloc_error_break to debugLib.dll into Unity Child DomainException in thread "main" java.io.FileNotFoundException: Could not locate clojure/tools/nrepl/ack__init.class or clojure/tools/nrepl/ack.clj on classpath:(lein2.clj:1) at clojure.lang.Compiler.eval(Compiler.java:5440) at clojure.lang.Compiler.eval(Compiler.java:5415) at clojure.lang.Compiler.load(Compiler.java:5857) at clojure.lang.RT.loadResourceScript(RT.java:340) at clojure.lang.RT.loadResourceScript(RT.java:331) at clojure.lang.RT.load(RT.java:409) at clojure.lang.RT.load(RT.java:381) at clojure.core$load$fn__4519.invoke(core.clj:4915) at clojure.core$load.doInvoke(core.clj:4914) at clojure.lang.RestFn.invoke(RestFn.java:408) at clojure.core$load_one.invoke(core.clj:4729) at clojure.core$load_lib.doInvoke(core.clj:4766) at clojure.lang.RestFn.applyTo(RestFn.java:142) at clojure.core$apply.invoke(core.clj:542) at clojure.core$load_libs.doInvoke(core.clj:4800) at clojure.lang.RestFn.applyTo(RestFn.java:137) at clojure.core$apply.invoke(core.clj:542) at clojure.core$require.doInvoke(core.clj:4881) at clojure.lang.RestFn.invoke(RestFn.java:408) at leinjacker.utils$try_resolve$fn__383.invoke(utils.clj:12) at leinjacker.utils$try_resolve.invoke(utils.clj:12) at clojure.lang.AFn.applyToHelper(AFn.java:161) at clojure.lang.AFn.applyTo(AFn.java:151) at clojure.lang.Compiler$InvokeExpr.eval(Compiler.java:2906) at clojure.lang.Compiler$MapExpr.eval(Compiler.java:2472) at clojure.lang.Compiler$DefExpr.eval(Compiler.java:361) at clojure.lang.Compiler.eval(Compiler.java:5429) at clojure.lang.Compiler.load(Compiler.java:5857) at clojure.lang.RT.loadResourceScript(RT.java:340) at clojure.lang.RT.loadResourceScript(RT.java:331) at clojure.lang.RT.load(RT.java:409) at clojure.lang.RT.load(RT.java:381) at clojure.core$load$fn__4519.invoke(core.clj:4915)- Completed reload, in 0.075 secondsSwitching to 800x600 fullscreenPlatform assembly: /Users/mark/Library/Application Support/Steam/SteamApps/common/Endless Space/Endless Space.app/Contents/Data/Managed/System.dll (this messageis harmless)Platform assembly: /Users/mark/Library/Application Support/Steam/SteamApps/common/Endless Space/Endless Space.app/Contents/Data/Managed/System.Xml.dll (thismessage is harmless)Platform assembly: /Users/mark/Library/Application Support/Steam/SteamApps/common/Endless Space/Endless Space.app/Contents/Data/Managed/UnityScript.Lang.dll (thismessage is harmless)Platform assembly: /Users/mark/Library/Application Support/Steam/SteamApps/common/Endless Space/Endless Space.app/Contents/Data/Managed/Boo.Lang.dll (this messageis harmless)[Bootloader] version: 1.00.18 - 02 (Filename: /Applications/buildAgent/work/b0bcff80449a48aa/Runtime/ExportGenerated/MacStandalonePlayer/UnityEngineDebug.cpp Line: 43)[Bootloader] command line: /Users/mark/Library/Application Support/Steam/SteamApps/common/Endless Space/Endless Space.app/Contents/MacOS/Endless Space -single-instance -windowed -w 2560 -h 1440 Thursday, November 28, 13


13/70


14/70

http://www.ickr.com/photos/gavinbell/81011618

You're planning a wedding

http://www.flickr.com/photos/gavinbell/81011618http://www.flickr.com/photos/gavinbell/81011618


15/70

Is this a good choice?



16/70

A good cake for the reception?

source: allrecipes.com/recipe/zuccotto-cupcakes



17/70


18/70


19/70

source: google.com/trends/explore#q=clojure&cmpt=q

Data Visualization



20/70


21/70

Code Executionis Data



22/70

data ! data

!

data v1data v2data v3

data v4data v5



23/70

( defn qsort [[ pivot & xs ]] ( when pivot ( let [ smaller # ( < % pivot )

before-pivot ( filter smaller xs ) after-pivot ( remove smaller xs )] ( lazy-cat ( qsort before-pivot ) [ pivot ]

( qsort after-pivot )))))

Quick Sort

source: rosettacode.org/wiki/Sorting_algorithms/Quicksort#Clojure



24/70

( defn qsort [[ pivot & xs ]] ( when pivot ( let [ smaller # ( < % pivot ) before-pivot ( filter smaller xs ) after-pivot ( remove smaller xs )] ( capture! { :left before-pivot

:pivot pivot :right after-pivot })

( lazy-cat ( qsort before-pivot ) [ pivot ] ( qsort after-pivot )))))



25/70

{:left [3 1 4 0 2] :pivot 5 :right [...{:left [1 0 2] :pivot 3 :right [4]}{:left [0] :pivot 1 :right [2]}{:left [] :pivot 0 :right []}{:left [] :pivot 2 :right []}{:left [] :pivot 4 :right []}...

Captured

(qsort [5 3 1 7 4 6 ...])



26/70



27/70

pivotleft

right



28/70



29/70

New ideas are old ideas.



30/70

forward 50

right 90forward 50right 90forward 50...

LOGO

source: http://el.media.mit.edu/logo-foundation/logo/turtle.html



31/70



32/70

source: http://cyberneticzoo.com/?p=1711

Not Just for Kids

http://cyberneticzoo.com/?p=1711http://cyberneticzoo.com/?p=1711


33/70

Drawing a Housesquaretriangle

squareright 30triangle

A Plan

right 90squareright 30triangle

Success!Thursday, November 28, 13


34/70

VisualizationDriven

DevelopmentThursday, November 28, 13


35/70

VDD Coregithub.com/element84/vdd-core

https://github.com/Element84/vdd-corehttps://github.com/Element84/vdd-core


36/70

Web Browser



37/70

Browser Coding Env

WebSockets

Client

Viz utilities

Server

EmbeddedHTTP Server

Your Code Your

Visualization



38/70

UsingVDD Core


( d f t [[ i t & ]]


39/70

( defn qsort [[ pivot & xs ]] ( when pivot ( let [ smaller # ( < % pivot ) before-pivot ( filter smaller xs ) after-pivot ( remove smaller xs )] ( capture! { :left before-pivot

:pivot pivot :right after-pivot })

( lazy-cat ( qsort before-pivot ) [ pivot ] ( qsort after-pivot )))))

ClientServer

Your Code YourVisualization



40/70

In the REPL:

(require '[vdd-core.core :as vdd])(def server (vdd/start-viz))

ClientServer

Your Code YourVisualization



41/70

In the Browser:



42/70

In the REPL:(use 'qsort.driver)(viz-qsort [3 2 4 5 1])

( defn viz-qsort [ data ] ; Reset the global captured state ( capture/reset-captured! ) ; Run quicksort. Visualization data will be captured ( let [ results ( doall ( sorter/qsort data )) combined ( qsort-list-combiner ( capture/captured )) ; Prepend the unsorted data combined ( concat [{ :items data :left [] :right []}] combined [{ :items results :left [] :right []}])] ; Send the data to be visualized ( vdd/data->viz combined )))



43/70

[{"items":[3,2,4,5,1], "left":[], "right":[] }, {"items":[2,1,3,4,5], "left":[2,1], "pivot":3, "right":[4,5]}, {"items":[1,2,3,4,5], "left":[1], "pivot":2, "right":[] }, {"items":[1,2,3,4,5], "left":[], "pivot":1, "right":[] }, {"items":[1,2,3,4,5], "left":[], "pivot":4, "right":[5] }, {"items":[1,2,3,4,5], "left":[], "pivot":5, "right":[] }, {"items":[1,2,3,4,5], "left":[], "right":[] }]

Data Sent to the

Visualization


h


44/70

( )Player component in VDD Core

Bar Chart in D3



45/70

{"items":[2,1,3,4,5], ...

{"items":[3,2,4,5,1], ...

{"items":[2,1,3,4,5], ...

{"items":[1,2,3,4,5], ...

...



46/70

(viz-qsort (shuffle (range 50)))



47/70

How can I make my code visual?



48/70

1. Identify nouns.

2. Choose visual representation.3. Choose layout.



49/70

GET /search?point=45,78&cloud_max=32&keywords=rain

Data Search

AND point = 45, 78 cloud < 0.32

keywords = rainThursday, November 28, 13


50/70

AND OR provider=FOO ... AND

point = 45, 78 cloud < 0.32 keywords = rain

original

query

permitteddata rules



51/70

1. Identify Nouns

Conditions

Operations - and, or, not Query



52/70

2. Choose Visual Representation

Conditions

Operations

Query

cloud < 0.32

&&or AND

Tree Layout



53/70

3. Choose a Layout

1. D3 Tree Layout 2. HTML Lists

&&

cloud < 0.32 keywords = rain

AND cloud < 0.32 keywords = rain



54/70

Implementation vdd-core-examples/

src/ ...

viz/ boolean_logic_simpliers/ driver.clj index.html simpliers.css simpliers.js

github.com/element84/vdd-core-examplesThursday, November 28, 13
https://github.com/element84/vdd-core-exampleshttps://github.com/element84/vdd-core-exampleshttps://github.com/element84/vdd-core-examples


55/70



56/70

A Problem

No Recursion



57/70

Fixed



58/70

This sounds hard!



59/70

Keep it simple.


Lif l f B f Af


60/70

Lifecycle ofa request

Beforequery state

Afterquery state



61/70

Build reusablevisualizations.



62/70



63/70



64/70



65/70

source: ickr.com/photos/epsos/6018530849

Woodworking

Carpentry

&

Developingsoftware is like



66/70

Jig


67/70

Jig

source: ickr.com/photos/crown_molding/5079441077

wood to cut


Jig Benets


68/70

Jig Benets

Makes work easier (faster)Higher quality results


Visualization Benets


69/70

Visualization Benets

Makes work easier (faster)Higher quality results



70/70

Thanks Jason Gilman@jasongilman element 84

strangeloop2013-jasongilman-visualizationdrivendevelopment

Documents