[Discussão] Gerência de 'state' em web apps: Redux, Flux ou MobX?

[matheuseabra]

Nos últimos dias venho estudando conceitos sobre gerência de 'state', que é um conceito básico pra quem usa React como UI. Só depois que fui entender que 'State' na verdade faz parte de nova forma de arquitetar aplicações.

Aprofundando meus estudos, entendi que à medida que o meu app vai crescendo em componentes e tamanho, não é uma boa prática manter meus dados dentro do State, mas sim passar os dados para algum tipo de camada fora da UI em si.

Encontrei diversos frameworks que lidam com esse aspecto, e inclusive já estão bem conhecidos com os gringos usando lá fora:

• Flux (o primeiro a surgir usando essa arquitetura, criado pelo time do facebook)
• Redux (mais conhecido, porém com uma curva de aprendizado maior)
• MobX (o mais simples de todos para aprender, mas não possui ferramentas/integração muito boas)

Então queria trazer uma discussão com o resto dos Devs, pra saber a opinião de vocês sobre esses 'State Management' frameworks, se trazem algum benefício de performance, ou melhorias na nossa DX (developer experience).

PS: meu primeiro issue aqui no frontendbr!

Abraço

[marcusviniciusf]

Tbm tem o Reflux, baseado no flux. Menos verboso que o Redux, porém não tem global store.

[mahenrique94]

Atualmente trabalho com o Redux e tem me atendido bem, mas soluções como MobX e Reflux que não possuem uma store global são muito relevantes, porém, ainda nas as utilizei para opinar.

A curva de aprendizado do Redux é bem extensa, mas depois que pega o jeito, as coisas tornam-se mais fáceis, recomendo o seu uso.

[leticiacostadias]

Hoje estou usando Redux e tenho minhas birras com ele. Em alguns casos acho que o Redux pode ser um canhão pra matar barata.

Anteriormente, em outra empresa, usávamos o Alt.js que é uma implementação do Flux e, comparando com o Redux, ele já faz uma abstração dos dispatchers e acho a store e os equivalentes aos reducers mais organizados. Acho mais fácil pra entender o fluxo de como algo sai de uma action e é atualizado na store.

[ninetails]

Flux eh o puro, o restante é tipo política, religião e framework (libs no caso). Aí vai do que o(s) desenvolvedor(es) do projeto tiverem mais afinidade. Claro que cada um tem seus prós e contras como comunidades gigantes como Redux e MobX... E também cada lib tem sua particularidade.

Também tem o Context API nativo novo que tá vindo pra facilitar passar estados para componentes filhos

(edit)
acho que a @leticiacostadias resumiu muito um sentimento que tb tenho

Em alguns casos acho que o Redux pode ser um canhão pra matar barata.

[NandoSangenetto]

Uma boa alternativa e recém no mercado, que usa a nova Context API é o unstated, do @jamiebuilds.

[klarkc]

Particularmente uso o Vuex (com vue claro), porém como o @ninetails explicou, flux é um só. As derivações implementam boas práticas trazidas pelo flux, cada um de uma forma diferente, e com diferentes nomes... O Vuex dos que eu estudei até agora, parece ser o mais simples e fácil de usar e entender.

[yanmagale]

Grande pergunta @matheuseabra

Aplicações JS tem crescido muito nos últimos anos (e não vão parar por ai). Quando uma aplicação começa a ficar grande e difícil de manter, sempre iremos nos preocupar com a arquitetura e procurar seguir as boas práticas e princípios de engenharia, para que o processo possa ter vida longa. Uma destas práticas é a arquitetura MVC, tão bem difundida e consagrada. Tanto que foi ela a aparecer primeiramente nas libs e fws JS, como Knockout, backbone, angularjs e tantos outros.

Como você bem disse, em 2014 o Facebook apresentou a arquitetura Flux, baseado no princípio do unidiretional data flow e state (fiz um compilado de links sobre Flux aqui), que resolveram muitos dos problemas que enfrentavamos em uma aplicação complexa que utilizasse MVC, devido ao próprio funcionamento da arquitetura.

Flux sem dúvida alguma melhora a developer experience de um projeto, por ser fácil visualizar o fluxo da sua aplicação, saber o que vai acontecer e como sua aplicação reage em uma determinada situação. Por consequência, sua aplicação se torna mais previsível, mais fácil de testar e todo novo membro do time saberá facilmente o que está acontecendo, basta olhar o seu arquivo de actions.

A forma que o Facebook concretizou a arquitetura em uma lib, ficou um pouco confuso de se utilizar. Por isso, foram (e ainda são criadas) diversas libs que implementam a arquiquetura (com algumas melhorias e adaptações). Como a @leticiacostadias bem citou, uma das primeiras libs mais famosas foi o Alt.JS (que ainda é usado até hoje em alguns projetos no Airbnb), e claro, Mobx e Redux.

Basicamente, Mobx trabalha através de decorators e possui uma única Store. Em uma aplicação simples, ele irá te atender perfeitamente. Ao longo prazo e numa eminência de crescimento da aplicação, Redux irá brilhar lindamente e mostrar todo o seu poder. Existem N outras libs (tão boas quanto e nem tanto faladas), que apenas o seu cenário irá determinar se será melhor usar uma ou outra. Mas sem dúvida de que "state management" é uma realidade e que vamos ver ainda em muitos e muitos projetos, pelos benefícios que ele nos trás.

Espero ter ajudado 😄

[klarkc]

Quero adicionar aqui esse artigo que procurei esses dias, e achei bem legal, por mostrar que o Flux não é algo novo, na verdade alguns princípios vem desde o DDD e do CQRS. Enfim o que o Flux trouxe de novo foi uma nova forma de pensar em arquitetura de software, trazendo uma versão dessa simplificada, que se encaixe em um contexto reativo e desacoplado.

https://jaysoo.ca/2015/02/06/what-the-flux/

[yanmagale]

@klarkc exatamente. Se a gente for fazer uma análise friamente, nada em computação é criado já faz um tempinho. Tudo já exista a um certo tempo atrás, só que criamos maturidade para alguns conceitos somente agora. Flux mesmo é muito parecido com Event Sourcing e CQRS, pattersn já difundidos em aplicações back-end 😄