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-updated
mrt add font-awesome
mrt 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 http://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:
Step 4: Using Real Data Backed by a Collection
Now comes the fun part; we’ve built a simple wireframe of static data simply enough, but thanks to the power of Meteor Collections, we can make it functional in no time at all.
Remember that a Collection takes care of syncing data between the browser and the server, writing that data to a Mongo database on the server, and distributing it to all other connected clients. This sounds like exactly what we need for a chat room!
First, let’s add a collection on the client and server, and add some simple fixture data to it:
(Note: We’ll put the collections file in the lib/ directory, so that the code is available both on the client and the server.)
var Rooms = new Meteor.Collection('rooms');
if (Meteor.isServer && Rooms.find().count() == 0) {
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'}
];
_.each(rooms, function(room) {
Rooms.insert(room);
});
}
lib/collections.js
We’ve moved our data into the collection, so we no longer need to manually wire it up within our template helpers. Instead, we can simply grab what we want out of the collection:
Meteor.Router.add({
'/': 'home',
'/rooms/:id': function(id) {
Session.set('currentRoomId', id);
return 'room'
}
});
Template.rooms.helpers({
rooms: function() { return Rooms.find(); }
});
Template.room.helpers({
room: function() { return Rooms.findOne(Session.get('currentRoomId')); }
})
client/chat.js
We’ve made a couple of changes here; Firstly, we use Rooms.find() to select all rooms to pass into the 'rooms' template. Secondly, in the 'room' template, we just select the single room that we are interested in (Rooms.findOne()), using the session to pass through the correct id.
Hold on! What’s the session? How did we pass the id? The session is Meteor’s global store of application state. The contents of the session should contain all that Meteor needs to know in order to re-draw the application in exactly the same state as it is in right now.
One of the primary purposes of the router is to get the session into such a state when parsing URLs. For this reason, we can provide routing functions as endpoints for URLs; and we use those functions to set session variables based on the content of the URL. In our case, the only state our app requires is which room we are currently in – which we parse out of the URL and store in the 'currentRoomId' session variable. And it works!
Finally, we need to get our links right; so we can do:
<td><a href="/rooms/{{_id}}">{{name}}</a></td>
client/chat.html
Modifying the data
Now that we have a collection holding our room data, we can begin changing it as we see fit. We can add new chats to a room, like so:
Rooms.update(Session.get('currentRoomId'), {$push: {messages: {author: 'Sacha', text: 'Good to hear..'}}});
Or, we can even add a new room:
Rooms.insert({name: 'A New Room', members: 0, last_activity: 'Never'});
The next challenge is to wire up the forms to perform such transformations, which we’ll leave as an exercise to the reader (or perhaps the next tutorial)!
If you’d like to learn more about Meteor, be sure to check out our upcoming book!
]]>
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...
http://feedproxy.google.com/~r/nettuts/~3/EmKMFI-lvBM/
https://my3.my.umbc.edu/api/v0/pixel/news/26764/guest@my.umbc.edu/51496e558feee7db998193f19f91ca25/api/pixel
css
development
html
javascript
javascript-and-ajax
meteor
mysql
php
sql
wed
Web Developer - Build Group
https://my3.my.umbc.edu/groups/retired-583
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/original.jpg?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxlarge.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xlarge.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/large.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/medium.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/small.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxsmall.png?1363101197
Web Developer - Build Group
0
0
true
Tue, 26 Mar 2013 15:36:23 -0400
Tue, 26 Mar 2013 15:36:23 -0400
Biotech & Cybersecurity Grad Programs Arrive at Shady Grove
Learn about the Programs on April 24
The University of Maryland, Baltimore County (UMBC) will offer two new Master of Professional Studies (M.P.S) programs in
Biotechnology and
Cybersecurity at the USG campus, beginning Fall 2013. With a focus on management, these programs will prepare local students for leadership roles in two of the region’s fastest growing industries.
The M.P.S. in Biotechnology will provide students with advanced knowledge of the life sciences as well as highly developed organizational and project management skills. Graduates of this program will be prepared to fill the growing need for managerial professionals in Montgomery County’s concentration of life-science oriented businesses and agencies.
“UMBC at the Universities at Shady Grove is the ideal location for the M.P.S. in Biotechnology because two-thirds of Maryland’s biotech industry is in Montgomery County, along the I-270 corridor,” said Dr. Sheldon Broedel, associate graduate program director for the M.P.S. in Biotechnology program. “With over 50,000 life sciences professionals in this region, UMBC is poised to educate and train individuals in the science and business of biotechnology, breaking the mold of classic academic training. Our faculty consists of full-time industry professionals who bring tremendous background and experience in the life sciences and management.”
Students will graduate as experts in the fundamentals that underlie biotechnology applications and product development. They will be able to analyze and interpret emerging technologies and lead commercial development, including clinical trials, inspections, and regulatory filing processes as well as budget and resource allocation.
The M.P.S. in Cybersecurity will follow a similar model in preparing students with the most up-to-date subject knowledge, combined with managerial skills. This curriculum will allow graduates to serve in leadership and operational roles throughout Montgomery County and the national capital region’s roster of government and industrial entities with deep interests in Cybersecurity.
"Through a combination of dynamic, adaptable program offerings and a highly recognized faculty consisting of thought leaders and industry practitioners, this program will serve a critical need in Montgomery County,” said Dr. Rick Forno, graduate program director for the M.P.S. in Cybersecurity program. “Cybersecurity is risk management at the highest level, and we are here to develop the next generation of professionals managing those risks.”
Gruaduates of the M.P.S. Cybersecurity program will be equipped with precise knowledge of the origins, nature, and current issues in cyberscecurity, and be able to identify ways to mitigate risks. They will be prepared to advance and manage cybersecurity capabilities and standards, including the development of an effective workforce in this rapidly expanding field.
Attend an Information Session!
Join UMBC staff and faculty to learn more about these exciting programs and career paths.
Biotechnology and Cybersecurity Information Session
Wednesday, April 24th
6:30 pm - 8:00 pm
]]>
The University of Maryland, Baltimore County (UMBC) will offer two new Master of Professional Studies (M.P.S) programs in Biotechnology and Cybersecurity at the USG campus, beginning Fall 2013....
http://www.umbc.edu/shadygrove/rsvp/
https://my3.my.umbc.edu/api/v0/pixel/news/26748/guest@my.umbc.edu/5e4bb9eda453b7d72d2c7e91a90fe97f/api/pixel
bio
cyber
grove
masters
shady
UMBC Professional Programs
https://my3.my.umbc.edu/groups/dps
https://assets2-my.umbc.edu/system/shared/avatars/groups/000/000/513/2e72ed76b7b3b9ce2f15fce64178dfaf/xsmall.png?1642086701
https://assets2-my.umbc.edu/system/shared/avatars/groups/000/000/513/2e72ed76b7b3b9ce2f15fce64178dfaf/original.png?1642086701
https://assets2-my.umbc.edu/system/shared/avatars/groups/000/000/513/2e72ed76b7b3b9ce2f15fce64178dfaf/xxlarge.png?1642086701
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/513/2e72ed76b7b3b9ce2f15fce64178dfaf/xlarge.png?1642086701
https://assets2-my.umbc.edu/system/shared/avatars/groups/000/000/513/2e72ed76b7b3b9ce2f15fce64178dfaf/large.png?1642086701
https://assets2-my.umbc.edu/system/shared/avatars/groups/000/000/513/2e72ed76b7b3b9ce2f15fce64178dfaf/medium.png?1642086701
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/513/2e72ed76b7b3b9ce2f15fce64178dfaf/small.png?1642086701
https://assets2-my.umbc.edu/system/shared/avatars/groups/000/000/513/2e72ed76b7b3b9ce2f15fce64178dfaf/xsmall.png?1642086701
https://assets1-my.umbc.edu/system/shared/avatars/groups/000/000/513/2e72ed76b7b3b9ce2f15fce64178dfaf/xxsmall.png?1642086701
Division of Professional Studies
https://assets1-my.umbc.edu/system/shared/thumbnails/news/000/026/748/d37a4794d6e3e3136f27b5e6ac12aca1/xxlarge.jpg?1364321270
https://assets4-my.umbc.edu/system/shared/thumbnails/news/000/026/748/d37a4794d6e3e3136f27b5e6ac12aca1/xlarge.jpg?1364321270
https://assets1-my.umbc.edu/system/shared/thumbnails/news/000/026/748/d37a4794d6e3e3136f27b5e6ac12aca1/large.jpg?1364321270
https://assets3-my.umbc.edu/system/shared/thumbnails/news/000/026/748/d37a4794d6e3e3136f27b5e6ac12aca1/medium.jpg?1364321270
https://assets4-my.umbc.edu/system/shared/thumbnails/news/000/026/748/d37a4794d6e3e3136f27b5e6ac12aca1/small.jpg?1364321270
https://assets4-my.umbc.edu/system/shared/thumbnails/news/000/026/748/d37a4794d6e3e3136f27b5e6ac12aca1/xsmall.jpg?1364321270
https://assets3-my.umbc.edu/system/shared/thumbnails/news/000/026/748/d37a4794d6e3e3136f27b5e6ac12aca1/xxsmall.jpg?1364321270
0
0
false
Tue, 26 Mar 2013 14:08:31 -0400
Public policy professor John Rennie Short will present the talk “Restless Urban Landscape” at Michigan State University on Friday, March 29th, through MSU’s Global Urban Studies Program. The talk will be at 2:00 p.m. in MSU’s Eustace Cole Hall 207/208.
