adambrodzinski/meteor-flux-leaderboard

Flux Example with React & Meteor

meteor-flux-leaderboard

Flux Example with React & Meteor

Get the benifits of Relay without the wait or complexity

• Automatic optimistic UI updates (latency compensation)
• Real time database updates (like Uber's realtime driver location)
• Mini-Mongo client cache (easy clientside querying)
• Query based data subscriptions instead of REST (also API REST supported)
• Data operations in flux are written synchronously because of the optimistic UI

Plus

• Hot code reload
• Universal JS shared on client and server (isomorphic)
• Clean server-side code with fibers (soon with promise ES7 async/await)
• Easy microservice implementations via DDP
• Modular, swap out any default Meteor components you wish

Different Flux examples

• Alt: master branch
• Redux: redux branch
• Reflux: reflux-branch branch

***Make sure to open the console to see the lifecycle***

Full Readme coming soon! (See this readme for an explanation of the Meteor parts)

Usage

• cd meteor-flux-leaderboard
• meteor
• Open your browser to localhost:3000
• Checkout action/store logs in console after clicking about

### Todo

• Basic functinality
• Handle hot code reload (snapshot and restore on reload)
• Serverside rendering branch (started, shared files but no SSR)
• Immutible stores for rendering performance
• React Router using actions

Key pieces are in CollectionActions/Store, Tracker watches for changes on the Minimongo clientside cache and emits a change event when data changes. This retains all the optimistic UI and realtime data capabilities that Meteor offers.

 Tracker.autorun(computation => {
    var docs = Players.find({}).fetch();
    
    if (computation.firstRun) return; // ignore first empty run
    
    this.CollectionActions.playersChanged(docs);
  });

This is simplified by using a helper package, though I think it's important to know how it works.

trackCollection(Players, CollectionActions.playersChanged);

Alt perks

Alt lets you take snapshots of your apps state and can undo/redo state as needed. You can use this to capture your app state on an error then send log it for debugging remotely.

A chrome extension is availible to help with local debugging:
https://www.youtube.com/watch?v=LUksOCuRjkE

Contributors:

• donaldaverill
• levid

meteor-flux-leaderboard's Issues

Subscription

// Client Main.jsx

shDD = Meteor.subscribe ('DD', null);

Meteor.startup(function() {
  let ddCC = 0;
  Tracker.autorun (function(computation) {
      // Subscription.ready() is reactive.
      if (shDD.ready()) {
        if (computation.firstRun) {
          return;  // ignore first empty run
        }

        ddCC += 1;  // to say something changed
        store.dispatch(Actions.ddChanged(ddCC));
      }
  });
});


// On different times

shDD = Meteor.subscribe ('DD', 'aaaaa');
...
shDD = Meteor.subscribe ('DD', 'bbbbb');
...
shDD = Meteor.subscribe ('DD', 'ccccc');

Tracker listens those 3 subscriptions.! Even handle different.
Related records are in minimongo. (Caching like subsManager)
Is there something wrong?

Still active

Hey looking into flux and wanted to know if this example was still being worked on?

Use Collection.observe Instead?

I don't think it makes much of a difference but this might be easier to understand:

Players.find({}).observe({
  changed: (newDocs) => {
    CollectionActions.playersChanged(newDocs);
  }
});

http://stackoverflow.com/questions/25999324/meteor-deps-autorun-vs-collection-observe

Any plans to complete the Alt example referenced in the readme?

Hey Adam,

I know you are super busy but was wondering if you have any plans to complete the Alt example referenced towards the bottom of your readme? We've been using Meteor for quite awhile but are new to React and recently VERY new to Flux and it's varying flavors. We're being pushed to use Alt because of it's container abstraction and overall effort to decrease boilerplate. But I cannot find a good example of Meteor and Alt (ideally with React in the mix) anywhere and all your stuff is usually very solid so I keep checking for this and frowning.

If you have no time or plans for this that's cool - just let me know! I'll close this and keep looking.

Cloning the content of the subscribed collections means 2x memory usage ?

The reducer in the redux example clones the entire content of the tracked minimongo collections into the store.
That seems like a sad memory hog, wondering if there's any other way ?

SSR & Immutable Stores?

Was wondering where you are on the ToDo list? Are you including SSR soon and Immutable Stores?

How can I get posts by page id?

Hello, I do everything that you write in flux leaderboard. But i have one problem. For example, I have Page Component, It renders Post components inside. Every Post has pageID.
On route i mount page component with props ID, where i can get posts by pageID with your helpers?

Desperately waiting Redux example.

Best place to put Subscriptions and Fetchings on Redux?

Version with Alt.js timetravel

How do you enable the timetravel extension of Chrome to work ?

cf. https://github.com/goatslacker/alt-devtool

Seems there are some packages to add for this to work properly?

Redux sample improvement?

AppContainer.jsx

function mapDispatchToProps(dispatch) {
  return Redux.bindActionCreators(Actions, dispatch);
};

AppContainer = connect(mapStateToProps, mapDispatchToProps)(AppContainer);

in Player.jsx (and others), no need to define handleClick(), just call dispatch on onClick (should be function)

PlayerItem = React.createClass({
  getClassName() {
    var selectedId = this.props.selectedPlayerId;
    var playerId = this.props.player._id;
    return (selectedId === playerId) ? 'player selected' : 'player';
  },

  render() {
    var player = this.props.player;
    return (
      <li className={ this.getClassName() } 
          onClick={ () => this.props.selectPlayer(this.props.player._id) }>
        <span className="name">{ player.name }</span>
        <span className="score">{ player.score }</span>
      </li>
    );
  }
});

Even JedWatson/classnames also helpfull.

Determining whether a collection has loaded.

If I subscribe to data in a controller component thus:

componentWillMount() {
  this.sub = Meteor.subscribe('campaigns');
},

And I've connected this all up with Redux such that the component's props receive the campaigns:

const filterState = function filterState(state) {
  return {
    campaigns: state.campaigns,
  };
};

CampaignPage = connect(filterState)(CampaignPage);

Then it's possible to determine when the subscription is ready in render() with this.sub.ready() but at this time the data is in MiniMongo but not yet available via redux / this.props.campaigns. If I log the following within render():

console.log(this.sub.ready(), this.props.campaigns);

Then I'll get:

false undefined // sub not ready, data not available
true undefined  // sub ready, data in minimongo but not available via props
true Object {}  // sub ready, data available via redux / props

Do you know of any way to reliably determine when the data is loaded and available via redux props?