LotusJS

Powered by

A Design Pattern to Unite Designers and Developers

LotusJS is a TypeScript framework for building modern web apps using web components with decoupled views. Beyond that LotusJS is a design pattern that ensures your components are framework agnostic, portable, and ready for a designer to make beautiful! Below is a simple button component built using LotusJS.

import {AbstractComponent, SkinPart, ComponentEvent} from "lotusjs-components";
/**
 * Created by dsmiley on 7/26/17.
 */
export class Button extends AbstractComponent {
    // must be accessible by AbstractComponent, do not mark private
    protected buttonSkinPart:HTMLElement;

    constructor(){
        super();
    }

    public onClick(event:Event):void{
        this.dispatch(new ComponentEvent(ComponentEvent.CLICK, {target:this.buttonSkinPart, originalEvent:event}))
    }

    public defineSkinParts():void{
        super.defineSkinParts();
        //set up skin parts
        this.skinParts.addItem(new SkinPart('button', this, 'buttonSkinPart'));
    }

    public onSkinPartAdded(part:string, element:HTMLElement):void{
        super.onSkinPartAdded(part, element);
        switch( part ){
            case 'button':
                this.addEventListeners();
                break;
        }
    }

    public addEventListeners():void{
        super.addEventListeners();
        this.buttonSkinPart.addEventListener('click', this.onClick.bind(this));
    }

    public removeEventListeners():void{
        super.removeEventListeners();
        if(this.buttonSkinPart) {
            this.buttonSkinPart.removeEventListener('click', this.onClick);
        }
    }

    public destroy():void{
        super.destroy();
        this.buttonSkinPart = null;
    }

}
    

The base class AbstractComponent handles the low level details of calling the button's onSkinPartAdded method. This base class receives the root HTML element and parses it. Any element that contains the data-skin-part attribute is passed to the onSkinPartAdded method. At that point the component can safely assign event handlers. Using this component in an Angular application is as easy as the following.

import { Component, OnInit, ViewEncapsulation, ElementRef, ViewChild } from '@angular/core';
import {Button} from 'lotusjs-components';

@Component({
  selector: 'app-add-page-item-btn',
  templateUrl: './add-page-item-btn.component.html',
  styleUrls: ['./add-page-item-btn.component.scss'],
  encapsulation: ViewEncapsulation.Native
})
export class AddPageItemBtnComponent implements OnInit {
        constructor(protected element: ElementRef) {

        }

        public ngOnInit(){
            this.component = new Button();
            this.component.element = this.element.nativeElement;
            this.component.init();
        }

        public ngOnDestroy(): void{
            this.component.destroy();//will clear all refs
        }
}
    

The Angular component wrapper provides the lifecycle hooks for the component and wires it into the view. You now have a pure Javascript component that is framework independent! Your button component doesn't care or even know that Angular is your framework. All the component needs is a reference to the root element of the component's view. Speaking of component views lets take a look at the Angular component template for our example.

<div> <button data-skin-part="btn"> <label> <span class="icon fa"></span> <span class="text">Hello Lotus</span> </label> </button> </div>

Notice anything special here? Apart from the data-skin-part attribute this is just vanilla HTML. LotusJS was founded on the idea that designers and developers depend on one another to create amazing experiences for the end user. We firmly believe the bedrock of forming that relationship is using HTML free from framework specific template code. Templating engines are evil. They trap valuable component code in the framework layer and make it impossible for designers to be productive without lengthy environment set up. Migrating from a framework also becomes largely impossible without a significant effort. Our simple time tested method of using the component view as the contract between designer and developer has enabled huge successes for organizations all over the world. If you want to read more about how Lotus has helped organizations empower design and development teams please checkout Silicon Publishing, the birthplace of LotusJS.

Top

Examples

Top

Getting Started

npm i lotusjs-components

Visit our npm page then check out our examples and component source code.

Top

Lotus MVW

LotusJS offers a MVW (Model View Whatever) framework extension available on npm: lotusjs-mvw. The framework enables component mediation, dependency injection, command mapping, central event bus, and more. It's the ideal add on for those looking to build entire applications based on the Lotus platform.

Top