

A DSL with a View - tosh
http://gbracha.blogspot.com/2014/11/a-dsl-with-view.html

======
escherize
We've been using Reagent[1], re-frame (events as frp)[2], and re-com
(component library)[3] as layers of abstraction in a dsl for creating react
components for a while.

That dsl is called hiccup, and it's a way to deal with datastructures while
building up (usually) html. In the case of reagent, hiccup -> [reagent] ->
react-components.

We write functions that return data structures, that get turned into react
components.

It's really awesome to be able to treat your UI as data and pure functions
that act on data. Any list is simply a formatting function mapped over data at
rest, usually a vector of maps.

[1] [http://reagent-project.github.io](http://reagent-project.github.io)

[2] [https://github.com/Day8/re-frame](https://github.com/Day8/re-frame)

[3] [http://re-demo.s3-website-ap-southeast-2.amazonaws.com/](http://re-
demo.s3-website-ap-southeast-2.amazonaws.com/)

~~~
Reefersleep
Who's "we"? What do you do?

I'm trying to get into CLJS/Reagent/FRP (quite possibly re-frame) myself.

~~~
escherize
Thanks for asking! We are a startup: fetchh.io - feel free to make an account
and poke around if you want to see what a newbie to frontend can do with
Clojure knowledge on top of cljs/reagent/re-frame. The site's been live for a
couple months.

~~~
firepoet
Typo after adding shipment: "We match or beat AusPost's price - garanteed."
should read "We match or beat AusPost's price - guaranteed."

~~~
escherize
Fixed, thanks. :)

------
draegtun
This reminds me of the Visual Interface Dialect (VID) that is part of
Rebol/View - [http://rebol.com/docs/easy-vid.html](http://rebol.com/docs/easy-
vid.html)

Here's the buttons examples in VID...

    
    
        Rebol []
    
        shrink: does []
        grow: does []
    
        view layout [
            text "Hello Brave New World"
    
            below   ; not really needed as this is the default behaviour
            button "Press Me" [shrink]
            button "No, press me" [grow]
    
            ; row
            across
            button "Press Me" [shrink]
            button "No, press me" [grow]
            return
        ]
    

VID runs on Rebol 2. Its successor (still in beta) is R3GUI which runs on
Rebol 3 - [http://www.r3gui.com/](http://www.r3gui.com/)

This is how the buttons work in R3GUI...

    
    
        button "Press Me" on-action [shrink]
        button "No, press me" on-action [grow]
    

... which is even more similar to posted article.

Below is a basic (ie. naive!) boilerplate of the Todos example code in VID:

    
    
        todos: ["todo 1" "todo 2" "todo 3"]
    
        ;; To be defined!
        nothing: []
        controls: []
        input-zone: []
    
        todo-list: does [
            compose [text-list (todos)]
        ]
    
        footer: does [
            either empty? todos [nothing] [controls]
        ]
    
        view layout compose [
            label "todos"
            (input-zone)
            (todo-list)
            (footer)
        ]
    

NB. Disclaimer - my VID experience is very limited :)

------
tosh
Great take on internal vs external DSLs.

