Posted on by & filed under Content - Highlights and Reviews, Programming & Development.

codeA guest post by Guy Royse, who works for Pillar Technology in Columbus, Ohio as an instructor, a consultant, and a software engineer. He has programmed in numerous languages — many of them semi-colon delimited — but has more recently been working with Ruby and JavaScript. He is also the chief organizer for the Columbus JavaScript User Group and is active in the local development community. He can be found on twitter: @guyroyse.

63 million years ago the dinosaurs walked the earth. Then, one day, a really big rock hit a big peninsula in Mexico and killed a large number of these creatures. Today, with Meteor, we’re going to kill some more.

About Meteor

At first examination Meteor looks like yet another JavaScript framework for building single-page applications. Most developers I’ve talked to dismiss it as another Backbone, another Ember, or another Angular. But these frameworks don’t go as nearly as far as Meteor does. Meteor isn’t just a framework for the client side code that leaves the server code to some other technology – it is an entire platform for building web applications that encompasses both the client and the server.

And this platform provides everything you need to build your application. On the front end you use Handlebars as a templating engine to render your content. jQuery is available for querying and manipulating the DOM. MongoDB is used to persist data. All of these are installed and bundled with Meteor – no configuration required. Which is good, as we’re going to use them all to build our dinosaur killing monstrosity.

Installing Meteor

Installing Meteor is a breeze if you’re on Mac or Linux. Simply run this command:

If your on Windows, there are a couple of options documented on Meteor’s site
at win.meteor.com that you can explore. I haven’t used Meteor on Windows, so if your going to try this you’re in uncharted waters.

Once installed, Meteor is interacted with on the command-line using the meteor command. Running meteor help will give you usage information and a list of commands.

Go ahead and run meteor help to validate that you have correctly installed it. If you see the above text, you’re ready to create your first application.

Creating Your First Application

Creating an application is super easy.

Follow the instructions from Meteor and run your application.

Once it’s running, point your browser to localhost:3000 and you’ll see a basic Hello World application with a button. Clicking, logs the fact that the button was clicked to your browser’s console.

The newly generated application consists of three files imaginatively named KillingDinos.js, KillingDinos.html, and KillingDinos.css. While the CSS file is effectively empty, the HTML and JavaScript files have some useful content.

This file has some basic HTML combined with some basic Handlebars. There is a template, called “hello,” which is rendered inside of the <body> tag. The template has some static content and displays the value of {{greeting}}.

While you are still viewing the site in your browser, mess around with the HTML a bit. Change where it says Hello World to Hello Yucatan. Add some more elements to the DOM. Remove the button. Have fun. Save your changes. What you will notice as you do this is that Meteor will automatically push these changes to your browser. Launch another browser on another machine (perhaps your phone) and watch them both automatically update. Pretty cool, huh?

This is the definitive feature of Meteor, and it works not only with the HTML, but also with the JavaScript and even the data in MongoDB. So, let’s go ahead and mess with the JavaScript a little bit.

Here, we see that there are two blocks of code being defined inside of an if
block. The if block ensures that this code will only run in the client. This is required when working with templates.

The blocks themselves are buried in some JavaScript namespacing. Templates is part of Meteor. It is an object that refers all the templates defined in the application’s HTML. hello refers to a specific template. You might remember it from the KillingDinos.html file.

The first block defines the function greeting. This function is called when the “hello” template is rendered for the value {{greeting}}. Whatever it returns will be placed in the HTML. Right now it returns “Welcome to KillingDinos.” Change it to return something else like “Killing Dinosaurs One Sauropod at a Time”, save your changes, and watch the application automatically update.

The second block of code contains event handlers. Event handlers are defined as JavaScript objects. The key to the object consists of an event name and a CSS selector. This key then points to a function that is executed when the requested event is fired for the specified selector. In this case, we are binding a function that logs a message to the click event of any input element.

This code could be replace with any code you desire, but for now, we’re going to leave it alone since we’re going to do cooler stuff than log messages in the next post I will be writing.

Conclusion

So far we have learned how to install Meteor and generate a basic application. We’ve also seen how Meteor makes all the HTML and JavaScript code hot deployable. And most importantly, we’ve learned how to bind functions to templates and events. Cool stuff!

In the next post we’re going to start customizing our application to allow us to add some doomed dinosaurs to MongoDB and then send the meteor to smite them in their tracks.

Not a subscriber? Sign up for a free trial.

Safari Books Online has the content you need

Instant Meteor JavaScript Framework Starter takes a behind the scenes look at Meteor, showing you not only the code, but the processes as well. Being completely different from your typical web framework, Meteor requires a dramatically new train of thought when constructing your apps, which we will explore throughout the course of this book.
Twitter Bootstrap Web Development How-To walks you step-by-step from Bootstrap basics to the creation of a fully-responsive, JavaScript-enhanced, multi-page website. After this quick and dirty Bootstrap bootcamp, you’ll not only be building serious sites, but you’ll be equipped to dive into the rest of what Twitter Bootstrap has to offer.
Smashing CoffeeScript is a full-color, practical book that explains the CoffeeScript language, syntax, and processes, and will soon have you producing concise and quality code. Ultimately, you’ll create RIAs and mobile apps faster, with less hassle.

Tags: AngularJS, Backbone.js, Ember.js, Javascript, jQuery, Meteor, MongoDB,

Comments are closed.