No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aplicando el patr贸n: Smart and Dumb components

9/25
Recursos

Aportes 20

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Components = Renderizar (Inputs, Outputs)
Containers = Fetch (buscan datos) y mandan a renderizar en los componentes

Dump component: debe encargarse de la parte visual e interactiva
Smarti component: trae datos para mandarlos a al dump component

Los dump components tienene de apellido .component y los smart compnents .container

un Dumb componet es dependiente, solo muestra informacion, generalmente tiene inputs u outputs y un smart component, es quien hace suscripciones a las api enfocada a la logica del negocio, llama servicios y llama al Dumb component para visualizar la data

馃槻 En mi caso el IDE de WebStorm me marca que es una mala pr谩ctica. 馃槷

Incluso me da la referncia a la gu铆a oficial.

馃く

esto la verdad genera un error cuando lo migras a angular 11 debieran actualizar el curso y no depender los tres cursos de angular de un solo proyecto

Amigas y amigos, no se rompan la cabeza actualizando o buscando las rutas relativas de sus archivos cuando vayan a hacer una importaci贸n. VS Code ya tiene un comando para hacerlo autom谩ticamente y ahorra much铆simo tiempo, les cambia la vida.
.
Primero busquen sus comandos:
.

.
Despu茅s busquen el que se llama 鈥淩elative Path鈥 (el segundo de la imagen). Si no lo encuentran, tal vez necesiten buscar su traducci贸n al espa帽ol.
.

.
Escriben el nombre del archivo que buscan y dan 鈥淓nter鈥
.

En el caso de que uno tenga dialogs de tipo modals, hirian en una carpeta aparte llamada entrycomponents o en el mismo components
驴?

Deberian de agregar proyectos grandes de github para ver diferentes implemetnaciones de los patrones.
Ejemplo como manejarlo en proyectos grandes, donde tengas componentes que interactuen entre ellos,

Fetch = Ir a buscar o extraer

Sugerencia: Si reinicien su servidor para que encuentre los archivos con el cambio de path y nombres.

Tomando en cuenta el ejemplo que da el profesor con ionic y para no romper con la guia de estilos de angular se puede utilizar la forma en que ionic nombra las paginas(pages), estas sigen siendo componentes pero le colocan en el nombre page; Para el caso de product seria algo asi: ProductPageComponent de esta manera los archivos quedarian nombrados como product-page.component.ts, product-page.component.css y product-page.component.html y para la nomenclatura de container solo seria cambiar page por container

Interesante este patr贸n, lo desconoc铆a.

Muy buen patr贸n y mas que nada la explicacion de este, normalmente suele ser algo complejo poder saber que elementos deberian de ser separados como components pero este patron lo deja mas claro.

Genial, ese patron es muy bueno, cuando se tiene una aplicaci贸n que esta en auge de crecimiento

Aunque la l贸gica de dumb y smart components est谩 bien planteada, por qu茅 no es mejor idea renombre el que al inicio fue el componente product a product-container en lugar de sacarlo de la carpeta componentes. product-detail es un componente que tambi茅n hace un fetch al inicio y no se lo est谩 separando a container.

Fetch = ir a buscar

yo segu铆a las practicas de ionic con pages como container y components como componentes.

Cuando tenemos una aplicaci贸n compleja es buena practica utilizar el concepto de smart and聽 dump components, donde:

  • Dump components: Son componentes sencillos que solamente se encargan de la parte visual y la renderizaci贸n de nuestra aplicaci贸n.
  • Smart components: son componentes que se encargan de hacer consumir los servicios del Backend, transformar datos y pasar las informacion los Dump Components.

Por cierto, dado que product-detail tambi茅n hace un fetch, 驴no har铆a m谩s sentido que 茅ste tambi茅n fuera un container?, es decir, 驴nombrarlo como product-detail.container.ts?