Okay, we've got our application up and running in the browser, and we now want to see what happens when we make some code changes.
One of the best features of Meteor is reactive programming and hot code pushes.
The following is from http://docs.meteor.com/#reactivity:
Note
Meteor embraces the concept of reactive programming. This means that you can write your code in a simple imperative style, and the result will be automatically recalculated whenever data changes that your code depends on.
Put even more simply, this means that any changes you make to the HTML, JavaScript, or database are automatically picked up and propagated.
You don't have to restart the application or even refresh your browser. All changes are incorporated in real time, and the application reactively accepts those changes.
Let's see an example.
As we learn the ins and outs of Meteor, we want to build a working application: something useful, and complex enough so that we can experience all the major features of Meteor. We will be building a Lending Library, where we can keep track of what items we have (for example, Mad Men Season 1), organize these items into categories (for example, DVDs), and keep track of the people to whom we have lent the items.
To see the beginnings of this, let's change the lists of todos to lists of items, and let's change the word list to category, because that sounds much more awesome.
First, make sure the application is up and running. You can do this by having an open browser window, pointing to http://localhost:3000/
. If the app is running, you'll see your todos
application. If your application isn't up and running, make sure to follow the steps previously given in the section Starting the example application.
Now, we need to open and edit the todos.html
file. With your favorite text/code editor, open
~/Documents/Meteor/todos/client/todos.html
.
Change
title
in thehead
section:<head> <title>Items</title> </head>
Go ahead and save the file, and look at your web browser. The page will automatically refresh, and you'll see the title change from Todos:
The title will now display the word Items:
This is Meteor in action! It's monitoring any changes to files, and when it sees that a file has changed, it's telling your browser that a change has been made, and that it should refresh itself to get the latest version.
Moving forward, we're going to build an application from scratch, so we don't want to make too many changes to this example application. However, we still want to at least clean up the other visible references to todo
and list
.
Back in your text editor, make the following change to the
<h3>
tag (located approximately around line 20):<template name="lists"> <h3>Item Categories</h3>
Save this change, and you'll see the change reflected in your browser. The left header originally displayed the following text:
It will now have changed to the following:
We need to deal with one more area, and we've successfully turned our
todos
application into anitems
application.If you noticed, in the bottom of the Categories list, the open box currently says New list:
We need to change this to say New category instead. Make the following code change on line 39:
<div id="createList"> <input type="text" id="new-list" placeholder="New category" /> </div>
Save your changes, and check your work: