Mano, obrigado demais por falar o porque das coisas sem simplesmente só estar ensinando conteúdo pobre e sem valor. Você e seu canal são extremamente necessários. Continue assim, sempre! ;)
Quando tu fala da pasta interfaces eu fico pensando muito em interfaces em OO, mas a ideia aí que tu quer passar é de interfaces UI, ou seja te do a responsabilidade de renderização, correto? No caso ao usar views ao invés de interface foge o propósito? Home.view.tsx por exemplo
O que acha de ter interfaces de funções, como IGetProducts, usar isso pra injetar na page, assim ia facilitar no testes, pois é só criar uma implementar mockada dessa função, vejo muito isso em backend, mas em front muito pouco. Se vc faz isso como separa os arquivos?
Fala Hitalo, eu faço algo assim sim, no caso eu definiria a propriedade como: type TProps = { getProducts: () => Product[] } export const ProductsListInterface: React.FC = () => (...) Ai no teste eu mock essa função com Jest caso queira escrever um teste unitário para a interface: render() Ou podemos mockar a API com Mirage ou MSW para escrever o teste de integração.
Parabéns, muito bom o vídeo! Uma dúvida, quando a interface do subdomínio home precisa interagir com outros componentes de outros subdomínios. Exemplo: Na home carrego produtos e serviços. Como fica a organização e importações?
Fala Vander, obrigado. Isso vai depender muito to nivel de acoplamento e autonomia que tu precisa atingir. Caso acoplamento e isolamento seja um requisito muito importante para a característica de arquitetura tu pode criar um serviço na home para lidar com as requisições (provavelmente irá repetir código). subdomains/home/api.js subdomains/home/queries.js subdomains/home/service.js ... Porém, caso acoplamento não seja algo de extrema importância e está tudo bem existir dependência diretas entre seus sub dominios, tu pode simplesmenter importar os arquivos utilizando o alias que eu comentei: import { service } from '@subdomains/products/service' ... Após definir se está tudo bem ou não ter esse acoplamento tu pode seguir com a solução A ou B.
Eu curti e acho que entendi mas se fizer um projeto exemplo utilizando isso aí de arquitetura e design front poderíamos ver como você pensa ao entrar em alguns problemas enquanto desenvolve seguindo a linha de raciocínio dessa arquitetura aí
@Matheus gostei, só não entendi como funcionaria essa estrutura de pastas dentro do esquema de rotas do Next, onde ele usa a estrutura de pastas dentro do pages pra montar as rotas. Nessa estrutura aí perderia o benefício do roteamento da pasta pages? Sem usar ela eu só saberia fazer usando React router, é essa a intenção? Obrigado @Matheus Castiglioni
Fala Phillip, tudo bem? No vídeo eu fiz o exemplo exatamente utilizando o sistema de rotas do Next, porém eu importei diretamente o container quando na verdade deveria ter utilizado o arquivo routes.ts de cada subdominio? Atualizei o projeto de exemplo, dá uma olhada nesses dois arquivos: github.com/mahenrique94/video-arquitetura-projetos-front-end-next/blob/main/src/app/page.tsx github.com/mahenrique94/video-arquitetura-projetos-front-end-next/blob/main/src/subdomains/home/routes.ts
Entendi @MatheusCastiglioni, é que está usando a versão nova do Next, não tinha me atentado. Eu estava esperando aquela pasta que existe na versão anterior do Next chamada pages, que fica dentro de src, mas imagino que dê pra fazer lá tbm na versão mais antiga do Next
@@phillipnunes86 Da sim, é igualzinho, só muda o app/ para pages/ o resto fica idêntico, ou seja, tu importa o arquivo de rotas e exporta um componente como default onde vai renderizar a rota em si.
Fala Sabrina, tudo bem? Nesse caso seria da mesma forma feita no video, tu importa o layout desejado jo container e encapsula a renderização da interface. Caso seja um layout específico para o subdomain ai tu cria uma pasta layouts na raiz do dominio e dentro dela o layout em si.
Mano, obrigado demais por falar o porque das coisas sem simplesmente só estar ensinando conteúdo pobre e sem valor. Você e seu canal são extremamente necessários. Continue assim, sempre! ;)
Obrigado pela força man
Vídeo muito aguardado. Cada vídeo melhor que o outro nesse canal! Vlw d+, Matheus!
Obrigado Danilo
To com dificuldades para refatorar as arquiteturas que já existe no front do meu trabalho, esse vídeo clareou muito! Valeuuuu!
Magina rooh
Muita qualidade!! Valeu pelo conteúdo
Obrigado Iury
Quando tu fala da pasta interfaces eu fico pensando muito em interfaces em OO, mas a ideia aí que tu quer passar é de interfaces UI, ou seja te do a responsabilidade de renderização, correto? No caso ao usar views ao invés de interface foge o propósito? Home.view.tsx por exemplo
Fala Igor, sem problemas, eu usei views por um bom tempo antes de interfaces, agora eu estou usando uis para representar essa pasta.
Muito bom Matheus.
Obrigado Fernando
Muito massa!
Obrigado Junior
O que acha de ter interfaces de funções, como IGetProducts, usar isso pra injetar na page, assim ia facilitar no testes, pois é só criar uma implementar mockada dessa função, vejo muito isso em backend, mas em front muito pouco. Se vc faz isso como separa os arquivos?
Fala Hitalo, eu faço algo assim sim, no caso eu definiria a propriedade como:
type TProps = {
getProducts: () => Product[]
}
export const ProductsListInterface: React.FC = () => (...)
Ai no teste eu mock essa função com Jest caso queira escrever um teste unitário para a interface:
render()
Ou podemos mockar a API com Mirage ou MSW para escrever o teste de integração.
Poxa valeu pela ajuda!!! Estou estudando sobre isso esses dias e o vídeo me ajudou muito. Abraços
Fala João, bom demais, fico feliz em ajudar.
Excelente vídeo! To começando a estudar arquitetura e clareou muita coisa. Valeu!
Obrigado BSantoz
Parabéns, muito bom o vídeo!
Uma dúvida, quando a interface do subdomínio home precisa interagir com outros componentes de outros subdomínios. Exemplo: Na home carrego produtos e serviços. Como fica a organização e importações?
Fala Vander, obrigado. Isso vai depender muito to nivel de acoplamento e autonomia que tu precisa atingir.
Caso acoplamento e isolamento seja um requisito muito importante para a característica de arquitetura tu pode criar um serviço na home para lidar com as requisições (provavelmente irá repetir código).
subdomains/home/api.js
subdomains/home/queries.js
subdomains/home/service.js
...
Porém, caso acoplamento não seja algo de extrema importância e está tudo bem existir dependência diretas entre seus sub dominios, tu pode simplesmenter importar os arquivos utilizando o alias que eu comentei:
import { service } from '@subdomains/products/service'
...
Após definir se está tudo bem ou não ter esse acoplamento tu pode seguir com a solução A ou B.
Eu curti e acho que entendi mas se fizer um projeto exemplo utilizando isso aí de arquitetura e design front poderíamos ver como você pensa ao entrar em alguns problemas enquanto desenvolve seguindo a linha de raciocínio dessa arquitetura aí
Fala Roseno, já me pediram bastante isso viu, em breve vou postar algum video aplicando tal arquitetura e técnicas na prática.
@Matheus gostei, só não entendi como funcionaria essa estrutura de pastas dentro do esquema de rotas do Next, onde ele usa a estrutura de pastas dentro do pages pra montar as rotas. Nessa estrutura aí perderia o benefício do roteamento da pasta pages? Sem usar ela eu só saberia fazer usando React router, é essa a intenção? Obrigado @Matheus Castiglioni
Fala Phillip, tudo bem? No vídeo eu fiz o exemplo exatamente utilizando o sistema de rotas do Next, porém eu importei diretamente o container quando na verdade deveria ter utilizado o arquivo routes.ts de cada subdominio? Atualizei o projeto de exemplo, dá uma olhada nesses dois arquivos:
github.com/mahenrique94/video-arquitetura-projetos-front-end-next/blob/main/src/app/page.tsx
github.com/mahenrique94/video-arquitetura-projetos-front-end-next/blob/main/src/subdomains/home/routes.ts
Entendi @MatheusCastiglioni, é que está usando a versão nova do Next, não tinha me atentado. Eu estava esperando aquela pasta que existe na versão anterior do Next chamada pages, que fica dentro de src, mas imagino que dê pra fazer lá tbm na versão mais antiga do Next
@@phillipnunes86 Da sim, é igualzinho, só muda o app/ para pages/ o resto fica idêntico, ou seja, tu importa o arquivo de rotas e exporta um componente como default onde vai renderizar a rota em si.
Como é feita a orquestracao do layout dentro do subdomínios?
Fala Sabrina, tudo bem? Nesse caso seria da mesma forma feita no video, tu importa o layout desejado jo container e encapsula a renderização da interface.
Caso seja um layout específico para o subdomain ai tu cria uma pasta layouts na raiz do dominio e dentro dela o layout em si.
qual microfone é esse que vc esta usando?
Fala Sabrina, estou usando o Shure MV7