Forem: Henry Bravo

Nested components o componentes anidados en Angular con ng-content

Henry Bravo — Thu, 15 Oct 2020 23:44:19 +0000

Un caso muy común para hacer un ejemplo de componentes anidados y usando ng-content, son los Cards, tal cual lo hace Angular Material, en este caso se nos presenta un diseño similar al siguiente

Una buena practica que debemos tener como desarrolladores y que a mi me funciona es definir la arquitectura antes de "echar" codigo.

Luego de analizar el diseño anterior, nos encontramos que tenemos un Home, con dos Cards, que si uno quisiera podrían ser dos componentes separados compartiendo estilos, pero al final se puede cruzar la línea delgada de reescribir código.

En este caso crearemos un componente Card, que sera nuestro Layout del card, un componente CardHeader, y un componente CardBody, ya que vemos que si tiene Header es el mismo comportamiento, y con nuestro amigo "ng-content" recibiremos los componentes o data que le pasemos al Card.

Para este ejercicio vamos a representar visualmente las cosas, no va a ser necesario comportamientos del form o de las urls de los posts, eso es solo demostrativo

Iniciamos el proyecto

ng new MyNestedComponents

Y para darle un poco de estilo como del diseño, nuestro style.css el app.component.css quedan de la siguiente manera

/* You can add global styles to this file, and also import other style files */
body {
  margin: 0;
  font-family: system-ui;
}

Ahora creamos los componentes a utilizar:

ng g c components/card
ng g c components/card-header
ng g c components/card-body
ng g c components/contact-form
ng g c components/item-post

Nuestro app.module.ts debe quedar de la siguiente manera:

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

import { AppComponent } from './app.component';
import { CardComponent } from './components/card/card.component';
import { CardHeaderComponent } from './components/card-header/card-header.component';
import { ContactFormComponent } from './components/contact-form/contact-form.component';
import { ItemPostComponent } from './components/item-post/item-post.component';
import { CardBodyComponent } from './components/card-body/card-body.component';

@NgModule({
  declarations: [
    AppComponent,
    CardComponent,
    CardHeaderComponent,
    ContactFormComponent,
    ItemPostComponent,
    CardBodyComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Empezamos a crear nuestros componentes

Agregamos los estilos correspondientes a cada Layout y creamos el html

card.component.css

.card {
  background-color: white;
  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
    0 1px 3px 0 rgba(0, 0, 0, 0.12);
}

.card-component.html


<div class="card">
  <ng-content></ng-content>
</div>

.card-component.css

.header {
  border-bottom: 1px solid #d0d0d0;
  padding: 14px;
  font-size: 1rem;
  font-weight: 700;
}

.card-header.component.html

<div class="header">
  <ng-content></ng-content>
</div>

.card-body.component.css

.card-body {
  padding: 1rem;
}

.card-body.component.html

<div class="card-body">
  <ng-content></ng-content>
</div>

Antes de escribir el primer card, modifiquemos el componente item-post

.item-post.component.ts

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-item-post',
  templateUrl: './item-post.component.html',
  styleUrls: ['./item-post.component.css'],
})
export class ItemPostComponent implements OnInit {
  @Input() value: string;
  constructor() {}

  ngOnInit(): void {}
}

.item-post.component.css

.item-post {
  border: 1px solid gray;
  padding: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.item-post.component.html

<div class="item-post">
  {{ value }}
</div>

En el app.component.ts listamos los "posts"

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'AngularNestedComponents';

  posts: string[] = ['Primer post', 'Segundo Post', 'Tercer post'];
}

Y nuestro primer Card quedaría de la siguiente manera:

<app-card>
  <app-card-header> Mis Posts </app-card-header>
  <app-card-body>
    <ng-container *ngFor="let item of posts">
      <app-item-post [value]="item"></app-item-post>
    </ng-container>
  </app-card-body>
</app-card>

Ahora maquetamos nuestro contact-form

.contact-form.component.html

<div class="content-form">
  <div class="form-group">
    <label>Nombre</label>
    <input type="text" class="form-control" />
  </div>

  <div class="form-group">
    <label>Email</label>
    <input type="email" class="form-control" />
  </div>

  <div class="form-group">
    <label>Mensaje</label>
    <textarea name="" id="" cols="30" rows="10"></textarea>
  </div>

  <div class="cta">
    <button>Enviar</button>
  </div>
</div>

.content-form {
  padding: 14px;
  margin: 0 auto;
  max-width: 440px;
  width: 90%;
}

.content-form .form-group {
  margin-bottom: 10px;
}
.content-form .form-group label {
  font-weight: 700;
  display: block;
}
.content-form .form-group input {
  padding: 6px;
  border: 1px solid #b7b7b7;
  border-radius: 4px;
  margin-top: 7px;
  width: 100%;
}

.content-form .form-group textarea {
  padding: 6px;
  border: 1px solid #b7b7b7;
  border-radius: 4px;
  margin-top: 7px;
  width: 100%;
}

button {
  background-color: #00d5ff;
  border: 0;
  padding: 10px;
  border-radius: 5px;
  width: 170px;
}

Y nuestro app.component.html

<main>
  <div class="container">
    <h1>HenryGBCDev</h1>

    <app-card>
      <app-card-header> Mis Posts </app-card-header>
      <app-card-body>
        <ng-container *ngFor="let item of posts">
          <app-item-post [value]="item"></app-item-post>
        </ng-container>
      </app-card-body>
    </app-card>

    <app-card>
      <app-card-header> Contactanme </app-card-header>
      <app-card-body>
        <app-contact-form></app-contact-form>
      </app-card-body>
    </app-card>
  </div>
</main>

Podemos ver los beneficios del ng-content y que también nos ayuda a leer mucho mejor el código, entre mas componetizado este nuestra aplicación, aparte de que se ve mucho mejor, nos ayuda con el mantenimiento a los desarrolladores.

https://github.com/HenryGBC/AngularNestedComponents

Sígueme en mis redes, donde sigo compartiendo contenido de código y sobre todo de Frontend.

Crea tus propios componentes para cualquier framework usando Stencil JS

Henry Bravo — Sat, 10 Oct 2020 21:22:27 +0000

Uno de mis propósitos en este mundo del Frontend, es que no exista más una guerra de Frameworks, más allá de que si cada uno tiene sus desventajas y ventajas, primero debemos aprender las bases que es lo más esencial y lo más importante, en eso estamos claros.

Otro punto importante es que las empresas deben limitar su capacidad de contratación enfocadas a un framework en específico, por eso cuando las grandes empresas realizan muchos proyectos en diferentes frameworks y no se casan con alguno es un gran avance. Pero con ello viene otro problema y es que cuando toman esta decisión encuentran que les toca rehacer el mismo código para cada proyecto, sobre todo cuando hablamos de componentes.

Los webcomponents llegaron al rescate

WebComponents

Los webcomponents son bloques de código que encapsulan la estructura interna de elementos HTML, incluyendo CSS y JavaScript, permitiendo así que el código se pueda volver a usar como se quiera en otras webs y aplicaciones
Consiste en tres tecnologías principalmente, las que se pueden usar juntas para crear elementos personalizables versátiles que encapsulan la funcionalidad y pueda ser reutilizada donde sea sin miedo a colisiones de código.

Custom elements (elementos personalizados):
Shadow DOM
HTML templates

Hay muchas librerías para crear Webcomponents, inclusive se puede crear webcomponents con Vanilla..

Vamos a crear este contador como Webcomponent

const template = document.createElement("template");
template.innerHTML = `
  <style>
    * {
      font-size: 200%;
    }

    span {
      width: 4rem;
      display: inline-block;
      text-align: center;
    }

    button {
      width: 4rem;
      height: 4rem;
      border: none;
      border-radius: 10px;
      background-color: seagreen;
      color: white;
    }
  </style>
  <button id="dec">-</button>
  <span id="count"></span>
  <button id="inc">+</button>`;

class MyCounter extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    this.shadowRoot.appendChild(template.content.cloneNode(true));
    this.shadowRoot.getElementById("inc").onclick = () => this.inc();
    this.shadowRoot.getElementById("dec").onclick = () => this.dec();
    this.update(this.count);
  }

  inc() {
    this.update(++this.count);
  }

  dec() {
    this.update(--this.count);
  }

  update(count) {
    this.shadowRoot.getElementById("count").innerHTML = count;
  }
}

customElements.define("my-counter", MyCounter);

Crearlo Vanilla es muy buena opción, pero cuando son componentes mas complejos vanilla no es tan agil, pero siempre hay que conocerla, por esto de que es importante siempre conocer las bases.

Existen varias librerías, la mas importante y conocida es Polymer, pero la que me sorprendió últimamente por lo fácil y porque utilizan las buenas practicas de los frameworks, es Stencil JS.

IONIC y Stencil JS

Hace unos años cuando en ionic tomaron la decisión de que se pueda usar otros freameworks, para programar en ionic, no solamente en Angular, entonces ahí tomaron al decisión de usar webcomponents para todos sus componentes y no tener que crear componentes para cada librería.

Todo esto llevo a que crearan su propia Librería llamada Stencil.js

Creemos el mismo componente que hicimos con Vanilla ahora con Stencil.

$npm init stencil

Seleccionamos la opción de Component

Nos genera una estructura base con con un componente de ejemplo

Pasamos a la carpeta y corremos npm install

Algo muy bueno, es que podemos correr un server local para probar nuestros components, lo probamos de la siguiente manera.

$npm run start

El server esta apuntando al index.html que tenemos en en el proyecto

<!DOCTYPE html>
<html dir="ltr" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
    <title>Stencil Component Starter</title>

    <script type="module" src="/build/designsystem.esm.js"></script>
    <script nomodule src="/build/designsystem.js"></script>
  </head>
  <body>
    <my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>
  </body>
</html>

Creamos el componente MyCounter

$npm run generate my-counter

/* @jsx h */
import { h, Component, State, Host } from "@stencil/core";

@Component({
  tag: "my-counter",
  styleUrl: "my-counter.css",
  shadow: true,
})
export class MyCounter {
  @State() count: number = 0;

  inc() {
    this.count++;
  }

  dec() {
    this.count--;
  }

  render() {
    return (
      <Host>
        <button onClick={this.dec.bind(this)}>-</button>
        <span>{this.count}</span>
        <button onClick={this.inc.bind(this)}>+</button>
      </Host>
    );
  }
}

Y el my-counter.css

* {
  font-size: 200%;
}

span {
  width: 4rem;
  display: inline-block;
  text-align: center;
}

button {
  width: 4rem;
  height: 4rem;
  border: none;
  border-radius: 10px;
  background-color: seagreen;
  color: white;
}

Y en el index.html lo agregamos

<my-counter></my-counter>

Un caso de uso muy común para usar Webcomponents es para crear Sistemas de Diseño, como comentaba anteriormente las empresas que ya se conforman de equipos muy grandes, hay equipos que desarrollan con React, Angular, Vanilla etc, y ellos deben mantener una misma linea en sus componentes.

En un próximo Post crearemos un Mini Design System y ejemplos para usarlo con React o Angular.

¿Qué es lo mas esencial para alguien que quiere iniciar como Frontend Developer?

Henry Bravo — Tue, 06 Oct 2020 00:43:49 +0000

Esta respuesta suele parecer obvia para muchas personas, pero estamos en un punto donde considero que la "guerra" de Frameworks no debe continuar, he visto como se pelean por un framework tal cual como hinchas de un equipo de fútbol, y sí, es un poco absurdo pero es real.

El hecho de generar estas "peleas" Angular vs React vs Vue vs Svelte vs [Inserte framework de moda] hace daño a la hora de iniciarce como Frontend Developer, ya que hace que el desarrollador trate de aprender primero el framework antes de las bases y esto genera problemas al futuro al dev.

Pero ¿cuáles son las bases del Frontend?
Antes de comenzar y hablar de cualquier lenguaje que debe aprender el Frontend, lo esencial es que entendamos varios puntos:

•¿Cómo funcionan los navegadores?
•¿Qué es HTTP?
•¿Qué es un dominio?
•¿Qué es un hosting?

Esta es una base que debe enteder muy bien cualquier desarrollador web.
La base de todo Frtontend Dev, es HTML, CSS y Javascript, antes de aprender un framework esto es lo primero que debe estudiar cada desarrollador, porque estas también son las bases de cada framework.

HTML

• Aprender lo básico
•Escribir HTML Semántico
•Entender los formularios
•Convecciones y buenas prácticas.

CSS

• Aprender lo básico y buenas prácticas
•Crear layouts
•Entender sobre Flex Box, Positions, CSS Grid,
•Responsive Design y Media Queries

Javascript

• Sintaxys y conocimientos básicos
• Aprender a manipular el DOM
•Hacer llamados a Apis
• Ecma Script 6 y programación funcional

Agreguémosle un Plus mas, y es que como Frontend también debemos tener en cuenta varios conceptos básicos sobre diseño.

Estos son algunos puntos sobre HTML, CSS y Javascript, claramente el aprendizaje es más extenso, pero aquí es donde debe empezar cada desarrollador que quiere ser Frontend y es lo que cada Frontend Dev debe reforzar si no quiere depender de ningún framework.

Creando nuestro primer Angular Schematics

Henry Bravo — Sat, 26 Sep 2020 00:01:06 +0000

Si llegaste hasta aquí, es porque lo mas probable es que hayas utilizado algún Schematic pero ahora quieres entender como funcionan y como crear uno.

Angular Schematics fue creado por el equipo de Angular para ayudarnos a automatizar nuestros proyectos, permitiendo crear reglas para crear archivos, correr o remover dependencias, entre otras cosas. El más usado por todos es el Angular Cli, por debajo es un Schematics que nos ayuda a crear nuestros componentes, servicios, etc. de manera sencilla.

En este post te mostraremos paso a paso cómo crear tu primer Schematics, explicaremos cada funcionalidad que lo compone y abordaremos un caso de uso que puede ser común para aplicar un Schematics.

Primeramente debemos instalar @angular-devkit/schematics-cli

npm install -g @angular-devkit/schematics-cli

Generamos nuestro primer schematics..

schematics blank init

Ahora veamos que nos genera el schematics-cli

Tenemos los archivos comunes package.json, tsconfig.json etc

En la carpeta src estarán nuestros schematics, en este caso solo está el schematic init, que fue el que creamos.

collection.json

Es nuestro principal archivo de definición de todos los esquemas disponibles que tendremos.

{
  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
  "schematics": {
    "init": {
      "description": "A blank schematic.",
      "factory": "./init/index#init"
    }
  }
}

Aquí podemos ver que cada schematic por defecto tiene una descripción y un factory, que es la función principal donde inicia el schematic.

import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';

// You don't have to export the function as default. You can also have more than one rule factory
// per file.
export function init(_options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    return tree;
  };
}

Podemos ver la función init donde nos devuelve un Rule y acepta el parámetro llamado _options, para poder pasarle parámetros y definir comportamientos dentro de la función.

Rule

La "Regla" se llama con un árbol (tree: Tree) y un schematicContext, para realizar cambios en el arbol y se retorna para su procesamiento posterior.

Tree

El Tree o árbol es una representación virtual de cada archivo en nuestro workspace, es lo que necesitamos para lograr el objetivo de los Shematics, generar código y realizar cambios en archivos existentes. Todas las Rules se tienen que ejecutar correctamente para ver representados los cambios en el código.

Vamos a ir creando nuestro schematics y aumentando un poco la complejidad.

En este primer caso, vamos a crear un archivo .js con un console.log adentro.

export function init(_options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    tree.create('hello.js', `console.log('Frontend Rules');`);
    return tree;
  };
}

Esto creará un hello.js en la raíz del proyecto donde ejecutemos el schematics.

Lo podemos probar de la siguiente manera:

Primero hacemos build de nuestro schematics para compilar nuestros archivos .ts

$ npm run build

Luego podemos probar el schematics de dos maneras:

$ schematics .:init
$ schematics .:init --debug=false

De la primera forma va a correr el schematic de manera virtual y nos indicará si existe algún error o no.

Si lo ejecutamos con el —debug=false si crea el archivo hello.js en nuestra raíz.

Options

A la hora de generar schematics podemos pasarle distintos parámetros a ese schematics para ayudarnos a automatizar mucho mejor. En este caso pasaremos un parámetro name para incluirlo en el console.log

Una opcion es pasarlo inline

$ scheamtics .:init --name=Henry

Esto funciona y el _options lo recibirá correctamente, pero podemos hacerlo mucho mejor ¿de qué manera? Podemos definir un schema específico para el init y en este schema podemos restringir qué opciones se le deben pasar y si queremos que sean desde el prompt, entre muchas definiciones más.

Creamos nuestro archivo schema.json dentro del schema init.

init/schema.json

{
    "$schema": "http://json-schema.org/schema",
    "id": "InitSchematics",
    "title": "Init Options Schema",
    "type": "object",
    "description": "Saludar a un dev",
    "properties": {
        "name": {
            "type": "string",
            "description": "Name of dev",
            "$default": {
                "$source": "argv",
                "index": 0
            },
            "x-prompt": "A quien de frontend quieres saludar?"
        }
    },
    "required": [
        "name"
    ]
}

En el collection.json debemos apuntar el schema nuevo creado

"init": {
      "description": "A blank schematic.",
      "factory": "./init/index#init",
      "schema": "./hello/schema.json"
 }

Y ahora nuestro factory quedaria de la siguiente manera

export function init(_options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    tree.create('hello.js', `console.log('Hi ${_options.name}Frontend Rules');`);
    return tree;
  };
}

Y se crea el archivo con el parámetro recibido tal cual lo creamos.

Templates

Se puede generar código de una mejor manera y automatizada, gracias a los templates.
Tal cual como funciona el ng g c 'name' del angular cli.

Todo esto de los templates debe tener un formato especifico que es medio extraño que a continuación les explico.

Dentro de src/init creamos la carpeta files y ahí adentro creamos nuestro template, esto debe ser así ya que por configuración todo lo que este dentro de files no se va a compilar, esta excluido.

Creamos esta estructura dentro de scr

- src/init/files/hello-__name@dasherize__/
                   hello-__name@dasherize__.ts

El __ (underscore) quiere decir que separa las variables y tenemos la función auxiliar dasherize que hace algo como NombreMio a nombre-mio

Y nuestro template quedaría de la siguiente manera:

console.log('Hi <%= name %> Frontend Rules');

Ahora modificamos nuestra Rule:

import { strings } from '@angular-devkit/core';
import { apply, mergeWith, Rule, SchematicContext, template, Tree, url } from '@angular-devkit/schematics';


// You don't have to export the function as default. You can also have more than one rule factory
// per file.
export function init(_options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    const sourceTemplates =  url('./files');
    const sourceParametrizedTemplates = apply(sourceTemplates, [
      template({
        ..._options,
        ...strings
      })
    ]);

    return mergeWith(sourceParametrizedTemplates)(tree, _context);

  };
}

Una vez ya tenemos nuestro schematic, una buena practica es crear una aplicación angular llamada sandbox donde haremos nuestras pruebas.

La creamos dentro de nuestro proyecto

ng new sandbox

Nos dirigimos a nuestra aplicación sandbox y linkeamos nuestro schematic

Y ejecutamos nuestro schematic en el proyecto sandbox

npm link $PATH-PROJECT/init
schematics ..:init --debug false

Esto es solo el principio de un mundo bastante amplio como son los Schematics de Angular.

Les dejo unos schematics de ejemplo para que se puedan guiar:
https://github.com/briebug/jest-schematic

Este schematics es de la gente de briebug donde nos ayudan a cambiar toda la configuración de Karma y Jasmine a Jest para nuestras pruebas unitarias

Por supuesto los schematics de angular que utiliza el angular-cli

https://github.com/angular/angular-cli/tree/8ffb755ef084d358638045dd58e2f5f0297139a1/packages/schematics/angular

Espero les haya gustado, cualquier cosa comenten o escríbanme

Repo del proyecto: https://github.com/HenryGBC/angular-shematics-example
Mi twitter: https://twitter.com/HenryGBC
Mi Github: https://github.com/HenryGBC