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.

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 🌻❤️

Criei esse artigo recentemente, creio que complementa a resposta do @daivgs [Tornando a Experiência do Desenvolvimento Mais Eficiente com Backend for Frontend (BFF): Uma Jornada de Adoção e Implementação](https://www.tabnews.com.br/Viserion/tornando-a-experiencia-do-desenvolvimento-mais-eficiente-com-backend-for-frontend-bff-uma-jornada-de-adocao-e-implementacao)