A DSL with a View | Hacker News Reader

A DSL with a View

gbracha.blogspot.com

49 pointstosh11 comments

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

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

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

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

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

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.

The "Get Ship Done" button on the FAQ points to the wrong spot. May want to fix that...

Thanks! I fixed it

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

Fixed, thanks. :)

Very cool site, though! I'm particularly impressed with the address parsing and autofill.

Thanks. It's adapted from an example of the google places API. It was easy to drop in, but took a lot of work to make the UX work well. (users are easily confused)

If you want to checkout some reagent best practices I'd take a look at the re-com live demo, esspecially its source.

This reminds me of the Visual Interface Dialect (VID) that is part of Rebol/View - 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/

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 :)

Great take on internal vs external DSLs.

Reply on news.ycombinator.com