🖥 🔧 React + Mobx

[robbiedhickey]

Current Status

• Codebase in progress:
  hodorswit/react-mobx-realworld-example-app

• Interested in helping out? Say hello! 🎉
  gitter.im/realworld-dev/react-mobx

Todo:

• 🏁 Fork the starter repo & post the link in this issue
• 🎨 Create logo for repo & update issue status (@EricSimons)
• 🔨 Implement all of Conduit's functionality per the spec & API
• 👀 Peer review of final codebase by RealWorld admins & community (RFC)
• 🎉 Tag v1 release, move repo to main org, and officially list it on the README!

---

I believe the React community would benefit from more examples of Mobx architectures juxtaposed against Redux in non-trivial applications. The only example I'm aware of is the SoundCloud Client developed by the excellent @rwieruch

I'm still getting my feet wet in the React ecosystem, but will take this on if there is not interest from a more experienced member in the community.

[robbiedhickey]

I looked into the starter kit, but it occurred to me that it might make more sense to fork the existing React + Redux example app and refactor reducers to @observable stores. Any drawbacks to this approach?

I started a fork that adds the Mobx dependencies and migrates to custom-react-scripts to enable decorator support.

[rwieruch]

Thanks for mentioning. Just to give you some resources:

• SoundCloud Client in React + Redux
• SoundCloud Client in React + MobX
• PR: Refactoring from Redux to MobX of SoundCloud Client
• Tutorial: Refactoring from Redux to MobX
• Article: Comparison Redux and MobX

[EricSimons]

@hodorswit I think your approach is perfect — no need to reinvent the React parts of the app :)

Regarding finding someone w/ more experience, @mweststrate do you know of anyone? Or perhaps someone that could provide advice to @hodorswit as he builds it out?

[EricSimons]

@hodorswit I just updated the issue status + set up a Gitter room where we can handle collaborator coordination 👍

[mweststrate]

@capaj @andykog @benjamingr @mattruby anybody interested? ^

[benjamingr]

@mosho1

[mweststrate]

[Completely offtopic] @mosho1: Wondering about it since Friday, since I forgot to ask it, but did we meet last Friday without me realizing it? ;-) [/Completely offtopic]

[mattruby]

I'm out on this one. Yoyo exhibition tomorrow I need to prep for!

[andykog]

I love the idea, will try to allocate some time tomorrow

[EricSimons]

@hodorswit wanna add @andykog to the repo & coordinate work? Feel free to use the gitter room I set up for this Mobx implementation if need be :)

[srolel]

@benjamingr @hodorswit I'll see if I have time to take a jab at it this weekend. And no, @mweststrate, sadly we did not meet :P

[robbiedhickey]

Just added @mosho1 and @andykog to the repo!

[andykog]

Done, see hodorswit/react-mobx-realworld-example-app
Replaced redux with mobx, added/modified a few components here and there. Used singletone stores for simplicity.

[EricSimons]

Woot! Can one of the MobX folks here take a peek at @andykog's codebase and provide feedback (and/or approve it)? 💪

[mweststrate]

@EricSimons will try to check later today / tomorrow

[mweststrate]

@andykog wot that was quite an endeavour! looking good and idiomatic!

Didn't check all the components, but a small thing I noticed in the stores: ArticleStore has both articles and articlesRegistery. Could articles be expressed as @computed get articles() { return this.articlesRegistery.values() }?

[andykog]

@mweststrate, I think arrays are generally better suited for managing order, but in our case you proposition should work great. Thanks for the review!

[andykog]

(done)

[EricSimons]

@andykog @hodorswit just added you both to the 'offical' repo — also have react-mobx.realworld.io pointed to github pages, so feel free to set up GH pages branch and it will show up live at that URL :)

[EricSimons]

Just added the repo to the main README btw — amazing work guys! 👍 💯

Lmk when you have the GH pages set up & I'll close out this issue

[robbiedhickey]

@EricSimons The demo is running via gh-pages at the following URL https://gothinkster.github.io/react-mobx-realworld-example-app 👍

For some reason the https://react-mobx.realworld.io URL is 404'ing. Is it worthwhile to troubleshoot this or do you think the default gh-pages link is fine?

[anishkny]

https://react-mobx.realworld.io is up now