New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Example: real-life with router/ajax etc #104

Closed
Keats opened this Issue Jan 30, 2016 · 45 comments

Comments

Projects
None yet
@Keats
Copy link

Keats commented Jan 30, 2016

I'm aware that you are currently working on 2.0 but once it's released, an example on how to make a small app with routing/ajax queries would be great for people like me using react-router/redux to get a feel of how it looks with mobservable.

@geohuz

This comment has been minimized.

Copy link

geohuz commented Feb 13, 2016

+1

@mweststrate

This comment has been minimized.

Copy link
Member

mweststrate commented Feb 21, 2016

This question definitely deserves a better answer, but in short:

  1. For async actions nothing special needs to be done, just modify state before and after completion :). See also: http://mweststrate.github.io/mobservable/best/actions.html
  2. Routing was written by some team mates of mine, but I looked into it, we use react-router and there is nothing special in there I think. Routes matches certain components, which upon mounting extract the necessary params to update the state, kick off requests etc. Just make sure components render something valid before and after the necessary requests are made (see also the async point).
  3. In the mobservable-react-todomvc example the director router library is used, which also just works fine.
@ikido

This comment has been minimized.

Copy link

ikido commented Feb 27, 2016

Hi guys, I'm actually working on this and hopefully will be able to share an example app soon. I wrote simple relations lib (https://github.com/ikido/mobservable-model), I'll publish the docs soon and then finish up the example. What kind of application you would like to see? I was working on simple list of github users and repos, but maybe there will be better ideas. Really love mobx, let's spread the word =)

@Keats

This comment has been minimized.

Copy link
Author

Keats commented Feb 27, 2016

I think what was missing early on for redux (and arguably still now) is something like a auth route so to use github users/repos as an example: a small app to favorite repos.

3 routes:

  • index: preload liked repos if logged in otherwise show a message telling to login
  • login: basic login that does a (fake) ajax call and set something in localstorage to make the user logged in
  • add: login protect page, to add a repo to the liked list

From our app (react/redux), the most tricky part was to preload data and handle all the possible errors generically, we ended up with a custom middleware that checks the ajax status code and do different things, ie 401 -> logout, etc

@ikido

This comment has been minimized.

Copy link

ikido commented Feb 27, 2016

@Keats what's so tricky about the middleware? Mobx is not going to solve this for you, you still need to make a request and then act upon results. You just don't need a special middleware, you can make a request from any place in your code. Are you asking where to put this logic in app using mobx?

@mweststrate

This comment has been minimized.

Copy link
Member

mweststrate commented Feb 27, 2016

Does somebody know a challenge or standard app that has this kind of complexity?

TodoMVC has been ported to Mobservable and has routing but not authentication (will update it to MobX soonish). The real world example from Redux also doesn't seem to have authentication (otherwise that might be an interesting one to rebuild using MobX, maybe I do that anyway). All apps with authentication I've build so far are closed source. Although it is actually in practice quite simple, just have some observable that identifies whether people are logged in or not available through some store, context or global state. But it would be good to have an example nonetheless.

@ikido

This comment has been minimized.

Copy link

ikido commented Feb 27, 2016

Problem with real world example from redux is that they support only reading, while a lot of apps are actually CRUD. My idea is to have simple app with github login that will show you some data and will allow you to manipulate it — list of favourites is a good example. I wonder why authentication is a challenge, you just make a request and store authentication status along with a token and user data. @mweststrate do you think it will be ok to use github login or should I use local auth?

@Keats

This comment has been minimized.

Copy link
Author

Keats commented Feb 28, 2016

The issue with authentication was more with react-router and how to check login status before transitioning so more of a router issue.

Unrelated but would you put component state in mobx as well (ie only have stateless components) or have statetul components?

@mweststrate

This comment has been minimized.

Copy link
Member

mweststrate commented Feb 28, 2016

@ikido looking really forward to the app!

I just updated the TodoMVC example to mobx as well, it contains at least routing and data (de) serialization:

@Keats
Except for maybe some local ui state, It is usually very pleasant to not store ui state in components themselves. Note btw that you can use the @observable and @computed decorators inside react component classes. This works as expected and a valid alternative to using React's own state mechanism. It avoids running into bugs where for example setState didn't update the state object yet due to the asynchronous nature of setState.

@Keats

This comment has been minimized.

Copy link
Author

Keats commented Feb 28, 2016

@mweststrate I'll also try to mix https://github.com/trueadm/inferno stateless components and mobx once they release the next version of inferno as well.

@DjebbZ

This comment has been minimized.

Copy link

DjebbZ commented Mar 3, 2016

There's CRUD in this app, but André Staltz from Cycle.js created an interesting challenge regarding async :https://github.com/staltz/flux-challenge

It may be worth it to implement it with mobx

@mweststrate

This comment has been minimized.

Copy link
Member

mweststrate commented Mar 3, 2016

@DjebbZ that was already done :) https://github.com/staltz/flux-challenge/blob/master/submissions/mweststrate/index.tsx

Although it is slightly outdated (it uses mobservable instead of mobx but I think the only technical difference is that autorunUntil is now called when). I'll try to find some time to update it.

@DjebbZ

This comment has been minimized.

Copy link

DjebbZ commented Mar 3, 2016

Oh didn't see it, since submissions are classified by username and not techno. Good !

@mweststrate

This comment has been minimized.

Copy link
Member

mweststrate commented Mar 7, 2016

Here are some other cool MobX based projects:

@mweststrate mweststrate added the example label Mar 7, 2016

@cj

This comment has been minimized.

Copy link

cj commented Mar 10, 2016

@nightwolfz any reason you deleted mobx-starter? I'd love to check it out.

@mweststrate

This comment has been minimized.

Copy link
Member

mweststrate commented Mar 10, 2016

@cj it was retracted by his employer. Too much competitive advantages I guess 😄 😭

@mweststrate

This comment has been minimized.

Copy link
Member

mweststrate commented Mar 15, 2016

In the mean time, I ported https://github.com/mweststrate/react-particles-experiment to MobX, nice example if you want to do MobX + Flux action dispatching.

@mweststrate

This comment has been minimized.

Copy link
Member

mweststrate commented Mar 23, 2016

Here is a single stack overflow answer that does routing, authentication, ajax and context based store passing: http://stackoverflow.com/a/36164488/1983583

@foxhound87

This comment has been minimized.

Copy link

foxhound87 commented Mar 24, 2016

I made an example app with some cool features with the main goal to keep things in the simplest possible way. It uses React + Feathers + Mobx and called it RFX stack :D

I think the challenge is to reduce the amount of dependencies required to start up a decent react project and would be nice for the community to have a mini-framework to deal with react out of the box without adding 50+ dependencies or compromise flexibility.

take a look:
https://github.com/foxhound87/rfx-stack

I hope it can help someone,
if you like it or would like to contribute, let me know and don't forget to star the repo!

@simpixelated

This comment has been minimized.

Copy link

simpixelated commented Mar 24, 2016

Thanks @foxhound87 and @mweststrate for the examples! The app from your Stack Overflow answer is particularly helpful: https://github.com/contacts-mvc/mobx-react-typescript

I'm slowly converting a redux app to mobx and the only problem has been creating a pattern for the architecture. Examples projects using async, routing, authentication, etc. are super helpful, unfortunately mobx just isn't as popular as redux (yet), so there's not a lot out there. So every bit helps. Thanks!

hellectronic added a commit to hellectronic/mobx that referenced this issue Apr 22, 2016

Added examples and related projects to README
Added some examples and related projects that were mention in mobxjs#104 and in docs/LINKS.md to the README.

hellectronic added a commit to hellectronic/mobx that referenced this issue Apr 25, 2016

Added examples and related projects to README
Added some examples and related projects that were mention in mobxjs#104 and in docs/LINKS.md to the README.
@mweststrate

This comment has been minimized.

Copy link
Member

mweststrate commented Apr 25, 2016

@andykog just added server side rendering and server communication to the TodoMVC example repo :) https://github.com/mobxjs/mobx-react-todomvc

@mweststrate

This comment has been minimized.

Copy link
Member

mweststrate commented Apr 26, 2016

Example of server side rendering + routing with react-router by @kuuup: https://github.com/kuuup/mobx-ssr-example

@mweststrate mweststrate referenced this issue Apr 26, 2016

Closed

MobX roadmap #219

5 of 11 tasks complete
@vinej

This comment has been minimized.

Copy link
Contributor

vinej commented May 26, 2016

I just did an example of React/Mobx using a Flux pattern inspired by Redux. The example is complete with a REST server. I hope it will give some ideas to others. For the moment, it's only a proof of concept.

https://github.com/vinej/react-portal

Thanks

@luisherranz

This comment has been minimized.

Copy link
Member

luisherranz commented May 27, 2016

@vinej very interesting 👍

@otbe

This comment has been minimized.

Copy link

otbe commented Jun 7, 2016

Throwing DWatch into the pot. Powered by mobx, react(-)router, IOC, REST API .... bundled as an electron app.

https://github.com/Mercateo/dwatch

@mweststrate

This comment has been minimized.

Copy link
Member

mweststrate commented Jun 11, 2016

This might help with building a form abstraction: https://jsfiddle.net/royriojas/qp5p33cn/

Spectacle Editor is being build with MobX (really cool!) blog, source

Also the Mendix Webmodeler is being build using MobX, more information will probably follow soon: unofficial recording

@vinej

This comment has been minimized.

Copy link
Contributor

vinej commented Jun 13, 2016

I will try the form abstraction in my example. It's going to simplify my code.

Thanks

@mweststrate

This comment has been minimized.

Copy link
Member

mweststrate commented Jun 14, 2016

Also a nice overview: https://github.com/xgrommx/mobx-ecosystem

@mweststrate

This comment has been minimized.

Copy link
Member

mweststrate commented Jun 16, 2016

Nice abstractions for forms:
https://github.com/royriojas/mobx-form
and another form abstraction: https://jsfiddle.net/darthapo/k63ujjsp/

@vinej

This comment has been minimized.

Copy link
Contributor

vinej commented Jun 19, 2016

The React example of a Flux implementation with Mobx as changed a lot recently to follow the best practices of React

Now stores are passed as props to Component to help with unit testing and props are validated with 'PropsType' and Models. After a while I have found that I need to define models in order to validate the props properly with something like : React.PropTypes.shape(TodoModel.shape()). The next step will be to add some unit tests examples with mocha and chai.

take a look : https://github.com/vinej/react-portal

Thanks

@mweststrate

This comment has been minimized.

Copy link
Member

mweststrate commented Jun 28, 2016

I just compiled all usable projects I'm aware of into one list. Items might be missing so feel free to add items! http://mobxjs.github.io/mobx/faq/related.html

@nightwolfz

This comment has been minimized.

Copy link

nightwolfz commented Jul 3, 2016

Mobx-starter is back !

https://github.com/nightwolfz/mobx-starter

@iam4x

This comment has been minimized.

Copy link

iam4x commented Jul 4, 2016

I'm also building a new universal/isomorphic boilerplate with latests libraries (react-hot-loader@3 webpack@2 css-modules postcss and mobx)

https://github.com/iam4x/futureRX

@mweststrate

This comment has been minimized.

Copy link
Member

mweststrate commented Jul 4, 2016

@nightwolfz w00t!

@iam4x looking cool!

I'll add both to the related projects section soon!

@vinej

This comment has been minimized.

Copy link
Contributor

vinej commented Jul 5, 2016

I created a simple version of the flux pattern I developed for the react-portal : ReMux

https://www.github.com/vinej/react-remux

Thanks

@eswat2

This comment has been minimized.

Copy link

eswat2 commented Jul 22, 2016

i worked on this simple app after talking the egghead.io class on Build Your First React.js App:

https://github.com/eswat2/egghead-mobx

The whole point was to explore adding a state management framework to the original app from the course. I started out thinking i'd use Redux, but finally went with Mobx instead. Some of the features include;

  • refined UI elements
  • a store built on Mobx
  • uses axios for all api calls
  • a notes REST api
  • a simple html5 pushstate mechanism
  • saves last valid username to local storage
  • initializes app from URL if it matches /profile/:username
  • otherwise it reloads last username from local storage
  • a simple navigator for visited usernames

It doesn't use a router, everything is managed thru the store.

If you'd like to see it in action, it's been deployed to heroku:

https://egghead-mobx.herokuapp.com

The details on how this was deployed can be found in this repo:

https://github.com/eswat2/heroku-egghead-mobx

This deployment includes a simple notes REST api which persists notes to a mongodb instance running on mlab.

I realize that this doesn't meet all of the requirements for this thread, but i hope it can be useful to some of you. I know it's opened my eyes to a new way of thinking about building apps.

@mweststrate

This comment has been minimized.

Copy link
Member

mweststrate commented Jul 24, 2016

Thanks for sharing!

@Keats

This comment has been minimized.

Copy link
Author

Keats commented Aug 31, 2016

How are people handling fetching data before rendering a route in react-router? a store that keeps track of prefetch request and you observe the status at the top level and render nothing/a loading screen if there is a promise?

@mweststrate

This comment has been minimized.

Copy link
Member

mweststrate commented Aug 31, 2016

You can store the request / response in a store. mobxUtil.fromPromise is
useful for that. See
https://medium.com/@mweststrate/how-to-decouple-state-and-ui-a-k-a-you-dont-need-componentwillmount-cc90b787aa37
for
some examples

Op wo 31 aug. 2016 om 21:50 schreef Vincent Prouillet <
notifications@github.com>:

How are people handling fetching data before rendering a route in
react-router? a store that keeps track of prefetch request and you observe
the status at the top level and render nothing/a loading screen if there is
a promise?


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#104 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABvGhO25A9X18gybXXNuVOuWM3-wvuNwks5qldr6gaJpZM4HPyji
.

@rstudner

This comment has been minimized.

Copy link

rstudner commented Oct 5, 2016

@nightwolfz, @iam4x - have you two thought of combining your efforts? I'm looking for a mobx boilerplate to start a project and just like in the react/redux land -- the # of choices causes analysis paralysis hah.

@nightwolfz

This comment has been minimized.

Copy link

nightwolfz commented Oct 10, 2016

@rstudner That will be difficult since we took different approaches. I want mobx-starter to just be the minimum required to run a production ready website.

@tiagowippel

This comment has been minimized.

Copy link

tiagowippel commented Oct 28, 2016

Hi, I created a simple CRUD example using Mobx + Material-UI.

https://github.com/tiagowippel/mobx-crud

@hawkins

This comment has been minimized.

Copy link
Member

hawkins commented Jul 28, 2017

We have a number of resources on this issue and even more over at the MobX awesome list, including those with react router and redux, like the original question asked for - is this issue safe to be closed?

@mweststrate

This comment has been minimized.

Copy link
Member

mweststrate commented Dec 4, 2017

Somehow https://github.com/gothinkster/react-mobx-realworld-example-app is still missing in this thread....

@mweststrate

This comment has been minimized.

Copy link
Member

mweststrate commented Dec 4, 2017

Closing this issue as the awesome list linked above serves this purpose now

@mweststrate mweststrate closed this Dec 4, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment