A Study Plan For Meteor 1.3
Meteor 1.3 was just released this week, and it’s looking like it will introduce quite a bit of change in the Meteor ecosystem.
While these changes are all welcome improvements to the platform, they also mean parts of Discover Meteor might not be quite as relevant anymore.
We’re thinking on how to best update the book, but it’s a pretty major undertaking. So in the meantime, I’ve created a lesson plan for anybody who wants to stay up do date on the latest best practices, and doesn’t mind doing some studying by themselves.
I estimate going through the whole plan should take around 4-6 weeks for someone who’s completely unfamiliar with React or Meteor (but does have some programming basics).
And if you want to find some study partners to keep you company along the way, I recommend signing up for CodeBuddies (made with Meteor of course!).
Table Of Contents
- ES6 Modules & Syntax
- Application Architecture
- Collections & Models
- Publications & Subscriptions
- Data Loading
- User Accounts
- NPM & Meteor Packages
- Local State Management
There’s no question in my mind that in 2016, if you were to learn only one front-end framework it would have to be React. Not (just) for its technical merits, but because it has the most momentum and the largest community.
And the reason why I would recommend learning React before anything else is simply that while you can’t do much with Meteor without a front-end, you can definitely build simple apps and components in pure React without any back-end.
If you want to learn React properly, I recommend the excellent React For Beginners course. It took me about a week to get through it, but you could definitely do it faster.
On the other hand, if you’re only interested in learning as much React as you need to get started, check out my own React Primer For Meteor.
The Meteor Guide also has an excellent React section. Pay close attention to the concept of “smart” and “dumb” components in particular.
Finally, for an alternative perspective on how to learn React check out this excellent forum post by Serkan Durusoy.
- Be able to build a simple component.
- Learn about the main component lifecycle methods.
- Understand how to use state and props.
- Understand how to write functional stateless components.
ES6 Modules & Syntax
If you’ve gone through the React For Beginners course, you’ll already be familiar with the more modern ES6 syntax and the concept of using modules. If not, now is a good time to study up.
And don’t hesitate to ask someone if you find yourself perplexed by any esoteric expressions!
- Learn to use modules with
- Master object destructuring.
- Understand fat arrow functions (and how they affect
- Understand ES6 classes (especially with regards to React components).
Once you understand modules, you’ll want to take a few moments to stop and think about how your application’s codebase is going to be structured.
The Application Structure section of the Meteor Guide is a good place to start, but here’s what you need to know in a nutshell.
Pre-1.3, you’d put your client code in
/client, your server code in
/server, and any code meant to be shared between both environment in any other directory such as
Post-1.3, you’ll organize code by what it does, rather than where it runs.
apidirectory holds all your app’s logic: collections, methods, publications, etc. Note that it should not contain any UI (i.e. React) code.
uidirectory on the other hand holds all your front-end React code, and it should ideally only contain React code.
- Finally, I would personally recommend adding a third
containersdirectory that holds your data layer (using the container pattern) in order to keep your
uidirectory free from any Meteor-specific code.
You’ll notice this actually aligns fairly well with the MVC pattern:
api holds the models,
ui holds the views, and
containers holds the controller.
This architecture brings a lot of advantages in terms of flexibility and maintainability: if you ever need to migrate from React to another front-end framework, all you’ll have to do is worry about the
containers directories, leaving
And if you ever have to (god forbid!) migrate away from Meteor, you’ll also be able to just move your
ui front-end to your new stack.
If you prefer, you can also check out Mantra, an alternate set of architecture recommendation put out by the geniuses behind Kadira. If you decide to use Mantra, the rest of this guide should still be equally applicable.
- Learn about the smart/dumb component pattern.
- Understand how the various parts of a Meteor app fit together.
Collections & Models
Now we’re finally getting into Meteor territory. Before you can build any kind of Meteor app, you’ll need to know about Collections, which is how Meteor stores and syncs data.
- Master the Collections API (
- Learn how to attach a model to a collection.
Publications & Subscriptions
In the long run, the current publication and subscription system we know
and love will probably go away to be replaced with Apollo. But for now, there’s no way around learning how it works.
And if you want a more in-depth look, as usual the Meteor Guide has got you covered.
- Understand how publications and subscriptions work.
- Publish some data from the server to the client.
Once you’re publishing and subscribing data, you can tie everything together by loading this data into your React components.
Remember how we said earlier that your React code should be free of any Meteor-specific calls if possible? This means no
Meteor.subscribe(). Instead, we outsource that task to specially designated components known as containers.
A container’s sole role is fetching data and passing it on as props to other components.
There’s quite a few ways to create containers in Meteor. The one officially provided by MDG is the
createContainer function, although React Komposer is also a popular choice. And then there’s other, more Blaze-like techniques such as Tracker.Component and TrackerReact.
- Learn to load data at the component level.
- Learn to load data globally at the app level.
At this time, the best router for Meteor apps is probably FlowRouter: it’s simple, it’s tailor-made for Meteor, and it even handles server-side rendering.
- Understand how to define routes.
- Learn to use router helpers to build links inside your app.
It’s hard to have an app without user accounts, so now would be a good time to brush up on Meteor’s accounts system.
- Add a user accounts UI to your app.
So far we haven’t focused much on Meteor’s internals, but it’s probably a good idea to have at least some notion of how it all works behind the scenes.
A good place to start is by understanding reactivity, which you can do by reading our blog post on the topic.
- Understand reactive contexts and reactive data sources.
The next step is understanding how to manipulate data. Protip: stay away from Allow & Deny, and use methods instead.
Be sure to check out the Validated Method package to add a little structure to your methods.
Now might also be a good time to read up on latency compensation (a.k.a. optimistic updates). The Encyclopedia section of this site has quite a few articles on the topic.
- Add methods for basic operations (insert, update, remove).
- Understand latency compensation and see it in action in a method.
Once you have methods, you’ll need a way to send them data. In other words, forms.
For that I suggest checking out the Formsy forms library. Although it’s not Meteor-specific, it works just fine inside any Meteor app.
There’s also a Meteor React Forms package, although I haven’t personally had a chance to use it yet.
- Add a form to your app.
NPM & Meteor Packages
With Meteor 1.3’s improved support for using regular NPM packages, the Meteor package landscape is starting to change.
Familiarizing yourself with Meteor’s own package system is still a good idea, but you should be aiming to use NPM packages whenever possible.
As usual, the Meteor Guide is recommended reading.
- Create a local Meteor package.
- Understand how to import from NPM and Meteor packages.
Local State Management
While most of an application’s state will be contained in its database, sooner or later you’ll run into use cases where data needs to be local to an app or to a component.
Common examples include search strings, filtering options, pagination counts, or whether a modal is open or closed.
Meteor gives you a couple different places to store this type of data:
- The URL (managed by FlowRouter)
- The Session
- ReactiveVar (and ReactiveDict)
- Local collections
- React component state
- React context
They all have their pros and cons. For example, storing data into a component’s state makes the component self-contained, but also turns it into a black box that doesn’t expose its state to the rest of the app.
So there’s no one-size-fits-all answer, but it’s worth taking some time to think about this topic and identify the option that works best for your specific use cases.
- Understand the difference between local and global state.
- Try out some of the different state management techniques.
If you want to go one step further, Redux is quickly establishing itself as the best way to manage state in complex applications.
Check out the excellent (and free!) Getting Started With Redux video series to get a quick intro.
And Abhi Ayier also has a great How We Redux series on Medium.
- Understand Redux’s philosophy and the Flux pattern.
The Meteor Guide features a brand new section on testing, so I recommend simply following their guidelines on this one.
- Write a few unit and integration tests.
Last Step: Go Build Stuff!
If you’ve made it all the way through then congratulations, you should now be well-equipped to build modern, maintainable Meteor apps!
Of course there will always be more to learn, but hopefully this lesson plan will have at least given you a strong foundation to start from.
As usual, if you have any questions or feedback, feel free to let me know in the comments.