{"id":2679,"date":"2020-04-10T17:29:42","date_gmt":"2020-04-10T20:29:42","guid":{"rendered":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/?p=2679"},"modified":"2025-09-02T15:06:02","modified_gmt":"2025-09-02T18:06:02","slug":"flux-arquitetura-para-desenvolvimentos-de-aplicacoes-web","status":"publish","type":"post","link":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/2020\/04\/10\/flux-arquitetura-para-desenvolvimentos-de-aplicacoes-web","title":{"rendered":"Flux: Arquitetura para desenvolvimentos de aplica\u00e7\u00f5es web"},"content":{"rendered":"\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

No PET-Reda\u00e7\u00e3o dessa semana, vamos tentar entender a arquitetura Flux, comparando-a com o famigerado MVC. Ent\u00e3o pega o teu caf\u00e9 e nos acompanha nessa reda\u00e7\u00e3o descontra\u00edda.<\/p>\n

Flux \u00e9 a arquitetura que o Facebook criou para melhorar o desenvolvimento de aplica\u00e7\u00f5es\u00a0web<\/em>\u00a0<\/strong><\/em>nos tempos modernos. Mas antes de entrarmos no assunto, temos que entender o porqu\u00ea da exist\u00eancia dessa arquitetura e como ela facilita o desenvolvimento de aplica\u00e7\u00f5es.<\/p>\n

Antes de utilizar o Flux, o Facebook utilizava o MVC, a arquitetura mais famosa e conceituada quando o assunto \u00e9 desenvolvimento de aplica\u00e7\u00f5es. Essa fama vem da separa\u00e7\u00e3o de interesses que essa arquitetura oferece de forma a otimizar a compreens\u00e3o e escrita de c\u00f3digo. S\u00f3 que, como tudo na vida, o MVC n\u00e3o \u00e9 s\u00f3 flores, e um dos aspectos negativos \u00e9 a complexidade que a aplica\u00e7\u00e3o toma quando pensamos em escalabilidade. Ou seja, para aplica\u00e7\u00f5es menores, com meia d\u00fazia de funcionalidades, o MVC serve muito bem. Mas para pra pensar, quantas funcionalidades tem o Facebook? Tem o sistema de chat (Messenger), posts, grupos, galeria de fotos e v\u00eddeos,\u00a0stories<\/em>, eventos, servi\u00e7os de\u00a0streaming<\/em>, etc. Agora vamos tentar imaginar um cen\u00e1rio em que isso est\u00e1 modelado em cima do MVC.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

\u00c9 praticamente imposs\u00edvel identificar alguma anomalia em um diagrama nesse estado. E se existe um loop infinito nessas comunica\u00e7\u00f5es, como vamos saber a partir desse diagrama? Foi por conta disso que o Facebook criou o Flux para tentar resolver esses tipos de problemas.<\/p>\n

Como eu falei anteriormente, o Flux \u00e9 uma arquitetura para o desenvolvimento de aplica\u00e7\u00f5es\u00a0web<\/em>\u00a0com o prop\u00f3sito de evitar a comunica\u00e7\u00e3o amb\u00edgua que existe entre as\u00a0views<\/em>\u00a0e os\u00a0models<\/em>, ou seja, criar um fluxo de dados unidirecional.<\/p>\n

A arquitetura \u00e9 dividida nas seguintes camadas:<\/p>\n