How To Use Decorators and Mixins in Salesforce Lightning Web Components

It's safe to say that every modern web application these days relies to some degree on three foundational web standards: HTML, CSS, and JavaScript. While HTML has largely stabilized since the HTML5 standard, both CSS and JavaScript continue to evolve to meet developers' and users' needs.

The evolving nature of these three technologies has lead to the introduction of web components, a cross-browser solution for building complex web apps. On top of this open source standard, Salesforce developed Lightning Web Components (LWC) as a fast, enterprise-grade wrapper around vanilla web components. The result is a thin, performant, and feature-packed framework built entirely on the open web.

LWC is not only built on top of the ECMAScript standard, it also provides some nifty syntactic sugar that can transpile into standard JavaScript. Because of this, the LWC framework is able to incorporate proposed language features, which simplifies app development by future proofing your code in the always evolving JavaScript ecosystem. In this post, we'll take a closer look at two relatively recent features—mixins and decorators—and see how they can be used in your LWC apps.

What is a Mixin?

In many object-oriented programming languages, classes can "receive" additional methods through a feature called inheritance. For example, if you have a

Vehicle

go

stop

Bicycle

Car

class Vehicle {
  void go();
  void stop();
}

class Bicycle < Vehicle {
  void go() {
    usePedal();
  }

  void stop() {
    stopPedal();
  }
}

class Car < Vehicle {
  void go() {
    useEngine();
  }

  void stop() {
    stopEngine();
  }
}

Inheritance affects the composition of an object by changing its hierarchy. Every

Bicycle

Car

Vehicle

In a JavaScript context, mixins can add behaviors to JavaScript classes, which is useful, because classes can only extend from one other class, while multiple mixins can be added to a class. Mixins take advantage of the

Object.assign

// mixin
let greetingsMixin = {
  sayHi() {
    alert(`Hello ${this.name}`);
  },
  sayBye() {
    alert(`Bye ${this.name}`);
  }
};

class User {
  constructor(name) {
    this.name = name;
  }
}

// copy the methods
Object.assign(User.prototype, greetingsMixin);

User

sayHi

sayBye

User

class User extends Person {
  // ...
}

Object.assign(User.prototype, greetingsMixin);
Object.assign(User.prototype, someOtherMixin);

However, writing out

Object.assign

class User extends greetingsMixin(Person) {
  // ...
}

(For more information on this technique, check out this article.)

Now,

User

greetingsMixin

Person

This technique is more than syntactical sugar: it's actually the one which LWC regularly prefers. For example, the

Navigation Mixin

LightningElement

import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class TestComponent extends NavigationMixin(LightningElement) {
  // ...
}

NavigationMixin

LightningElement

TestComponent

NavigationMixin

LightningElement

What is a Decorator?

Decorators are currently a proposal to add to JavaScript, but they're so incredibly useful that many frameworks already support them. In essence, a decorator is a function that can modify a class, or any of its properties and methods. That's a pretty high-level definition, so let's take a look at what that means in practice.

Suppose we have a class like this:

class User {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

Now, any code which makes use of this class can create a user:

let user = new User("Jane", "Eyre");
user.getFullName(); // returns "Jane Eyre"

But because of the way JavaScript is designed, a developer could inadvertently change the

getFullName

let user = new User("Jane", "Eyre");
user.prototype.getFullName = function() {
  return "not the name!;"
}
user.getFullName(); // returns "not the name!"

Now, this is obviously a trite example, but the danger still remains. You can write code to make a class property read-only, like this:

Object.defineProperty(User.prototype, 'gettFullName', {
  writable: false
});

This works, but it's obviously cumbersome to write for multiple properties.

Enter decorators. You can define a decorator function to apply any behavior you want to a target property. For example, to set a target as

writable: false

function readonly(target) {
  target.descriptor.writable = false;
  return target;
}

We just defined a decorator called

readonly

descriptor.writable

false

User

class User {
  // ...
  @readonly
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

Voila! The same functionality, in a single line of code.

LWC provides several decorators for developers to use. They are:

• @api

  : by default, every property is hidden and private.

  @api

  exposes it publicly.

• @track

  : this marks a property as reactive, which means that when its value changes, the web component will re-render and display the new value.

• @wire

  : this is a decorator which signifies that we want to read Salesforce data.

These three decorators, which are unique to LWC, aim to help reduce rewriting the same code while easily providing common functionality.

Conclusion

Since LWC is built on web standards, it can leverage native APIs and languages in order to make developers immediately productive, since they're using existing skills rather than learning proprietary techniques.

If you'd like to take a closer look at Lightning Web Components, Salesforce has a boilerplate app that's built in TypeScript. There's also a Trailhead lesson to help you learn about web components in less than an hour. Or, feel free to check out the LWC dev docs for more specific reference information.