Cerebral

Declarative state and side effects management for popular JavaScript frameworks

Writing declaratively:

<h1 class="header">Hello</h1>

Compared to imperatively:

const h1 = document.createElement('h1')
h1.className = 'header'
document.body.appendChild(h1)

It makes perfect sense for us to write our UIs in a declarative manner. The reason is that we need to reuse UI elements and compose them together in different configurations. One can also claim that declarative code reads better, not because it is less syntax, but because you only describe what you want, not how you want it.

But what about our business logic, can we get the same benefits there?

Writing declaratively:

[
  setLoading(true),
  getUser, {
    success: setUser,
    error: setError
  },
  setLoading(false),
]

Compared to imperatively:

function getUser() {
  this.isLoading = true
  ajax.get('/user')
    .then((user) => {
      this.data = user
      this.isLoading = false
    })
    .catch((error) => {
      this.error = error
      this.isLoading = false
    })
}

You might think this example tries to highlight “less lines of code”, but it is actually about reaching for these properties:

  • Composability
  • Readability
  • Reusability
  • Testability

All these properties makes better code and scalable code. The declarative approach inherits all of these properties by default. In addition to this it allows us to build developer tools:

debugger

Read on to learn more about how Cerebral enforces scalable code and gives you insight into the inner workings of your app

Released under the MIT License Copyright © 2017 Christian Alfoni