<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1063935717132479&amp;ev=PageView&amp;noscript=1 https://www.facebook.com/tr?id=1063935717132479&amp;ev=PageView&amp;noscript=1 "> Bitovi Blog - UX and UI design, JavaScript and Front-end development

Bitovi |

May 2018 DoneJS Community Update

Tree shaking for CanJS & StealJS, CanJS DevTools, and more!

Chasen Le Hara

Chasen Le Hara

Twitter Reddit

Tree Shaking with CanJS

One of the most highly-voted on items from our March community survey was making CanJS tree-shakable, and it’s now available in CanJS 4.2!

The new can/es module contains named exports which can be imported and used without bringing in everything made available by the module. When used in conjunction with tree shaking, you gain:

  • Fewer packages to import in each of your modules.
  • Bundles that exclude all of the parts of CanJS that you don’t use.

Get these benefits by importing the can/es module like so:

import { Component } from "can/es";

	tag: "my-component",
	ViewModel: {
		message: "string"

The above code will only import the required modules, not everything in can. To learn more, read the Experimental ES Module Usage docs.

We intend to ship this as the default can module in CanJS 5 and make it the way we teach CanJS (instead of importing the individual packages). But before we do that, we need StealJS to support it…

Sneak Peek: Tree Shaking with StealJS

The next major version of StealJS will support tree shaking! To try it out, install a pre-release of steal-tools:

npm install steal-tools@pre

…and that’s it! It’ll be enabled by default in steal-tools 2.0, with a --no-tree-shaking CLI argument or treeShaking: false build option if you need to turn it off. Get a sneak peek of the docs in this pull request and let us know how much smaller your bundle sizes are.

Sneak Peek: DevTools for CanJS

One of the most highly-voted on items in the January survey was Create DevTools for CanJS. We’re not quite finished with it, but you can install it from the Chrome Web Store and try it out.

Right now, the extension allows you to view and edit your ViewModels, visualize dependency graphs for elements & ViewModels in your application, and debug changes to your observables using the CanJS queues system.

More documentation on the DevTools will be available soon in the debugging guide. You can help us make it even better by filing issues on GitHub or taking an existing issue and contributing a fix.

YouTube trainings

We’ve hosted a couple of live-streams on YouTube:

Find even more videos on the CanJS and DoneJS YouTube channels.

Community survey

We run a community survey every six weeks to get a feel for what everyone would like Bitovi’s open source team to prioritize (sign up here if you’re not on our list).

Here are the proposals that have been most voted for on our surveys; we’ve already started working on some of them, while others we plan on starting in the coming weeks:

Say hi in person or online

If you’re in Boston, Chicago, Los Angeles, or Silicon Valley, be sure to RSVP to our meetups in those locations:

Not in those cities? Chat with us on our forums, Gitter, or Twitter!


Last but certainly not least, we’d like to recognize the following people for their contributions to our open source projects:

Hire us

DoneJS’s main sponsor is Bitovi. We provide web and mobile application consulting services. We can build your app, work with you to build it, or teach you how to build it. To learn more visit bitovi.com or @bitovi on Twitter.