A glimpse into functional frontend programming using BiwaScheme and snabbdom

[Amirouche Boubekki]

Héllo,

I am experimenting using biwascheme and snabbdom to hopefully create an app. snabbdom is functional virtualdom library written in scheme similar in principle to reactjs.

Inspired from reactjs/redux and functional frontend architecture I made a little experiment that I am sharing with you, see the attachment. The goal of the experiment is to create three independant clickable counters.

Here is the interesting part:

;; FIXME: (getelem "#main") doesn't seem to work.
(define body (car (js-array->list ($ "body"))))
(define main (element-new '(div#main "getting started")))
(element-append-child! body main)


(define *state* `((counter0 . 0) (counter1 . 0) (counter2 . 0)))

(define (render)
  ;; patch will update the dom efficently
  (set! main (patch main (view *state*))))

(define (action:increment counter-name)
  (lambda ()
    ;; update state
    (set! *state* (alist-set *state* counter-name (+ (alist-ref *state* counter-name) 1)))
    (render)))
     
(define (view:counter name count)
  ;; return the view code for  a counter given its NAME and state COUNT
  (h "div.counter" `(("click" . ,(action:increment name))) count))

(define (view state)
  ;; return the whole view of the "app" based on STATE
  (let ((counter0 (alist-ref *state* 'counter0))
    (counter1 (alist-ref *state* 'counter1))
    (counter2 (alist-ref *state* 'counter2)))
    (h "div#main" '()
       (view:counter 'counter0 counter0)
       (view:counter 'counter1 counter1)
       (view:counter 'counter2 counter2))))


(render) ;; initial render

Happy hacking!

[Amirouche Boubekki]

On Wednesday, September 28, 2016 at 11:38:03 PM UTC+2, Amirouche Boubekki wrote:

Héllo,

I am experimenting using biwascheme and snabbdom to hopefully create an app. snabbdom is functional virtualdom library written in scheme similar in principle to reactjs.

Inspired from reactjs/redux and functional frontend architecture I made a little experiment that I am sharing with you, see the attachment. The goal of the experiment is to create three independant clickable counters.

In the previous mail I showed that it is possible to bind snabbdom and use it to create a simple interface for three independant counters using an architecture kind of similar to what react/redux does with a single immutable state.

This iteration try to make explicit the creation of generic widgets ie. make it possible with a set of procedure to re-use the same code for similar widgets on the same page.

Also:

- I improved snabbdom bindings, now it relies on a syntax similar to sxml. snabbdom procedures don't appear explicitly in the client code, view procedures are simply returning sxml with special sxml attributes syntax @ for binding DOM events like "on-click", "on-change" and "on-keypress".

- DOM events bindings procedure are created using a `(make-action handler)` procedure which inject the global state into the actual action handler, update the global state with the return value of the `handler`. This is made like so to avoid to rely on using *state* as global variable which would make testing more difficult. This leads to sxml that contains anonymous lambdas which means it's not possible to simply test view code with `(equal? (view some-state) some-sxml)`.

I have no example of composable widgets ie. a widget using another widget but it should be fairly simple using a normalized state shape to handle that case. Hopefully I will demonstrate it in a next mail.

Happy hacking!

[Amirouche Boubekki]

On Wednesday, September 28, 2016 at 11:38:03 PM UTC+2, Amirouche Boubekki wrote:

Héllo,

I am experimenting using biwascheme and snabbdom to hopefully create an app. snabbdom is functional virtualdom library written in scheme similar in principle to reactjs.

I implemented a simple instance of todomvc using the miniframework I created. It basically demonstrate the use of snabbdom with a few quirks. The interesting file is main.scm.

Have a look at the demo.

[Amirouche Boubekki]

I am cooking something.

In the mean time you can get up to speed using this small tutorail.

[Amirouche Boubekki]

On Friday, December 2, 2016 at 8:59:43 PM UTC+1, Amirouche Boubekki wrote:

I am cooking something.

In the mean time you can get up to speed using this small tutorail.

https://framagit.org/forward/website/blob/fs-pages/index.md#-tutorial

[Amirouche Boubekki]

The long awaited dish is ready (not complete (but ready))

The app is a color palette maker go here to discuss it https://news.ycombinator.com/item?id=13095992

Direct link to the app https://amirouche.github.io/ohmypalette/