|
|
# WeChat MiniProgram compatible build of MobX
|
|
|
|
|
|
This is a special build of MobX that is compatible with WeChat MiniProgram.
|
|
|
|
|
|
<img src="https://mobx.js.org/assets/mobx.png" alt="logo" height="120" align="right" />
|
|
|
|
|
|
# MobX
|
|
|
|
|
|
_Simple, scalable state management._
|
|
|
|
|
|
[](https://badge.fury.io/js/mobx)
|
|
|
[](docs/backers-sponsors.md#backers)
|
|
|
[](docs/backers-sponsors.md#sponsors)
|
|
|
[](https://github.com/mobxjs/mobx/discussions)
|
|
|
[](https://coveralls.io/github/mobxjs/mobx?branch=main)
|
|
|
[](https://changelogs.xyz/mobx)
|
|
|
|
|
|
---
|
|
|
|
|
|
## Documentation
|
|
|
|
|
|
Documentation can be found at **[mobx.js.org](https://mobx.js.org/)**.
|
|
|
|
|
|
---
|
|
|
|
|
|
## Sponsors
|
|
|
|
|
|
MobX is made possible by the generosity of the sponsors below, and many other [individual backers](https://github.com/mobxjs/mobx/blob/main/docs/backers-sponsors.md#backers). Sponsoring directly impacts the longevity of this project.
|
|
|
|
|
|
**🥇 Gold sponsors (\$2500+ total contribution):**
|
|
|
|
|
|
<br/>
|
|
|
<a href="https://www.guilded.gg/"><img src="https://mobx.js.org/assets/guilded.jpg" align="center" width="100" title="Guilded" alt="Guilded" /></a>
|
|
|
<a href="https://www.getparallax.com/"><img src="https://mobx.js.org/assets/parallax.png" align="center" width="100" title="Parallax" alt="Parallax" /></a>
|
|
|
<a href="https://www.one-beyond.com"><img src="https://mobx.js.org/assets/dcsl.png" align="center" width="100" title="One Beyond" alt="One Beyond"/></a>
|
|
|
<a href="https://frontendmasters.com/"><img src="https://mobx.js.org/assets/frontendmasters.jpg" align="center" width="100" title="Frontend Masters" alt="Frontend Masters"></a>
|
|
|
<a href="http://auctionfrontier.com/"><img src="https://mobx.js.org/assets/auctionfrontier.jpeg" align="center" width="100" title="Auction Frontier" alt="Auction Frontier"></a>
|
|
|
<a href="https://www.codefirst.co.uk/"><img src="https://mobx.js.org/assets/codefirst.png" align="center" width="100" title="CodeFirst" alt="CodeFirst"/></a>
|
|
|
<a href="https://modulz.app/"><img src="https://mobx.js.org/assets/modulz.png" align="center" width="100" title="Modulz" alt="Modulz"/></a>
|
|
|
<a href="https://coinbase.com/"><img src="https://mobx.js.org/assets/coinbase.jpeg" align="center" width="100" title="Coinbase" alt="Coinbase" /></a>
|
|
|
<a href="https://curology.com/blog/tech"><img src="https://mobx.js.org/assets/curology.png" align="center" width="100" title="Curology" alt="Curology"/></a>
|
|
|
<a href="https://mendix.com/"><img src="https://mobx.js.org/assets/mendix-logo.png" align="center" width="100" title="Mendix" alt="Mendix" /></a>
|
|
|
<a href="https://www.canva.com/"><img src="https://mobx.js.org/assets/canva.svg" align="center" width="100" title="Canva" alt="Canva" /></a>
|
|
|
<a href="https://opensource.facebook.com/"><img src="https://mobx.js.org/assets/fbos.jpeg" align="center" width="100" title="Facebook Open Source" alt="Facebook Open Source" /></a>
|
|
|
<a href="https://casinosites.ltd.uk/?utm_source=sponsorship&utm_medium=mobx&utm_campaign=readme"><img src="https://mobx.js.org/assets/casino2.png" align="center" width="100" title="Casino Sites" alt="Casino Sites"/></a>
|
|
|
<a href="https://www.bugsnag.com/platforms/react-error-reporting?utm_source=MobX&utm_medium=Website&utm_content=open-source&utm_campaign=2019-community&utm_term=20190913"><img src="https://mobx.js.org/assets/bugsnag.jpg" align="center" width="100" title="Bugsnag" alt="Bugsnag"/></a>
|
|
|
|
|
|
**🥈 Silver sponsors (\$500+ total contributions):**<br/>
|
|
|
|
|
|
<a href="https://mantro.net/jobs/warlock"><img src="https://mobx.js.org/assets/mantro.png" align="center" width="100" title="mantro GmbH" alt="mantro GmbH"></a>
|
|
|
<a href="https://www.xh.com/"><img src="https://mobx.js.org/assets/xh.png" align="center" width="100" title="Extremely Heavy" alt="Extremely Heavy" /></a>
|
|
|
<a href="https://www.algolia.com/"><img src="https://mobx.js.org/assets/algolia.jpg" align="center" width="100" title="Algolia" alt="Algolia" /></a>
|
|
|
<a href="https://space307.com/?utm_source=sponsorship&utm_medium=mobx&utm_campaign=readme"><img src="https://mobx.js.org/assets/space307.png" align="center" width="100" title="Space307" alt="Space307"/></a>
|
|
|
<a href="https://blokt.com/"><img src="https://mobx.js.org/assets/blokt.jpg" align="center" width="100" title="Blokt" alt="Blokt"/></a>
|
|
|
<a href="https://upper.co/?utm_source=github_mobxjs_sponsorship&utm_medium=paid_acquisition&utm_campaign=sponsorship"><img src="https://mobx.js.org/assets/upper.png" align="center" width="100" title="UPPER" alt="UPPER"/></a>
|
|
|
<a href="https://careers.dazn.com/"><img src="https://mobx.js.org/assets/dazn.png" align="center" width="100" title="DAZN" alt="DAZN"></a>
|
|
|
<a href="https://talentplot.com/"><img src="https://mobx.js.org/assets/talentplot.png" align="center" width="100" title="talentplot" alt="talentplot"></a>
|
|
|
|
|
|
## <a href="https://www.easeus.com/?utm_source=github_mobxjs_sponsorship&utm_medium=readme&utm_campaign=sponsorship"><img src="https://mobx.js.org/assets/easeus.png" align="center" width="100" title="EaseUS" alt="EaseUS"/></a>
|
|
|
|
|
|
## Introduction
|
|
|
|
|
|
_Anything that can be derived from the application state, should be. Automatically._
|
|
|
|
|
|
MobX is a signal based, battle-tested library that makes state management simple and scalable by transparently applying functional reactive programming.
|
|
|
The philosophy behind MobX is simple:
|
|
|
|
|
|
<div class="benefits">
|
|
|
<div>
|
|
|
<div class="pic">😙</div>
|
|
|
<div>
|
|
|
<h4>Straightforward</h4>
|
|
|
<p>Write minimalistic, boilerplate-free code that captures your intent.
|
|
|
Trying to update a record field? Simply use a normal JavaScript assignment —
|
|
|
the reactivity system will detect all your changes and propagate them out to where they are being used.
|
|
|
No special tools are required when updating data in an asynchronous process.
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<div class="pic">🚅</div>
|
|
|
<div>
|
|
|
<h4>Effortless optimal rendering</h4>
|
|
|
<p>
|
|
|
All changes to and uses of your data are tracked at runtime, building a dependency tree that captures all relations between state and output.
|
|
|
This guarantees that computations that depend on your state, like React components, run only when strictly needed.
|
|
|
There is no need to manually optimize components with error-prone and sub-optimal techniques like memoization and selectors.
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<div class="pic">🤹🏻♂️</div>
|
|
|
<div>
|
|
|
<h4>Architectural freedom</h4>
|
|
|
<p>
|
|
|
MobX is unopinionated and allows you to manage your application state outside of any UI framework.
|
|
|
This makes your code decoupled, portable, and above all, easily testable.
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
---
|
|
|
|
|
|
## A quick example
|
|
|
|
|
|
So what does code that uses MobX look like?
|
|
|
|
|
|
```javascript
|
|
|
import React from "react"
|
|
|
import ReactDOM from "react-dom"
|
|
|
import { makeAutoObservable } from "mobx"
|
|
|
import { observer } from "mobx-react-lite"
|
|
|
|
|
|
// Model the application state.
|
|
|
function createTimer() {
|
|
|
return makeAutoObservable({
|
|
|
secondsPassed: 0,
|
|
|
increase() {
|
|
|
this.secondsPassed += 1
|
|
|
},
|
|
|
reset() {
|
|
|
this.secondsPassed = 0
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
const myTimer = createTimer()
|
|
|
|
|
|
// Build a "user interface" that uses the observable state.
|
|
|
const TimerView = observer(({ timer }) => (
|
|
|
<button onClick={() => timer.reset()}>Seconds passed: {timer.secondsPassed}</button>
|
|
|
))
|
|
|
|
|
|
ReactDOM.render(<TimerView timer={myTimer} />, document.body)
|
|
|
|
|
|
// Update the 'Seconds passed: X' text every second.
|
|
|
setInterval(() => {
|
|
|
myTimer.increase()
|
|
|
}, 1000)
|
|
|
```
|
|
|
|
|
|
The `observer` wrapper around the `TimerView` React component will automatically detect that rendering
|
|
|
depends on the `timer.secondsPassed` observable, even though this relationship is not explicitly defined. The reactivity system will take care of re-rendering the component when _precisely that_ field is updated in the future.
|
|
|
|
|
|
Every event (`onClick` / `setInterval`) invokes an _action_ (`myTimer.increase` / `myTimer.reset`) that updates _observable state_ (`myTimer.secondsPassed`).
|
|
|
Changes in the observable state are propagated precisely to all _computations_ and _side effects_ (`TimerView`) that depend on the changes being made.
|
|
|
|
|
|
<img alt="MobX unidirectional flow" src="https://mobx.js.org/assets/flow2.png" align="center" />
|
|
|
|
|
|
This conceptual picture can be applied to the above example, or any other application using MobX.
|
|
|
|
|
|
## Getting started
|
|
|
|
|
|
To learn about the core concepts of MobX using a larger example, check out **[The gist of MobX](https://mobx.js.org/the-gist-of-mobx.html)** page, or take the **[10 minute interactive introduction to MobX and React](https://mobx.js.org/getting-started)**.
|
|
|
The philosophy and benefits of the mental model provided by MobX are also described in great detail in the blog posts [UI as an afterthought](https://michel.codes/blogs/ui-as-an-afterthought) and [How to decouple state and UI (a.k.a. you don’t need componentWillMount)](https://hackernoon.com/how-to-decouple-state-and-ui-a-k-a-you-dont-need-componentwillmount-cc90b787aa37).
|
|
|
|
|
|
## Further resources
|
|
|
|
|
|
- The [MobX cheat sheet](https://gum.co/fSocU) (£5) is both useful and sponsors the project
|
|
|
- [10 minute interactive introduction to MobX and React](https://mobx.js.org/getting-started)
|
|
|
- [Egghead.io course, based on MobX 3](https://egghead.io/courses/manage-complex-state-in-react-apps-with-mobx)
|
|
|
- The [MobX awesome list](https://github.com/mobxjs/awesome-mobx#awesome-mobx) – a long list of MobX resources and example projects
|
|
|
|
|
|
### The MobX book
|
|
|
|
|
|
<a href="https://www.packtpub.com/product/mobx-quick-start-guide/9781789344837"><img src="https://mobx.js.org/assets/book.jpg" height="120px" /></a>
|
|
|
|
|
|
The **[MobX Quick Start Guide](https://www.packtpub.com/product/mobx-quick-start-guide/9781789344837)** ($24.99) by [Pavan Podila](https://twitter.com/pavanpodila) and [Michel Weststrate](https://twitter.com/mweststrate) is available as an [ebook](https://www.packtpub.com/product/mobx-quick-start-guide/9781789344837), [paperback](https://www.amazon.com/MobX-Quick-Start-Guide-Supercharge/dp/1789344832), and on the [O'Reilly platform](https://www.oreilly.com/library/view/mobx-quick-start/9781789344837/) (see [preview](https://books.google.com/books?id=ALFmDwAAQBAJ&printsec=frontcover#v=onepage&q&f=false)).
|
|
|
|
|
|
### Videos
|
|
|
|
|
|
- [Introduction to MobX & React in 2020](https://www.youtube.com/watch?v=pnhIJA64ByY) by Leigh Halliday, _17 min_.
|
|
|
- [ReactNext 2016: Real World MobX](https://www.youtube.com/watch?v=Aws40KOx90U) by Michel Weststrate, _40 min_, [slides](https://docs.google.com/presentation/d/1DrI6Hc2xIPTLBkfNH8YczOcPXQTOaCIcDESdyVfG_bE/edit?usp=sharing).
|
|
|
- [CityJS 2020: MobX, from mutable to immutable, to observable data](https://youtu.be/sP7dtZm_Wx0?t=27050) by Michel Weststrate, _30 min_.
|
|
|
- [OpenSourceNorth: Practical React with MobX (ES5)](https://www.youtube.com/watch?v=XGwuM_u7UeQ) by Matt Ruby, _42 min_.
|
|
|
- [HolyJS 2019: MobX and the unique symbiosis of predictability and speed](https://www.youtube.com/watch?v=NBYbBbjZeX4&list=PL8sJahqnzh8JJD7xahG5zXkjfM5GOgcPA&index=21&t=0s) by Michel Weststrate, _59 min_.
|
|
|
- [React Amsterdam 2016: State Management Is Easy](https://www.youtube.com/watch?v=ApmSsu3qnf0&feature=youtu.be) by Michel Weststrate, _20 min_, [slides](https://speakerdeck.com/mweststrate/state-management-is-easy-introduction-to-mobx).
|
|
|
- {🚀} [React Live 2019: Reinventing MobX](https://www.youtube.com/watch?v=P_WqKZxpX8g) by Max Gallo, _27 min_.
|
|
|
|
|
|
## Credits
|
|
|
|
|
|
MobX is inspired by reactive programming principles, which are for example used in spreadsheets. It is inspired by model–view–viewmodel frameworks like [MeteorJS's Tracker](https://docs.meteor.com/api/tracker.html), [Knockout](https://knockoutjs.com/) and [Vue.js](https://vuejs.org/), but MobX brings _transparent functional reactive programming_ (TFRP, a concept which is further explained in the [MobX book](https://www.packtpub.com/product/mobx-quick-start-guide/9781789344837)) to the next level and provides a standalone implementation. It implements TFRP in a glitch-free, synchronous, predictable and efficient manner.
|
|
|
|
|
|
A ton of credit goes to [Mendix](https://github.com/mendix), for providing the flexibility and support to maintain MobX and the chance to prove the philosophy of MobX in a real, complex, performance critical applications.
|
