CanJS JavaScript App


by CanJS

JavaScript framework for Building Applications
Helps with: JavaScript
Similar to: Mojito App Web-Toolkit App jQuery OSK App JSON-js App More...
Source Type: Open
License Types:
Supported OS:
Languages: Java Script

What is it all about?

CanJS is a flexible JavaScript framework designed to develop applications easily and fast. supports almost all of its MVC functionality through plugins.

Key Features

* CanJS is flexible. Unlike other frameworks, it's designed to work in almost any situation. You can readily use third party plugins, modify the DOM with jQuery directly, and even use alternate DOM libraries like Zepto and Dojo. CanJS supports all browsers, including IE8. * CanJS is powerful. Create custom elements with one and two-way bindings. Easily define the behavior of observable objects and their derived values. Avoid memory leaks with smart model stores and smart event binding. * CanJS is fast. It is only about 20k. Its live-binding updates only what needs to be updated without requiring a "diff". * CanJS is friendly. Our fulltime and core team are extremely active on gitter chat and on the forums and always wanting to help.


Trial With Card
Trial No Card
By Quote


free - see site


View More Alternatives

View Less Alternatives

Product Analysis


Javascript frameworks and libraries



By Blezel Tajor | 8/7/2016 | Product Analysis |Beginners

CanJs is a lightweight client-side javascript MVVM framework that makes building a maintainable application fast and easy. It provides all the structures of the MVC pattern templates with live binding, routing support and more. In the instance that you want to combine different JavaScript frameworks or libraries in your application, CanJs can easily be one of them since it can be used with jQuery, Zepto, Dojo, YUI, and Mootools.


Here are some of the key features of CanJs


  • CanJs is flexible


      • Unlike other Javascript libraries or frameworks, CanJs can be used with other DOM libraries (e.g jQuery, Zepto, Dojo, YUI, and Mootools).


  • CanJs is powerful


      • CanJs has a live binding template, computed values, routes and more


  • CanJs supports all browser and CanJs is fast


      • Includes support on IE8


  • CanJs has an active community


    • The core team of CanJs is very friendly. They are active in forums and chat and are willing to answer inquiries.

What is CanJs good for?


CanJs is unique in terms of its features and straightforward easy-to-understand methodology. CanJs helps make your code modular with a clean separation of concerns. In addition, CanJs is good for its model-view-controller architecture. This approach helps organize web application structure. CanJs is useful for almost any client-side javascript team.


The following are some advantages when using CanJs

CanJs file is small without any dependencies

CanJs uses live templating engine

CanJs supports computed properties

CanJs is compatible with any earlier version of Internet Explorer

CanJs uses observables for data binding

CanJs can be used with any DOM library

CanJs templates can be pre-compiled on the server

CanJs works well with more than just one template engine

Examples and Code Snippets

Let’s assume that you have already set up CanJs in your development environment.

Moving forward, we will try to create a simple application with CanJs. In order to achieve our goal just follow the steps given below.


For the index.html file, presently it look like this:


<!DOCTYPE html>


 <head lang="en">

   <meta charset="UTF-8">

   <title>Place My Order</title>

   <link rel="stylesheet" type="text/css" href="css/style.css"/>



   <!-- CanJS application root -->

   <div id="can-main"></div>

   <script src="libs/jquery.js"></script>

   <script src="libs/can.custom.js"></script>

   <script src="libs/can.fixture.js"></script>

   <script src="app.js"></script>



Notice that the script tags are at the bottom part.


<script src="libs/jquery.js"></script>

<script src="libs/can.custom.js"></script>

<script src="libs/can.fixture.js"></script>

<script src="app.js"></script>

We are using the jQuery edition of CanJs, so the first script tag loaded must be jQuery. After jQuery is loaded, we load can.custom.js and we will include can.fixture.js.


We need a script to bootstrap our application. Name the file into app.js. Modify it as follows:


$(function () {

 $('#can-main').html('The Requisite "Hello World" Message');


As you can see above, we did not use CanJs yet. We just set up our HTML page. Next, we will be creating a small application called "Place My Order". So, let's start putting it together with CanJs.


For creating a derived value from source observables it should look like this.



var info = can.compute(function(){

 return person.attr("first")+" "+person.attr("last")+

   " likes "+ hobbies.join(", ")+".";



As you can see the define plugin allows us to define rich property behaviors on custom Map types.


For creating a derived value as part of a custom type, it should like this.



Person = can.Map.extend({

 define: {

   fullName: {

     get: function(){

       return this.attr("first")+" "+this.attr("last");





To simulate a restful service and create, update, and delete its data.



// Create an order.

var order = new Order({

 price: 20


// Create it on the server.{

 // Change its values and

 // update it on the server.

 return order.attr("price",22)



 // Destroy it on the server.

 return order.destroy();


To define and test a view-model that derives values from source state.



var RestaurantListVM = can.Map.extend({

 define: {

   restaurants: {

     get: function() {

       var state = this.attr('state'),

           city = this.attr('city');

       if(state && city) {

         return Restaurant.findAll({

           'address.state': state,

           '': city



       return null;






To generate HTML for the previous example's view-model.


{{#if states.isPending}}

 <select disabled><option>Loading...</option></select>


 <select {($value)}="state">

   {{^if state}}

     <option value="">Choose a state</option>


   {{#each states.value}}

     <option value="{{short}}">{{name}}</option>





To encapsulate rich select behavior with a custom <select-loader> element.



{{#if states.isPending}}

 <select disabled><option>Loading...</option></select>


 <select {($value)}="state">

   {{^if state}}

     <option value="">Choose a state</option>


   {{#each states.value}}

     <option value="{{short}}">{{name}}</option>




Route between <home-page> and <restaurants-page> custom elements.



{{#eq page 'home'}}






var AppViewModel = can.Map.extend({

 define: {}


// Create an instance of that map

var appViewModel = new AppViewModel();

// Connect the map to the browser's URL;

// Define pretty routing rules

can.route(":page",{page: "home"});

// Start the two-way binding between the URL and the `appViewModel`.



This is it! Hope this will help you get acquainted with the basics of CanJs.



There are a lot of MVC libraries out there, so why CanJs? The good thing about CanJs is its size, ease of use, memory leak prevention, performance, and library support. CanJs is a big help in building your applications. Yes, they do not have a large community, but the core team is very active with giving answers and always happy to help. The learning curve is also not too steep—just give yourself a little time to get familiar with the usage and functionalities and you’ll be off and running in no time.


By Blezel Tajor | 8/7/2016 | Product Analysis

{{CommentsModel.TotalCount}} Comments

Your Comment


Top DiscoverSDK Experts

User photo
Ashton Torrence
Web and Windows developer
GUI | Web and 11 more
View Profile
User photo
Meir Rabinovich
Real time and embedded developer
Hardware and RT | General Libraries and 5 more
View Profile
User photo
Nathan Gordon
Full Stack developer
Web | JavaScript and 1 more
View Profile
User photo
Ronan McCarthy
Cross-Platform & Web developer.
Web | Mobile and 6 more
View Profile
Show All

Interested in becoming a DiscoverSDK Expert? Learn more


Compare Products

Select up to three two products to compare by clicking on the compare icon () of each product.


Now comparing:

{{product.ProductName | createSubstring:25}} X
Compare Now