Prototyping Your App With Meteor

This article was originally published on February 4, 2016 on The Capsule Cat Blog. For archive purposes, we moved it here!


Meteor is an amazing platform for you to build and deploy a web application, iOS, and Android app. Getting started with Meteor is easy thanks to the plethora of tutorials and the helpful community surrounding it.

This presentation focuses less on the coding aspect of Meteor, and more on the thought process behind planning your initial prototype, gathering resources needed to build your idea, and deploying the application.

Plan Your Idea

The main goal of planning your idea is to get to the core aspect of your web app. What is the one thing that your web app does and does well? Try to boil it down to a single sentence and then ask yourself how this core functionality will work.

When you are planning and making your application, focus on the core features.

Drop anything that isn’t necessary to the core functionality. That doesn’t mean forget about it, simply write it down on sticky notes, a notebook, or your issue tracker.

A good tool for planning is to draw a few wireframes of what your app might look like. Try drawing what it will look like on mobile, tablet, and desktop views. Click on your wireframe to perform actions and imagine how it will work. Make sure to walk through a the whole experience so that you don’t accidentally miss a crucial feature.

Get Some Packages

The goal of prototyping is to get something done. The faster you make that prototype the better, because that allows you to get it in front of users and see if your idea works in the real world.

In order to build quickly, you’ll have to ditch the idea that you should write everything. The “Not Built Here” syndrome is real, and you have to make sure not to succumb to it.

Identify parts of your idea that might have already been done and exist in the open source world. Search on AtmosphereJS using some keywords and see what comes up. Most of the time I search on there, I am pleasantly surprised by all the work that the Meteor community has done.

If you are using Meteor 1.3, you can also check NPM for modules that you can use as well. This is an awesome new improvement coming with Meteor 1.3! You can read about how to use Meteor 1.3 in another blog post we wrote.

Don’t feel bad about packages, most of the projects I start use around 13+ packages in their initial version alone (not including the default packages that come with Meteor)!

Organize Your Code

Alright, it’s time to start pumping some code. But before you do, you should think about your code structure — especially your folders. All you should do is have a basic folder structure in mind: keep your views together, keep your collections together, etc.

Separate different kinds of code into different folders, or go the modlet route and keep different domains of code in different folders.

Set up your folder scaffolding at the start of your project and stick to it. It might evolve over time, but don’t get lazy and start putting views in your router folder.

My projects usually start out looking something like this:

  • /client
  • — /components
  • — /containers
  • — /stylesheets
  • — /actions
  • — /stores
  • — router.js
  • /lib
  • — /collections
  • /server
  • — /configuration
  • — /methods
  • — /publications

Deploy

Alright, you have written your app and it looks great on your machine on localhost. Time to buy a server, set up Node on it and MongoDB, right?

Well, you don’t have to, especially if you are just creating a prototype. You can deploy to your-awesome-domain.meteor.com and try it out. Simply use meteor deploy my-awesome-app.meteor.com to deploy your app to some free servers that MDG provides.

Once you have some users saying your app is the Next Big Thing, then you can look into MUP if you want to deploy to your own server.


Thanks for reading! If you liked this article, feel free to follow us on Twitter.

Show your support

Clapping shows how much you appreciated ClairvoyanceIO’s story.