Skip to content

Home

Jump to bottom Edit New page
Guillaume Plique edited this page Nov 9, 2015 · 25 revisions

EDIT: This wiki is outdated and mostly refers to the V1 of the library. So beware, reader...

Why do I want to use Baobab?

How we build content for the web browser has changed a lot. In addition to looking at the browser as a document reader, it is now able to run applications built with JavaScript.

The traditional web MVC architecture was based on requesting content from the server (Controller), it grabs data from your database (Model) and creates a new HTML string (View) to pass back to the browser. This pattern has continued to exist when we started building applications. Backbone JS being one of the first common frameworks. Backbone JS works very well for applications that mimics the earlier web MVC flow. Backbone.Collection and Backbone.Model is the Model, Backbone.View is the View and Backbone.Router is the Controller (MVC).

As time passed we started to create more complex applications that required new patterns. MVP and MVVM are two examples of that. They have indeed contributed to a structured approach to creating modern complex web applications, but as time passes and the sophistication of our apps just increase, we are at a point where we again need new patterns.

Flux

One of the most sophisticated web applications in the world is Facebook, and when the Facebook development team talks, you should listen. Flux is a pattern they have been talking about for quite some time now. Stores, actions and dispatchers. It was very diffuse, and still is. Developers has been implementing a lot of different solutions, their own take on what FLUX means.

Baobab is not a library inspired by Flux, but it is a library that fits with the ideas of Flux. You want a centralized hub for all your application state. It being data retrieved from the server or UI state. Using Baobab this is one single object, called a tree. Your components are able to retrieve data cursors from this tree and whenever something happens to that cursor, the component will be notified. To change state of the Baobab tree it is encouraged to use an event hub. Your components trigger events like addTodo on the event hub, and some other part of your code is responsible for listening to that event and act upon it. This decouples your components from the rest of your business logic. The components will only depend on the Baobab tree and the event hub. The rest of your business logic is behind whatever listens to the events on your event hub.

This strategy makes it very easy to create isomorphic apps, as the components can be loaded on the server without loading you complete client stack. Baobab with React JS is a great combination to build cutting edge web applications and isomorphic apps.

Add a custom footer

1. Introduction

  1. Installing
  2. Creating a state tree
  3. Grabbing state from the tree
  4. Listening to changes
  5. Changing state in the tree
  6. FAQ

2. API

  1. Create instance
  2. Select state
  3. Get state
  4. Traverse state
  5. Update state
  1. Complex updates
  2. Verify state type
  3. Register listeners
  4. History
  5. Validation
  6. Options

3. React JS practices

  1. Baobab options
  2. The mixins
  3. The concepts
  4. Business logic
  5. Scaling
  6. Testing
  7. Canonical state

4. Angular practices

  1. Declare the tree on a factory
  2. Expose a local state to views

5. Complex issues (WIP)

  1. Defining a tree
  2. Client vs Server state
  3. Isomorphic app
  4. Pagination
  5. Caching
Clone this wiki locally