<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 |

December 2017 DoneJS Community Update

This post highlights recent developments in the DoneJS community.

Chasen Le Hara

Chasen Le Hara

Twitter Reddit

CanJS updates

The core team has been focusing our attention on shipping CanJS 4.0, which will make CanJS easier to debug with queues for error-free and traceable code.

To make CanJS easier to debug, we’re working on the can-debug package, which exports functions to log how observables affect each other. These functions can be used to understand the flow of data throughout your application.

Check out the can-debug docs to see how code like this:

var Person = DefineMap.extend("Person", {
  first: "string",
  last: "string",
  fullName: {
    get: function() {
      return this.first + " " + this.last;

var me = new Person({ first: "John", last: "Doe" });

// The observable must be bound for `logWhatChangesMe` to work correctly.
me.on("fullName", function() {});

debug.logWhatChangesMe(me, "fullName");

…can show something like this in your console:

can-queues is a new package in CanJS 4.0 that is used to order task execution; a “task” being simply a function call, usually a callback function within an event binding.

This new queueing system brings two main advantages over can-event in CanJS 3:

  • Performance: it can be beneficial to order some tasks to happen at the same time; for example, those that change the DOM.
  • Determinism: ordering tasks can provide assurances about the state of an application at a particular point in time.

You can learn more about can-queues in this video:

Before watching that video, you might be interested in this one about can-key-tree, which is used for storing event handlers organized by key and the event queue in can-queues:

We’ve also recorded a video about can-observation, which is now used in many places can-compute has been used previously. Learn how it works in this video:

Additionally, CanJS 4.0 will include can-stache 4.0, which removes the old deprecated syntaxes. If you’re using the latest 3.0 version of can-stache and can-stache-bindings, you’ll see warnings in your console about the syntax that’s being deprecated, as well as hints as to how update your code. We highly recommend using codemods to migrate your code.

We expect to have CanJS 4.0 released in the next couple weeks. It will drop support for Internet Explorer while continuing support for Microsoft Edge and the latest versions of Chrome, Firefox, and Safari.

Some, but not all, of the ecosystem packages will be included in the initial release. If your app depends on an ecosystem package that isn’t currently documented on the 4.0 test site and you would like to contribute, please let us know on Gitter.

We’ve started a forum post to discuss CanJS 4.0 and 5.0; please reply to that post if you have any comments about what we’ve discussed!

DoneJS updates

Matthew Phillips has been working on improvements to debugging zone issues.

With can-zone 0.6.15, the Zone constructor can now be subclassed, which is useful if you need to isolate Zone.current when run in an environment where you can’t capture asynchronous tasks by calling a function. You can also now get a `debugger;` statement when using can-zone/debug, allowing you to step into code that is preventing the zone’s run promise from resolving.

Additionally, done-autorender 1.5.0 introduces better debugging for when reattachment doesn’t complete. In development mode, it’ll now set a (by default, 5 second) timeout to wait for a Zone to complete and log stack traces for tasks that failed to complete within that time, looking something like this:

See the Debugging section in done-autorender’s README for more information.

To tie it all together, Matthew recorded a video with some tips for debugging apps with done-autorender:

StealJS updates

Matthew has also added a bunch of new guides to StealJS.com:

He also started to investigate how we could minimize bundle sizes with tree-shaking. You can comment on this issue to discuss the design proposed in the tree-shaking RFC. Additionally, this repo contains more info on how tree-shaking could be implemented in steal-tools.

Community survey

Because the team has been focused on CanJS 4.0, we will not be conducting a community survey this month. The next one is scheduled to go out on Friday, January 26th, 2018.

After CanJS 4.0 is released, we’ll be working on the top-voted items from our previous surveys:

Community projects

Two people in our community have been working on some cool projects that we’d like to share:

Gregg Roemhildt has created this awesome demo of integrating CanJS with the ArcGIS API! The project is open source and a great example of a more complicated project built on CanJS and StealJS!

Eben has been working on shuttle-canstrap, which are CanJS components built on Bootstrap 4. His shuttle-canstrap-samples repo shows examples of using those components in an app!


We’d also like to recognize the following people for their contributions to our open source projects:

We want to hear from you

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

As always, you can get in contact with us on our forums or Gitter chat, and follow us on Twitter for the latest community news throughout the month!