@beforesemicolon/web-component

https://www.npmjs.com/package/@beforesemicolon/web-component • Nov 6, 2021 23:20

Extracto

Web Component Client Framework

Resumen

Resumen Principal

El proyecto @beforesemicolon/web-component representa un framework cliente especializado en el desarrollo de Web Components, una tecnología fundamental para la creación de interfaces web modulares y reutilizables. Este enfoque permite a los desarrolladores construir elementos personalizados que funcionan de manera nativa en los navegadores modernos, promoviendo la interoperabilidad y el encapsulamiento mediante el uso de Shadow DOM. La solución se posiciona como una herramienta eficiente para quienes buscan implementar componentes web sin depender de grandes frameworks como React o Vue, manteniendo al mismo tiempo un alto nivel de funcionalidad y control. Al centrarse en la arquitectura basada en componentes, el proyecto facilita el desarrollo de aplicaciones más mantenibles y escalables, al tiempo que respeta los estándares web actuales. Su diseño permite una integración sencilla en proyectos existentes, lo que lo convierte en una opción atractiva para equipos que buscan modernizar sus interfaces sin reescribir desde cero. La filosofía del proyecto parece enfocarse en la simplicidad, el rendimiento y la adhesión a los estándares del W3C, lo que garantiza una mayor longevidad y compatibilidad de los componentes desarrollados.

Elementos Clave

Web Components como base: El framework se fundamenta en la especificación nativa de Web Components, lo que permite crear elementos reutilizables con ciclo de vida propio, encapsulamiento de estilos y lógica, y una clara separación de responsabilidades.
Shadow DOM para encapsulamiento: Utiliza el Shadow DOM para aislar el estilo y la estructura interna de los componentes, evitando conflictos con el CSS global y mejorando la mantenibilidad del código.
Arquitectura modular y reutilizable: Facilita la construcción de componentes que pueden ser fácilmente integrados en diferentes proyectos o frameworks, promoviendo una filosofía de desarrollo basada en bloques funcionales independientes.
Cliente-side framework: Está diseñado específicamente para ser utilizado en el lado del cliente, optimizando la experiencia de usuario mediante la carga eficiente de componentes y la interacción directa con el DOM sin necesidad de un servidor intermediario.

Análisis e Implicaciones

El enfoque en Web Components tiene un impacto significativo en la evolución del desarrollo frontend, ya que permite a los equipos reducir la dependencia de grandes librerías externas mientras mantienen una arquitectura robusta. Esta solución puede facilitar la migración gradual hacia tecnologías más modernas y estándar, especialmente en proyectos legacy donde una reescritura completa no es viable. Además, al promover el uso de APIs nativas del navegador, se mejora el rendimiento general y se reduce la huella de recursos necesarios para ejecutar aplicaciones web complejas.

Contexto Adicional

El uso de Web Components como tecnología central refleja una tendencia creciente hacia la descentralización del ecosistema frontend, donde los desarrolladores buscan soluciones más ligeras y alineadas con los estándares web. Esto también implica una mayor portabilidad del código entre diferentes entornos y frameworks, lo cual es especialmente valioso en entornos empresariales con múltiples equipos y tecnologías.

Contenido

A lightweight and powerful web component framework intended to remove the tedious aspect of building reactive Web Components.

"Web Component API As It Should Have Been"

🥇 Build ✅ Flexible, ✅ Extensible, and ✅ Contextful Components with ✅ Reactive Template, 🥳 Directives, ✅ Data and Event Binding with a ✅ Simple and Lightweight API right in Your Browser.

🚫 No Tedious State Management and DOM Manipulation! 🚫 No Robust Data Store and Context Setup! 🚫 No Verbose API! 🚫 No JSX! 🚫 No Weird HTML or Javascript Syntax!

Learn More From The Documentation

Example

Declare a simple action button component

class ActionButton extends WebComponent {
  static observedAttributes = ['label', 'type', 'disabled', 'autofocus', 'name'];
  
  get stylesheet() {
    return `
      <style>
        :host {
          display: inline-block;
        }
        
        :host .my-button {
          background: #222;
          color: #fff;
        }
      </style>
    `;
  }
  
  get template() {
    return `
      <button 
        class="my-button" 
        type="{type || 'button'}"
        attr.disabled="disabled"
        attr.autofocus="autofocus"
        attr.name="name"
        onclick="handleClick($event)"
        >
        <slot>{label}</slot>
      </button>
    `;
  }
  
  handleClick(event) {
    this.dispatchEvent(new Event('click'));
  }
}

ActionButton.register();

Create a simple list data renderer that uses a action button to request more data

class PaginatedList extends WebComponent {
  static observedAttributes = ['tag-name', 'loading', 'items'];
  
  get template() {
    return `
      <p if="loading">
        <slot name="loading">loading...</slot>
      </p>
      <p if="!loading && !items.length">
        <slot name="empty">List is Empty</slot>
      </p>
      <div if="!loading && items.length" class="paginated-list">
        <${this.tagName || 'div'} repeat="items" details="{$item}">{$item}</${this.tagName || 'div'}>
        <action-button onclick="loadMore()">load more</action-button>
      </div>
    `;
  }
  
  loadMore() {
    this.dispatchEvent(new Event('loadmore'));
  }
}

PaginatedList.register();

In your HTML you can simply use the tag normally.

<paginated-list items="['one', 'two', 'three']" tag-name="p"></paginated-list>

Install

This module can be used directly in the browsers as well in Node environment

Browser

<!-- use the latest version -->
<script src="https://unpkg.com/@beforesemicolon/web-component/dist/web-component.min.js"></script>

<!-- use a specific version -->
<script src="https://unpkg.com/@beforesemicolon/web-component@0.0.4/dist/web-component.min.js"></script>

<!-- link you app script after -->
<script src"app.js"></script>

NodeJs

npm install @beforesemicolon/web-component

You can then import the WebComponent class wherever you need it.

const {WebComponent} = require('@beforesemicolon/web-component');

⚠️ Warning

Make sure to exclude the jsdom module when compiling or building your project to run in the browser. This module is used so WebComponent can work in NodeJs (not a browser environment). In browsers, the DOM will be available and things will be fine.

For example:

// webpack.config.js

module.exports = {
  //...
  externals: {
    jsdom: 'jsdom',
  },
};

// esbuild

require('esbuild').build({
  entryPoints: ['app.js'],
  outfile: 'out.js',
  external: ['jsdom'], // <<< exclude
})

Check your bundler documentation to see how it handles specific modules exclusions.