Capejs NPM | npm.io

Cape.JS

Cape.JS is a lightweight JavaScript UI framework with following features:

Full stack: You can build single-page applications (SPAs) with Cape.JS.
Modular: You can place web widgets built by Cape.JS to your static web sites.
Virtual DOM: Cape.JS takes advantage of virtual-dom of Matt-Esch for high performance rendering.
Markup builder: The markup builder helps you to construct HTML DOM trees with its simple, easy to learn syntax.
Form manipulation: You can get or set the value of form fields without jQuery.
Data stores: Using data stores, you can build web applications with unidirectional data flow.
Resource agents and collection agents: Using resource agents and/or collection agents, you can perform REST requests to the web resources using Fetch API.
Router: You can define routes with a DSL (domain specific language) similar to that of Ruby on Rails.

The architecture and terminology of Cape.JS are strongly influenced by React, Riot and Ruby on Rails.

If you want to learn about Cape.JS, check out the Cape.JS Documentation.

A simple example

The following example will insert <div>Hello, World!</div> into the div#hello-message element.

index.html

<h1>Greeting from Cape.JS</h1>
<div id="hello-message" data-name="World"></div>

<script src="./hello_message.js"></script>
<script>
  var component = new HelloMesage()
  component.mount('hello-message')
</script>

hello_message.js

var HelloMesage = Cape.createComponentClass({
  render: function(m) {
    m.div('Hello, ' + this.root.data.name + '!')
  }
})

In this example, the div method corresponds to the div tag of HTML. If you replace it with p, it inserts <p>Hello, World!</p>. In this way, you can generate any HTML5 element, such as blockquote, h1, strong, video, etc.

This example is explained in detail in the Hello World section of Cape.JS Documentation.

Integration with Rails Asset Pipeline

If you combile Cape.JS with Ruby on Rails, you are recommended to use capejs-rails gem.

See capejs/capejs-rails for details.

Router

Cape.JS has a built-in routing library. Using this you can define routes with a DSL (domain specific language) similar to that of Ruby on Rails. Here is an example of routes.js:

var $router = new Cape.Router()

$router.draw(function(m) {
  m.root('welcome')
  m.page('login')
  m.page('help')
  m.many('articles')
})

You can navigate the user to another page by the navigateTo() method:

$router.navigateTo('help')

The following is a full example of Component definition:

var WelcomePage = Cape.createComponentClass({
  render: function(m) {
    m.div(function(m) {
      m.span('Help', {
        class: 'link',
        onclick: function(e) { $router.navigateTo('help') }
      })
    })
  }
})

When the user clicks on the "Help" link, the hash fragment of the URL changes to #help and the Help component will be mounted.

Note that you can construct a single-page application (SPA) in this manner. In the above example, when the user is navigated to the Help component, the HTML document itself does not get reloaded. The Help component is rendered by Cape.JS with the assistance of virtual-dom. An apparent page transition happens within a single page in fact.

ECMAScript 2015 (a.k.a. ES6)

If you are familiar with Babel, you can write the code above more concisely using the ECMAScript 2015 syntax like this:

class WelcomePage extends Cape.Component {
  render(m) {
    m.div(m => {
      m.span('Help', {
        class: 'link',
        onclick: e => $router.navigateTo('doc/help')
      })
    })
  }
}

Tutorials

How to Make a Single Page Application (SPA) with Cape.JS and Rails - A Tutorial: A tutorial about Cape.JS router.
Cape.JS Primer: Reading through this tutorial, you can learn the basics of Cape.JS programming.

Demo Applications

Greeter

You can get the source code of demo app from https://github.com/capejs/greeter-demo.

By reading its source code, you can learn how to construct Single Page Applications (SPAs) combining the Cape.JS as front-end framework with the Rails as back-end framework.