xander

xander

Overview

Framework for browser apps with uncompromising configuration.

Usage

Installation

npm install --save xander

Examples

Quick start

A minimal app with home and 404 page.

import {boot, Rule, Eval} from 'xander';

// Calling constructor function return React component.
boot({
  debug: false, // optional, enables logging actions to console.
  rootEl: document.body, // optional, determine root node for application.
  routes: [{
    path: '/',
    component: (props) => <div>Hello, World.</div> 
  }, {
    path: '/test_rules',
    component: (props) => (
      <div>
        <Rule exp="SUM(A,B)" values={{ A: 2, B: 4 }} />
        <Eval exp="A + B" values={{ A: 2, B: 4 }} />
        <Rule
          exp={`AND(status = true, country = "Denmark")`}
          values={{ valid: true, country: "Denmark" }}
        />
      </div>
    )
  }, {
    path: '*',
    component: (props) => <div>404</div>
  }])

})

xan server

Do you want a full featured development server with new project setup? Try xan server.

webpack

Do you like to tinker? If so, then Webpack is recommended to bundle your projects. The minimal example provides a simple boilerplate setup. For larger projects, look at the async example which utilizes webpack's code splitting to scale your app.

Link Component

A link component to hyperlink your app without annoying page refreshes.

import {Link} from 'xander'
<Link to="/buckets" />
<Link type="button" to="/buckets" />
<Link type="button" to="/buckets" type="button" /> // render button tag instead of a

Router

A minimalist routers, supports history API.

import {router} from 'xander'
router.open('/buckets/1')

Use redirect to change the URL without adding an entry to the history state.

router.redirect('/buckets')

Load Routes

Load routes and related configuration.

loadRoutes([{
  path: '/',
  load: loadContent( System.import('./pages/home') )
}])

State management

Use createStore to create immutable stores.

import {createStore} from 'xander'
createStore(name, reducerOrSpec, actionsAndQueries)

For more examples see fluxury.