Executando verificação de segurança...
1

Como arquitetar informações de front e back juntas de uma maneira eficiente.

Bom dia/tarde/noite.
Me chamo Marcelo e sou um desenvolvedor focado principalmente na parte web e sou um pouco preocupado demais com arquitetura.

Atualmente estou desenvolvendo um sistema para uma empresa e estou a um tempo me corroendo com uma questão.

Basicamente, a sincronização dos "dados" entre front e back-end.

Imagine a seguinte situação, você tem uma tabela de Pessoas, e nessa tabela, você tem uma coluna de situação que é do tipo int4.

1 - Solteiro
2 - Casado
3 - Viuvo
4 - Etc.

E digamos que no front end você queira associar uma cor de texto para cada um dos valores.
Atualmente, eu trago do back-end a situação da pessoa como um número, crio uma constante no front como por exemplo:

[
    {
        value: 1,
        label: "Solteiro",
        color: "green"
    },
    {
        value: 2,
        label: "Casado",
        color: "purple"
    },
    {
        value: 3,
        label: "Viuvo",
        color: "red"
    },
    ...
]

E assim por diante, porém, isso tem alguns problemas, como por exemplo, se surgir uma nova opção, eu precisaria adicionar isso a essa constante no front, não que seja o fim do mundo, mas não sei se seria a melhor das práticas.

Mas o problema mesmo é caso surja um nova opção dentre essas, digamos por exemplo, que agora o valor 2 será de Divorciado, e Casado será 3, Viuvo será 4, e assim por diante.

Esse tipo de coisa acontece bastante no desenvolvimento de sistemas dedicados a empresa, pois, acabamos tratando de situações e condições muito especificas.

Queria saber se alguém tem alguma ideia ou abordagem melhor para solucionar isso.

Já pensei inicialmente em definir isso como uma rota do backend, no qual, o fronted teria que apenas mandar um request e receberia essa constante, tirando assim, essa lógica do frontend, porém, o backend não tem e não deveria ter que ter conhecimento de estilizações do frontend, o exemplo acima das cores é realmente só um exemplo, pois na prática é um pouco mais complexo que isso!

Espero ter conseguido esclarecer o "problema", não é uma dor de cabeça enorme nem nada do tipo, mas acho que em uma questão de arquitetura, deva ter alguma alternativa um pouco melhor.

Carregando publicação patrocinada...
1

Olá Marcelo.

Me parece que você está precisando de um BFF (Back-end For Front-end), que seria um micro serviço que liga o back-end com o front-end e já retorna para o front-end tudo o que ele precisa para montar a tela sem se preocupar com a camada lógica dessas informações.

No exemplo prático que você trouxe, caso você tenha que adicionar um novo item na listagem, além de adicionar a nova opção no serviço de back-end, você teria que adicionar a formatação dessa nova opção no BFF. Com o uso do BFF, o front-end não sofreria alterações, já que o front estaria apenas renderizando uma listagem, independente da quantidade dos itens informados.

O pattern BFF é muito mais do que um formatador, então vou deixar alguns links que explicam melhor esse conceito de BFF:

https://www.treinaweb.com.br/blog/o-que-e-bff
https://brasil.uxdesign.cc/quem-%C3%A9-o-bff-na-fila-do-p%C3%A3o-ef58d87bbab0
https://medium.com/jeitosanar/backend-for-frontend-uma-estrat%C3%A9gia-sob-demanda-para-a-entrega-de-microsservi%C3%A7os-2f12d4cb9e3f
https://www.linkedin.com/pulse/bff-pattern-good-bad-alternatives-chandra-sharma-/

Espero que tenha te ajudado 🌻❤️