An Interest In:
Web News this Week
- March 27, 2024
- March 26, 2024
- March 25, 2024
- March 24, 2024
- March 23, 2024
- March 22, 2024
- March 21, 2024
Prototyping with Meteor
Meteor is far more than a quick prototyping tool, but it sure is great for prototyping. In this tutorial, we’ll walk through the process of turning a simple HTML wireframe into a functional application in a surprisingly simple number of steps.
We’ll be creating a simple wireframe of a chatroom application. The process we are trying to demonstrate is starting with a pure HTML/CSS wireframe, done in Meteor for convenience, which can then very easily be transformed into a real application, thanks to the ease of Meteor development.
Note: This tutorial is adapted from The Meteor Book, an upcoming step by step guide to building Meteor apps from scratch. The book will walk you through building a complete multi-user social news site (think Reddit or Digg), starting from setting up user accounts and user permissions, all the way to managing real-time voting and ranking.
Setting up a More Complex App
A previous Meteor tutorial here on Nettuts+ demonstrated how to install Meteor and build a simple application using the meteor
command line tool. In this tutorial, we are going to do things a bit differently, and use Meteorite.
Meteorite is a community created wrapper for Meteor that allows us to use non-core packages created by other members of the Meteor community. Although a built-in third party package system is planned for Meteor itself, as of the time of this writing, there is no support, bar the set of packages that are supported by the Meteor core team. So Meteorite was created to allow us (the community) to work around this limitation, and publish our packages on Atmosphere, the Meteor package repository.
For this tutorial, we are going to use some of those community written packages, so we are going to need to use Meteorite. To begin, let’s get it installed, using npm.
Note: You’ll need to have a copy of Node and npm installed on your system. If you need assistance with this process, Meteorite’s install instructions is a good place to start.
npm install Meteorite -g
If you’re on Windows, setting things up is a bit more complex. We’ve written a detailed tutorial on our site to help you out.
Now that Meteorite is installed, we use the mrt
command-line tool (which it installs for us) in place of meteor
. So let’s get started! We’ll create an app:
mrt create chat
Packages and Wireframes
To create our wireframe app, we’ll use some basic packages that allow us to develop simple laid out pages quickly and route between them. Let’s add the packages now:
mrt add bootstrap-updatedmrt add font-awesomemrt add router
Step 1: A Front Page
Now that we’ve picked up some nice styling for our app, we can make a mockup of the landing screen. Delete the initial HTML, CSS and JS files created by Meteor and create the following two files within a client
directory (we aren’t doing anything on the server yet).
(Alternatively, follow along with the steps from this repository.)
<head> <title>chat</title></head><body> <div class="row"> {{> rooms}} <div class="span6"> <h1>Welcome to Meteor Chat</h1> <p>Please a select a room to chat in, or create a new one</p> </div> </div></body><template name="rooms"> <form name="new_row"> <table id="rooms" class="table table-striped span6"> <thead> <tr> <th>Room Name</th> <th>Members online</th> <th>Last activity</th> </tr> </thead> <tbody> {{#each rooms}} <tr> <td>{{name}}</td> <td>{{members}}</td> <td>{{last_activity}}</td> </tr> {{/each}} <tr> <td colspan="3"> <input type="text" name="name" placeholder="Enter your chatroom name"></input> <button type="submit" class="btn btn-primary pull-right"> <i class="icon-plus"></i> Create Room </button> </td> </tr> </tbody> </table> </form></template>
client/chat.html
var rooms = [ {name: 'Meteor Talk', members: 3, last<em>activity: '1 minute ago'}, {name: 'Meteor Development', members: 2, last</em>activity: '5 minutes ago'}, {name: 'Meteor Core', members: 0, last_activity: '3 days ago'}];Template.rooms.helpers({ rooms: rooms});
client/chat.js
After adding this, you should see the following simple (if fake) application, when you browse to https://localhost:3000:
The data in the table of rooms is fixed data that we have manually entered into client/chat.js
, but the advantage to this approach is that it allows us to repeat HTML in our wireframe without having to cut and paste (which is almost universally a bad idea).
Step 2: A Chat Room Page
Now, let’s hook up a second page. We are going to use the router to select between two page templates; one with the welcome message, and the other with a message list for the selected room.
Let’s start by adding some simple routes. The Router works by mapping URLs to template names. Our case is fairly simple; here’s what we add:
Meteor.Router.add({ '/': 'home', '/rooms/:id': 'room'});
client/chat.js
<body> <div class="row"> {{> rooms}} {{renderPage}} </div></body><template name="home"> <div class="span6"> <h1>Welcome to Meteor Chat</h1> <p>Please a select a room to chat in, or create a new one</p> </div></template>
client/chat.html
We use the {{renderPage}}
helper in our HTML file to indicate where we want that selected template to draw, and, just like that, we can browse between the two URLs and see the content on the right-hand side change. By default, we see the 'home'
template, which is mapped to the route /
, and shows us a nice message.
If we add a template from the 'room'
route and add some links to specific rooms, we can now follow links:
<td><a href="/rooms/7">{{name}}</a></td>
client/chat.html ‘rooms’ template
<template name="room"> <div class="span6"> <h1>Welcome to a chatroom!</h1> </div></template>
client/chat.html
This works because the router maps urls, like localhost:3000/rooms/7, to the 'room'
template. For now, we won’t look at the id (7, in this case), but we will soon!
Step 3: Putting Some Data in the Chat Room
Now that we’ve routed a URL chatroom, let’s actually draw a chat in the room. Again, we are still mocking up, so we’ll continue to create fake data in our JavaScript file, and draw it with Handlebars:
var rooms = [ {name: 'Meteor Talk', members: 3, last<em>activity: '1 minute ago', messages: [ {author: 'Tom', text: 'Hi there Sacha!'}, {author: 'Sacha', text: 'Hey Tom, how are you?'}, {author: 'Tom', text: 'Good thanks!'}, ]}, {name: 'Meteor Development', members: 2, last</em>activity: '5 minutes ago'}, {name: 'Meteor Core', members: 0, last_activity: '3 days ago'}];Template.room.helpers({ room: rooms[0]});
client/chat.js
So we’ve added some chat data to the first room, and we’ll simply render it every time (for the moment) on the room template. So:
<template name="room"> <div class="span6"> {{#with room}} <h1>Welcome to {{name}}</h1></p> <table id="chat" class="table table-striped"> <tbody> {{#each messages}} <tr> <td>{{author}} :</td> <td>{{text}}</td> </tr> {{/each}} <tr> <td colspan="2"> <form name="new_message"> <input type="text" name="text"></input> <button type="submit" class="btn btn-primary pull-right"> <i class="icon-envelope"></i> Send message </button> </form> </td> </tr> </tbody> </table> {{/with}} </div></template>
client/chat.html
Voila! A working demonstration of our chatroom application: