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 , a cross-browser solution for building complex web apps. On top of this open source standard, Salesforce developed (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. web components Lightning Web Components 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 , 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. proposed language features 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 class with the methods and , subclasses like and can implement them directly: Vehicle go stop Bicycle Car { go(); stop();
} { go() {
    usePedal();
  } stop() {
    stopPedal();
  }
} { go() {
    useEngine();
  } stop() {
    stopEngine();
  }
} class Vehicle void void < class Bicycle Vehicle void void < class Car Vehicle void void Inheritance affects the composition of an object by changing its hierarchy. Every and is now also a . But what if you merely wanted to add in common methods to objects without dealing with any parent class? That's what a does. Bicycle Car Vehicle mixin In , 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 method, which copies all of the properties from one object onto another: a JavaScript context Object.assign greetingsMixin = {
  sayHi() {
    alert( );
  },
  sayBye() {
    alert( );
  }
}; { (name) { .name = name;
  }
} .assign(User.prototype, greetingsMixin); // mixin let `Hello ` ${ .name} this `Bye ` ${ .name} this class User constructor this // copy the methods Object can now call and natively. Per JavaScript rules, can also inherit from just one class, while including properties and function) from any number of mixins: User sayHi sayBye User { } .assign(User.prototype, greetingsMixin); .assign(User.prototype, someOtherMixin); class User extends Person // ... Object Object However, writing out is somewhat akin to littering your code. What's worse is figuring out what the method is doing isn't very intuitive. Through some native JavaScript syntax, you can actually create a "subclass factory" with mixins, and declare which mixins you're using right at the top: Object.assign { } ( ) class User extends greetingsMixin Person // ... (For more information on this technique, check out .) this article Now, includes the and inherits from the class, all in one line. User greetingsMixin Person This technique is more than syntactical sugar: it's actually the one which LWC regularly prefers. For example, the provides methods that are useful to navigational UI elements, but ultimately, each class that includes it should also derive from a plain : Navigation Mixin LightningElement { LightningElement } ; { NavigationMixin } ; { } import from 'lwc' import from 'lightning/navigation' export default ( ) class TestComponent extends NavigationMixin LightningElement // ... provides functionality that's crucial to components dealing with navigating through pages, while provides all the base functionality for every component. Thus, will need to include and subclass from , and can do so in the easy-to-see, single-line format. NavigationMixin LightningElement TestComponent NavigationMixin LightningElement What is a Decorator? 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. Decorators Suppose we have a class like this: { (firstName, lastName) { .firstName = firstName; .lastName = lastName;
  }

  getFullName() { ;
  }
} class User constructor this this return ` ` ${ .firstName} this ${ .lastName} this Now, any code which makes use of this class can create a user: user = User( , );
user.getFullName(); let new "Jane" "Eyre" // returns "Jane Eyre" But because of the way JavaScript is designed, a developer could inadvertently change the method if they so desired: getFullName user = User( , );
user.prototype.getFullName = { }
user.getFullName(); let new "Jane" "Eyre" ( ) function return "not the name!;" // 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: .defineProperty(User.prototype, , { : }); Object '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 , you could do this: writable: false {
  target.descriptor.writable = ; target;
} ( ) function readonly target false return We just defined a decorator called which, when passed a target, sets its property to . This can be applied to our class like this: readonly descriptor.writable false User { @readonly
  getFullName() { ;
  }
} class User // ... return ` ` ${ .firstName} this ${ .lastName} this Voila! The same functionality, in a single line of code. LWC provides for developers to use. They are: several decorators : by default, every property is hidden and private. exposes it publicly. @api @api : this marks a property as reactive, which means that when its value changes, the web component will re-render and display the new value. @track : this is a decorator which signifies that we want to read Salesforce data. @wire 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 , . There's also to help you learn about web components in less than an hour. Or, feel free to check out for more specific reference information. Lightning Web Components Salesforce has a boilerplate app that's built in TypeScript a Trailhead lesson the LWC dev docs

Salesforce

Target

The Essential Guide to Load-Balancing Minecraft Servers with Kong Gateway

KubeMQ Build & Deploy Test Drive: My First Impressions

I write about technology michael.bogan@gmail.com

Nominated for 2022 - HackerNoon Contributor of the Year - Software Architecture

Nominated for 2022 - HackerNoon Contributor of the Year - Microservices

Nominated for 2022 - HackerNoon Contributor of the Year - Devops

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Nominated for 2022 - Software Developer of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Software

Too Long; Didn't Read

Make resilience your competitive advantage

How To Use Decorators and Mixins in Salesforce Lightning Web Components

How To Use Decorators and Mixins in Salesforce Lightning Web Components

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Heroku Now Officially Supports .NET!

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Heroku Now Officially Supports .NET!

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps