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";
Component.extend({
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:
- can-query / make it easier to configure and understand can-set (in progress for CanJS 5)
- Improve routing to components (in progress for CanJS 4.3; will serve as a foundation for adding a routing guide and testing guide)
- Easy state management for React with can-observe
- Improve the content of the CanJS documentation
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:
- Chicago: Wednesday, May 23: Building a Tinder-like Swipe Carousel
- Los Angeles: Tuesday, May 22: Building a Video Player
Not in those cities? Chat with us on our forums, Gitter, or Twitter!
Contributors
Last but certainly not least, we’d like to recognize the following people for their contributions to our open source projects:
- Bianca’s contributions to CanJS
- Brad Momberger’s contributions to CanJS
- Colin Leong’s contributions to CanJS
- Gregg Roemhildt’s contributions to CanJS and DoneJS
- Manuel Mujica’s contributions to StealJS
- Oscar Pacheco Ortiz’s contributions to CanJS
- Ryan Wheale’s contributions to CanJS
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.
canjs
