What’s This Meteor Thing?

What’s This Meteor Thing?

on Jun 8th 2012 with 96 comments
Tutorial Details
  • Language: JavaScript
  • Framework: Meteor
  • Version: 0.3.6
  • Estimated Completion Time: 30 Minutes

Lately, there has been a considerable amount of buzz around a new web platform, called Meteor. In this article, I will explain what it is, and why you should consider it for your future applications!

First Things First

Don’t think of Meteor as a package manager, because it is far more powerful than that!

Meteor is a JavaScript framework, built around many small packages – some of which you may already be using, like MongoDB or jQuery. But don’t think of Meteor as a package manager, because it is far more powerful than that! Meteor customized these packages into what they refer to as “smart packages” that communicate seamlessly with one another.

Meteor is by far the easiest development environment to install, with just a one line command that installs a database, development server, and a command line program, which takes care of creating and deploying your applications. I’ll show you how to install it in just a bit.

If I had to define, in short, how Meteor can help you, I would have to say that it is the speed at which you can develop your applications. Sites, which used to require thousands of lines of code, only take a few hundred in Meteor. It does this by combining three key core features:

  1. Meteor is “Realtime by Design”
  2. “Database Access” from the Client
  3. “Latency Compensation”

By combining these three features together the meteor staff have created a very powerful framework and a whole new approach to programming. Now let’s see what each of these mean.

1 - “Realtime by Design”

In Meteor, you don’t program routines and functions, you program page elements. It is very component-oriented, in that just instruct Meteor how something should work, and it will take care of updating the page in realtime. This means that you don’t need to write any AJAX or DOM manipulation code, saving you a significant amount of time.

In this tutorial, I will be using Meteor as is, without customizing its packages. The default templating plugin for laying out your components is Handlebars. In Handlebars, you create templates for your components, and Meteor will process these at runtime and generate dynamic HTML. Let’s build a Meteor application that takes an array of JSON objects, one for each product, and displays the name, price, and availability. To get started, I will install Meteor and create a new project.

First, open up a Terminal window and type the following commands:

	curl install.meteor.com | /bin/sh

	meteor create products
	
	cd products

Inside the project directory, you will find three files: a JavaScript, HTML, and CSS file. Open the HTML file, and replace its contents with the following:

<head>
  <title>Products</title>
</head>

<body>
  {{> Products}}
</body>

<template name="Products">
	{{#each ProductArr}}
		<div class="Product">
			<h2>{{Name}}</h2>
			<p>Price: ${{Price}}</p>
			{{#if this.InStock}}
				<p>This Item is in stock</p>
			{{else}}
				<p>This Item is currently sold out</p>
			{{/if}}
		</div>
	{{/each}}
</template>

Above, we’ve created a template for our products, which basically just cycles through each one and displays the name, price, and availability. Now, let’s open up the JavaScript file and replace everything within the Meteor.is_client if statement:

	var Products = new Array(
			{ Name    :  "Screw Driver",
			  Price   :  "1.50",
			  InStock :  true },
			  
			{ Name    :  "Hammer",
			  Price   :  "3.00",
			  InStock :  false }
	);

	Template.Products.ProductArr = function(){
		return Products;
	};

Whatever is inside the Meteor.is_client section is run only on the client. Most of our code will be placed within here. The JavaScript is what you might expect: an array to hold the products, and the ProductsArr variable that we defined in the template. To test your application, simply type “meteor” in the Terminal, and Meteor will launch the development server for you to test your application.

So you might say that this is pretty cool, but it’s essentially just the standard Handlebars functionality – and we’ve all seen this before. However, it’s what Meteor is doing in the background that is the truly cool part. Meteor recognizes that this section of the page relies on the Products array, so it will monitor that variable and, anytime it changes, (i.e you add an item) Meteor will automatically update the page with your new changes… in realtime! That’s not all; if you were to add an event handler to these products, you wouldn’t have to start guessing which button the user pressed, by adding custom attributes or by reading the DOM, because Meteor calls the event on the object itself – so you have access to its properties.

To demonstrate this, let’s add a confirmation alert, when a user clicks on a product. Add the following code after the previous function:

	Template.Products.events = {
		"click .Product" : function(){
			if(this.InStock)
				confirm("Would you like to buy a " + this.Name + " for " + this.Price + "$");
			else
				alert("That item is not in stock");
		}
	};

This function is called on the original object, not on the page element, thus allowing you to start working with it without first having to determine which product corresponds to the clicked element. Another thing worth pointing out is that we’re using CSS rules, when declaring events in Meteor. This means using periods for classes, pound symbols for ids, and the tag’s name for HTML elements.

2 - Database Everywhere

Meteor comes with a version of MongoDB that works both on the server and the client.

By default, Meteor comes with a version of MongoDB that works both on the server and the client. On the server, it works as you might expect it to, but the database on the client is more of a pseudo-database. What I mean by this is that Meteor has an API written to mimic the Mongo API, but for a custom database that is cached in memory on the client. This allows you to send subsets of data. For instance, if you only want the user to have certain rows, or you don’t want to send the password column, Meteor allows you to simply “publish” the info you want, and Meteor will treat it as a database on the client, allowing you to make your application faster and more secure!

By putting the database on the client, you can feed the database straight into your HTML page. For instance, in the previous example, instead of getting the products from an array, we can feed in the products database. So anytime the database changes, your updates will be pushed in realtime to all the clients.

To integrate this into our application, first we have to add the database to the top of our application, before the is_client if statement, because the database is for both the client and the server. Add the following code:

	var Products = new Meteor.Collection("Products");

Next, you can delete the Products array that we created earlier, and modify the ProductsArr function to look like the following:

	Template.Products.ProductArr = function(){
		return Products.find({}, {sort: {Name: 1}});
	};

Another plus for having the database on the client is that it allows you to use MongoDB’s sorting API to automatically sort the elements on the page at the database level, which, again, saves you that much more time, when developing your application. You can either add records in code or in your browser’s console. Either way, you would use the insert command on the Products variable. Here is an example:

	Products.insert({Name : "Hammer", Price : 4.50, InStock : true});
	Products.insert({Name : "Wrench", Price : 2.70, InStock : true});
	Products.insert({Name : "Screw Driver", Price : 3.00, InStock : false});
	Products.insert({Name : "Drill", Price : 5.25, InStock : true});

I used Google Chrome’s console to enter this code, though you can certainly accomplish this in your editor as well.

3 - Latency Compensation

Meteor will update your UI in realtime.

Lastly, we come to Meteor’s latency compensation. By now, we know that we can define elements, connect them to a database, and Meteor will update your site automatically. But connecting your application so tightly to a database can pose a serious issue. If your application only changes when the database does, then there may be a bit of lag between when the user clicks something, to when the changes are pushed to the database, and returned to your application. This can make your site feel slower than it should.

Well, the Meteor team has already thought of this; they created what they refer to as “Latency Compensation.” When you send something to the database, Meteor will immediately pretend as if it had received the new updates from the database, and update your UI in realtime. By doing this, Meteor doesn’t need to wait for the database to update, and your users will see the changes immediately as they make them. On the rare occasion when your update doesn’t reach the server, Meteor will reconcile your data and push the updates to the browser, without you needing to write a single line of code.

To finish up with this tutorial, let’s add a shopping cart, for the purposes of viewing latency compensation in action. First, we add the HTML for the cart:

	<body>
  		{{> Products}}
		{{> Cart}}
	</body>

	<template name="Cart">
		<div id="Cart">
			<table>
				<tr>
					<th>Name</th>
					<th>Price</th>
					<th>Quantity</th>
					<th>Total</th>
				</tr>
				{{#each CartItems}}
					<tr>
						<td>{{Name}}</td>
						<td>${{Price}}</td>
						<td>{{Quantity}}</td>
						<td>${{Total}}</td>
					</tr>
				{{/each}}
				<tr>
					<td colspan="4">Total: ${{SubTotal}}</td>
				</tr>
		</div>
	</template>

Now, we’ll add the necessary JavaScript to make this work:

	var Cart = new Meteor.Collection("Cart");
	
	Template.Cart.CartItems = function(){
		return Cart.find({}, {sort: {Name: 1}});
	};
	
	Template.Cart.Total = function(){
		return this.Price * this.Quantity;
	};
	
	Template.Cart.SubTotal = function(){
		var Items = Cart.find({});
		var Sum = 0;

		Items.forEach(function(Item){
			Sum += Item.Price * Item.Quantity;
		});
		return Sum;
	};

This JavaScript is fairly straight forward. The first line adds the Cart collection, the next function connects the database to the cart, the third function returns the total price for each item in the cart, and the final function returns the subtotal for the bottom of the cart.

The last thing we require, to make this a fully functional demo, is to modify the event we made for when the user clicks a product, and make it add the item to the cart. Here is the full event handler:

		Template.Products.events = {
		"click .Product" : function(){
			if(this.InStock)
			{
				if(Cart.find({Name : this.Name, Price : this.Price}).count() > 0)
				{
					if(confirm("Would you like to buy another " + this.Name))
						Cart.update(
							{ Name : this.Name, Price : this.Price },
							{ $inc : {Quantity : 1} });
				}
				else
				{
					if(confirm("Would you like to buy a " + this.Name + " for " + this.Price + "$"))
						Cart.insert({ Name : this.Name, Price : this.Price, Quantity : 1 });
				}
			}
			else
				alert("That item is not in stock");
		}
	};

And there you have it! A product page and a shopping cart in only a few lines of code. By structuring the framework in this manner, your code is not only shorter, but elegant. Unfortunately, in the version of Meteor at the time of this writing, “upserting” into the database has not yet been implemented, so I had to manually check if the product was already in the cart or not.

Deployment

Now that you have built your app, it’s time to deploy it to the web. Meteor provides us with two options:

  • Use their free servers, which the Meteor staff have set up
  • Deploy it to any server that has NodeJS and MongoDB installed. This allows you to deploy your app to any server that you have Terminal access to.

Deploying to Meteor’s Servers

Deploying to their free servers is easy. All you must do is type: “meteor deploy yourSitesName.meteor.com“. This will provision a free hostname and upload your application to run there. You can also use this option with your own custom domain name, such as “YourSite.com,” but then you’ll need to modify your site’s DNS settings to point to origin.meteor.com.

Deploying to Your Own Server

The other option is to run it on your own server, which you can do by typing: “meteor bundle.” This will package all the necessary files that will be required to run. Then, you’ll Need to setup your MongoDB database and NodeJS dependencies. The Meteor team have included a README in the package, when you bundle your application. This file will provide exact instructions to get your application up and running.

For an example of a complete site in Meteor, I created a demo site, called “Tasks;” you can view the source on GitHub here, or view the live demo at schedule.meteor.com. Special thanks to the guys at watracz.com for doing the design.

Conclusion

To Recap:

  • You don’t write Ajax
  • No DOM manipulation
  • Database access on the client
  • Automatically realtime
  • Open Platform

Even though Meteor is still in its infancy (beta), there isn’t anything you can’t get around. The amount of time Meteor saves in your application justifies the rare occurrence where you might need to write a workaround. With a full release expected in less than a year, any current kinks or bugs will quickly become a thing of the past.

I hope you’ve enjoyed this tutorial; if you have any questions, feel free to leave a comment in the comment section below, and I’ll do my best to help!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

This author has yet to write their bio.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://arborwebsolutions.com Kevin Zurawel

    Meteor is cool (it really does let you make complex apps fast), and having the database in the client is certainly convenient, but the current Meteor model offers you no security at all. Anyone could come by your web app, open a console, and type “Products.remove()” and boom, all products are gone for all users of your site. Until that issue gets addressed, Meteor is going to be just for toy projects for me.

    • http://www.tilomitra.com Tilo

      I’m afraid you are incorrect. When you call “Products.remove()”, what you would be doing is erasing the client-side pseudo-database. That just harms your user experience, but the client is not always “synced” with the server-side database.

      “On Meteor the database API is the same on client and server, but that’s just an API. A Mongo command on the client doesn’t go directly to MongoDB on the server. You could have an access layer (or controller) on the server through which all client requests are passed. And this access layer determines which client requests are relayed to the database. [1]”

      [1] via Hacker News Post (http://news.ycombinator.com/item?id=3839871)

    • middle8media

      meteor remove insecure

  • http://www.udgwebdev.com Caio Ribeiro Pereira

    Nice post! This meteor looks like a good way to develop quick apps, like ruby on rails.

  • http://www.myscreenads.com Marcus

    Good article! Meteor looks goood!

    Btw: The last link to the Live Demo is wrong: http://net.tutsplus.com/tutorials/javascript-ajax/whats-this-meteor-thing/%E2%80%9Dhttp://schedule.meteor.com%E2%80%9D

    Doesnt redirect!

    Marcus

  • Akshay

    How to get started on Windows? I found no clear instructions on Google :(

    You left out the most popular OS :P

    P.S – Last two links are dead.

    • mark

      you will find the most popular OS for web devs is OSX or some form of Linux, most serious devs don’t use window$

      • elkaz

        I LOL’d too hard at this comment. Didn’t realise there was OSX servers in existence, and what’s this
        .NET thing I keep hearing about?

      • Frank

        LOL too!! I’m pretty sure there is more web dev on Windows too!

      • http://twitter.com/jholyhead James

        cue fanboy eye roll *rolls eyes*.

      • Giuliano

        You make my day :)

    • Akshay

      Found some help on IRC, you can find instructions for Windows here http://iakshay.net/getting-meteor-running-on-windows/

      Though it is still not offically supported.

    • Gabriel
      • http://dandascalescu.com Dan Dascalescu

        Hey Gabriel,

        Thanks for the tutorial! Can you please update the article with the correct links, and also add the missing closing tag in the code?

    • Tom Wijsman

      Just finished the MSI installer for Meteor, here you go…

      https://dl.dropbox.com/s/8g6o0edqhqmzly1/Meteor.msi?dl=1

  • Kiryl

    I prefer http://derbyjs.com/ more. It made in classic node style without any custom packet managers or other weirdos. And having database api on client – not really good architecture decision. On client I work with data (model), not with mongo database. I don’t see reasons to opt out this abstraction

  • agreco

    Hey,

    Good Tut, but can’t get this working? I run meteor within the project from the commandline and all I get is a blank page?

    Any ideas

    Cheers

    • http://rncrtr.in Ryan Carter

      The ending tag isn’t in the cart template, which is causing some errors. Might need to update the tutorial?

      This really helped me figure out what was going on with Meteor, thanks for writing this, Gabriel.

  • LessLessMoreMore

    What is it? Sounds like the 10,000th stupid thing with a cute name. There is a new one on the block every other day. The saying “just because you can doesn’t mean you shouldn’t” doesn’t seem to apply to young, eager-to-prove developers of today. There is a new library, framework, compiler, compressor, or shabbdoobler hitting the scene as fast as these people can type. I also love how all of the sites, to push content and appear fresh, shove them down our throats like we’re becoming fossils for not learning them right away. Before long, I’ll be writing coffee-java-mocha-latte w/ caramel modifier and marbled-milk compiler just to write javascript for a website. Hopefully they’ll run out of cute/stupid names and just use the 10,000 things that already exist. More perfecting what we have, less making new crap.

    • Ren

      Did you even read the article or look into Meteor at all? It isn’t just a new javascript framework, it’s a full web stack built off of node.

      • Ali Baba

        I agree with LessLessMoreMore, another framework. In couple month nobody will remember it.

      • JC Coldspring

        Here we are 5 months later and Meteor looks pretty awesome. So, yeah. stfu?

    • pb

      Wrong. Meteor is probably here to say. It came out of Y Combinator, has raised a ton of money and has some very smart and influential people behind it.

    • http://www.tilomitra.com Tilo

      Your post sounds pretty condescending towards new developers who are attempting to re-imagine and recreate tools that make our jobs easier. You don’t have to learn Meteor, but don’t label it as “crap” without giving it a try. I hope you don’t mentor young developers.

    • http://edmundask.lt Edmundas

      I don’t understand your frustration. Since when being creative is labeled as crap? If everyone was with such attitude, we would still be using IE6, tables for web design, inline JS and other abominations. I hate to burst your bubble, but with each new technology (smartphones, tablets etc) we, as developers and designers, have to rethink how we’re using existing tools and whether they are good enough anymore.

      I personally applaud new ideas, techniques, frameworks, tools and other goodies. Yes, it is hard to keep up with everything but nobody is asking you to learn and know everything. :)

    • Phil

      What you describe is the evolution of the web and contrary to your opinion (which you are entitled to) is a good thing.

      Also, “eager-to-prove developers of today”? Do you happen to know who the developers of Meteor are? Surely you’ve heard of facebook.com and 1 of its 4 co-founders, Dustin Moskovitz.

      • http://envexlabs.com Matt Vickers

        I don’t think Dustin Moskovitz has anything to do with meteor.

  • http://namangoel.com Naman

    @Akshay Meteor isn’t available on Windows. just *nix platforms for now. Just like Node was for a long time.

    Guys, could someone help me with why I should choose Meteor over NowJS.

    Now I know that Meteor takes away a lot of work to do those things, but I have trouble understanding how I can use Meteor to clearly define filters for different users so I can push separate data to different users in Real-Time. NowJs is simpler to understand and Though I’ll have to code by hand I can figure out how to solve problems..

    I’m planning to build an online multiplayer game based on Node.JS and HTML5. If I want to set up a network where 2 people can start a game remotely, and manage lots of separate games, do you think Meteor would be a good choice?? (e.g. something like the Tic Tac Toe online. but with tons of people hosting and playing tons of games)

    • Vivi
    • http://kriix.com Kristijan

      I belive meteor would be a good pick for such use. You can always filter the part of the table sent to the user by an user id (or game id) and meteor will update the user screen only if the data from his game changed.

    • http://iakshay.net/ Akshay

      Yes, it is still not officially supported on Windows. But its still possible to run it via msysgit or cygwin thanks to @TomWij. You can check the link I mentioned before.

    • http://wiki.dandascalescu.com Dan Dascalescu

      Meteor has become available on Windows in the meantime, http://win.meteor.com

  • Callum

    I get the following while trying to deploy to to meteor’s free servers:

    Errors prevented deploying:
    Exception while bundling application:
    Error
    at new JS_Parse_Error (/usr/local/meteor/lib/node_modules/uglify-js/lib/parse-js.js:260:22)
    at js_error (/usr/local/meteor/lib/node_modules/uglify-js/lib/parse-js.js:268:15)
    at croak (/usr/local/meteor/lib/node_modules/uglify-js/lib/parse-js.js:721:17)
    at token_error (/usr/local/meteor/lib/node_modules/uglify-js/lib/parse-js.js:728:17)
    at unexpected (/usr/local/meteor/lib/node_modules/uglify-js/lib/parse-js.js:734:17)
    at /usr/local/meteor/lib/node_modules/uglify-js/lib/parse-js.js:811:33
    at /usr/local/meteor/lib/node_modules/uglify-js/lib/parse-js.js:1280:32
    at Object.parse (/usr/local/meteor/lib/node_modules/uglify-js/lib/parse-js.js:1282:11)
    at /usr/local/meteor/app/lib/bundler.js:395:33
    at Array.forEach (native)

    Any ideas?

  • RJB

    How is support for using a Client-side MVC framework such as Backbone, Spine, or Batman? If it plays nicely with those I think it’s great. I can’t see using this “stack” without a MVC framework so I hope it’s support is good.

    • Gabriel
      Author

      It does have backbone support if you want the complete list of packages that come with meteor you can type “meteor list” in a terminal window

  • pb

    Nice tutorial. Was there supposed to be a CSS file? Also, can you clarify if some of the JavaScript code needs to go in the is_client or is_server blocks?

    • Gabriel
      Author

      When you create your project there will be a CSS file. You don’t need to add it to your HTML meteor will automatically do this. As for the is client and is server, all the code ontop goes in the is client except for the two collection variables as we need these both on the client and on the server.

      • Nique

        Yes there is a CSS file but it’s empty with a comment of . The screenshots given in this tutorial show a whole different output then i get out of my unstyled page. Of course the application is the same but to avoid confusion: add the css file with the tutorial.

      • kavukahn

        This will get the first part looking right.

        1. Insert the Product into the HTML as shown right here:

        Products
        {{#each ProductArr}}

        2. Then pop this into the css file.

        body {
        color: white;
        font-size: 0.9em;
        font-family: verdana;
        }

        h1 { color: #00008B; }

        h2 { text-align: center; }

        div {
        height: 160px;
        width : 200px;
        background-color: #00008B;
        border-radius: 10px;
        margin-left: 12px;
        float:left;
        }

        p { margin-left: 12px; }

  • http://www.anotherwebdeveloper.com Justen

    meteor sounds like fun, but has anyone put time real world usage with proper test cases – i cant help feeling this is more of a prototyping framework than a production ready solution..

  • http://7nbsp.com Ryan Carter

    Meteor is amazing, but granted for a very specific type of web application. I don’t see this being used for big huge apps yet. It is good for “real-time” apps like twitter for example. If you were to build a calculator app in js, that would be a perfect example for Meteor. No one ever said “I am your overload, you must use this now for everything.” It is good for certain things, not made for everything. These guys are putting it out there for free to try to help all of us IF <= important statement, IF it is something that would save us time, money, frustration. Welcome to open source for goodness sake. Many inventions take massive amounts of everyone getting it wrong and coming up with their own ideas and trying them before everyone sees which methods are the best, so I see value in Meteor especially since most other frameworks are very difficult to get into. Meteor at least makes it easy IF (that thing again) you need something that it would be good for. I happen to be writing an app that is perfect for meteor that needs dynamic UI and real-time data, and I plan to write it up and see how it goes.

    To say it will be gone in a month is just ignorant, like anyone could even know that. It will be around as long as it offers something valuable and developers like me have need of it. I am not a noob, but I think meteor makes so much sense a noob might find it easier, very little code required to accomplish a lot.

    I guess I'm saying don't knock it til you've tried it.

  • Tony

    This looks interesting, thanks for covering this, I have been meaning to take it for a ride

  • http://www.vladnicula.com vlad

    I’ve seen meteor a couple of months ago. I find it to be very cool, however I’m a bit confused about how I’m going to create a serious interactive one page application with such a tool. I’m thinking about tabbed navigation, buttons which enable and disable themselves based on the validity status of an entire form and so on.

    As a base, this could be cool, however I don’t really see how we could actually get to “No DOM” manipulation since this framework does not offer any UI support. Having a blank page that shows real-time database updates – as in, client 1 changes the server DB, client 2 immediately shows changes in it’s UI – is a great feature, but I’m guessing it adds a lot of convention over configuration, making even the smallest tweak hard code.

    Anyway, I’ll read a book about this, or see some more tutorials about specific Module Oriented methodologies with this before I actually give it a try – I’m thinking in terms of realtime single page web-apps -

    • Phil

      DOM manipulation would come from something like jQuery or BackboneJS which are both supported right now.

  • Andreas

    Yes, I would also like to know how to hide and show blocks automatically with this, as for tabs. Can you use this template system Handlebars in the CSS file too?

    ..and if I never want to reload a page, just creating it as a one page app. How does it work with the URLs and SEO?

    Thanks for the article, this seems really promising and interesting.

    • Gabriel

      If want to use urls you can include the backbone package and use the router.extend method this allows you to map functions to url, so for your example of tabs you could create a function that sets a session variable to a specific tab number.

      here is a link to backbone routers: http://documentcloud.github.com/backbone/#Router

  • http://captaindaylight.com paul

    Wouldn’t having a persistant connection to the server make your hardware costs go through the roof?

    • http://kriix.com Kristijan

      Yes, it would. But meteor uses html5 which comes with the WebSockets api and the ServerEvent api which allow the server to send events (similar to push notifications and to reverse-ajax). As IE still doesn’t support WebSockets I belive it only falls back to another method for it.

  • http://edmundask.lt Edmundas

    Nice write-up, thanks.

    P.S. Fix the links for https://github.com/gmanricks/Meteor-Schedule-Example and schedule.meteor.com. It seems the anchor tags are not using the correct quotes.

  • Sean Thompson

    Don’t know if anyone’s pointed this out…but in the sample code, the table tag isn’t closed out, throwing this error:

    Could not create liverange in template. Check for unclosed tags in your HTML. (possible unclosed near: This Item is in stock Name<)
    [Break On This Error]

    "Check for unclosed tags in your HTML."+help);

    So yeah, just remember to close out that table tag :)

    Great tutorial though, I like the potential that Meteor has!

  • http://kingluddite.com kingluddite

    Looks like your last two links are incorrect (The one’s pointing to your github site and your live site).

    It’s easy enough to fix but thought you would want to know.

    Thanks for the great tutorial.

    • http://kingluddite.com kingluddite

      You are also missing your closing table tag in the shopping card html

  • Rishabh

    Can I has the codez for this tutorial?

  • Brendan

    In Step 3 – am I adding the cart code to the products.html and products.js or creating a new file? If replacing/adding to the products.js code – where abouts am I adding it?

    Thank you in advance.

    • Gabriel
      Author

      You have to replace the body section in the HTML file and add the art template, the JavaScript goes in the existing js file anywhere inside the is_client section except for the one line var Cart = new Meteor.Collection(“Cart”); which has to go at the top before the is_client with the other collection.

  • kalyan

    I dont know why lots of people discourages this new good technology and a person who is trying to give his best to give a insight to this new technology :(

    Please encourage them so we can learn more.

  • Thibault

    Meteor is a very cool framework.

    I think building large size apps will be possible after implementation of security and other stuff that are on the road-map.

    I’ll give a try to derbyJS which is similar but node’s event driven instead of using fiber (synchronous way)

    You can place your js/coffee in a client directory (same way for server) instead of using Meteor.is_client condition. Placing mongo collections in project root permits them to be available for both side.

    Thanks for this great tuto :)

  • jipi

    Does the mongo part works with phonegap? It would be a nice feature

  • Wengfu Zhoudong

    This looks to be just a dangerous toy for incompetent developers. A competent developer wouldn’t use such a ‘framework’, but an incompetent would.

    It is also very definitely NOT REAL TIME. Real time in the computer world means something very different from this. Please use the correct terminology.

    Buffering the database in the client is quite ridiculous. Most meaningful databases have many thousands of records, this would be a tremendous memory waster on the client.

    Simply put, a properly architected and implemented traditional system would outperform this crap any day.

    Summary: For newbies who don’t know any better.

    • Tom Wijsman

      Why are you calling other people incompetent when it starts with yourself?

      - Meteor does have Real Time behavior, given that insert / update / remove results are directly visible without latency.

      - You’re taking the stupid assumption that all data is sent to the client, this however depends on the programmer. If you have experienced this yourself, you’re probably writing bad code.

      - Do you have any scientific example of this? Or did your non-sense statement lost to V8?

      Summary: You’re talking about something you don’t know much about. Evolution > Tradition…

    • http://twitter.com/woozyking woozyking

      It’s just your opinion that such a s framework is for incompetent developers, let’s not argue over other people’s opinions.

      Regarding real time, of course it’s not real time. How do you define real time? If you know that proper real time behaviors only exists in analog scope, and given that the “computer world” as we know it is based on (mostly?) digital theories and studies, which are just ways of sampling and then mimicking real time behavior, you’d appreciate how Meteor can achieve such a “fake” real time, which is explained quite well over here (all the way down to the hardware level): http://en.wikipedia.org/wiki/Real-time_computing#Real-time_in_Digital_Signal_Processing

      Regarding buffering the database in client. Please go to http://docs.meteor.com for details. I’m sure your unreasonable rage here is the result of misunderstanding. Of course, I do agree that without constraint on the business logic or framework itself, this could be a potential problem (really depends on what kind of app one’s building) for (what you’d call) an incompetent developer. But then this would be developer’s problem, not this framework/stack’s problem.

      Again, it’s just your opinion that it can be outperformed any day, but this is not a bad thing to happen. The web is evolving rapidly, and the Meteor team is just sharing their approach to the community, you sound *like* a fundamentalist who simply denies. Read this if you have time: http://meteor.com/about/mission , and you’ll probably understand better what’s Meteor about. It’s true though that this framework/stack can be used to quickly prototype something that would otherwise take a much longer time with what you called a traditional system, and it has its potential to be adopted by a top company/team in the world to build the next astonishing app, ANY DAY.

      Summary: tl;dr my own stuff

      Summary:

  • http://www.fleet-management-solutions.net Callie Walls

    Placing mongo collections in project root permits them to be available for both side.

    Thanks for this great info

  • kalyan

    @Wengfu Zhoudong. Meteor is using socket. Please read about html5 websocket, socket.io before giving this type of comment.

  • bob

    I simply can’t get the example in this tutorial to work. I’ve just cut and pasted it.

    I get output to the browser:

    Your app is crashing. Here’s the latest log.

    node.js:201
    throw e; // process.nextTick error, or ‘error’ event on first tick
    ^
    ReferenceError: Template is not defined
    at app/products.js:11:1
    at /home/bob/play/products/.meteor/local/build/server/server.js:111:21
    at Array.forEach (native)
    at Function. (/home/bob/play/products/.meteor/local/build/server/underscore.js:76:11)
    at /home/bob/play/products/.meteor/local/build/server/server.js:97:7
    Exited with code: 1
    Your application is crashing. Waiting for file change.

    What’s going on here? Are others getting the same failure?

  • Mateutek
  • http://bdgeeks.com foysal

    Just installed it on ubuntu and created my first app in meteor ever. I have never used mongodb before but this whole thing just added a whole new horizon to my web tech concept! Onto learning how mongodb works now. Any kind of suggestion anyone? on meteor? or on mongodb?

    And thanks for this awesome post man! I would definitely rate it a+ and one of the most awesome things I have ever came across even though some of the comments here indicates that I’m wrong but that’s just my opinion! :)

  • Twig

    I loves it!!

  • elwoodblues

    Hi, great tutorial ,I made it work, but i have problem, with each reload I got an extra element for all the products e.g.(extra Dril, extra Wrench…)in the DOM.
    Here is the URL: http://products.meteor.com/
    How to stop that and only have one Dril, one Wrench…?

    • Gabriel
      Author

      You have to remove the code that adds the items to your database and you can remove the ones you have now from the console

      • Miguel

        how? i tried to access from console but i cant… how would it be? as much i find the elems through Template.Products.ProductsArr…. and it returns the function… but it doesnt let me do anything (i have no idea of Mongo yet…) how could i clear out the products? GREAT introduction to Meteor, thank you very much

      • http://gabrielmanricks.com/ Gabriel
        Author

        Hi Miguel, you would do it with the collection object itself. In this case ‘Products’.

        So in the the console of you’re browser you would type:
        Products.remove();
        or

        Products.remove({ "Name": "Hammer" });

        to remove only certain rows.

        Hope this helps :)

      • Miguel

        Hello,

        Thats the problem, in the javascript console it does not let me

        https://www.dropbox.com/s/cako4l0922kjeec/products%20remove.png

        And I know it is indeed possible because even in the screencasts they provide on their site, they do it…. :-(

        my code is your code:

        var Products = new Meteor.Collection(“Products”);

        …..

        Template.Products.ProductArr = function(){
        return Products.find({}, {sort: {Name: 1}});
        };

      • http://gabrielmanricks.com/ Gabriel
        Author

        What version of Meteor are you on, and which browser ? I will try it out

      • Miguel

        thank you so much :)

        Mamoreno$ meteor –version
        Release 0.6.1

        Chrome browser: Versión 26.0.1410.43

        thank you again ^_____^

      • http://gabrielmanricks.com/ Gabriel
        Author

        Hi Miguel, it seems in the new versions of Meteor they changed the scope of variables like this (probably for security reasons), to have access to the collection from the terminal, you now have to add a line inside the Meteor.isclient if statement:


        var Products = new Meteor.Collection("Products");
        if (Meteor.isClient) {
        window.Products = Products; // <- this will add it to the browsers scope :)
        }

        Let me know if it works ;)

      • Miguel

        IT DOES! ;) thank you so much! just so you know, when you try to delete from the browser’s console, you are not allowed anymore… just by id:

        https://www.dropbox.com/s/dqfshchzdfwbbrh/deleting.png

        But well… at least now I know why it didn’t work before… ;)

        TY

      • http://gabrielmanricks.com/ Gabriel
        Author

        Thanks, I saw in the new update (since 0.5.8) you can only remove / update one row at a time anyways. Another option is to do it through the console.

        Basically have one window where you type:
        meteor
        to start the server. Then open another terminal window opened to the same folder and type:

        meteor mongo
        This will start a mongodb shell, where you can write something like:

        db.Products.remove();
        To remove all of them :)

  • Leo

    Are there any terms and conditions involved when using the Meteor guys’ servers for deployment?

  • http://www.facebook.com/daniel.roizman.7 Daniel Roizman

    The GitHub depot is missing the css file for all the stylings and the graphics as well. Are you able to post those?

  • Charlie Magee

    The links to code and demo aren’t working.

  • middle8media

    Thank you. This was my first Meteor tutorial and I am loving it.

    • http://gabrielmanricks.com/ Gabriel
      Author

      Glad to hear it

  • Jaime Pillora

    Nice post, just nit picking though var Products = [ ... ]; is faster (and in my opinion, easier to see that it’s an array) than var Products = new Array( ... );

    • http://gabrielmanricks.com/ Gabriel
      Author

      Thanks, I guess it’s a PHP habit :)

  • GR

    It seems that everyone wants to reinvent the Javascript wheel…

    Learn my syntax instead of using other people’s syntax! [rolling eyes]

    Boring!

  • lolmaster

    Thanks for writing this, it was a lot of help!

  • Miguel

    hej! Thank you so much for this Tutorial… a great starting point not offered in their site… :-D did you make an extra tutorial about how to create “TASKS”?

    • http://gabrielmanricks.com/ Gabriel
      Author

      Thank you, I haven’t created a tutorial for Tasks yet, but it’s an idea :)

  • Miguel

    Does anybody know about any Meteor book in the oven? It would be great :D

  • StevenDavisPhoto

    I have updated this code to have a “quantity” field for each product. It lowers the quantity by one every time they “buy”. When it reaches “0″ it sets “InStock” to false. How do I make the actual HTML update to say “this item is out stock” then that happens?

    • http://gabrielmanricks.com/ Gabriel
      Author

      It should happen automatically when you update the DB for the given product. If it doesn’t paste your code in a https://gist.github.com/ and I’ll be glad to take a look :)