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. The following extract is taken from http://docs.meteor.com/#/full/reactivity:
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.
This principle applies to code changes too, which means that any changes that 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 the changes.
Let's see an example.
As you become more familiar with Meteor, you will come to learn that you can make changes and add files pretty much whenever you want. You don't have to link anything up, and you certainly don't have to redeploy before you can see the results. You get to just play around, build wonderful things, and let Meteor take care of all the crunchy stuff.
To see what we mean, let's change the title of this application from Leaderboard to Yay Science! because, well, yay science!
First, make sure that the application is up and running. You can do this by having an open browser window that is pointing to http://localhost:3000/. If the app is running, you'll see your leaderboard application. If your application isn't running, make sure to follow the steps previously given in the Starting the example application section.
Now, we need to open and edit the leaderboard.html file. With your favorite text/code editor, open the leaderboard.html file under the location, ~/Documents/Meteor/leaderboard/client/, and change title in the head section using the following lines of code:
<head>
<title>Yay Science!</title>
</head>Go ahead and save the file, and then look at your web browser. The page will automatically update, and you'll see the title change. Earlier, it displayed the word Leaderboard:
However, now, after the execution of the preceding code, the title will display our spiffy new Yay Science! page:
This is Meteor in action! It monitors any changes to files, and when it sees that a file has changed, it tells 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 stay with our new theme rather than that generic old leaderboard stuff. So, to do so, perform the following steps:
Back in your text editor, on about the tenth line or so, we have the title label for our leaderboard. Make the following change to the
<h1>tag:<h1 class="title">Yay Science!</h1>Save this change, and you'll see the change reflected in your browser. The title in our page will now look like this:
Likewise, we don't give "points" to scientists. They're not trained monkeys, dancing around for our amusement. They're scientists! We give them mad props instead. In the
<div>tag just below our title, make the following text change:<div class="subtitle">Select a scientist to give them props</div>We also need to change the button text from the word
pointsto the wordprops. Towards the bottom half of the file, you'll find a<button>tag. Change the text in that tag to the following:<button class="inc">Give props</button>Save your changes, and you will see the application update almost immediately:
Just below the
<button>tag, there is a message displayed if no scientist's name is selected. It currently uses the word "players". We want to change that to something a little more specific. To do this, make the following change to the<div>message tag:<div class="message">Click a name to select</div>Save this change, and this time, refresh your browser. Not because we need the change to take effect, but because we want to make sure no scientist is highlighted so that we can verify our message text:
