2017-01-01 - Getting Started With State of the Art Frontend Development

Nowdays I do a mix of Python system programming and Web UI developements using Javascript (scss, backbone, classy, bootstrap).

I've diven a bit into state of the of the modern way of doing things, prolly synonymous of state of the art. There is in my opinion three main libraries that fight for the spotlight:

All three of them have a common point which is diff+patch algorithms. That algorithm allows to declare the way the html should look in its entierity and the algorithm make it happen in the rendering graph by updating/remove/adding rendering nodes (which are in the case of webdev, most of the time: DOM objects).

I kept that idea. I created bindings on top of snabbdom.js and built what I could build, first getting inspiration from elm and redux to come up with the most minimald and most versatile framework for building web apps.

The canvas offered by this framework is summed by the following mount procedure:

(define (mount container init view)
  "Mount in node from the DOM named CONTAINER, the result of the state
returned by INIT passed to VIEW. VIEW must return pseudo sxml where
\"on-fu\" attributes (where fu is DOM event name) are associated with
action lambdas. An action looks like the following:

   (define (button-clicked state spawn)
     (lambda (event)
       (+ 1 state)))

In the above STATE is the current state. SPAWN allows to create
a new green thread. When the action returns the new state, the
VIEW procedure is called again with the new state.

A minimal VIEW procedure looks like the following:

   (define (view state)
     `(button (@ (on-click . ,button-clicked)) ,state))

A minimal INIT procedure looks like the following:

   (define (init) 1)

That's all folks!
  (let ((state (init)))  ;; init state
    ;; create a procedure that allows to create new green threads
    (letrec ((spawn (lambda (timeout proc args)
                      (set-timeout (lambda () (apply (proc state spawn) args)) timeout)))
             ;; lambda used to wrap event callback
             (make-action (lambda (action)
                            (lambda args
                              (let ((new (apply (action state spawn) args)))
                                (set! state new)
             ;; rendering pipeline
             (render (lambda ()
                       (set! container (patch container
                                              ((sxml->h* make-action) (view state)))))))

Basically, it says that INIT procedure produce a seed state passed to VIEW which renders the first version of the graph scene. A node from the graph scene fires an event, user specified callbacks are which are called action procedures which basically takes everything they need to:

That's where will land the business code.

The VIEW procedure contains the UI code.

If you want to know more about this project head over the website or have a look at this screencast on youtube.