Exadel Smart Library

Presentation by @exadel/esl-team

What is ESL?

ESL is an open-source UI component library that simplifies routine tasks, enabling efficient website creation with flexible components.

With ESL, you can easily implement popular UX patterns such as popups, tabs, embedded videos/audio, and more.

Use these web components to enhance existing projects or build your infrastructure from scratch with ESL.

Goals and Anti-Goals of ESL

Custom Tags

<my-custom-tag attr="world"></my-custom-tag>

Custom Attributes

<div my-custom-attr="world"></div>

ESL Event Listeners

ESL Event Listener is an embedded ESL module that takes care of the event listeners management and provide extended utilities to work with events. Module supports event delegation, custom event targets. Listeners registration works on the "host" concept that allows you to link the listener to the specific component instance (to manage subscriptions automatically).

connectedCallback() {
  this.onBtnClick = this.onBtnClick.bind(this);
  this.addEventListener('click', this.onBtnClick);
  this.onResize = this.onResize.bind(this);
  this._resizeObserver = new ResizeObserver(this.onResize);
  this._resizeObserver.observe(this);
}
disconnectedCallback() {
  this.removeEventListener('click', this.onBtnClick);
  this._resizeObserver.disconnect();
}
onBtnClick(event) {
  if (event.target.closest('button')) {/* Btn click */}
}
onResize() {/* Resize subscription for component */}

@listen({event: 'click', selector: 'button'})
onBtnClick(event) {/* Click subscription with delegation */}

@listen({event: 'resize', target: ESLResizeObserverTarget.for})
onResize(event) {/* Resize subscription for component */}

ESL Utils and syntax sugar

ESL Core provides big amount of utils and syntax sugar to simplify development process.

• Extended Media Query Syntax

  Extended syntax for media queries allows to use breakpoint aliases and extended boolean logic.

  (min-width: 600px) and (max-width: 1200px) -> @SM

• Extended Media Conditions Mapping

  Ability to map extended media conditions to values.

  @XS => accordion | @+SM => tabs

• Extended Traversing Syntax

  Extended syntax for DOM traversing, very similar to jQuery, with support for relative selectors.

  ::parent::next(esl-toggleable)

ESL Built-in Components

In addition to the core ESL library, ESL provides a set of built-in components.

These components are designed to be used in a wide range of applications and are fully customizable to fit your needs.

UI Playground

The UI Playground is a separate project that allows you to see the components in action and test them in different scenarios.

The UI Playground is a great tool for developers who want to see how the components work and how they can be customized.

See project on GitHub

UIP Isolated & Embedded content

The main feature of UIP is the ability to render demo content in one of two modes: isolated or embedded.

<uip-root class="uip-theme-esl">
  <script type="text/html"
          label="Embedded content"
          uip-snippet>
    ...
  </script>
  <script type="text/html"
          label="Content isolated"
          uip-snippet
          uip-isolated>
   ...
  </script>

  <uip-snippets class="uip-toolbar" dropdown-view="@xs"></uip-snippets>
  <uip-preview></uip-preview>
</uip-root>

UIP Editors

UI Playground allows you to see and edit source code of example and see changes in real time.

UI Playground - Quick Settings plugin

UI Playground allows you to add quick options to manipulate your demo content.