Executando verificação de segurança...
11
PedrooH
3 min de leitura ·

Arquitetura MVVM para projetos React Native

Introdução

Você já teve aquele momento de olhar para o código e pensar: "Será que está certo fazer dessa forma?" ou observar um código que estava funcionando, mas que parecia conter algo errado? Bem, isso costumava acontecer comigo o tempo todo (e, às vezes, ainda acontece). Recentemente, comecei a refletir mais sobre como me tornar um desenvolvedor melhor, otimizar meu código e, principalmente, fazer as coisas do jeito certo. Foi nesse momento que me aprofundei nos estudos sobre arquitetura de software.

Arquitetura de Software

A arquitetura de software é, basicamente, a forma como um sistema está organizado. Existem diversos padrões de arquitetura, e você provavelmente já ouviu falar do MVC (Model-View-Controller) e do Client-Server, dois dos padrões mais abordados em cursos de engenharia de software e desenvolvimento.

Eu já conhecia um pouco da teoria por trás da arquitetura de software, especialmente o MVC. No entanto, enquanto trabalhava em um projeto em React Native, percebi que o padrão MVC não satisfazia plenamente os requisitos do projeto e parecia inadequado. Foi então que descobri o padrão MVVM (Model-View-ViewModel), que fez muito mais sentido para a aplicação que eu estava desenvolvendo.

MVC

O MVC divide a aplicação em três componentes principais: Model, View e Controller. O Model lida com os dados e a lógica de negócios, a View cuida da interface de usuário e o Controller age como um intermediário entre ambos, recebendo as entradas do usuário e atualizando a View com base nas mudanças no Model.

MVVM

Já no padrão MVVM, a divisão também é feita em três partes, mas com uma diferença crucial: a presença do ViewModel, que serve como um mediador mais sofisticado entre o Model e a View. No MVVM, o ViewModel lida com a lógica de apresentação e comunicação entre a interface de usuário (View) e os dados (Model), mantendo a View desacoplada das operações de negócios e tornando a lógica de apresentação muito mais reutilizável.

Ou seja, o MVVM tem um foco maior na interface do usuário (UI), o que me pareceu mais apropriado para o meu projeto. Nele, havia certas lógicas que não se encaixavam em um Controller e acabariam sendo executadas na View. No entanto, como a View deve ser "burra" e apenas atuar como intermediária entre o usuário e os serviços, não fazia sentido implementar lógica nela.

Ao adotar o padrão MVVM, o ViewModel passou a ser responsável pela lógica de apresentação e pela comunicação entre a interface e os dados, mantendo a View "limpa" e com a responsabilidade de apenas exibir os dados. Isso tornou a organização do código muito mais limpa, e as funcionalidades passaram a se comportar de forma correta e tudo parecia estar no seu devido lugar.

Aqui está um video interessante sobre o Padrão MVVM com React Native: https://www.youtube.com/watch?v=RGRfXh54d9U&t=591s&pp=ygUSbXZ2bSByZWFjdCBuYXRpdmUg

Espero que esse post possa te dar algum insight.

1
josafaverissimo

Post dilicinha sobre o tema.

Aproveitando o gancho, vou falar um pouco da minha experiência com a arquitetura MVT, utilizada pelo framework Django.

Recentemenete entrei em uma empresa que utiliza Django em seus projetos. Sempre ouvi falarem das arquiteturas MVC, MVVM e MVP, nunca ouvi falar da MVT.

Resumidamente:

MVT

M - Model
V - View
T - Template

Nessa arquitetura, o Model é responsável pela lógica do seu banco de dados, consulta, remoção, atualização e criação dos dados.

A View contém a sua lógica de negócio, pelo que vi, é comum ver views gigantes em projetos Django.

O Template é responsável pela apresentação, em termos práticos, é aqui que está o html.

1
1
megbr

Em projetos Express.js pode-se utilizar as rotas como controllers? Faço essa pergunta pois vejo muitos tutoriais e exemplos onde a aplicação possui rota > controller > model, mas pra mim não faz muito sentido ter o controller nesse caso, já que a rota faz a comunicação com o mundo externo e pode acionar o model diretamente. O próprio tabnews é mais ou menos assim, a camada de api do next chama diretamente os models.

0