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'

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:

  getUser, {
    success: setUser,
    error: setError

Compared to imperatively:

function getUser() {
  this.isLoading = true
    .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. You can read more about declarative code in this short blog post, Business logic as a data structure.

Declarative code also allows us to build developer tools that gives you valuable information:


Take a look at a real project using Cerebral, Codesandbox.io. The client is completely open source and the code can be explored here.


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 © 2018 Cerebral Github Organisation