Updated document.txt

rhgraysonii authored
revision b2d52dab385e7c5dc6c1164fa99477253af30dee
#A Fun Introduction to Meteor

###What is Meteor?
Meteor is a new(er) web framework. If one must put it simply, Meteor offers live data, all the time. Without digging into pull-and-diff, database theory, and other jargon, we can easily discern this: Meteor makes making live-data web applications simple. A chatroom can be implemented in fifteen minutes with a total of 3 files that are all very readable being used. For some ideas of examples, check out [Meteor's official examples](http://www.meteor.com/examples). At the time of writing Meteor is at 0.7.1 and I will update this to be compatible with all future releases, making a separate branch for each in case someone needs documentation referencing the project from an older state and has not upgraded.

###Why Meteor?
Meteor is a quick to pick up, simple to operate framework to rapidly build a simple prototype. It allows you to experiment, and is production capable! If you are interested in seeing this, check out these:




And even more at [Made With Meteor](http://madewith2.meteor.com/)

###What are we doing?
We are going to build a simple web application. It is nontrivial, but it shouldn't take more than an hour or so after some basic introduction if you know your JS.

#Getting Started

###Launching the base application

If you have not installed Meteor yet, begin by going to the [Meteor Quick Start Guide](http://docs.meteor.com/#quickstart). If you run windows, I'm sorry. But, thankfully folks nicer than me have put together a getting started guide for you [here](http://www.addthelink.com). For reference, we will NOT be using meteorite for this outside of styling with bootstrap (which can be worked around easily without using the smart-package), so you can still do the rest of this tutorial though many others may not work if you need Meteorite integration.

Start with:

meteor create yourAppName

if you are on Windows. However, from this point onward know that when you see use of "mrt" you should instead use "meteor". We are using Meteorite on the OSX/Linux side of things just to simplify adding bootstrap and going over package management and integration later. These will be asides you can ignore, due to the fact it will be later addressed.

If you are a user of an OS more pure, you should instead put in:

mrt create yourAppName

Now that we have a directory, lets navigate to it and take a look at what we've gotten ourselves:

cd yourAppName
>yourAppName.html yourAppName.css yourAppName.js smart.json

Did you get the appropriate output? WOO, we've got hello world. Navigate the browser to localhost:3000 and you will be able to check it out.

A note to Windows users: you will not have smart.json. There will be no further differences until otherwise mentioned from this point onwards; so long as you remember our agreement about the use of meteor over mrt prior.

#Making A Plan

So, now that we have a directory up and running, I'll tell you what we are actually building. Getting into the meat and potatoes is always the best part of the day, after all.

We're going to be implementing a simple speed reader, similar to what is offered by [Spreeder](http://www.spreeder.com/). What do we need to do this? Well, let us consider the situation from an object-oriented perspective:

If we are going to display text rapidly, we probably don't want to just use a giant string. If we ever want to tie it to a user, and allow them to save the passages they have pasted in to read, we would then default to some kind of object. This object would also have to be able to iterate through all of its words, and somehow split them apart after the user gives their input. I have my own implementation I did with this, but the general idea is that I wanted to create a "Book" that could be saved, and a User can obviously then save as many books as they please. With Meteor, since we are using MongoDB, a NoSQL setup, we will not to worry about any relationships to be explicitly defined, such as "A user has many books, and a book belongs to a user". Here is the code I used for the reader. At this point it is placed in "yourAppName.js". However, later, we will add some structure to this file system as we add complexity and modify this a bit.

var Book = {
setBodyOfText: function(text) {
this.bodyOfText = text;
createWordChunks: function(numWords) {
var ourWords = this.bodyOfText.split(' ');
this.wordChunks = [];
for(var i = 0; i < ourWords.length; i+=numWords) {
this.wordChunks.push(ourWords.slice(i, i+numWords).join(' '));
setInterval: function(wordsPerMinute) {
this.interval = Math.round((60/wordsPerMinute) * 5 * 1000)
nextChunk: function() {
var nextChunk = this.wordChunks.shift();
return nextChunk;

Now, without going into a vast explanation, this combined with the function we are about to define below would allow one to implement this with user-inputted text on any static-page website using only jQuery. You can see an example of this [here](http://roberthgraysonii.site44.com/projects/newspeedread/index.html). Here is the next function:
, however leave it commented out for the time being inside your *yourAppName.js* file:

//function stepThroughWords(reader) {
//window.setInterval(function() {
// $("div#text-display p").empty().append(reader.nextChunk());
//if (stop) {
// window.clearInterval();
//}, reader.interval);

This isn't the best practice, but I felt it to be most understandable from a code-readability standpoint introducing the models and functions here.