Skip to main content
CanJS Javascript and Framework

CanJS for Flexible and Powerful Javascript Frameworks to Build Complex Apps

What is CanJS?

CanJS is a lightweight, modern JavaScript MVVM framework, for building web applications, that provides a lightweight inheritance system, observable objects and values, and a powerful MVC core, with live-bound templates, among other resources. It makes developing complex applications simple and fast. Easy-to-learn, small, and unassuming of your application structure, but with modern features like custom tags and 2-way binding, creating apps is easy and maintainable.

CanJS is composed of following modules which are typically distributed as part of the core framework:

Setting up CanJS

CanJS can be downloaded or installed in many ways:

  • npm
  • the zip download (available on www.canjs.com)
  • load from canjs cdn
  • bower

Once downloaded or installed, CanJS can be loaded in a variety of ways:

  • StealJS,
  • RequireJS
  • Browserify
  • <script> tags

Here, I will explain one of the methods – i.e: using StealJS and NPM. (other ways of setting up canjs)

To use StealJS and CanJS, install the can, steal and jQuery packages:

> npm install can --save
> npm install steal --save
> npm install jquery --save

Create a stache template for your app:
File name: main.stache

<h1>{{message}}</h1>

Create a main module for your application. Import CanJS’s core, jQuery, and your template.

File name: main.js

import can from "can";
import $ from "jquery";
import template from "./main.stache!";

var data = new can.Map({message: "Hello World"});

$("body").append(template(data));

Finally, create a page that loads js and specifies “main” as the main module:

<html>
  <body>
    <script src="./node_modules/steal/steal.js" data-main="main"></script>
  </body>
</html>

Observables

Observables are special types of objects that can be observed and which respond to changes in their values. Observables are used to bind controllers to view in MVC structure of CanJS. Whenever an observable’s value is changed it will be reflected in the view automatically.

There are two kinds of observables in the core of CanJS objects.

  1. Map – used to create Objects
  2. List – used to create Arrays

Creating Instances

var employee = new can.Map({ name:’John’, eid:1234 });
employee.attr(‘name’);  // John

var cityList = new can.List([‘Ahmedabad’,’Bangalore’,’Chennai’,‘Delhi’]);
cityList.attr(2); // Chennai

Manipulating properties

The attr method is used to read a property from, or write a property to an Observale Object and List.

var employee = new can.Map({ name:’John’, eid:1234 });
employee.attr(‘name’);  // John
employee.attr(‘name’,’Bob’);
employee.attr(‘name’);  // Bob

employee.attr({eid:3456, department: ‘Finance’});
employee.attr(); // {name: ‘Bob’, eid: 3456, department: ‘Finance’});

Responding to changes

When a property of an Observable  object is changed, it emits an event with the changed property name, its old value and new value.

var employee = new can.Map({ name:’John’, eid:1234 });
employee.bind(‘name’, function(event, newVal, OldVal){
    console.log(oldVal);// ‘John’
    console.log(newVal);// ‘Bob’
});
employee.attr(‘name’, ‘Bob’);

Stache templates

Stache templates look similar to normal HTML, but they contain optimized tags that contain a very simple language that can be used –

  • lookup and insert values into the html output
  • loop over arrays and can.Lists
  • control-flow behavior like if and switch
  • render other templates with partials
  • perform custom control-flow behavior

Components

Component is an individual entity in an application which is encapsulated with its own view template, Javascript file and CSS file. A Component lets you reuse them across projects.

How to create a Component?

  1. To create a component first you need to import can.Component library.
  2. create a component – js
can.Component.extend({
  tag: 'my-first-component',
  template:can.view(my_first_component.stache'),
  viewModel: {
  message: 'Hello reader. Welcome to CanJS!'
  }
});

Create a template and bind a view-model to it.

<h1>{{ message }}</h1>

Finally, we need to add reference to this component in tinde.html with a script tag.

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

In my next blog I will cover Routing and Event handling in CanJS.

Basavarajayya H

Basavarajayya H

Basavarajayya is a Software Engineer by profession, currently working with Trigent Software. He has over three years of experience in Frontend UI development. Basavarajayya has hands-on experience in web technologies like - HTML5, CSS, Javascript, Jquery, Bootstrap and has worked extensively with Javascript frameworks such as CanJS and AngularJS.

4 thoughts on “CanJS for Flexible and Powerful Javascript Frameworks to Build Complex Apps

  1. Usually I don’t read article on blogs, but I wish to say that this write-up very compelled me to take a look at and do it! Your writing style has been surprised me. Thanks, very great post.

  2. Great post. I was checking continuously this blog and I am impressed! Very helpful info specifically the last part 🙂 I care for such information much. I was seeking this certain information for a very long time. Thank you and good luck.|

Leave a Reply

Your email address will not be published. Required fields are marked *

eight + one =