O MobX é uma biblioteca responsável por gerenciamento de estado simples e escalável. Aplica este gerenciamento e escalonamento de forma transparente a programação reativa funcional.
O MobX já possui 5 anos. Já foi adotado por empresas como Microsoft(Outlook), Netflix, Amazon e E.A. Games (Battlefield). Ele possui a mesma filosofia desde o início. Se algo pode ser derivado pelo estado do aplicativo, será derivado automaticamente.
Em contraste a isso, o ecossistema JavaScript mudou significativamente ao longo dos anos. No entanto, propostas do JavaScript como observables, Object.observe e decorators nunca foram materializados. O MobX 6 é uma versão que não traz muitos novos recursos, mas sim uma consolidação em consideração ao estado atual do JavaScript.
Adeus Decorators!
Usar decorators não é mais regra no MobX. Quando começou, o MobX era um projeto do TypeScript e utilizava decorators. Atualmente, as implementações experimentais do decorator são incompatíveis com a proposta de campos de classe que logo será padronizada. As implementações de decorator legado (Babel) e experimental (TypeScript) não serão capazes de interceptar inicializações de campos de classe. Mas como ficará o MobX depois dos decorators?
Em vez de usar decorator nos membros durante a definição de classe, os membros da instância precisam ser anotados no construtor, usando o utilitário makeObservable.
import {observable, computed, action, makeObservable} from "mobx"
// Antes:
class TodoStore {
@observable
todos: Todo[] = []
@computed
get unfinishedTodoCount() {
return this.todos.filter(todo => !todo.done).length
}
@action
addTodo(todo: Todo) {
this.todos.push(todo)
}
}
// Depois:
class TodoStore {
todos: Todo[] = []
constructor() {
makeObservable(this, {
todos: observable,
unfinishedTodoCount: computed,
addTodo: action
})
}
get unfinishedTodoCount() {
return this.todos.filter(todo => !todo.done).length
}
addTodo(todo: Todo) {
this.todos.push(todo)
}
}
O makeObservable não requer configurações de compilação sofisticadas. Migrar uma base de código que use diversos decorators para makeObservable pode ser um desafio. O MobX vem com um mod de código para fazer isso automaticamente. Utilizando o comando:
npm mobx-undecorate
Utilizando este comando, todos os decorators da pasta de origem serão reescritos automaticamente! Depois, atualize sua configuração TypeScript/Babel e estará tudo pronto para prosseguir.
Documentação nova!
Com a retirada da norma de utilização de decorators, a documentação foi revisada e reestruturada, sendo mais curta, com menor repetição e discutindo melhor os cenários comuns.
Suporte a navegador aprimorado
O MobX 6 suporta mais mecanismos JavaScript que o MobX 5. O 5 exigia suporte de proxy, tornando-o inadequado para Internet Explorer e React Native, por isso, o Mobx 4 era mantido ativamente. No entanto, o MobX 6 substitui os dois. Ele ainda exigirá Proxies, mas será possível cancelar o uso do Proxy caso precise oferecer suporte a mecanismos mais antigos.
Você pode verificar mais novidades em:
Gostou desta notícia? Comente abaixo!
Referência: https://michel.codes/blogs/mobx6