Example with REST interaction

[rattrayalex]

Hi again,

Just checked out the next-update-readme-example branch and very impressed with all the progress you guys are making, on docs and code.

One thing that seems to be missing is examples around interacting with a REST API for fetching/syncing/saving data. I imagine it'd be fairly straightforward, especially along the lines of a "Web API Utils" idea... but if you guys have patterns that work it might be nice to share them so devs know what to expect & how to architect.

My assumed pattern:

// web-api.js

reactor.observe("user", updatedUser => _saveUserToServer(updatedUser));

socket.on("message", (message) => {
  if (message.type === "user") {
    reactor.dispatch("user.update", message.user)
  }
})

function _saveUserToServer(user) {
  reactor.dispatch("user.request", user);
  xhrStuff(url, user).then(resp => {
    reactor.dispatch("user.sync", resp.user)
  }).error(e => reactor.dispatch("user.error", e))
}

One thing I love about Backbone (and the reason I sometimes use it with Flux/React) is that it takes care of all this stuff for you, including tracking when an item is syncing, synced, invalid, or in an error state. It's also incredibly convenient to just set a "url" attribute and then call .save(). I'm not sure if it makes sense to incorporate all of that into Nuclear, but an example showing it off might be worthwhile.

[mindjuice]

You can find an example @jordangarcia gave of how Optimizely does async stuff in issue #5.

It's not exactly "built-in" to Nuclear, but it's pretty straight-forward.

[jordangarcia]

Thanks for the link to the issue @mindjuice.

I do plan on releasing a standardize RestApi module that can easily be plugged into Nuclear.

Would this be something that both of you would be interested in? If there is a lot of interest I can prioritize it to come out shortly after 0.6.0 is released.

[rattrayalex]

It's certainly something I would be interested in! I haven't played around
with the linked example (thanks for sharing!) but I think it looks like
it's in the right direction at least.

I may be interested in contributing if you think an outsider / Nuclear
newcomer could be useful to that project.

On Sat, Apr 25, 2015 at 12:19 AM Jordan Garcia notifications@github.com
wrote:

Thanks for the link to the issue @mindjuice https://github.com/mindjuice.

I do plan on releasing a standardize RestApi module that can easily be
plugged into Nuclear.

Would this be something that both of you would be interested in? If there
is a lot of interest I can prioritize it to come out shortly after 0.6.0 is
released.

—
Reply to this email directly or view it on GitHub
#26 (comment)
.

[bunkat]

I'd be interested in it as well.

[jordangarcia]

@rattrayalex I am very open to others contributing to this project. Shoot me an email at jordan@optimizely.com and we can discuss more.

[jordangarcia]

For those interested I have started work on making an example app using a generic Rest API module.

https://github.com/optimizely/nuclear-js/tree/rest-api-example/examples/rest-api-example/src/modules/rest-api

Ignore everything outside of modules right now as some of it was copied over from another project.

[rattrayalex]

Awesome! Sent.

On Sat, May 2, 2015 at 10:42 PM Jordan Garcia notifications@github.com
wrote:

@rattrayalex https://github.com/rattrayalex I am very open to others
contributing to this project. Shoot me an email at jordan@optimizely.com
and we can discuss more.

—
Reply to this email directly or view it on GitHub
#26 (comment)
.

[jordangarcia]

Updated the README with a more in-depth description of the architecture and added a User module example.

Would love feedback.

https://github.com/optimizely/nuclear-js/tree/rest-api-example/examples/rest-api-example/

[mindjuice]

Looks good, except: http://i.imgur.com/X4Fsf96.jpg :-)

I know it's only an example, but most people tend to stick closely to the examples. I discourage people from jQuery in general, but especially in React apps. It's a lot of overhead just for the ajax() method (~34K vs ~3.7K for Superagent).

Maybe Superagent instead?

https://www.npmjs.com/package/superagent

Even XmlHttpRequest or perhaps a promisified version:

https://www.npmjs.com/package/xhr-promise

There are some Superagent promise wrappers too:

https://www.npmjs.com/package/superagent-promise
https://www.npmjs.com/package/superagent-bluebird-promise

[jordangarcia]

@mindjuice that's a good point. I am used to using jQuery at work, I understand it's not ideal for most React apps. I will update the examples using a more lightweight ajax library..

[jtremback]

Can I suggest you use the fetch API? It's about as clean as any alternatives and is a browser API.

[mclouvem]

Hi @jordangarcia, first of all, congrats for your job with nuclear-js. I've just started use nuclear-js for an volunteer project. I'm interested in rest api feature. Do you have plan to create the V2 of rest-api example?

[jordangarcia]

@mclouvem it's not a huge priority now.

If you'd like to implement i'd happily accept PRs :)