Building An App In 45 Minutes With Meteor | Smashing Magazine

8/21/2019 Building An App In 45 Minutes With Meteor | Smashing Magazine

1/13

22/9/2014, 9:35 PMBuilding An App In 45 Minutes With Meteor | Smashing Magazine

Page 1 of 13http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/

Building An App In 45 Minutes With Meteor

!e other day, I "nally accomplished one of my long-standing goals: to go fromone of those Wouldnt it be cool ideas to a working, live app in less than 1

hour. 45 minutes, actually.

It all started with a design meet-up in San Francisco . I can honestly say this was the best meet-up Ive ever been

to: Even though it was announced only two days in advance, more than 200 people RSVPed, and a good number

of them showed up. It was a great chance to put faces to familiar names, as well as to make new friends.

But I got to talking with so many people that I didnt have a chance to get contact info for everybody. So, the nextday, I asked the organizers about it and they suggested that everyone who attended leave a link to their Twitter

account in a shared Google Doc.

That would work, but I was afraid it would prove to be too much e!ort. If Ive learned one thing in my years as a

designer, its that people are lazy. Instead, what if I built an app that lets the user add their Twitter account to a list

in a single click?

The app would work something like this:

With my list of requirements complete, I set to work to see how fast I could build this, and I thought itd be

interesting to walk you through the process.

At first, take a peek at how the final app looked like:

y Sacha Greif

Published on June 13th, 2013in Apps, JavaScript, Web Designwith 33 Comments

1

1. The user signs into Twitter,

2. A link to their Twitter profile appears on the page,

3. Thats pretty much it!
http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/http://www.smashingmagazine.com/http://www.smashingmagazine.com/http://www.smashingmagazine.com/http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#1http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#commentshttp://www.smashingmagazine.com/tag/web-design/http://www.smashingmagazine.com/tag/javascript/http://www.smashingmagazine.com/tag/apps/http://www.smashingmagazine.com/author/sacha-g/?rel=authorhttp://designerpotluck.eventbrite.com/http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/


2/13



Our final bare-bones (but working!) app.

You can also see a demo of the finished product , and find the code on GitHub . (Note:Give it some time to load.

Apps hosted on Meteors free hosting service often slow down under a lot of tra"c.)

A word of warning: This wont be a traditional tutorial. Instead, it will be a play-by-play walkthrough of how I coded

the app in one hour, including the usual dumb mistakes and wrong turns.

Introducing Meteor

I decided to build the app with Meteor . Meteor is a fairly young JavaScript framework that works on top of Node

and has a few interesting characteristics.

2

3 4

5
http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#5http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#4http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#3http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#2http://meteor.com/https://github.com/DiscoverMeteor/twitterListhttp://smashingdemo.meteor.com/http://www.smashingmagazine.com/wp-content/uploads/2013/05/whowasthere-ss-500.png


3/13



Meteors home page

First, its all JavaScript, so you dont need to deal with one language in the browser and another on the server.

Thats right: the same language you use to set up jQuery slider plugins can also be used to query your apps

database! The added benefit of this is that your app now has only a single code base meaning you can make

the same code accessible from both the client and server if you need to.

Meteor is also reactive, meaning that any change to your data is automatically reflected everywhere throughout

the app (including the user interface) without the need for callbacks. This is a powerful feature. Imagine adding a

task to a to-do list. With reactivity, you dont need a callback to insert the new HTML element into the list. As soon

as Meteor receives the new item, it automatically propagates the change to the user interface, without any

intervention on your part!

Whats more, Meteor is real time, so both your changes and the changes made by other users are instantly

reflected in the UI.

Like many other modern frameworks, Meteor also speeds up your Web app by transforming it into a single-page

Web app. This means that instead of refreshing the whole browser window every time the user changes the page

or performs an action, Meteor modifies only the part of the app that actually changes without reloading the rest,

and then it uses the HTML5 pushState API to change the URL appropriately and make the back button work.

Not having to update the whole page enables another very powerful feature. Instead of sending HTML code over

the network, Meteor sends the raw data and lets the client decide how to render it.

Finally, one of my favorite features of Meteor is simply that it automates a lot of boring tasks, such as linking up

and minifying style sheets and JavaScript code. It also takes care of routine stu!for you on the back end, letting

you add user accounts to the app with a single line of code.

6
http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#6http://meteor.com/


4/13



Ive been experimenting with Meteor for the past six months, using it first to build Telescope (an open-source

social news app), and then in turn using Telescope as a base to create Sidebar (a design links website), and Ive

ust released a book about it. I believe that, more than any other framework, Meteor helps you get from idea to

app in the shortest possible amount of time. So, if all of this has made you curious, I recommend you give it a try

and follow along this short walkthrough.

ST EP 0 : INST ALL MET EOR (5 MINUT ES)

First, lets install Meteor. If youre on Mac or Linux, simply open a Terminal window and type:

curl https://install.meteor.com | /bin/sh

Installing Meteor on Windows is a little trickier; you can refer to this handy guide to get started.

ST EP 1 : CREAT E T HE AP P ( 1 MINUT E)

Creating a Meteor app is pretty easy. Once youve installed Meteor, all you need to do is go back to the Terminal

and type this:

meteor create myApp

Youll then be able to run your brand new app locally with this:

cd myApp

meteor myApp

In my case, I decided to call my app twitterList, but you can call yours whatever you want!

Once you run the app, it will be accessible at http://localhost:3000/in your browser.

STEP 2: ADD PACKAGES (1 MINUTE)

Because I want users to be able to log in with Twitter, the first step is to set up user accounts. Thankfully, Meteor

makes this trivially easy as well. First, add the required Meteor packages, accounts-uiand (since we want users to

log in with Twitter) accounts-twitter.

Open up a new Terminal window (since your app is already running in the first one) and enter:

meteor add accounts-uimeteor add accounts-twitter

Youll now be able to display a log-in button just by inserting {{loginButtons}}anywhere in your Handlebars code.

127

8

9

10
http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#10http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#9http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#8http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#7http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#12http://win.meteor.com/http://www.discovermeteor.com/http://sidebar.io/http://telesc.pe/


5/13



A more complex version of the accounts-uiwidget, as seen in Telescope .

I didnt want to have to bother with styling, so I decided to also include Twitter Bootstrap with my app.

I went to the Twitter Bootstrap website, downloaded the framework, extracted the ZIP file, copied it to my apps

Meteor directory, and then hooked up the required CSS files in the head of my apps main file.

Ha ha, not really. What is this, 2012? Thats not how it works with Meteor. Instead, we just go back to the Terminal

and type:

meteor add bootstrap

Client Vs. Server

I guess at this point I should briefly tell you more about how Meteor apps work. First, weve already established

that a Meteor apps code is all JavaScript. This JavaScript can be executed in the browser like regular JavaScript

code (think a jQuery plugin or an alert()message), but can additionally be executed on the server (like PHP or

Ruby code). Whats more, the same code can even be executed in both environments!

So, how do you keep track of all this? It turns out Meteor has two mechanisms to keep client and server code

separate: the Meteor.isClientand Meteor.isServerbooleans, and the /clientand /serverdirectories.

I like to keep things clean; so, unlike the default Meteor app that gets generated with meteor create(which uses

the booleans), Id rather use separate directories.

11

127
http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#7http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#12http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#11http://telesc.pe/http://telesc.pe/


6/13



Also, note that anything that isntin the /clientor /serverdirectories will be executed in both environments by

default.

Since our app is pretty simple, we wont actually have any custom server-side code (meaning that Meteor will take

care of that part for us). So you can go ahead and create a new /clientdirectory, and move twitterList.html

and twitterList.js(or however your files are called) to it now.

ST EP 3 : CREAT E T HE MARKUP ( 10 MINUT ES)

I like to start from a static template and then fill in the holes with dynamic data, so thats what I did. Just write your

template as if it were static HTML, except replace every moving part with Handlebars tags. So, something like

this

Sacha Greif

becomes this:

{{fullName}}

Of course, those tags wont do anything yet and will appear blank. But well match them up with real data pretty

soon. Next, I deleted the contents of twitterlist.htmland got to work on my HTML. This is the code I had after

this step:

Who Was There? Did you go to the


7/13



Youll need to fill in your apps Twitter credentials. Larger view .

To get this information, we first need to tell Twitter about our app. Follow the steps on the screen and create a

new Twitter app ; once youre done, try logging in. If everything has worked right, you should now have a user

account in the app!

Creating a new Twitter app. Larger view .

To test this out, open your browsers console (in the WebKit inspector or in Firebug) and type this:

Meteor.user()

This will retrieve the currently logged-in user, and, if everything has gone right, it will give you your own user

object in return (something like Object {_id: "8ijhgK5icGrLjYTS7", profile: Object, services: Object}).

14

15

16

17

18
http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#18http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#17http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#16http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#15http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#14http://www.smashingmagazine.com/wp-content/uploads/2013/06/sm_meteor_app_2_tiny.pnghttp://www.smashingmagazine.com/wp-content/uploads/2013/06/sm_meteor_app_2_tiny.pnghttps://dev.twitter.com/apps/newhttp://www.smashingmagazine.com/wp-content/uploads/2013/06/sm_meteor_app_1_tiny.pnghttp://www.smashingmagazine.com/wp-content/uploads/2013/06/sm_meteor_app_1_tiny.png


8/13



ST EP 5 : SP L IT IT INT O T EMP LAT ES (5 MINUT ES)

Youll have noticed that our HTML has room to display only a single user. Well need some kind of loop to iterate

over the whole list. Thankfully, Handlebars provides us with the {{#each xyz}} {{/each}}helper (where xyzare

the objects you want to iterate on, usually an array), which does just that.

Well also split the code into a few templates to keep things organized. The result is something like this:

Who Was There?

{{> content}}

{{loginButtons}} {{#each users}} {{> user}} {{/each}}

{{full

ST EP 6 : HOOK UP OUR T EMP LAT E (5 MINUT ES)

Our template is all set up, but its iterating over empty air. We need to tell it what exactly this usersvariable in the

{{#each users}}block is. This block is contained in the contenttemplate, so well give that template a template

helper .

Delete the contents of twitterlist.js, and write this instead:

Template.content.users = function () { return Meteor.users.find();};

What were doing here is defining Template.content.usersas a function that returns Meteor.users.find().

19
http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#19http://docs.meteor.com/#template_helpers


9/13



Meteor.usersis a special collection created for us by Meteor. Collections are Meteors equivalent of MySQL tables.

In other words, theyre a list of items of the same type (such as users, blog posts or invoices). And find()simply

returns all documents in the collection.

Weve now told Meteor where to find that list of users, but nothings happening yet. Whats going on?

ST EP 7 : F IX O UR T AGS (5 MINUT ES)

Remember when we typed this?

{{fullNa

The {{userName}}, {{image}}and {{fullName}}are just random placeholders that I picked for the sake of

convenience. Wed be pretty lucky if they corresponded to actual properties of our user object! (Hint: they dont.)

Lets find out the real properties with the help of our friend, the browser console. Open it up, and once moretype this:

Meteor.user()

The object returned has all of the fields we need. By exploring it, we can quickly find out that the real properties

are actually these:

Lets make the substitutions in our template and see what happens.

It works! Our first and only user (you!) should now appear in the list. Were still missing some fields, though, and

only the users full name appears. We need to dig deeper into Meteor to understand why.

A Database On!e Client

We havent really touched on what Meteor does behind the scenes yet. Unlike, say, PHP and MySQL, with which

your data lives only on the server (and stays there unless you extract it from the database), Meteor replicates your

server-side data in the client and automatically syncs both copies.

This accomplishes two things. First, reading data becomes very fast because youre reading from the browsers

own memory, and not from a database somewhere in a data center.

{{services.twitter.screenName}}

{{services.twitter.profile_image_url}}

{{profile.name}}


10/13



Secondly, modifying data is extremely fast as well, because you can just modify the local copy of the data, and

Meteor will replicate the changes for you server-side in the background. But this new paradigm comes with a

caveat: We have to be more careful with data security.

ST EP 8 : MAKE T HE AP P SECURE ( 1 MINUT E)

Well address data security in terms of both writing and reading. First, lets prevent people from writing whatever

they want to our database. This is simple enough because all we need to do is remove Meteors insecure

package:

meteor remove insecure

This package comes bundled with every new Meteor app to speed up development (letting you insert data client-

side without having to set up all of the necessary checks and balances first), but it is obviously not meant for

production. And because our app wont need to write to the database at all (except for creating new users but

thats a special case that Meteor already takes care of), were pretty much done!

More On Security

While were on the topic of security, Meteor apps also come with a second default package, autopublish, which

takes care of sending all of the data contained in your server-side collections to the client.

Of course, for a larger app, you probably wont want to do that. After all, some of the information in your database

is supposed to remain private, and even if all your data is public, sending allof it to the client might not be good

for performance.

In our case, this doesnt really matter because we do want to publish (i.e. send from the server to the client) all of

our users. Dont worry, though Meteor is still smart enough not to publish sensitive information, such as

passwords and authentication tokens, even with autopublishon.

ST EP 9 : ADD FOLLOW BUT T ONS (8 MINUT ES)

While visitors can now click on a name to go to their Twitter profile, simply displaying follow buttons for each user

would be much better. This step took a little tinkering to get right. It turns out that Twitters default follow button

code doesnt play nice with Meteor.

After 15 minutes of unsuccessful attempts, I turned to the Google and quickly found that for single-page apps,

Twitter suggests using an iframe instead.

This worked great:


11/13



ST EP 10 : DEP LOY ( 1 MINUT E)

The last step is to deploy our app and test it in production. Once again, Meteor makes this easy. No need to find a

hosting service, register, launch an instance, and do a Git push. All you need to do is go back to the Terminal and

type this:

meteor deploy myApp

Here, myAppis a unique subdomain that you pick (it doesnt have to be the same as the apps name). Once youve

deployed, your app will live at http://myapp.meteor.com. Go ahead and ask a few people to register: Youll see

their Twitter profiles added to the list in real time!

Going FurtherOf course, I had to gloss over a lot of key Meteor concepts to keep this tutorial light. I barely mentioned

collections and publications, and I didnt even really talk about Meteors most important concept, reactivity. To

learn more about Meteor, here are a few good resources:

I truly believe Meteor is one of the best frameworks out there for quickly building apps, and its only going to get

better. Personally, Im really excited to see how the framework evolves in the next couple of months. I hope this

short tutorial has given you a taste of what Meteors all about and has made you curious to learn more!

Documentation , Meteor

This is a required reference for any Meteor developer. And its cached, meaning you can

even access it o#ine.

20

EventedMind

Chris Mather puts out two Meteor screencasts every Friday. Theyre a great help when you

want to tackle Meteors more advanced features.

21

Discover Meteor

Im obviously biased, but I think our book is one of the best resources to get started with

Meteor. It takes you through building a real-time social news app (think Reddit or Hacker

News ) step by step.

22

23

24

Blog , Discover Meteor

We also make a lot of information available for free on our blog. We suggest looking at

Getting Started With Meteor and Useful Meteor Resources .

25

26 27

Prototyping With Meteor

A tutorial we wrote for NetTuts that takes you through building a simple chat app.

28
http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#28http://net.tutsplus.com/tutorials/javascript-ajax/prototyping-with-meteor/http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#27http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#26http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#25http://www.discovermeteor.com/2013/02/10/useful-meteor-resources/http://www.discovermeteor.com/2013/01/30/getting-started-with-meteor/http://www.discovermeteor.com/bloghttp://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#24http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#23http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#22http://news.ycombinator.com/http://reddit.com/http://www.discovermeteor.com/http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#21http://eventedmind.com/http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#20http://docs.meteor.com/


12/13



(il) (ea) (al)

FOOT NOT ES

1 http://designerpotluck.eventbrite.com/

2 https://reader012.{domain}/reader012/html5/0814/5b728396e75bd/5b7283a0a71c8.png

3 http://smashingdemo.meteor.com

4 https://github.com/DiscoverMeteor/twitterList

5 http://meteor.com

6 http://meteor.com/7 http://telesc.pe

8 http://sidebar.io

9 http://www.discovermeteor.com

10 http://win.meteor.com/

11 http://telesc.pe/

12 http://telesc.pe

13 http://handlebarsjs.com

14 http://www.smashingmagazine.com/wp-content/uploads/2013/06/sm_meteor_app_1_tiny.png


16 https://dev.twitter.com/apps/new



19 http://docs.meteor.com/#template_helpers

20 http://docs.meteor.com

21 http://eventedmind.com

22 http://www.discovermeteor.com

23 http://reddit.com

24 http://news.ycombinator.com

25 http://www.discovermeteor.com/blog
http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#note-25http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#note-24http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#note-23http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#note-22http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#note-21http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#note-20http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#note-19http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#note-18http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#note-17http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#note-16http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#note-15http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#note-14http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#note-13http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#note-12http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#note-11http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#note-10http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#note-9http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#note-8http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#note-7http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#note-6http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#note-5http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#note-4http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#note-3http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#note-2http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#note-1


13/13



26 http://www.discovermeteor.com/2013/01/30/getting-started-with-meteor/

27 http://www.discovermeteor.com/2013/02/10/useful-meteor-resources/

28 http://net.tutsplus.com/tutorials/javascript-ajax/prototyping-with-meteor/

Sacha Greif

Sacha Greif is the creator of Sidebar, a site+newsletter that gives you the 5 best

design links of the day. He has also published Discover Meteor, a book about the

Meteor JavaScript framework. You should follow him on Twitter.

With a commitment to quality content for the design community.

Founded by Vitaly Friedman and Sven Lennartz. 2006-2014.

Made in Germany. ! .http://www.smashingmagazine.com
http://twitter.com/#!/SachaGreifhttp://www.discovermeteor.com/http://sidebar.io/http://sachagreif.com/http://www.smashingmagazine.com/author/sacha-g/?rel=authorhttp://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#note-28http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#note-27http://www.smashingmagazine.com/2013/06/13/build-app-45-minutes-meteor/#note-26

Documents

Building An App In 45 Minutes With Meteor | Smashing Magazine