FSM 1: Introducing Fresh Start Meteor
“Great. Another f-ing Meteor series. :(” you say. I get it. We developers have mountains of resources to sift through already, and none of them play well together as it is. For each new project we stitch together bits of separate tutorials, trying to Do It Better Than Last Time while hoping we might get lucky and discover the “right way” to build apps with Meteor. It can be frustrating as hell more often than not, but this open-endedness is by design.
Back in 2012 the Meteor Development Group (MDG) had a decision to make: should they build a platform or a framework? They chose the former, and while it might seem like a trivial distinction, it is the reason for the situation we’re in today. If you’re interested in learning more you should read up on why the MDG made the right call and where Meteor might be heading.
What makes this series any better than another? I’ll let you decide if it actually is, but here’s why I believe it has a shot:
- It’s plug-and-play. The end result of this guide will be an actual framework that can be easily applied to any fresh Meteor project to jumpstart with confidence.
- It’s generic. I make no assumptions about your project beyond the framework I propose, and I don’t force you to build a particular app to follow along.
- It’s distilled. I have combined suggestions from tutorials, blog posts, guides, help questions, and forum threads into my own projects, learning what works and what doesn’t through trial and error. Let’s be real, it was mostly error.
- It’s explanatory. Rather than sifting through a scary, foreign codebase at the end, you’ll understand how it works inside and out compared to alternative methods, and feel confident in the decisions that were made.
- It’s forward-thinking. This is the only guide I know of that agnostically blends the default Meteor stack with ES6, React (JSX), Redux, FlowRouter, and BEM SCSS, each of which are industry-leading tools and standards you’re likely already using.
- It’s open. The framework will be publicly available on GitHub and both the codebase and series will evolve together with input from the community.
- It’s temporary. As the MDG takes more steps toward official project structure guidelines, this guide will conform to them. The decisions herein are meant only to patch what is missing.
If you’re new to Meteor, ES6, React, JSX, Redux, MongoDB, FlowRouter, SCSS, or BEM, the rest of this article will help you understand why I think they’re worth including and what their roles will be in the final product. However, I would recommend approaching this guide having had some experience with the platform (you might not want this to be your first Meteor project) as well as HTML, CSS, and JavaScript.
If you’re a Meteor vet, maybe you are new to using ES6 or React/Redux, are hoping to see how they integrate together into Meteor, or maybe you’ve just been hunting forever for the right folder structure for your next project.
Wherever you’re coming from, I hope you find this guide to be useful. Please comment with questions or suggestions and I will do my best to clear up any confusion. Enjoy!
— Teagan Atwater
** This guide is neither affiliated with nor endorsed by the MDG **
A quick glance in the toolbox
What is Meteor?
Meteor is a full-stack JavaScript web application platform. It has quickly gained dominance as the premier JavaScript-only stack, has a large community, abundant help docs, and is (for what it’s worth) backed by significant venture capital.
The only solid competitors I have found are Sails and Derby, neither of which are powerful enough to replace Meteor entirely, though either would be great, lightweight solutions if you’re willing to build a more complicated stack.
What is ES6?
ES6, or EcmaScript6 (also known as ES2015 or EcmaScript2015) is the latest language specification for JavaScript. It is the first major JS language update since 2009, and there are tons of cool new features to play with. Meteor 1.3 and onward officially supports ES6 syntax, and here’s a list of new ES6 features that are ready for us to explore.
Side note: EcmaScript is transitioning to a yearly release, so while last year’s version is best known by its version number (6), starting this year it will use only the version year in its name. Hooray for less confusion!
What is React?
React was created by the crew at Facebook and is one of three view rendering libraries we can to use with Meteor as of version 1.3, whereas before we were limited to only Meteor’s Blaze library (Angular was also added). An extensive comparison of the three yielded React as my pick for the winner. In a future article I will explain this decision, but for now if you’re curious the post I referenced above on where Meteor might be heading goes into some pretty good detail.
JSX
JSX is a preprocessor for writing XML in JavaScript. While you can use React without it, it is much easier to bite the bullet and overcome the dread of combining your presentation and logic layers. I know it feels strange, but I quickly came to love it because XML provides so much more flexibility than plain HTML.
Redux
Redux is a state container for React, though it could also be used by any other JavaScript rendering library. It’s also a lightweight, partial implementation of Flux, a data flow architecture also thought up by developers at Facebook. Unlike traditional Model-View-Controller (MVC) architecture with two-way data binding, Flux is unidirectional so it is easier to debug. Redux holds your entire application’s current state and allows for easy modification of that state through pure function calls.
Most of the React tutorials you’ll probably come across use either the old ES5 syntax or they aren’t structured in a way that works with Meteor, so if any code you find looks different from what I’m using, don’t worry. It all translates fairly easily, but it’s something to look out for.
What is MongoDB?
With Meteor, you don’t have a whole lot of options when it comes to databasing. In order to retain full-stack JavaScript, Meteor uses MongoDB, a powerful non-tabular database. It uses BSON files (Binary JSON, or Binary JavaScript Object Notation) to store data and maps to index it all. The biggest win with Mongo is that it is super easy to redefine a document’s fields, a task which requires a lot of careful maneuvering with SQL. This is because of Mongo’s file structure, where it is much easier to add and remove lines in a BSON file than it is to restructure fixed tables in a traditional database.
There are some slight terminology differences when you switch to Mongo, like its use of collections, documents, and fields in place of of SQL’s tables, rows, and columns. If you want to know more about the technical differences between the two, check out these articles.
What is FlowRouter?
FlowRouter is the most popular routing tool for Meteor. Routing is primarily used to turn URLs into layouts, pages, and components rendered on the screen.
FlowRouter’s most direct competition is with Iron Router and React Router, the latter only being for React apps. I chose to go with FlowRouter because it is popular, has extensive documentation with Meteor, is very simple, and because I enjoy it more than Iron Router. If React Router grows into the role, I will switch my recommendation! There’s also talk of folding a router into the Meteor core, which would be very exciting.
What is Sass?
Sass is a CSS preprocessor. It stands for Syntactically Awesome StyleSheets, and it lives up to its name. There are two flavors of Sass to choose between: straight Sass or SCSS (Sassy CSS). Like React, Sass and SCSS have two major competitors: Less and Stylus. SCSS has by far the largest community, followed by Less, Sass, and then Stylus. There are some great comparison articles out there, so I won’t bother in this series.
My main choice came down to SCSS and Less. The Sass family was built on Ruby, but there is a version we could use that compiles using Node; Less runs on Node by default. However since SCSS has the community and more extensive documentation (as well as, in my opinion, better features) I believe it to be the best choice for our Meteor boilerplate.
BEM
We will use the Block__Element — Modifier naming methodologies, which makes referencing, styling, manipulating, and reusing elements based on their classes more intuitive. There are some great articles on BEM like this one that I highly recommend. If you’re interested in a comparison of BEM versus other CSS methodologies like OOCSS and SMACSS, check out this article.
Let’s get started
Great, now that you’ve got at least a basic understanding of the individual pieces, let’s figure out how to bring them together.
You can help make this guide better by commenting when anything seems unclear, unhelpful, or plain wrong. Please be clear, detailed, and keep it positive! If you have suggestions for future articles or questions about the guide in general, feel free to tweet at me: @teaganatwater Thanks so much!
