Meteor 1.5 ❤ React Loadable

Spoiler: it just works

If you keep up with the latest JavaScript news, you might have seen this article by james kyle about his React Loadable project, which establishes a new pattern for using dynamic import(...) to fetch React components and display loading indicators while they load.

I especially love this graphic illustrating the difference between a)using dynamic import(...) at the routing level and b) using it at the component level:

Route-based (left/red) vs. component-based (right/green) dynamic module loading

Testing react-loadable with Meteor 1.5

I was naturally curious if react-loadable would work in Meteor 1.5-beta.10, since Meteor should be able to take full advantage of these finer-grained module groupings. So, this morning I started with the react-loadable-example repository and attempted to turn it into a typical Meteor app.

I’m happy to say that the conversion was a success, as you can see from the changes that I made. These changes were pretty predictable:

Borrowing the .meteor directory from a fresh Meteor 1.5 app: meteor/react-loadable-example@2ea8ad5 Reorganizing the example code to have a typical Meteor application structure ( client and imports directories, static-html -style HTML, etc.): meteor/react-loadable-example@707028d Getting rid of unnecessary Babel/Webpack dependencies and configuration files (my favorite commit): meteor/react-loadable-example@1d5a12d

Now, these changes were only necessary because I was starting from an existing Webpack/Babel-based app. If you already have a Meteor app, or you’re starting one from scratch, you would just meteor npm install --save react-loadable , and start writing code using the Loadable component, in which case none of these changes would be necessary.

The react-loadable-example app uses yarn instead of npm , which works perfectly well with Meteor, though we recommend using meteor yarn to guarantee the correct version of Node. If you're not already using meteor yarn , just meteor npm install --global yarn to make it work.

Try it out yourself!

If you want to try out the example app yourself, just follow these steps from the README.md file:

git clone git@github.com:meteor/react-loadable-example.git

cd react-loadable-example

meteor npm install --global yarn # if necessary

meteor yarn

meteor run

Open up localhost:3000 in your browser, and behold the “Loaded!” text. If you watch very carefully, you’ll see “Loading…” appear briefly before “Loaded!” replaces it. The delay is pretty short, but it’s also artificial. You wouldn’t be able to see the “Loading…” indicator at all, if this 400ms delay was not included for demonstration purposes.