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.
Pricing
Yearly
Monthly
Lifetime
Free
Freemium
Trial With Card
Trial No Card
By Quote
Description
free - see site
){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
Product Analysis
JavaScript
Javascript frameworks and libraries
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:
|
|
Notice that the script tags are at the bottom part.
|
|
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:
|
|
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.
|
|
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.
|
|
To simulate a restful service and create, update, and delete its data.
|
|
To define and test a view-model that derives values from source state.
|
|
To generate HTML for the previous example's view-model.
<label>State</label>
{{#if states.isPending}}
<select disabled><option>Loading...</option></select>
{{else}}
<select {($value)}="state">
{{^if state}}
<option value="">Choose a state</option>
{{/if}}
{{#each states.value}}
<option value="{{short}}">{{name}}</option>
{{/each}}
</select>
{{/if}}
To encapsulate rich select behavior with a custom <select-loader> element.
<label>State</label>
{{#if states.isPending}}
<select disabled><option>Loading...</option></select>
{{else}}
<select {($value)}="state">
{{^if state}}
<option value="">Choose a state</option>
{{/if}}
{{#each states.value}}
<option value="{{short}}">{{name}}</option>
{{/each}}
</select>
{{/if}}
Route between <home-page> and <restaurants-page> custom elements.
|
|
|
|
This is it! Hope this will help you get acquainted with the basics of CanJs.
Conclusion
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.
Top DiscoverSDK Experts
Meir Rabinovich
Real time and embedded developer
Hardware and RT | General Libraries and 5 more
View Profile
Interested in becoming a DiscoverSDK Expert? Learn more
X
Compare Products
Select up to three two products to compare by clicking on the compare icon () of each product.
{{compareToolModel.Error}}Now comparing:
{{product.ProductName | createSubstring:25}} X
{{CommentsModel.TotalCount}} Comments
Your Comment