Beginner's Guide to React with Meteor

February 27, 2016 0 Comments by

Engineering Enterprise Applications with React and Meteor. Developing Reactive Meteor applications with React, is much different than developing MEAN stack applications with Express and Angular.

Managing Data

We've been using RESTful APIs and thick clients with Angular 1.x and the likes. This has been going on for many years going back to the days of Knockout, Ember and Backbone. The convention has been to use the server as a dumb storage layer. Both HATEOS and Swagger can be used to implement robust APIs for these kinds of applications. This would be the case if you were implementing a REST API with Meteor, but you probably wouldn't want to do that. There are better alternatives that have been around for much longer. We've grown accustomed to keeping a representation of our data model in the UI, and synchronizing this with our database via our API, incrementally and as needed. With Meteor and React we have different options, with pros and cons to handling this in different ways.

In the Client

With React we've got two ways to store data, with this.props and this.state. There are times you would choose to use one or the other, or both. If you expect the data to be available to you before the component begins to render you may define this in getInitialState, or while mounting with componentWillMount and componentDidMount. If this happens with an update you will probably use componentWillReceiveProps, componentWillUpdate or any of the other methods in the component lifecycle. Storing data may also involve the likes of Flux or Redux. In the React HowTo Pete Hunt says:

You’ll know when you need Flux. If you aren’t sure if you need it, you don’t need it.

Sending Data to the Server

Once your data in the UI changes, you will need to save it and trigger a sync with the server. In Angular 1.x we do this with the $http service, while in Backbone we may configure it to sync with our API when the model changes. Your jQuery soup application will do this with $.ajax. In Meteor you could define a Meteor.method and use Meteor.call() to send your data, anywhere in the component lifecycle.

Subscribing to Changes on the Server

Meteor provides the subscribe method. This will synchronize changes made in the database, currently mongo, with a copy of the database in the client, dubbed minimongo. To make this happen all you need to do is publish the data from the server. Any client that is subscribed to this collection, will receive notice when the collection changes. This comes for free, without having to implement SocketIO, Pusher, or long-polling. In your component you will use the ReactMeteorData mixin and that data will be made available to you in this.data.

Clusters

Using this Clustering solution in Meteor allows you to do load balancing and service discovery, if you choose not to use Node Cluster.

Folder Structure and Naming Conventions

There are multiple schools of thought in how to structure your Meteor application, as well as ideas in how to structure your React application. The guys at Bulletproof Meteor have tutorials and code samples showing how they chose to structure their application. This sample blog app from Mantra is a good place to start.

Acceptance Tests with Selenium and Webdriver

Acceptance tests prove to be invaluable as your application grows. These are some popular tools to start testing. Using WebDriver to fill out forms and complete user flows while capturing screenshots at supported resolutions, can save you a lot of time in the long run and is a valuable asset to deliver to your product team.

  • Jasmine
  • Babel
  • Selenium
  • Webpack
  • Protractor
  • PhantomJS

BDD with React Components

Testing React components is done with the React TestUtils addon. Once you learn what these methods do, testing your components becomes a breeze.

  • Jasmine
  • Babel
  • Webpack
  • Karma

BDD with Meteor Methods

  • Jasmine
  • Velocity

Tag cloud