getting started with datascript and reagent
DESCRIPTION
Quick introduction on how to use Datascript with Reagent to build web applications. Given to the Cambridge NonDysFunctional Programmers Meetup on November 13th 2014.TRANSCRIPT
![Page 1: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/1.jpg)
Getting started with
Datascript & Reagent for webapps
Brice Fernandes@fractallambda
tiny.cc/reactive-datascript
![Page 2: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/2.jpg)
DataScript: Datomic-like queries on Clojurescript browser objects
Reagent: Clojurescript wrapper around Facebook’s React.js reactive UI library
![Page 3: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/3.jpg)
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
![Page 4: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/4.jpg)
Rendering to the page1
Reagent Atoms are special2
Enter Datascript3
Binding Datascript & Reagent4
Fun with Datascript5
![Page 5: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/5.jpg)
![Page 6: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/6.jpg)
Your turn.
Make a basic profile page for a dog
![Page 7: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/7.jpg)
Rendering to the page1
Reagent Atoms are special2
Enter Datascript3
Binding Datascript & Reagent4
Fun with Datascript5
![Page 8: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/8.jpg)
![Page 9: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/9.jpg)
Your turn.
Let a dog change mood by clicking a button
![Page 10: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/10.jpg)
Rendering to the page1
Reagent Atoms are special2
Enter Datascript3
Binding Datascript & Reagent4
Fun with Datascript5
![Page 11: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/11.jpg)
…
…
![Page 12: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/12.jpg)
Listing all dogs
![Page 13: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/13.jpg)
…
![Page 14: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/14.jpg)
Dog Match-Making
![Page 15: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/15.jpg)
![Page 16: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/16.jpg)
…
…
![Page 17: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/17.jpg)
Your turn.
Match male dogs of similar age (~1 year) into packs and list possible packs
![Page 18: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/18.jpg)
Datomic Query Docs: http://docs.datomic.com/query.html
Datascript Test Examples: http://tiny.cc/datascript-test
Datalog/Datascript Tutorial: http://www.learndatalogtoday.org/
![Page 19: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/19.jpg)
! What Happens when you change the DB?
![Page 20: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/20.jpg)
…
![Page 21: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/21.jpg)
:(Nothing…
![Page 22: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/22.jpg)
Rendering to the page1
Reagent Atoms are special2
Enter Datascript3
Binding Datascript & Reagent4
More Fun with Datascript5
![Page 23: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/23.jpg)
![Page 24: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/24.jpg)
![Page 25: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/25.jpg)
…
…
![Page 26: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/26.jpg)
1
2
![Page 27: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/27.jpg)
Your turn.
Update 1) The members count 2) The pairings
![Page 28: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/28.jpg)
Rendering to the page1
Reagent Atoms are special2
Enter Datascript3
Binding Datascript & Reagent4
Fun with Datascript5
![Page 29: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/29.jpg)
Your turn.
Add to the app :-)
Suggest looking at one:many relations (parents / child)
![Page 30: Getting Started With Datascript and Reagent](https://reader034.vdocuments.net/reader034/viewer/2022052601/559445811a28ab02738b4592/html5/thumbnails/30.jpg)
Brice Fernandes@fractallambda
tiny.cc/reactive-datascript?Bind and Unbind Function from https://gist.github.com/allgress/11348685