Getting started with

Datascript & Reagent for webapps

Brice Fernandes@fractallambda

brice@fractallambda.com

tiny.cc/reactive-datascript

DataScript: Datomic-like queries on Clojurescript browser objects

Reagent: Clojurescript wrapper around Facebook’s React.js reactive UI library

HintsUse lein  cljsbuild  auto to rebuild whenever your files are modified

Create a new tabset in LightTable: ^-space then search for Tabset: Add a tablet

Create a browser tab in LightTable: ^-space then search for Browser: Add browser tab

Rendering to the page1

Reagent Atoms are special2

Enter Datascript3

Binding Datascript & Reagent4

Fun with Datascript5

Your turn.

Make a basic profile page for a dog

Rendering to the page1

Reagent Atoms are special2

Enter Datascript3

Binding Datascript & Reagent4

Fun with Datascript5

Your turn.

Let a dog change mood by clicking a button

Rendering to the page1

Reagent Atoms are special2

Enter Datascript3

Binding Datascript & Reagent4

Fun with Datascript5

…

…

Listing all dogs

…

Dog Match-Making

…

…

Your turn.

Match male dogs of similar age (~1 year) into packs and list possible packs

Datomic Query Docs: http://docs.datomic.com/query.html

Datascript Test Examples: http://tiny.cc/datascript-test

Datalog/Datascript Tutorial: http://www.learndatalogtoday.org/

! What Happens when you change the DB?

…

:(Nothing…

Rendering to the page1

Reagent Atoms are special2

Enter Datascript3

Binding Datascript & Reagent4

More Fun with Datascript5

…

…

1

2

Your turn.

Update 1) The members count 2) The pairings

Rendering to the page1

Reagent Atoms are special2

Enter Datascript3

Binding Datascript & Reagent4

Fun with Datascript5

Your turn.

Add to the app :-)

Suggest looking at one:many relations (parents / child)

Brice Fernandes@fractallambda

brice@fractallambda.com

tiny.cc/reactive-datascript?Bind and Unbind Function from https://gist.github.com/allgress/11348685