can

<!DOCTYPE html>  <html lang="en"> <head> <meta charset="utf-8"> <title>CanJS - Guides</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" type="text/css" href="./static/bundles/bit-docs-site/static.css"> <link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="/docs/images/canjs_favicon.ico"> <link rel="apple-touch-icon" sizes="57x57" href="../docs/images/canjs_favicon_57x57.png"> <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../docs/images/canjs_favicon_57x57.png"> <link rel="apple-touch-icon" sizes="72x72" href="../docs/images/canjs_favicon_72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="../docs/images/canjs_favicon_114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="../docs/images/canjs_favicon_128x128.png"> <link rel="apple-touch-icon" sizes="144x144" href="../docs/images/canjs_favicon_144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="../docs/images/canjs_favicon_152x152.png"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta name="apple-mobile-web-app-status-bar-style" content="white-translucent"> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-2302003-11', 'auto'); ga('send', 'pageview'); </script> </head> <body> <input type="checkbox" id="nav-trigger" class="nav-trigger"/> <label for="nav-trigger">Menu</label> <div id="everything"> <div id="left" class="column"> <div class="top-left"> <div class="brand"> <div class="logo"> <a href="../index.html" alt="CanJS"></a> <div class="dropdown project-dropdown"> <a href="https://donejs.com/">DoneJS</a> <a href="http://stealjs.com/">StealJS</a> <a href="http://jquerypp.com/">jQuery ++</a> <a href="https://funcunit.com/">FuncUnit</a> <a href="http://documentjs.com/">DocumentJS</a> </div> </div> <div class="version"> <div class="version-number"> 3.0.0 </div> <div class="dropdown version-dropdown"> <a href="https://v2.canjs.com">2.3.27</a> </div> </div> </div> <div class="search-bar"> <p>   </p> </div> </div> <div class="bottom-left"> <div class="social-side-container"> <ul class="social-side"> <li> <a class="header-mobile github" href="https://github.com/canjs/canjs" target="_blank"><img class="social-icon-small" src="../docs/images/github.png">Github</a> </li> <li> <a class="header-mobile twitter" href="https://twitter.com/canjs" target="_blank"><img class="social-icon-small" src="../docs/images/twitter.png">Twitter</a> </li> </ul> <ul class="social-side"> <li> <a class="header-mobile" href="https://gitter.im/canjs/canjs" target="_blank">Chat</a> </li> <li> <a class="header-mobile" href="http://forums.donejs.com/c/canjs" target="_blank">Forum</a> </li> </ul> </div> <ul> <li class="current parent expanded"> <a class="page" href="guides.html" title="Welcome to CanJS! These guides are here to help you develop and improve your relationship with CanJS. After all, picking a JavaScript framework is a commitment. We want CanJS to be the framework you marry. This page helps you know how advance through the different stages of this relationship:"> Guides </a> <ul> <li> <span>introduction</span> <ul> <li class=" "> <a class="page" href="guides/mission.html" title="Learn about CanJS's mission, why it matters, and how we've worked (and will keep working) to accomplish it."> Mission </a> </li> <li class=" "> <a class="page" href="guides/technical.html" title=""> Technical Highlights </a> </li> <li class=" "> <a class="page" href="guides/who-uses-canjs.html" title=""> Who uses CanJS? </a> </li> </ul> </li> <li> <span>experiment</span> <ul> <li class=" "> <a class="page" href="guides/chat.html" title="This guide walks through building real time chat application with CanJS's Core libraries. It takes about 30 minutes to complete."> Chat Guide </a> </li> <li class=" "> <a class="page" href="guides/todomvc.html" title="This guide walks through building a slightly modified version of TodoMVC with CanJS's Core libraries and can-fixture. It takes about 1 hour to complete."> TodoMVC Guide </a> </li> <li class=" "> <a class="page" href="guides/atm.html" title="This guide walks through building and testing an ATM application with CanJS's Core libraries. It teaches how to do test driven development (TDD) and manage complex state. It takes about 2 hours to complete."> ATM Guide </a> </li> <li class=" "> <a class="page" href="guides/setup.html" title="CanJS is packaged in multiple ways so that it can fit into any development workflow. Learn how to setup CanJS in different environments."> Setting up CanJS </a> </li> </ul> </li> <li> <span>commitment</span> <ul> <li class=" "> <a class="page" href="guides/api.html" title="This page walks through how to use and understand CanJS's API documentation."> API Guide </a> </li> <li class=" "> <a class="page" href="guides/examples.html" title=""> Examples </a> </li> <li class=" "> <a class="page" href="roadmap.html" title="Learn about CanJS's future plans and how we make them, and how you can influence them."> Roadmap </a> </li> <li class=" "> <a class="page" href="migrate-3.html" title=""> Migrating to 3.0 </a> </li> </ul> </li> <li> <span>contribute</span> <ul> <li class=" "> <a class="page" href="guides/contributing/bug-report.html" title="Learn how to submit a bug report."> Bug Report </a> </li> <li class=" "> <a class="page" href="guides/contributing/code.html" title="Learn how contribute a code change to CanJS."> Code </a> </li> <li class=" "> <a class="page" href="guides/contributing/documentation.html" title="Learn how to improve CanJS's site and documentation."> Documentation </a> </li> <li class=" "> <a class="page" href="guides/contributing/evangelism.html" title="Learn about resources that can help you spread the word about CanJS."> Evangelism </a> </li> <li class=" "> <a class="page" href="guides/contributing/feature-suggestion.html" title="Learn how to suggest a feature."> Feature Suggestion </a> </li> <li class=" "> <a class="page" href="guides/contributing/releases.html" title="Release and hosting information for CanJS maintainers."> Releases </a> </li> </ul> </li> </ul> </li> <li class=" "> <a class="page" href="can-core.html" title="The best, most hardened and generally useful libraries in CanJS."> Core </a> </li> <li class=" "> <a class="page" href="can-ecosystem.html" title="Useful libraries that extend or add important features to the core collection."> Ecosystem </a> </li> <li class=" "> <a class="page" href="can-infrastructure.html" title="Utility libraries that power the core and ecosystem collection."> Infrastructure </a> </li> <li class=" "> <a class="page" href="can-legacy.html" title="Former libraries that we still accept patches for, but are not under active development."> Legacy </a> </li> </ul> </div> </div> <div id="right" class="column"> <div class="top-right"> <div class="top-right-top"> <ul class="top-right-bitovi"> <li class="dropdown"> <a href="http://bitovi.com" class="bitovi icon-bits">Bitovi</a> <ul class="dropdown-menu"> <li><a href="http://bitovi.com">Bitovi.com</a></li> <li><a href="http://bitovi.com/blog/">Blog</a></li> <li><a href="http://bitovi.com/consulting/">Consulting</a></li> <li><a href="http://bitovi.com/training/">Training</a></li> <li><a href="http://bitovi.com/open-source/">Open Source</a></li> </ul> </li> </ul> <div class="brand"> <div class="logo"> <a href="../index.html" alt="CanJS"></a> </div> </div> <ul class="top-right-links"> <li> <a href="https://gitter.im/canjs/canjs">Chat</a> </li> <li> <a href="http://forums.donejs.com/c/canjs">Forum</a> </li> <li> <a class="github-button nav-social" href="https://github.com/canjs/canjs" data-count-href="/canjs/canjs/stargazers" data-count-api="/repos/canjs/canjs#stargazers_count">Star</a> </li> <li> <a href="https://twitter.com/canjs" class="twitter-follow-button nav-social" data-show-count="true" data-show-screen-name="false">Follow @canjs</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> </li> </ul> </div> <div class="breadcrumb"> <li><a href="../index.html">CanJS</a></li> / <li><a href="guides.html">Guides</a></li> <li class="breadcrumb-dropdown">/ <a> On this page</a> <ul class="on-this-page"></ul> </li> <div class="nav-toggle" title="Back to top"></div> </div> </div> <div class="bottom-right"> <article> <section class="title"> <div class="page-type"> <h1>Guides</h1> <div>page</div> </div> <section class="description"> <p>Welcome to CanJS! These guides are here to help you develop and improve your relationship with CanJS. After all, picking a JavaScript framework is a commitment. We want CanJS to be the framework you marry. This page helps you know how advance through the different stages of this relationship:</p> </section> </section> <section class="on-this-page-table"> </section> <section class="title-footer"> <ul class="title-links">  <li><a href="//github.com/canjs/canjs/tree/v3.0.0/docs/can-guides/Guides.md">source</a></li>   </ul> </section> <section class="body"> <h2>Introduction</h2> <p>If you're reading this, you've already taken the first step. You've met CanJS! Maybe you heard about it at a meetup, or read about it on a blog. But before you spend any time with it, you want to know, "who is CanJS?".</p> <p>CanJS is part of the DoneJS family of open source projects. The <a href="https://donejs.com/About.html#section=section_Team">DoneJS Team</a> along with <a href="http://bitovi.com">Bitovi</a> are the people most responsible for CanJS's direction, adding features, fixing bugs, and helping you become successful. Feel free to say hello anytime on <a href="https://gitter.im/canjs/canjs">Gitter chat</a> or the <a href="http://forums.donejs.com/c/canjs">forums</a>.</p> <p>You'll also want to know what CanJS stands for. Checkout our mission statement:</p> <blockquote> <p>CanJS is an evolving and improving set of client side JavaScript architectural libraries that balances innovation and stability. CanJS targets experienced developers building complex applications with long futures ahead of them.</p> </blockquote> <p>Read more on <a href="guides/mission.html" title="Learn about CanJS's mission, why it matters, and how we've worked (and will keep working) to accomplish it.">Mission</a> about our mission and how we've been accomplishing those goals for 10 years.</p> <p>Finally, if CanJS's heart isn't enough to convince you it's a good fit, read up on its <a href="guides/technical.html" title="">Technical Highlights</a>.</p> <h2>Experimenting</h2> <p>So now you've decided to give CanJS a try. The best place to start is the <a href="guides/chat.html" title="This guide walks through building real time chat application with CanJS's Core libraries. It takes about 30 minutes to complete.">Chat Guide</a>. It's only an hour, and CanJS will be showing off all of it's best features while you build a real time chat application. You build the whole thing in a JSBin.</p> <p>Next, you'll want to try the <a href="guides/todomvc.html" title="This guide walks through building a slightly modified version of TodoMVC with CanJS's Core libraries and can-fixture. It takes about 1 hour to complete.">TodoMVC Guide</a>. This takes about 1.5 hours and touches on every core part of CanJS. You can also follow the whole guide in a JSBin.</p> <p>After that, checkout the <a href="guides/atm.html" title="This guide walks through building and testing an ATM application with CanJS's Core libraries. It teaches how to do test driven development (TDD) and manage complex state. It takes about 2 hours to complete.">ATM Guide</a>. It takes about 2 hours and shows how to build and <strong>test</strong> an ATM machine. It also shows how to composite state. The whole guide is done in a JSBin.</p> <p>You might also want to to go through DoneJS's <a href="https://donejs.com/place-my-order.html">Place My Order Guide</a>. This is a very in-depth look at how CanJS works within the context of a wide variety of other tools. This guide takes about 8 hours.</p> <p>Finally, when you're just about to commit, read <a href="guides/setup.html" title="CanJS is packaged in multiple ways so that it can fit into any development workflow. Learn how to setup CanJS in different environments.">Setting up CanJS</a> to learn how to setup CanJS for your particular environment.</p> <h2>Commitment</h2> <p>Once you've committed to CanJS, it's important that you keep liking it and get better at using it.</p> <p>CanJS's community has a wealth of people who can offer advice and tips on how to build an application in the right way. Instead of struggling, please ask for advice on <a href="https://gitter.im/canjs/canjs">Gitter chat</a> or the <a href="http://forums.donejs.com/c/canjs">forums</a>. Share a screen-shot of what you're building and we'll tell you what needs to be done.</p> <p>To stay up on CanJS's latest news, we suggest:</p> <ul> <li>Following <a href="https://twitter.com/canjs">@CanJS</a> on twitter.</li> <li>Subscribing to Bitovi's <a href="http://blog.bitovi.com/category/development/">development blog</a>.</li> </ul> <p>To get hands on instruction, sign up for a DoneJS meetup in your area:</p> <ul> <li><a href="http://www.meetup.com/DoneJS-Chicago/">Chicago</a></li> <li><a href="http://www.meetup.com/DoneJS-Silicon-Valley/">Silicon Valley</a></li> <li><a href="http://www.meetup.com/DoneJS-Boston/">Boston</a></li> <li><a href="http://www.meetup.com/DoneJS-Fort-Lauderdale/">Ft. Lauderdale</a></li> <li><a href="http://www.meetup.com/DoneJS-LA/">Los Angeles</a></li> <li><a href="http://www.meetup.com/DoneJS-NYC/">New York</a></li> <li><a href="http://www.meetup.com/DoneJS-Phoenix/">Phoenix</a></li> <li><a href="http://www.meetup.com/DoneJS-raleigh-durham/">Raleigh-Durham</a></li> <li><a href="http://www.meetup.com/DoneJS-San-Francisco/">San Francisco</a></li> <li><a href="http://www.meetup.com/DoneJS-Seattle/">Seattle</a></li> </ul> <p>As you start developing your application, remember to checkout the <a href="guides/examples.html" title="">Examples</a> area. It shows off how to accomplish common UI and architectural patterns with the framework.</p> <p>If you've already committed to CanJS, and are looking to move to 3.0, read <a href="migrate-3.html" title="">Migrating to 3.0</a>.</p> <h2>Contributing</h2> <p>Once you've settled down with CanJS, It's time to think about adding extensions and improvements to the framework of your own. There are many ways to contribute to CanJS including:</p> <ul> <li><a href="guides/contributing/bug-report.html" title="Learn how to submit a bug report.">Report a bug</a></li> <li><a href="guides/contributing/feature-suggestion.html" title="Learn how to suggest a feature.">Suggest a feature</a></li> <li><a href="guides/contributing/code.html" title="Learn how contribute a code change to CanJS.">Code changes</a></li> <li><a href="guides/contributing/documentation.html" title="Learn how to improve CanJS's site and documentation.">Documentation improvements</a></li> <li><a href="https://donejs.com/plugin.html">Create a plugin</a></li> <li><a href="guides/contributing/evangelism.html" title="Learn about resources that can help you spread the word about CanJS.">Evangelism - Blog, meetup and conference talks</a></li> <li><a href="guides/contributing/releases.html" title="Release and hosting information for CanJS maintainers.">Releases - Maintaining CanJS</a></li> </ul> <p>CanJS is managed by the <a href="https://donejs.com/About.html#section=section_Team">DoneJS Contributors Team</a>. All contributions from all types of contributors are welcome. Contributing to an Open Source project can be an intimidating experience. We're committed to making the experience as pleasant and rewarding as possible. We're happy to setup a pairing session to show you how to fix a bug or write a feature.</p> <p>If you have any questions, you can always reach us on <a href="https://gitter.im/canjs/canjs">Gitter chat</a>.</p> <p>If you want to become a CanJS contributor, you simply have to:</p> <ul> <li><a href="mailto:contact@bitovi.com">Email</a> the core team expressing your interest.</li> <li>Attend the weekly DoneJS Contributors meeting twice a month. <a href="https://www.google.com/calendar/embed?src=jupiterjs.com_g27vck36nifbnqrgkctkoanqb4%40group.calendar.google.com&ctz=America/Chicago">DoneJS Calendar</a>.</li> <li>Make one small contribution, even a spelling correction, a month.</li> </ul> </section> <script type="text/javascript"> var docObject = {"src":{"path":"docs/can-guides/Guides.md"},"description":"Welcome to CanJS! These guides are here to help you develop and improve your relationship with CanJS. After all, picking a JavaScript framework is a commitment. We want CanJS to be the\nframework you marry. This page helps you know how advance through the different stages of this\nrelationship:\n\n","name":"guides","title":"Guides","type":"page","parent":"canjs","order":0,"comment":" ","pathToRoot":".."}; </script> </article> <footer><p>CanJS is part of <a href="http://donejs.com" target="_blank">DoneJS</a>. Created and maintained by the core <a href="https://donejs.com/About.html#section=section_Team" target="_blank">DoneJS team</a> and <a href="http://bitovi.com" target="_blank">Bitovi</a>. <strong>Currently 3.0.0.</strong></p></footer> </div> </div> </div> <script> steal = { instantiated: { "bundles/bit-docs-site/static.css!$css" : null } }; </script> <script type='text/javascript' data-main="bit-docs-site/static" src="./static/node_modules/steal/steal.production.js"></script> <script async defer src="https://buttons.github.io/buttons.js"></script> </body> </html>