Web Components:

Web Components are a set of standardized technologies in JavaScript that allow you to create reusable and encapsulated UI elements. These elements can be used across different web projects and frameworks.

• Shadow DOM is a crucial concept within Web Components that ensures encapsulation and isolation of styles and structure for individual components.

• Isolated Styling: Components have their own styles, shielded from external influences.

• DOM Encapsulation: Component structure is self-contained, avoiding clashes with other elements.

• Composition: Simple components compose into sophisticated UIs, enhancing reusability.

• Encapsulated JavaScript: Private methods and data for component-specific functionality.

Encapsulation and Isolation

• Isolation: This is like having a sandbox for each component to play in. They won't interfere with each other, which helps in avoiding unexpected bugs and making your code more maintainable.

• Encapsulation: Imagine Web Components as black boxes – you only need to know what they do, not how they do it. This abstraction makes it easier to manage complex UIs.

Reusability

Web Components enable the creation of custom HTML elements, encapsulating both appearance and behavior. They can be reused just like standard HTML elements.

Create custom UI elements once, reuse them across projects.

Composability as a concept

A type of thing is composable when several instances can be combined in a certain way to produce the same type of thing.

Composition is a strategy for managing complexity and organizing code into reusable pieces

Reusability & Composability Benefits

• Efficiency: Save time by using pre-built components instead of reinventing the wheel.

• Consistency: Ensure uniformity in design and behavior throughout projects.

• Modularity: Develop independently, then assemble components for complex layouts.

Reactivity

Reactivity is a programming paradigm that allows us to adjust to changes in a declarative manner.

Let's look at an example.

This is a basic example of an excel spreadsheet. A2 is the sum of A0 and A1. When I update A0 or A1, A2 updates automatically.

Vs

This is a basic example of a traditional javascript example, where one variable a3 is the sum of a1 and a2. When I update a2, a3 doesn't update automatically.

Lit

From their website:

• Lit is a simple library for building fast, lightweight web components.

• At Lit's core is a boilerplate-killing component base class that provides reactive state, scoped styles, and a declarative template system that's tiny, fast and expressive.

How Lit actually works

Lit Elements are built on top of the Web Components standard. They are a thin layer that provides a more expressive API for defining custom elements. They have all of the templating functionality, and inherit from ReactiveElement (a Lit base class). ReactiveElement handles all the reactive properties and attribute management, and inherit from regular HtmlElements. The HTMLElements are the ones that enable all of the basic web component functionality like Shadow DOM, custom element registry etc.

Why we chose Lit over React/Vue/ColdFusion:

• It has a wrapper for react

• Vue components can be made into web components

• Svelte components can be made into web components

Reactivity in Lit:

• Lit components receive input and store their state as JavaScript class fields or properties. Reactive properties are properties that can trigger the reactive update cycle when changed, re-rendering the component, and optionally be read or written to attributes.

• Lit components use the standard custom element lifecycle methods. In addition Lit introduces a reactive update cycle that renders changes to DOM when reactive properties change.

Composability in Lit:

• Just like regular WC Reusability basically but advanced because each component is much more capable than a regular web component element

• A component can use subcomponents in its template. Components can use standard DOM mechanisms to communicate: setting properties on subcomponents, and listening for events from subcomponents.

Mixins

• Mixins in TypeScript are a powerful concept for enhancing class functionality:

• Mixin Definition: A mixin is a way to combine multiple classes' properties and methods into one class.

• Enhanced Composition: Mixins promote code reuse without imposing rigid class hierarchies.

How to use Mixins:

1. Create mixin classes with desired functionality (e.g., LoggingMixin, ValidationMixin).

2. Define a base class and extend it with desired mixins (e.g., class User extends Mixin(LoggingMixin, ValidationMixin)).

3. Access combined features as if they were part of the base class.

Reactive Controllers:

• Lit introduces a new concept for code reuse and composition called reactive controllers.

• A reactive controller is an object that can hook into a component's reactive update cycle. Controllers can bundle state and behavior related to a feature, making it reusable across multiple component definitions.

• You can use controllers to implement features that require their own state and access to the component's lifecycle, such as:

  • Handling global events like mouse events
  • Managing asynchronous tasks like fetching data over the network
  • Running animations

Reactive controllers allow you to build components by composing smaller pieces that aren't themselves components. They can be thought of as reusable, partial component definitions, with their own identity and state.

Templating in Lit:

Lit templates are written using JavaScript template literals tagged with the html tag. The contents of the literal are mostly plain, declarative, HTML:

• Expressions: Templates can include dynamic values called expressions that can be used to render attributes, text, properties, event handlers, and even other templates.

• Conditionals: Expressions can render conditional content using standard JavaScript flow control.

• Lists: Render lists by transforming data into arrays of templates using standard JavaScript looping and array techniques.

• Built-in directives: Directives are functions that can extend Lit's templating functionality. The library includes a set of built-in directives to help with a variety of rendering needs.

• Custom directives: You can also write your own directives to customize Lit's rendering as needed.