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.
- Installation
- simple examples
- Handling DOM Events
- Router
- Tutorials
- Demo Pages
- Demo Applications
- Browser Support
- Contributing
- Acknowledgements
- Trademarks
- License
Cape.JS is available from a variety of sources.
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>
$ npm install capejs
$ bower install capejs
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.
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.
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>
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.
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.
- 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.
You can learn how to construct web pages using Cape.JS by reading through demo pages.
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.
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:
Click the "Start" button to navigate to Login form. Then, enter your credentials (alice
and hotyoga
) to login to the sytem.
You can list, add, update and delete tasks here.
Click the "Logout" button to show the modal for confirmation.
- 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.
The Cape.JS is an open source project.
We encourage you to contribute to the Cape.JS! Please see CONTRIBUTING.md for details.
The logo of Cape.JS is created by Junya Suzuki.
"Cape.JS" and its logo are trademarks of Oiax Inc. All rights reserved.
Cape.JS is released under the MIT License.