Meteor Naming Conventions – Meteor Tips & Tricks

Meteor Tips & Tricks

This post is part of my Meteor Tips & Tricks series, which are short posts covering helpful meteor tips and tricks.

Lately I find myself asking what are the correct meteor naming conventions? Or what should I be doing and this seems to one of those questions that always get with my clients. I’m not sure there is a correct “way of doing things” but I thought I would cover my approach and what I have been doing both for our internal products under Almog Design Labs for example Linkly, Pipely and client projects like Spoiler Alert.

Now this is just my way of doings things and there might be a better approach but I believe this is a great start and makes it much easier when a new developer looks at your code. It’s also clear and simple.

Of course the meteor community has been great and has made a number of things standardized when it comes to meteor naming conventions but at the same time there isn’t a clear standard you can really see this in different meteor packages regarding the database fields, some use camel case while others use underscore.

Where To Start

First you have to look at a meteor application in the context of its different parts if you looking to have one clear naming convention that is great and while it’s simple I believe this will not work in context, for example camel case in css isn’t really a good idea.

So looking at a meteor application in context of naming conventions and it’s parts we have the following major parts

  • File names
  • JavaScript code
  • CSS
  • Database
  • HTML templates (Blaze or which frontend lib you’re using)

File Names

For  file names I’m using underscore this is pretty simple and I just picked this up from the Discover Meteor Book when I first started out with meteor. I also find it much easier to read file names this way in my editor of choice webstorm.

File Names

 

JavaScript

For any JS code I always use camelCase and this comes from W3 JavaScript Style Guide and Coding Conventions which is straightforward and for the most part the JavaScript community sticks to this. Also camelCase is used by JavaScript itself, by jQuery, and other JavaScript libraries so it makes sense to stick with this format. For example:

Now it also recommend that global variable written in UPPERCASE and constants (like PI) written in UPPERCASE but I find myself not doing this in Meteor which is weird because in PHP this was a must. 

CSS

For CSS I always use hyphens this is pretty clear across the web if you look at the CSS files across different sites you will see that it’s always hyphens if you look at pretty much every CSS tutorial out there it uses hyphens I also find this really easy and clear to read in the context of my HTML / template files.

Template

For my HTML / Template I try to use standard HTML and handlebars standards as I use Blaze heavily and for my template name I always use camelCase. But for ID tags and elements I use hyphens.

Database

Finally for the database this is where I feel there are no standards and I have seen everything from camelCase to underscore. Also there is no agreement whether RDBMS tables should be named singular or plural. MongoDB speaks JavaScript, and so far I have been utilizing JS naming conventions.

However I have now decided to go with Mongo’s own guide “How do I optimize storage use for small documents?” is basically underscore and using shorter field names. I believe using shorter field names is better for long term scalability but at the same time takes away from the readability. So for me I always go between full field names to short field names. I have now reconsidered this as Meteor is tightly connected to the database you end up calling and doing DB lookups directly in the JS code. My method now is a mix of camelCase with shorter field names were required.  

Wrapping Up Meteor Naming Conventions

I find having this separation between the JavaScript, CSS and Mongo using 3 naming conversations makes everything really clear and gives you easy reference.

 

Sign me up for the newsletter!

Related Post

Leave a Comment