Creating Common Components

Common Reusable Components require Template, CSS and JS to express their behavior:

  1. USING CUSTOM HTML ELEMENTS
    • Using a framework like Angular/React that allows interpreting custom HTML Elements.
    • Let’s look at Angular Material Dropdown:
      • Use custom Attributes to control style, layout and behavior from template
      • Use custom methods to control behavior using JS
        • Eg.  [formControl]=”foodControl”>
          • Disable: this.foodControl.disable()
          • Enable: this.foodControl.enable()
      • Eg:
        <md-select placeholder="Favorite food">
          <md-option *ngFor="let food of foods" [value]="food.value">
            {{ food.viewValue }}
          </md-option>
        </md-select>
  2. USING ATTRIBUTES
    • USING DEFAULT ATTRIBUTE VALUES AND CUSTOM KEYS
      • Eg. Bootstrap + JQuery/PureJS components
      • Use default class attribute key with custom values to control style and layout. Eg. Bootstrap Dropdown Header/Item
        • Layout: class="dropdown-menu-right"
        • Style: <button class="dropdown-item"> </button>
    • USING CUSTOM ATTRIBUTE KEYS
      • This can be achieved using data-* custom attributes that are allowed in standard HTML and can be inspected by pure JS Eg. This Directive
      • Use data-* attributes to control behavior
        • Eg. Add data-toggle=”dropdown” to a link or button to toggle a dropdown.
        • Also allow JS API for all behaviors: $(‘.dropdown-toggle’).dropdown()
        • Fire Actions using JS Events
          • The client will register handlers like so: $(‘#myDropdown’).on(‘show.bs.dropdown’, function () {
            // do something…
            })
        • Frameworks like Angular can also be used to achieve this. Eg Attribute Directives,  Note that Angular Components can be easily injected into Non Angular Apps. See Sample Here.

          TLDR: Post AOT and Tree Shaking etc. optimizations of the Common Angular Components, their size would be lesser than one using JQuery etc. and would be more performant and have a better API (leveraging both custom Elements for abstraction and Custom Attributes for configuring the component) and they can be used anywhere

           

WRAPPING INTO F/W SPECIFIC API

In any of the above approaches, it is imperative for the library authors to wrap the component into a F/W friendly wrapper like wrapping pure js grid into angular component that they angular clients can then easily consume. Eg. https://ng-bootstrap.github.io/#/home

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s