https://github.com/breuleux/js-spacebear

SPACE BEAR
https://github.com/breuleux/js-spacebear

Last synced: 9 days ago
JSON representation

SPACE BEAR

• Host: GitHub
• URL: https://github.com/breuleux/js-spacebear
• Owner: breuleux
• Created: 2015-04-09T03:39:16.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-06-28T22:05:37.000Z (over 9 years ago)
• Last Synced: 2024-10-18T18:56:30.167Z (28 days ago)
• Size: 371 KB
• Stars: 1
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

SPACE BEAR

==========

A framework for web applications inspired from React and Om, optimized

for the Earl Grey language.

The project is in its infancy and is not yet fully working (but a

decent chunk of the core is done).

In a nutshell, a Spacebear application will function like this:

1. Generate initial application state

2. Generate UI through *render* functions that track what they read

3. Modify the app state through *transact* functions that track what they write

   in order to create a "patch"

4. Spacebear automatically decides what to re-render by comparing

   reads to writes

In other words, Spacebear is a framework which, given a state `s`, a

rendering function `f`, and a patch `p` to the state `s`, knows how to

derive a patch on `f(s)`. In doing so, it minimizes the amount of work

done, whether that be DOM manipulation or computation itself.

Needless to say, rendering functions must be *pure*, devoid of side

effects and must never access any object that may change outside of

Spacebear's strict supervision.

Example

-------

This is how I envision a simple todo application will look like (this

is written in the Earl Grey language):

    require-macros:

       spacebear -> (reactive, transact)

    

    require:

       spacebear -> (System, %)

    

    reactive render-todo(todo) =

       li % todo.description

    reactive render-form(entries, todo) =

       form %

          input %

             value = todo.description

             on-change(e) =

                transact: todo.description = e.target.value

          button % 'Add #{entries.length}'

          on-submit() =

             transact:

                entries.push with {done = false, description = todo.description}

                todo.description = ""

    

    reactive render-todos(todos) =

       div %

          ul % todos.entries each todo -> render-todo(todo)

          render-form(todos.entries, todos.current)

    init = {entries = {}, current = {done = false, description = ""}}

    System(init, render-todos).render-to(document.get-element-by-id("target"))