|
3 | 3 |
|
4 | 4 | # MobX Angular |
5 | 5 |
|
6 | | -## MobX connector for Angular |
| 6 | +## Why MobX? |
7 | 7 |
|
8 | | -If you're looking for the Angular 1 version version, it's [here](https://github.com/mobxjs/ng1-mobx) |
| 8 | +Angular's change detection is great, but it updates the entire UI on every change, and doesn't have any knowledge of how our components use our services. |
9 | 9 |
|
10 | | -## Why MobX? |
| 10 | +MobX automatically knows what properties your components use from the stores and listens to changes. It allows you to automatically react to changes and update only the parts of the UI that need to be updated, making your app performant. |
11 | 11 |
|
12 | | -Angular's change detection is great, but it updates the entire UI on every change, and doesn't have any knowledge of how our components use our services. |
13 | | -MobX automatically knows what properties your components use from the stores and listens to changes. It allows you to automatically react to changes and update only the parts of the UI that need to be updated, making your app performant. |
14 | 12 | With MobX you manage your app's state using mutable objects and classes. It also helps you create computed values and side-effects. |
15 | 13 |
|
16 | | -[Learn more about MobX](https://mobx.js.org/README.html) |
| 14 | +[Learn more about MobX](https://mobx.js.org/README.html)! |
17 | 15 |
|
18 | 16 | ## This library |
19 | 17 |
|
@@ -72,6 +70,7 @@ Under the hood, this magic happens by running `autorun(() => view.detectChanges( |
72 | 70 | ## Why directive and not decorator? |
73 | 71 |
|
74 | 72 | In order to inject the change detector, and implement lifecycle hooks like ngOnDestroy, this library uses a directive, which is the most elegant solution in Angular. |
| 73 | + |
75 | 74 | It also has the benefit of allowing you to easily have multiple observed sections of your component's template, in case it is required. |
76 | 75 |
|
77 | 76 | ## Detach |
@@ -204,21 +203,6 @@ MobX will run change detection manually for you on the components that need to b |
204 | 203 | - In Angular 5 there's a new option, which is to disable Zone completely when bootstrapping the app (ngZone: 'noop'). |
205 | 204 | - Please note that this means that all 3rd-party components will stop working (because they rely on change detection to work via Zone). |
206 | 205 |
|
207 | | -## Debugging MobX (only for mobx-angular versions 2.X and below) |
208 | | - |
209 | | -mobx-angular comes with a handy debug tool. |
210 | | -To turn on / off the debug tool, open developer tools' console, and run: |
211 | | - |
212 | | -```ts |
213 | | -mobxAngularDebug(true); // turn on |
214 | | -mobxAngularDebug(false); // turn off |
215 | | -``` |
216 | | - |
217 | | -Then you can right-click on the components that use mobx directives, and you will see a console log of the components' dependencies. |
218 | | -Also, every action that happens in mobx will be console.logged in a nice way. |
219 | | - |
220 | | -TBD - support debugging for MobX 4 |
221 | | - |
222 | 206 | ## AoT |
223 | 207 |
|
224 | 208 | Some people complained about AoT when using mobx decorators inside components. |
@@ -262,12 +246,31 @@ npm run build |
262 | 246 | npm run start <example> # for example `npm run start todo` |
263 | 247 | ``` |
264 | 248 |
|
| 249 | +## Debugging MobX (only for mobx-angular versions 2.X and below) |
| 250 | + |
| 251 | +mobx-angular comes with a handy debug tool. |
| 252 | +To turn on / off the debug tool, open developer tools' console, and run: |
| 253 | + |
| 254 | +```ts |
| 255 | +mobxAngularDebug(true); // turn on |
| 256 | +mobxAngularDebug(false); // turn off |
| 257 | +``` |
| 258 | + |
| 259 | +Then you can right-click on the components that use mobx directives, and you will see a console log of the components' dependencies. |
| 260 | +Also, every action that happens in mobx will be console.logged in a nice way. |
| 261 | + |
| 262 | +TBD - support debugging for MobX 4 |
| 263 | + |
| 264 | +## Legacy Versions |
| 265 | + |
| 266 | +If you're looking for the Angular 1 version version, it's [here](https://github.com/mobxjs/ng1-mobx). |
| 267 | + |
265 | 268 | ## Contributing |
266 | 269 |
|
267 | 270 | Important things to always consider when changing code in this library: |
268 | 271 |
|
269 | | -- Make it readable, add comments when necessary |
| 272 | +- Make it readable, add comments when necessary. |
270 | 273 | - Add unit tests for the new functionality. Think about edge cases. Make sure tests pass before merging. |
271 | | -- Keep backwards compatibility. Don't force users to refactor their code, even if it means adding a new API instead of changing an exsiting one. |
272 | | -- Keep SEMVER. If breaking changes is unavoidable - increase a major version. New features, however small should increase a minor version, and patch is for bugfixes/performance/refactoring |
273 | | -- Think about bundle size and speed |
| 274 | +- Keep backwards compatibility. Don't force users to refactor their code, even if it means adding a new API instead of changing an existing one. |
| 275 | +- Keep SEMVER. If breaking changes is unavoidable - increase a major version. New features, however small should increase a minor version, and patch is for bugfixes/performance/refactoring. |
| 276 | +- Think about bundle size and speed. |
0 commit comments