DEV Community: Kevin Phillips

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

Kevin Phillips — Fri, 22 Nov 2019 18:00:16 +0000

This article is a cross-post from bitovi.com

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 and CanJS 5.0, 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 - 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.

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.

The foundation of CanJS is key-value 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.

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 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 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. 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({ … }) 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:

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

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.

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:

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” changes between attributes and properties.

By default, setting an attribute on a component will not set the property, but the fromAttribute binding can be used to set a property whenever an attribute changes:

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:

<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. Like can-map and can-define/map/map 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. 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 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:

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:

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.

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

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:

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.

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:

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” 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 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, which doesn’t support Proxies, 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 which will explain all of the changes in depth. Make sure to take a look at the Using codemods 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, community surveys, 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.

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

Use Lazy Values to Speed Up Your JS Apps

Kevin Phillips — Wed, 07 Aug 2019 15:45:30 +0000

Defining properties with "lazy values" is a technique you can use to improve performance in Object-Oriented JavaScript. It is especially beneficial because it can improve application load time, which can greatly impact important metrics like bounce rate and revenue.

In this article, we’ll answer:

What is a Lazy Value?
How do Lazy Values work?
Should you use Lazy Values?

What is a Lazy Value?

Normally when a property is created on an object, the expression that defines its value is evaluated eagerly. Eager evaluation means that the getUniqueId function in the following example is called immediately to compute the value for id whenever MyObj is called:

function getUniqueId() {
    // some magic to create an ID
}

function MyObj() {
    this.id = getUniqueId();
}
var obj1 = new MyObj();
console.log(obj1); // -> { id: 1 }

The getUniqueId function is called even if the id property is never used in the rest of the code. Lazy Values avoid this evaluation. Lazy Values are not computed until the first time the property is read:

var obj2 = new MyObjWithLazyId();
console.log(obj2); // -> { }
console.log(obj2.id); // -> 2
console.log(obj2); // -> { id: 2 }

How do Lazy Values work?

The key to setting up Lazy Values is Object.defineProperty. This API lets you define properties and gives you lots of control over how they behave.

To define a Lazy Value, first we define the property as a getter:

Object.defineProperty(MyObjWithLazyId.prototype, 'id', {
    get: function() {
        return getUniqueId()
    }
});

Notice how we're adding this to the prototype of our MyObjWithLazyId constructor. This allows us to define this property once and have it used by any instance of MyObjWithLazyId.

This gets us part of the way there, but with just this, the id property would change every time it is read:

var obj3 = new MyObjWithLazyId();
console.log(obj3.id); // -> 2
console.log(obj3.id); // -> 3
console.log(obj3.id); // -> 5
console.log(obj3.id); // -> 8

To make this work correctly, we first define the property using a getter, but when the getter is called, we use Object.defineProperty again to redefine the property as a value:

Object.defineProperty(MyObjWithLazyId.prototype, 'id', {
    get: function() {
        var id = getUniqueId();

        Object.defineProperty(this, 'id', {
            value: id
        });

        return id;
    }
});

Redefining the property as a value means that the next time it is read, the value will be returned without any function needing to be called.

Should you use Lazy Values?

The benefit of using Lazy Values is that they don't have to be computed during the initialization of your app. As you can see from this benchmark, the performance of Lazy Values (the orange bar below) is very close to the performance of constructing a completely empty object, which is shown in the blue bar (larger is better):

If you're building a module that will only be used in a few places in your application, the benefits of using this technique are probably outweighed by the complexity you're adding for yourself the next time you read this code. Make sure to performance test in your app to see if the benefits are worth any decrease in readability.

If the code you're writing will be used many times throughout your application or you are building a world-class JavaScript library, it is likely that your users will benefit from the performance improvement Lazy Values provide.

If you want to use this technique, we just published can-define-lazy-value to make it very easy to get started. You can install it from npm and take a look at its 25 lines of code to see exactly how it works.