CanJS 6.0: web components, proxy-based observables, new type system

Tags: javascript
Published: 2019-11-22 18:00:16

> This article is a cross-post from [bitovi.com](https://www.bitovi.com/blog/canjs-6.0)

Hello Web Developers,

Today we are announcing the release of CanJS 6.0. The goal of CanJS is to be the best tool for building data-driven web applications. Building on [CanJS 4.0](https://www.bitovi.com/blog/canjs-4.0) and [CanJS 5.0](https://www.bitovi.com/blog/canjs-5), CanJS 6.0 is designed to

- make it easier to get started creating components
- make observables behave more like normal objects and arrays
- make it easier to scale your code to larger applications and more complex use-cases

CanJS 6.0 is built around [web components](#web-components) - use CanJS to build custom elements that work natively in modern web browsers. CanJS’s `StacheElement` greatly simplifies the APIs the browser gives you for creating custom elements.

```js
import { StacheElement } from "can";

class MyCounter extends StacheElement {
    static view = `
        Count: <span>{{ this.count }}</span>
        <button on:click="this.increment()">+1</button>
    `;
    static props = {
        count: 0
    };
    increment() {
        this.count++;
    }
}
customElements.define("my-counter", MyCounter);
```

> Interested in trying this out yourself. Use this [Codepen](https://codepen.io/bitovi/pen/XWWQWpL?editors=0010).

The foundation of CanJS is [key-value observables](#improved-observables) that allow your application to efficiently react to changes, keep data in sync with your API layer, and re-render exactly the HTML that needs to be updated when something changes.

Like previous versions of CanJS, 6.0 has a rich API for defining how the properties of your components and observables should behave. We’ve taken this a step further in 6.0 by making our observables based on classes with an even easier syntax for specifying type information.

```js
import { ObservableObject } from "can";

class Todo extends ObservableObject {
    static props = {
        name: String,
        completed: false
    };
    toggle() {
        this.completed = !this.completed;
    }
}
```

Along with simplified observables, the [type system](#new-type-system) in CanJS 6.0 has been completely overhauled. It is now easier than ever to add type information to your observables. Types are strict by default, which means that if a property is set to the wrong type, an error will be thrown so you can fix issues in your application before your users ever see them. CanJS also provides the flexibility to use non-strict types so that you can ensure a value is always converted to the correct type.

> As always, types in CanJS can be used without the overhead of setting up a compiler or external type system.

Ok, get your snacks, let’s walk through the new features and how they can simplify your applications.

## Web Components

CanJS has been promoting a component architecture since [can-component](https://github.com/canjs/canjs/issues/327#issuecomment-26154011) was introduced in CanJS 2.0.0 (in 2013!), which has continued to evolve since then. Today, modern web browsers have native support for what we think of as components through the [custom elements APIs](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements). In CanJS 6.0, we are providing support for building native custom elements through `StacheElement`.

Moving to native web components provides enormous benefits to the development process and makes it easier than ever to build your application out of small, independent components.

### JavaScript classes

StacheElement is built on JavaScript classes. While classes are new to lots of JavaScript developers, they are a native feature of the language. This means there are blog posts, videos, and many other resources that developers can use to learn how to use them.

Using classes removes the need for the custom inheritance system that enabled [Component.extend({ … })](https://canjs.com/doc/can-component.extend.html) and makes it easier for developers to get started with CanJS since they no longer need this framework-specific knowledge.

To create a component using StacheElement, just create a class:

```js
class MyThing extends StacheElement {
    static view = `{{ this.greeting }} World`;
}
```

### Observable element properties

A design goal of StacheElement was to make elements work like built-in [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) elements. This enables developers to use them in ways they’re already familiar with and with the tools they already use.

With StacheElement, all of an element’s properties are observable. This means elements can react to property changes just like the elements built in to the browser -- set a property and the view will update if it needs to:

![change property](https://thepracticaldev.s3.amazonaws.com/i/52k312t42zvdcvh3mqb6.gif)

### Lifecycle methods and hooks

StacheElement also comes with lifecycle hooks that allow you to ensure your code runs at the right time and lifecycle methods that make your components easy to test.

For example, the following Timer component will increment its `time` property once every second. This interval is started in the `connected` hook so that the timer will only run when the component is in the page. The `connected` hook also returns a teardown function so the interval can be cleared when the component is removed from the page.

```js
import { StacheElement } from "can";

class Timer extends StacheElement {
    static view = `
        {{ this.time }}
    `;
    static props = {
        time: 0
    };
    connected() {
        let timerId = setInterval(() => {
            this.time++;
        }, 1000);
        return () => clearInterval(timerId);
    }
}
customElements.define("my-timer", Timer);
```

There are three lifecycle methods that can be used to test this component -- `initialize`, `render`, and `connect`:

```js
const timer = new Timer();

// calling `initialize` allows <my-timer>’s properties to be tested
timer.initialize({ time: 5 });
timer.time; // -> 5

// calling `render` allows <my-timer>’s view to be tested
timer.render();
timer.firstElementChild; // -> <p>0</p>

// calling `connect` allows <my-timer>’s `connect` logic to be tested
timer.connect();
// ...some time passes
timer.firstElementChild; // -> <p>42</p>
```

### Connect attributes and properties

Another design goal of StacheElement was to give developers the flexibility to connect an element’s attributes and properties, similar to how many built-in elements [“reflect”](https://dom.spec.whatwg.org/#concept-reflect) changes between attributes and properties.

By default, setting an attribute on a component will not set the property, but the [fromAttribute](https://canjs.com/doc/can-observable-bindings/fromAttribute.html) binding can be used to set a property whenever an attribute changes:

![change attribute](https://thepracticaldev.s3.amazonaws.com/i/a65ikxfy7rim10954hv1.gif)

This means that if you want to use your component in static HTML or in HTML generated by your backend web application, you can do that. You can even set properties from JSON or another complex data type:

```html
<my-user
    user-data='{ "first": "Leonardo", "last": "DiCaprio", "age": 44 }'
></my-user>

<script type="module">
    class User extends StacheElement {
        static view = `
            <form>
                <input value: bind="user.first">
                <input value: bind="user.last">
                <input value: bind="user.age" type="number">
            </form>
        `;
        static props = {
            user: { type: Person, bind: fromAttribute( "user-data", JSON ) }
        };
    }
    customElements.define("my-user", User);
</script>
```

## Improved Observables

CanJS 6.0 brings the third generation of CanJS key-value observables — [can-observable-object](https://canjs.com/doc/can-observable-object.html). Like [can-map](https://canjs.com/doc/can-map.html) and [can-define/map/map](https://canjs.com/doc/can-define/map/map.html) before it, working with `ObservableObject` means that you can update your data and the rest of your application will update accordingly.

### JavaScript Proxies

`ObservableObject` was designed to make developing with observables just like developing with normal JavaScript Objects. To make this possible, it is built on a new feature of modern web browsers, the JavaScript [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). Using proxies means that properties can be added, changed, and removed in all the ways that are possible with Objects and will always remain observable.

[can-observable-array](https://canjs.com/doc/can-observable-array.html) provides the same benefits when working with arrays of data. Using proxies irons out lots of edge cases, such as the ability to make items in an array observable when they are set using array index notation:

```js
const list = new MyDefineList([]);
list[0] = { name: "Mark" }; // list[0] is a plain object

const arr = new MyObservableArray([]);
arr[0] = { name: "Mark" }; // arr[0] is an observable!
```

### JavaScript Classes

`ObservableObject` and `ObservableArray` are also built on top of JavaScript classes, so you can create an observable for your application by creating your own class constructor:

```js
class Car extends ObservableObject { }
class Dealership extends ObservableArray { }

const tesla = new Car({ make: "Tesla", model: "Model S" });
const toyota = new Car({ make: "Toyota", model: "Camry" });

const dealership = new DealerShip([ tesla, honda ]);
```

### Simplified property definitions

Like previous CanJS observables, `ObservableObject` and `ObservableArray` allow you to specify exactly how the properties of your observables should behave. We’ve made this even easier by simplifying some of the property definitions from `can-define`.

> To learn more about all of the differences in property definitions between `can-define` and `can-observable-object`, check out the [migration guide](https://canjs.com/doc/migrate-6.html).

#### Type constructors

One of the most common ways developers like to define their properties is by giving them types. With `ObservableObject`, this is as simple as providing a constructor function (even for built-in constructors):

```js
class Car extends ObservableObject {
    static props = {
        make: String,
        model: String,
        year: Number
    };
}
```

#### Asynchronous properties

Another small improvement to property definitions is that asynchronous getters now have their own behavior:

```js
class TodoList extends ObservableObject {
    static props = {
        todosPromise: {
            get() {
                return Todo.getList();
            }
        },
        todos: {
            async(resolve) {
                this.todosPromise.then(resolve);
            }
        }
    };
}
```

Since `StacheElement` uses these same observable property behaviors under the hood, all of the benefits of `ObservableObject` and `ObservableArray` also apply to elements created with CanJS. 🎉

## New Type System

As we saw in the previous section, it is very easy to set the type of a property when using CanJS observables. The type system in CanJS 6 has been greatly improved to allow for strict type checking and much greater flexibility. This flexibility means that you can use more rigorous type checking as your application or requirements grow.

CanJS 6 supports strict typing by default. This means if you declare a property is a specific type, an error will be thrown if that property is set to a value of a different type.

```js
class Person extends ObservableObject {
    static props = {
        age: Number
    };
}
var farah = new Person();
farah.age = '4';

// Uncaught Error: "4" (string) is not of type Number.
// Property age is using "type: Number". Use "age: type.convert(Number)"
// to automatically convert values to Numbers when setting the "age" property.
```

If strict typing is not the best solution for your application, you can also set up a property to always convert its value to a specific type using [type.convert](https://canjs.com/doc/can-type/convert.html):

```js
class Person extends ObservableObject {
    static props = {
        age: type.convert(Number)
    };
}
var person = new Person();
person.age = "4";

person.age; // 4
```

You can also create [“Maybe types”](https://en.wikipedia.org/wiki/Maybe_type) that will allow the value to be `null` and `undefined` on top of whatever valid values the type allows. For example `type.maybe(Number)` will allow the value to be a `null`, `undefined`, or a Number and will throw if set to something else.

To see all the ways types can be defined, check out the [can-type](https://canjs.com/doc/can-type.html) documentation.

## What about the old APIs?

If you have an existing CanJS application, don’t worry! None of the APIs you’re using today are going away. You can continue to use `can-component` and `can-define` and update to the new APIs when it makes sense for your application.

Also, if your application needs to [support IE11](https://canjs.com/doc/guides/setup.html), which doesn’t support [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy#Browser_compatibility), `can-component` and `can-define` will continue to be available for you.

## Upgrading

If you do have an existing CanJS application that you are interested in upgrading, check out the [migration guide](https://canjs.com/doc/migrate-6.html) which will explain all of the changes in depth. Make sure to take a look at the [Using codemods](https://canjs.com/doc/guides/upgrade/using-codemods.html) guide to automate your upgrade process.

## What’s Next?

The CanJS core team is going to continue working to make CanJS the best tool to build data-driven web applications. Every bug we fix, change we make, and feature we add is based on [talking with the community](https://www.bitovi.com/community/slack), [community surveys](https://donejs.com/survey.html), and lots of user testing. Please come join in the conversation and if you’re interested in being a beta tester, please [fill out this survey](https://www.surveymonkey.com/r/QPQ2F8P).

## Thank You

- CanJS developers around the world building some of the most high-profile, high-performance, and amazing pieces of software on the web. Keep building!
- Contributors big and small to CanJS. Every bug report, feature request, documentation fix, and user test makes CanJS better.
- Bitovi and its team for helping other companies build quality applications and investing its resources back into open-source development that benefits everyone.


Sincerely and with much love,
CanJS Core Team