AutobahnReact, do some realtime with React easily!

[Raito Bezarius]

Hi !

I've presented at React.js #4 (Paris) yesterday a new micro-lib that I've built to reduce the boilerplate of using AutobahnJS with React.

You can install it through npm: `npm install autobahn-react` (Node.js & Browser support through Browserify).

The presentation was mainly in French, but anyway, you can check the slides here.

If you don't know what is React, you should check it (it's a lib to build user interface by components).

I like how by using React and Autobahn, you can build everything as components. Your user interface, your API.

But, I've encountered a lot of boilerplate codes using plain AutobahnJS which I find very common:

While you're connected, you want to become authenticated. You need to close the connection, instantiate a new Connection object with mostly the same parameters except you add an onchallenge function, authid. This is too much, I think (while I understand that the purpose is to expose a generic API).

For example, Meteor.js has a sweet API to inject data into his components:

var MyComponent = ReactMeteor.createClass({
  startMeteorSubscriptions: function() {
    Meteor.subscribe("players");
  },

  // Make sure your component implements this method.
  getMeteorState: function() {
    return {
      playerCount: Players.find().count(),
      ...
    };
  }
});

In your state, you'll have playerCount updated whenever someone publish to players.

I wanted the same with AutobahnReact, so you can do:

```js

var MyComponent = AutobahnReact.Decorators.requireSubscriptions(class extends React.Component {

   static observeSubscriptions() {

     return {

       messages: { route: 'com.example.new_messages', store: true }

     }

   }

});

```

And then, you'll have injected in your props a data object which contains a messages object.

But this is not all.

Authentication is made very simple, you only have to call: `AutobahnReact.Auth.logIn` or `AutobahnReact.Auth.signUp`, it returns a promise.

Authorization also is made very simple, you can have a JSX component (*) which gives you the ability to write that:

```js

...

  render() {

    return ( 

      <AutobahnReact.Auth.RolePolicy roleMustBe="admin">

        <DeleteButton />

      </AutobahnReact.Auth.RolePolicy />

    );

}

```

(*) : The component is yet to be ready!

Currently, there is a chat example and an "authflow" example in the repo, but instructions are missing on a lot of things, and it's quite in a mess.

Anyway, I hope it is helpful to the folks who are struggling with React and Autobahn, and maybe others who are wondering if they should switch from AngularJS to React or Ember to React or anything.

For a little bit of history and context, this "micro-lib" was at first created for my personal use in my code, because I found that I was rewriting a lot of things using AutobahnJS in my web app.

I think that I was not the only one to feel like that, so I've tried to give a little something to this community which gave me a lot (WAMP, AutobahnPython, AutobahnJS, Crossbar.io).

And I accept with pleasure any pull requests to improve furthermore the code, and I'll do my best to fix any issues you may encounter using AutobahnReact.

Kind regards,

Raito Bezarius.

[Raito Bezarius]

I screwed the formatting...

[Jimmy Jia]

This is pretty cool.

However, I would recommend against using this pattern with React. The first-class sideways data loading API in React has not yet landed: https://github.com/facebook/react/issues/3398

In general, I would also strongly recommend using a Flux pattern right now for a generic React app. You can of course set things up this way, but you're going to have a lot more power and flexibility with Flux-style action creators and stores for handling this for the time being.

[Raito Bezarius]

The problem with the Flux style is that at some point, in big React web app, you'll had to create a lot of stores and managing them becomes pretty difficult.

Sometimes, when you trigger an action, you need to see if it'll return correctly or not.

And using Flux forces you to use the "Fire callback and forget" method.

You need to treat problems either in action or stores.

And that is the start of all problems.

I like Flux, seriously. (I like even more the Alt.js implementation).

But I wonder if we don't try the bad approach, or maybe I just don't understand how the Flux concept works really...

Anyway, there is a lot of alternatives for Flux in React:

- Plain events

- Immutability

- CSP

- FRP

Flux is only one of those solutions.

And as GraphQL / Relay are not available as now like you said, I think that even a little thing can be cool to use.

[Jimmy Jia]

This is not quite the right forum for an extended discussion of this, but I'll just leave this to say that Flux is overwhelmingly the accepted pattern to use for state management in React apps. Certainly we're all looking forward to Relay + GraphQL, but in general Flux is just the accepted standard here, warts and all.

--
You received this message because you are subscribed to a topic in the Google Groups "Autobahn" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/autobahnws/7Z_x01T-f6Y/unsubscribe.
To unsubscribe from this group and all its topics, send an email to autobahnws+...@googlegroups.com.
To post to this group, send email to autob...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/autobahnws/c12de399-7188-42f6-935f-054da4713157%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.