Citi-web-components NPM

MicroApps Citibanamex

JavaScript
Typescript - Web Components
NPM modules
Angular

Introducción

La primer idea que tenemos que tener clara a la hora de crear MicroApps es que cada micro app es un Web Component estándar.

Los Web Components tienen la característica de ser interoperables, es decir, pueden ser utilizados en cualquier ambiente HTML con cualquier framework o ninguno.

Esto hace posible la creación de una colección de MicroApps que pueden ser utilizadas en diferentes aplicaciones web o mobile híbridas construidas en diferentes frameworks como Angular, React o directamente Javascript

Para una creación más rápida y completa de nuestros web components utilizaremos el framework StencilJs. Este documento explica la forma de implementar web Components a través de StencilJs.

Ventajas de usar Web Components para la creación de MicroApps

Interoperabilidad. Los Web Components no son dependientes de un framework y pueden ser re-utilizados en lo más populares como Angular, React, Vue entro otros o JavaScript vainilla

Reactividad. La funcionalidad del componente puede reaccionar a los cambios de las propiedades del mismo

Mantenibilidad. Los Web components maximizan la posibilidad de mantener aplicaciones completas ya que utilizan el Modelo Nativo de Componentes del navegador. Además, al ser elementos encapsulados, es posible la actualización, migración o reemplazo de los mismos sin afectar la integridad de la aplicación en la que se utilizan.

Cross-browser. Los Web Components son soportados por los principales navegadores como Microsoft Edge, Google Chrome, Firefox y Safari (Microsoft IE11 es compatible a través de polyfills).

Pero, ¿qué es una MicroApp?

Las MicroApps, son componentes encapsulados de interfaz de usuario (UI) integrales de responsabilidad única.

Descomponiendo el concepto.

Son componentes encapsulados.

Una MicroApp es un componente estándar HTML, CSS y JavaScript, independiente, interoperable y re-utilizable que se ejecuta en un scope propio.

De interfaz de usuario.

Una MicroApp, pone a disposición de los usuarios una interfaz HTML a través de Web Components que crean un árbol de elementos HTML encapsulados (shadow DOM) que es ajeno al DOM normal de la aplicación (light DOM). Así mismo, el contexto de ejecución de JavaScript y CSS son apartados del scope global de la aplicación.

Integrales.

Una MicroApp contiene en sí misma toda la funcionalidad necesaria para operar independientemente como propiedades y eventos privados. Además para interactuar con otras MicroApps o componentes externos, se pueden crear propiedades y eventos públicos. Así mismo una MicroApp debe contar con sus propios modelos de datos y llamados HTTP para consumo de servicios REST.

De responsabilidad única.

El propósito final de una MicroApp es convertirse en una característica única de una aplicación rica. Por lo que una de sus directivas principales es que no debe dividir su propósito con otros componentes o partes de la aplicación.

Web Components

Conceptos que debes conocer para entender web components.

¿Qué son los web components?

Los Web Components son tags de HTML re-utilizables personalizados y encapsulados:

<mi-web-component></mi-web-component>

¿De qué están hechos los Web Components?

Están hechos de 4 especificaciones:

Custom Elements

Es la especificación que permite crear elementos DOM personalizados

Shadow DOM

Es la especificación que permite crear un DOM interno y encapsulado

ES Modules

Es la especificación que permite incluir y re-utilizar archivos .js de forma modular

HTML Template

Es la especificación que permite crear fragmentos de HTML que no se cargan al inicio de la aplicación pero pueden ser usados en tiempo de ejecución

NextGen Design System Web Component Collection

A collection of standard web components part of the NextGen Design System.

The purpose of this package is to explore a efficient way to build micro front-ends using a set of reusable building blocks.

The collection is currently in an early development stage.

Contact al82840@citi to know more about the package and the develoment process.

Getting Started

Clone the project from the repository

git clone https://<PersonalAccessTokens>@github.com/miguelnova/reboot-ds.git

MacDown Screenshot

Change directory

cd reboot-ds

Donwload package:

npm i

Run the project

npm start

New component

Create a new web component:

stencil generate wc-personal-card

src
 |- components
     |- atoms
         |- wc-personal-card
             |- wc-personal-card.css
             |- wc-personal-card.spec.ts
             |- wc-personal-card.tsx

MacDown Screenshot

Save changes

Save changes commit

git add .
npm run commit

Types commits

types: {
      chore: {
        description: 'Build process or auxiliary tool changes',
        emoji: '🤖',
        value: 'chore'
      },
      ci: {
        description: 'CI related changes',
        emoji: '🎡',
        value: 'ci'
      },
      docs: {
        description: 'Documentation only changes',
        emoji: '✏️',
        value: 'docs'
      },
      feat: {
        description: 'A new feature',
        emoji: '🎸',
        value: 'feat'
      },
      fix: {
        description: 'A bug fix',
        emoji: '🐛',
        value: 'fix'
      },
      perf: {
        description: 'A code change that improves performance',
        emoji: '⚡️',
        value: 'perf'
      },
      refactor: {
        description: 'A code change that neither fixes a bug or adds a feature',
        emoji: '💡',
        value: 'refactor'
      },
      release: {
        description: 'Create a release commit',
        emoji: '🏹',
        value: 'release'
      },
      style: {
        description: 'Markup, white-space, formatting, missing semi-colons...',
        emoji: '💄',
        value: 'style'
      },
      test: {
        description: 'Adding missing tests',
        emoji: '💍',
        value: 'test'
      }
    }

MacDown Screenshot

Run Scripts

Analyze static code with ESlint

npm run lint

Format code

npm run format

Run unit tests

npm run test

Run EsLint, Format, Unit Test Only File Staged

npx lint-staged --no-stash

Build a project

npm run build

Integration with Angular

Stencil provides a wrapper for your custom elements to be used as first-class Angular components. The goal of a wrapper is to smooth over how Stencil’s code works within a framework. Wrappers provide a function that you can use within Stencil’s Output Targets to automatically create components for the targeted framework that wrap the web components you author in a Stencil project.

Publishing our Stencil Component

To publish our Stencil Component, we need to do the following steps. First, we need to check our stencil.config.js. In here we set generateDistribution: true. This setting will set the compiler to generate the files needed for other projects to consume our Stencil components.

Once configured we will run the npm script npm run build this runs the build process to generate our components. Once built we can publish our components to NPM. To publish our components, we run npm publish this will publish the generated components in the dist folder to our project name defined in our package.json file. The demo project I have already published to NPM here. Next, we will look at an Angular CLI project to consume our components.

Configuring the Angular CLI

The CUSTOM_ELEMENTS_SCHEMA tells the Angular compiler that any unknown tags should be ignored as our custom Web Components will define them. Once defined we can now add our Stencil component to our app.component.html template.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA // Tells Angular we will have custom tags in our templates
  ]
})
export class AppModule {}

How do I add IE11 or Edge support?

If you want your custom elements to be able to work on older browsers, you should add the applyPolyfills() that surround the defineCustomElements() function.

import { applyPolyfills, defineCustomElements } from 'citi-components/loader';
...
defineCustomElements();
applyPolyfills().then(() => {
  defineCustomElements()
})

Usage in your templates

<citi-component first="Stencil" last="Compiler"></citi-component>

Package JSON

{
  "name": "angular-nodejs-example",
  "version": "1.0.0",
  "description": "node server",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon ./server.js localhost 3080",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/bbachi/angular-nodejs-example.git"
  },
  "author": "Bhargav Bachina",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/bbachi/angular-nodejs-example/issues"
  },
  "homepage": "https://github.com/bbachi/angular-nodejs-example#readme",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.2"
  }
}

Usage in your templates

const express = require('express');
const app = express(),
      bodyParser = require("body-parser");
      port = 3080;

const users = [];

app.use(bodyParser.json());
app.use(express.static(process.cwd()+"/my-app/dist/angular-nodejs-example/"));

app.get('/api/users', (req, res) => {
  res.json(users);
});

app.post('/api/user', (req, res) => {
  const user = req.body.user;
  users.push(user);
  res.json("user addedd");
});

app.get('/', (req,res) => {
  res.sendFile(process.cwd()+"/my-app/dist/angular-nodejs-example/index.html")
});

app.listen(port, () => {
    console.log(`Server listening on the port::${port}`);
});

@stencil/core

@infinitebrahmanuniverse/nolb-cit @everything-registry/sub-chunk-1328

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago