A glimpse into functional frontend programming using BiwaScheme and snabbdom

91 views
Skip to first unread message

Amirouche Boubekki

unread,
Sep 28, 2016, 5:38:03 PM9/28/16
to BiwaScheme
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!
asylum.tar.bz2

Amirouche Boubekki

unread,
Sep 30, 2016, 2:58:39 PM9/30/16
to BiwaScheme
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!
asylum.0.0.2.tar.bz2

Amirouche Boubekki

unread,
Oct 2, 2016, 7:19:48 AM10/2/16
to BiwaScheme


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

unread,
Dec 2, 2016, 2:59:43 PM12/2/16
to BiwaScheme
I am cooking something.

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

Amirouche Boubekki

unread,
Dec 2, 2016, 3:00:10 PM12/2/16
to BiwaScheme


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.

Amirouche Boubekki

unread,
Dec 3, 2016, 10:29:10 AM12/3/16
to BiwaScheme
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/
Reply all
Reply to author
Forward
0 new messages