https://github.com/canjs/canjs

Build CRUD apps in fewer lines of code.
https://github.com/canjs/canjs

canjs crud dom framework javascript

Last synced: 6 days ago
JSON representation

Build CRUD apps in fewer lines of code.

• Host: GitHub
• URL: https://github.com/canjs/canjs
• Owner: canjs
• License: other
• Created: 2012-01-20T17:57:21.000Z (about 13 years ago)
• Default Branch: master
• Last Pushed: 2023-08-03T19:56:13.000Z (over 1 year ago)
• Last Synced: 2024-10-29T15:34:35.860Z (3 months ago)
• Topics: canjs, crud, dom, framework, javascript
• Language: JavaScript
• Homepage: https://canjs.com/
• Size: 177 MB
• Stars: 1,912
• Watchers: 107
• Forks: 422
• Open Issues: 312
• Metadata Files:
  • Readme: readme.md
  • Changelog: changelog.md
  • Contributing: contributing.md
  • License: license.md

Awesome Lists containing this project

• awesome-javascript - canjs - JS framework providing state management, templates & custom elements. Helps you build the impossible while keeping the common stuff easy. - ★ 1698 (MVC Frameworks and Libraries)
• awesome-javascript - canjs - Can do JS, better, faster, easier. (MVC Frameworks and Libraries / Runner)

README

        
# [CanJS](https://canjs.com/)

 [![SauceLabs Test Status](https://saucelabs.com/browser-matrix/canjs-not-master.svg)](https://saucelabs.com/u/canjs-not-master)

[![Join our Slack](https://img.shields.io/badge/slack-join%20chat-611f69.svg)](https://www.bitovi.com/community/slack?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

[![Join our Discourse](https://img.shields.io/discourse/https/forums.bitovi.com/posts.svg)](https://forums.bitovi.com/?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

[![npm version](https://badge.fury.io/js/can.svg)](https://www.npmjs.com/package/can)

[![Build Status](https://travis-ci.org/canjs/canjs.svg?branch=master)](https://travis-ci.org/canjs/canjs)

[![Greenkeeper badge](https://badges.greenkeeper.io/canjs/canjs.svg)](https://greenkeeper.io/)

CanJS is a collection of client-side JavaScript architectural libraries.

### Web Components

CanJS’s [StacheElement](https://canjs.com/doc/can-stache-element.html) allows you to create Web Components with [observable properties](https://canjs.com/doc/can-observable-object.html) and [live-bound templates](https://canjs.com/doc/can-stache.html).

```js

class Counter extends StacheElement {

	static view = `

		Count: {{ this.count }}

		+1

	`;

	static props = {

		count: 0

	};

	increment() {

		this.count++;

	}

}

customElements.define("my-counter", Counter);

```

### Model layer

Components shouldn’t be concerned with how data is fetched, updated, or cached.

CanJS provides the right abstractions for your model code to be cleanly separated from your UI code. [Learn more…](./readme-feature-model-layer.md)



### Promises in templates

CanJS’s [stache templating language](https://canjs.com/doc/can-stache.html) can directly read the state and values from [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).

No need to write any extra code to determine whether a Promise is pending, resolved, or rejected. [Learn more…](./readme-feature-promises-in-templates.md)

```handlebars

{{# if(this.promise.isPending) }}

  Loading…

{{/ if }}

{{# if(this.promise.isRejected) }}

  Error: {{ this.promise.reason }}

{{/ if }}

{{# if(this.promise.isResolved) }}

  Result: {{ this.promise.value }}

{{/ if }}

```

### Real-time list updating

After data is created, updated, or destroyed, CanJS automatically updates your lists for you.

Filtering and sorting are preserved, so you don’t have to manually update your lists or fetch the same data again. [Learn more…](./readme-feature-real-time-list-updating.md)



### Getting Started

Ready to get started? See the [Setting Up CanJS](https://canjs.com/doc/guides/setup.html), [API Docs](https://canjs.com/doc/api.html) and [Guides](https://canjs.com/doc/guides.html) pages.

### Support / Contributing

Before you make an issue, please read our [Contributing](https://canjs.com/doc/guides/contribute.html) guide.

You can find the core team on [Slack](https://www.bitovi.com/community/slack).

### Release History

See [Releases](https://github.com/canjs/canjs/releases).

### License

[MIT License](license.md).