Skip to content

capejs/capejs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Cape.JS

Circle CI Npm Version Bower Version MIT License Code Climate

Cape.JS logo

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.

Table of Contents

Installation

Cape.JS is available from a variety of sources.

Using CDN

To include Cape.JS on your web site, add this line to the <head> section of your HTML files:

<script src="//cdn.rawgit.com/capejs/capejs/v1.5.1/dist/cape.min.js"></script>

With npm

$ npm install capejs

With bower

$ bower install capejs

With capejs-rails gem

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

See capejs/capejs-rails for details.

Simple Examples

Hello World

Put following two files on your PC:

hello_message.html

<!DOCTYPE html>
<html>
<head>
  <title>HELLO WORLD</title>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/gh/capejs/capejs@v1.5.1/dist/cape.min.js"></script>
  <script src="./hello_message.js"></script>
</head>
<body>
  <div id="content"></div>
</body>
</html>

hello_message.js

'use strict'

class HelloMessage extends Cape.Component {
  constructor(name) {
    super()
    this.name = name
  }

  render(m) {
    m.p(`Hello, ${this.name}!`)
  }
}

document.addEventListener("DOMContentLoaded", e => {
  let comp = new HelloMessage('world')
  comp.mount('content')
})

When you open hello_message.html with your browser, you will see the text "Hello, world!" on the screen.

Generating DOM Tree

Edit the render method of HelloMessage class like this:

  render(m) {
    m.h1('Greeting')
    m.class('message').p(m => {
      m.text('Hello, ')
      m.em(this.name + '!')
      m.sp()
      m.text('My name is Cape.JS.')
    })
  }

This generates a DOM tree roughly equivalent to this HTML fragment:

<h1>Greeting</h1>
<p class='message'>Hello, <em>world!</em> My name is Cape.JS.</p>

Handling DOM Events

Edit hello_message.js as follows and reload your browser:

'use strict'

class HelloMessage extends Cape.Component {
  constructor(name) {
    super()
    this.names = [ 'alice', 'bob', 'charlie' ]
    this.name = name
  }

  render(m) {
    m.h1('Greeting')
    m.p('Who are you?')
    m.div(m => {
      this.names.forEach(name => {
        m.checked(name === this.name)
          .onclick(e => { this.name = e.target.value; this.refresh() })
          .radioButton('name', name)
        m.sp()
        m.text(name)
      })
    })
    m.class('message').p(m => {
      m.text('Hello, ')
      m.em(this.name + '!')
      m.sp()
      m.text('My name is Cape.JS.')
    })
  }
}

document.addEventListener("DOMContentLoaded", e => {
  let comp = new HelloMessage('alice')
  comp.mount('content')
})

You will see three radio buttons and by choosing one of them you can change the message text.

Note that this.refresh() updates the DOM tree very quickly using Virtual DOM technology.

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(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:

class WelcomePage extends Cape.Component {
  render(m) {
    m.div(m => {
      m.onclick(e => $router.navigateTo('help'))
        .class('link').span('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.

Tutorials

Demo Pages

You can learn how to construct web pages using Cape.JS by reading through demo pages.

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.

Todo List

You can download and try a demo app from https://github.com/oiax/capejs-demo-on-rails.

This is built upon the Ruby on Rails. When you start it and open http://localhost:3000 with your browser, you will see a page like this:

Screen shot of demo app

Click the "Start" button to navigate to Login form. Then, enter your credentials (alice and hotyoga) to login to the sytem.

Screen shot of demo app

You can list, add, update and delete tasks here.

Screen shot of demo app

Click the "Logout" button to show the modal for confirmation.

Screen shot of demo app

Browser Support

  • Microsoft Edge
  • Internet Explorer 11
  • Google Chrome (Current)
  • Mozilla Firefox (Current)
  • Safari (7.1+)
  • Vivaldi (Current)

Any problem with Cape.JS in the above browsers should be reported as a bug in Cape.JS.

Contributing

The Cape.JS is an open source project.

We encourage you to contribute to the Cape.JS! Please see CONTRIBUTING.md for details.

Acknowledgements

The logo of Cape.JS is created by Junya Suzuki.

Trademarks

"Cape.JS" and its logo are trademarks of Oiax Inc. All rights reserved.

License

Cape.JS is released under the MIT License.