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.
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.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
componentDidMount. If this happens with an update you will probably use
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
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.
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.
BDD with Meteor Methods