Full download (Ebook) Getting Started with Meteor.js JavaScript Framework, 2nd Edition: Learn to develop powerful web applications in minutes with Meteor by Isaac Strack ISBN 9781785285547, 1785285548 pdf docx
Full download (Ebook) Getting Started with Meteor.js JavaScript Framework, 2nd Edition: Learn to develop powerful web applications in minutes with Meteor by Isaac Strack ISBN 9781785285547, 1785285548 pdf docx
https://ebooknice.com/product/meteor-cookbook-55893630
ebooknice.com
https://ebooknice.com/product/getting-started-with-mariadb-2nd-
edition-explore-the-powerful-features-of-mariadb-with-practical-
examples-5475706
ebooknice.com
https://ebooknice.com/product/getting-started-with-varnish-cache-
accelerate-your-web-applications-6778218
ebooknice.com
https://ebooknice.com/product/getting-started-with-deep-learning-for-
natural-language-processing-learn-how-to-build-nlp-applications-with-
deep-learning-36407330
ebooknice.com
(Ebook) Building Modern Web Applications with ASP.NET Core Blazor:
Learn how to use Blazor to create powerful, responsive, and engaging
web applications by Brian Ding ISBN 9789355518798, 935551879X
https://ebooknice.com/product/building-modern-web-applications-with-
asp-net-core-blazor-learn-how-to-use-blazor-to-create-powerful-
responsive-and-engaging-web-applications-52198310
ebooknice.com
https://ebooknice.com/product/biota-grow-2c-gather-2c-cook-6661374
ebooknice.com
(Ebook) Mastering Ext JS, 2nd Edition: Learn how to develop advanced
and efficient Internet applications with Ext JS by Loiane Groner ISBN
9781784390457, 1784390453
https://ebooknice.com/product/mastering-ext-js-2nd-edition-learn-how-
to-develop-advanced-and-efficient-internet-applications-with-ext-
js-5470758
ebooknice.com
https://ebooknice.com/product/getting-started-with-the-web-33350162
ebooknice.com
https://ebooknice.com/product/getting-started-with-beaglebone-linux-
powered-electronic-projects-with-python-and-javascript-5060292
ebooknice.com
Getting Started with Meteor js JavaScript Framework
2nd Edition Learn to develop powerful web applications
in minutes with Meteor Isaac Strack Digital Instant
Download
Author(s): Isaac Strack
ISBN(s): 9781785285547, 1785285548
File Details: PDF, 6.93 MB
Year: 2015
Language: english
www.it-ebooks.info
Getting Started with Meteor.js
JavaScript Framework
Second Edition
Isaac Strack
BIRMINGHAM - MUMBAI
www.it-ebooks.info
Getting Started with Meteor.js JavaScript Framework
Second Edition
All rights reserved. No part of this book may be reproduced, stored in a retrieval
system, or transmitted in any form or by any means, without the prior written
permission of the publisher, except in the case of brief quotations embedded in
critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy
of the information presented. However, the information contained in this book is
sold without warranty, either express or implied. Neither the author, nor Packt
Publishing, and its dealers and distributors will be held liable for any damages
caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the
companies and products mentioned in this book by the appropriate use of capitals.
However, Packt Publishing cannot guarantee the accuracy of this information.
ISBN 978-1-78528-554-7
www.packtpub.com
www.it-ebooks.info
Credits
Commissioning Editor
Veena Pagare Indexer
Tejal Daruwale Soni
Acquisition Editors
Subho Gupta Graphics
Jason Monteiro
James Jones
Production Coordinator
Content Development Editor
Manu Joseph
Anish Sukumaran
Cover Work
Technical Editor
Manu Joseph
Menza Mathew
www.it-ebooks.info
About the Author
www.it-ebooks.info
About the Reviewers
Arthur Pham has been working for Thomson Reuters as a lead quantitative
engineer since 2006. He has spent many years designing and implementing
derivative pricing models and still loves to learn new programming languages
such as F#, C++, Python, Flex/ActionScript, C#, Ruby, and JavaScript.
He currently lives in New York, USA, and can be contacted on twitter at @arthurpham.
www.it-ebooks.info
www.PacktPub.com
Did you know that Packt offers eBook versions of every book published, with PDF
and ePub files available? You can upgrade to the eBook version at www.PacktPub.
com and as a print book customer, you are entitled to a discount on the eBook copy.
Get in touch with us at service@packtpub.com for more details.
https://www2.packtpub.com/books/subscription/packtlib
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital
book library. Here, you can search, access, and read Packt's entire library of books.
Why subscribe?
• Fully searchable across every book published by Packt
• Copy and paste, print, and bookmark content
• On demand and accessible via a web browser
www.it-ebooks.info
Table of Contents
Preface v
Chapter 1: Setup and Installation 1
Installing using curl 2
Loading an example application 3
Selecting your file's location 4
Loading the example application 4
Starting the example application 4
Previewing the application 5
Help! I made too many changes! 6
Making code changes 6
Changing from Leaderboard to Yay Science! 7
Summary 10
Chapter 2: Reactive Programming…It's Alive! 11
Creating the Lending Library 11
Creating the base application 12
Creating a Collection 14
Having fun with the browser console 15
Adding some data 17
Displaying collections in HTML 18
Cleaning up 22
Creating a reaction 25
Multiple clients 27
Summary 28
[i]
www.it-ebooks.info
Table of Contents
[ ii ]
www.it-ebooks.info
Table of Contents
[ iii ]
www.it-ebooks.info
www.it-ebooks.info
Preface
We live in amazing times. Advances in medicine, communication, physics, and
all other scientific fields provide us with opportunities to create things that were
literally impossible to create only a short while ago.
Yet, we aren't easily amazed. Moore's law has not only affected how fast our
computers are, it has significantly increased our expectations as well. We've
come to expect wondrous advances, and therefore, what was once amazing has
become…well…expected. It's a rare thing, indeed, to find something that takes
us by surprise—something that renews that childhood sense of wonder we all
secretly want back because it was stolen from us.
Well, get ready to regain some of that wonder. A dedicated group of computer
scientists, who were determined to make something wondrous, have created a
new JavaScript framework called Meteor. You may be thinking, "A new JavaScript
framework? That's nothing special." And, if that's all Meteor is, you'd be correct.
However, fortunately for you, that's not the end of the story.
[v]
www.it-ebooks.info
Preface
And the best part is, it's simple to learn, amazingly simple! You will see an
application come to life right before your eyes, and when you look back at the
number of lines of code it took to create and compare it to the traditional methods
of development, you may actually find yourself saying "wow" or "how did they
do that?"
This book will walk you through the major features of Meteor and show you
how to create an application from scratch. By the end of the book, you will have
created a working, useful application, and you will have a solid understanding of
what makes Meteor different. This may sound like hyperbole, but if you're open
to the idea that something innovative and unexpected can qualify as amazing,
then prepare to be amazed!
Chapter 3, Why Meteor Rocks!, helps you to gain an understanding of the design
patterns that Meteor uses and see examples of these powerful patterns in action.
Chapter 4, Templates, teaches you about Meteor Templates in depth and uses
templates to lay the groundwork for your Lending Library application.
Chapter 5, Data – Meteor Style!, helps you to discover how Meteor handles data,
making an enterprise-level application incredibly simple and robust. Implement
Meteor's data handling quickly and effectively in your application.
Chapter 6, Application Structure – Client, Server, and Public (oh my!), shows you what
changes you can make to the default configuration to make your application more
secure, extensible, and user-friendly.
[ vi ]
www.it-ebooks.info
Preface
• Operating systems:
°° Mac OS X 10.7 (Lion) and above versions
°° Linux x86 or x86_64 architectures
°° Windows 7 and above versions
• Meteor:
°° Meteor version 1.1 or above
The following table will guide you to sites that contain more information:
If you are looking for a step-by-step approach to understand how and when to
use one of the most popular and innovative application development frameworks,
this book is for you.
Conventions
In this book, you will find a number of styles of text that distinguish between
different kinds of information. Here are some examples of these styles, and an
explanation of their meaning.
Code words in text are shown as follows: "The WebElement class also supports
find methods to find child elements."
[ vii ]
www.it-ebooks.info
Preface
When we wish to draw your attention to a particular part of a code block, the
relevant lines or items are set in bold:
//Locate all the Checkbox which are checked by calling jQuery
find() method.
//find() method returns elements in array
List<WebElement> elements = (List<WebElement>)
js.executeScript("return jQuery.find(':checked')");
New terms and important words are shown in bold. Words that you see on
the screen, in menus or dialog boxes for example, appear in the text like this:
"Right-click to open the pop-up menu and select the Inspect element option."
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about
this book—what you liked or may have disliked. Reader feedback is important for
us to develop titles that you really get the most out of.
If there is a topic that you have expertise in and you are interested in either writing
or contributing to a book, see our author guide on www.packtpub.com/authors.
[ viii ]
www.it-ebooks.info
Preface
Customer support
Now that you are the proud owner of a Packt book, we have a number of things
to help you to get the most from your purchase.
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes
do happen. If you find a mistake in one of our books—maybe a mistake in the text or
the code—we would be grateful if you would report this to us. By doing so, you can
save other readers from frustration and help us improve subsequent versions of this
book. If you find any errata, please report them by visiting http://www.packtpub.
com/support, selecting your book, clicking on the errata submission form link, and
entering the details of your errata. Once your errata are verified, your submission
will be accepted and the errata will be uploaded to our website, or added to any list
of existing errata, under the Errata section of that title.
Piracy
Piracy of copyright material on the Internet is an ongoing problem across all media.
At Packt, we take the protection of our copyright and licenses very seriously. If you
come across any illegal copies of our works, in any form, on the Internet, please
provide us with the location address or website name immediately so that we can
pursue a remedy.
We appreciate your help in protecting our authors, and our ability to bring you
valuable content.
Questions
You can contact us at questions@packtpub.com if you are having a problem with
any aspect of the book, and we will do our best to address it.
[ ix ]
www.it-ebooks.info
www.it-ebooks.info
Setup and Installation
Under the hood, Meteor is really just a bunch of files and scripts, which are designed
to make the building of a web application easier. That's a terrible way to describe
something so elegant, but it helps us to better understand what we're using.
After all, Mila Kunis is really just a bunch of tissue wrapped around bone, with
some vital organs inside. I know you hate me now for that description, but you
get the point. She's beautiful. So is Meteor. But it doesn't do us any good to just
leave it at that. If we want to reproduce that type of beauty on our own, we have
to understand what's really going on.
So, files and scripts… We're going to walk you through how to get the Meteor package
properly installed on your Linux or Mac OS X system, and then see the package of files
and scripts in action.
[1]
www.it-ebooks.info
Setup and Installation
curl (or cURL if you want to get fancy) is a command-line tool used to transfer
files and run scripts using standard URL locations. You probably already knew that,
or you probably don't care. Either way, we've described it and we're now moving on
to using it.
Open a terminal window or the command line, and enter the following command:
curl https://install.meteor.com/ | sh
This will install Meteor on your system. curl is the command to go and fetch the
script. https://install.meteor.com is the URL/location of the script, and sh is,
of course, the location of the script interpreter "Shell", which will run the script.
Once you've run this script, assuming you have an Internet connection and the
proper permissions, you will see the Meteor package downloaded and installed:
[2]
www.it-ebooks.info
Chapter 1
The key thing that we're looking for in the preceding installation text is the launcher
script location:
Writing a launcher script to /usr/local/bin/meteor
This location could vary depending on whether you're running this script in Linux
or Mac OS X, but it puts Meteor into a location where you can then access the Meteor
script from anywhere else. This will become important in a minute. For now, let's see
what kind of friendly message we get when the Meteor installation is finished:
To get started fast:
docs.meteor.com
Great! You've successfully installed Meteor, and you're on your way to create your
first Meteor web application!
We want to use the simplest possible example, just to get an idea of how Meteor
works, so we will be creating the leaderboard example. We'll be using the command
line again. This is awesome news if you still have it open! If not, open a terminal
window and follow these steps.
[3]
www.it-ebooks.info
Setup and Installation
As with the Meteor installation itself, the create command script has a friendly
success message:
leaderboard: created.
To run your new app:
cd leaderboard
meteor
There are even instructions on what to do next. How handy! Let's go ahead and do
what our good command-line friend is telling us.
[4]
www.it-ebooks.info
Chapter 1
Yes, that's it. Meteor takes care of everything for us; it reads all the files and scripts,
and sets up the HTTP listener:
[[[[[ ~/Documents/Meteor/leaderboard ]]]]]
We can now take the URL we've been given (http://localhost:3000/) and check
out the example application in a web browser.
You should see a screen with a list containing the names of scientists, similar to the
following screenshot:
[5]
www.it-ebooks.info
Setup and Installation
You can go ahead and poke around the application a bit, if you want to. Click on
Nikola Tesla's name and add 5 points to his score about 20 bajillion times, because
he deserves it. Give some love to Marie Curie because she was so radioactive that
she actually made up the word. Go nuts, friend!
3. Restart your app, and you're good to go. Just type the following command:
$ meteor
Note that the initial scores are random, so it won't look exactly like it did before.
The meteor reset command resets all the data collections and whatnot; so in a
non-random app, the command will indeed reset the app cleanly.
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.
[6]
www.it-ebooks.info
Chapter 1
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:
[7]
www.it-ebooks.info
Setup and Installation
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:
1. 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:
We also need to change the button text from the word points to the word
props. 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>
[8]
www.it-ebooks.info
Chapter 1
Save your changes, and you will see the application update
almost immediately:
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:
[9]
www.it-ebooks.info
Setup and Installation
Summary
Great success! In this chapter, you've successfully installed the Meteor framework,
loaded an example application, and made changes to that application by becoming
familiar with file changes and the reactive nature of Meteor.
You are now ready to start building your very own Meteor application, and learn
more about the elegant features and advantages that come from developing with
Meteor in the coming chapters.
[ 10 ]
www.it-ebooks.info
Chapter 2
Reactive Programming…
It's Alive!
As we learned in Chapter 1, Setup and Installation, Meteor operates on a reactive
programming model. This means that your templates aren't only concerned with
displaying data, but they are also listening for changes to that data so that they can
"react" to those changes. These areas of data where the templates look for changes
are called reactive contexts.
We will now start developing a Lending Library application, lay the framework for
future chapters, and use Meteor's built-in reactive model to track and propagate
changes to our application to all clients that are listening.
Using Meteor, we're going to build a Lending Library. We'll keep track of all our
stuff and who we lent it to, so that the next time we can't remember where we put
our linear compression wrench, we can simply look up who we lent it to last and
get it back from them.
[ 11 ]
www.it-ebooks.info
Reactive Programming…It's Alive!
And when that same friend says, "Are you sure you lent it to me?", you can say,
"Yeah, STEVE, I'm sure I lent it to you! I see you're enjoying your digital cable,
thanks to my generous lending of said linear compression wrench. Why don't you
go find it so that I too can enjoy the benefits of digital cable in my own home!"
Okay, okay, maybe STEVE forgot too. Maybe he's a dirty liar, and he sold your
wrench to pay for his deep-fried Oreo® habit. Either way, you'll have your very
own custom Meteor app that gives you proof that you're not going crazy. And, if
he did sell it for deep-fried carnival food, at least you can make him share his stash
with you while you watch the game at his house.
2. Now, we create our base folder structure for our Lending Library
application:
$ meteor create LendLib
[ 12 ]
www.it-ebooks.info
Chapter 2
5. Welcome to Meteor! is nice and all, but we are going to change this to
Lending Library. Open the LendLib.html file under ~/Documents/Meteor/
LendLib/ in your favorite editor. Towards the top (the sixth line or so), you'll
see the HTML code snippet that's responsible for our greeting. Go ahead and
change Welcome to Meteor! to Lending Library:
<body>
<h1>Lending Library</h1>
6. Save the change. The page will refresh and will look like the following
screenshot:
You may have noticed a reference to a template called hello, just below the
title:
{{> hello}}
[ 13 ]
www.it-ebooks.info
Reactive Programming…It's Alive!
7. Let's make a change in this template as well. Edit LendLib.html and modify
the title of the hello template:
<template name="hello">
<h2>my list</h2>
<button>Click Me</button>
<p>You've pressed the button {{counter}} times.</p>
</template>
Creating a Collection
Okay, so you've just made a few small changes to static files, but what we really
want to see is some dynamic, reactive programming, and some live HTML code!
We need to attach a data source—something that will keep track of our items.
Normally, this would be quite a process indeed, but Meteor makes it easy by
supporting MongoDB, and its own client-side version called Minimongo, out
of the box.
[ 14 ]
www.it-ebooks.info
Chapter 2
• http://en.wikipedia.org/wiki/NoSQL
• http://www.mongodb.org/
• http://www.packtpub.com/books/all?keys=mongodb
Let's create our collection. Inside the LendLib.js file under ~/Documents/Meteor/
LendLib/, we want to add the following highlighted line of code as the first line, and
then save the change:
lists = new Mongo.Collection("lists");
if (Meteor.isClient) {
...
This creates a new collection in MongoDB. Since it comes before anything else in the
LendLib.js file, the collection is available for both the client and server to see. It is
persistent, as we'll see in a moment, and once values are entered into it, they can be
retrieved by any client accessing the page.
To see this persisted object, we'll need to use the console of our web page.
[ 15 ]
www.it-ebooks.info
Reactive Programming…It's Alive!
Since we're using Chrome, the console is available by default. Let's start by
performing the following steps:
This will open our debugging tools. We now want to get into the console.
2. Click on the Console icon found at the extreme right of the debugging
menu bar:
[ 16 ]
www.it-ebooks.info
Chapter 2
You will now have a blinking cursor, and you're ready to check out our
newly minted collection!
2. Being the natural skeptics that we are, we're going to check. To do so, enter
the following command:
> lists.findOne({Category: "DVDs"});
You should then get an Object with an expandable icon next to it.
[ 17 ]
www.it-ebooks.info
Reactive Programming…It's Alive!
3. Click on this icon to expand it, and you should see something similar to the
following screenshot:
We could similarly check for our tools collection by entering the lists.
findOne({Category:"Tools"}) command, but we don't need to. This time we'll
trust that Meteor entered it correctly. We do, however, want to check to see whether
the objects are persistent. To do so, perform the following steps:
1. Refresh the web page. Your console will clear, but the Categories that we
entered have been saved in the persistent Meteor Collection, so we can check
again to see if they're hanging around.
2. Enter the following command in the console:
> lists.find({}).count();
This command finds all records in the lists collection and gives us a total
count. If everything went according to plan, you should have got back a
count of 2.
We're on our way! We've created two categories, and we have one item in each
category. We've also verified that the lists collection is being saved after each
session. Now, let's see about displaying this in our page.
[ 18 ]
www.it-ebooks.info
Chapter 2
This creates a new div element with the contents being filled by a template
partial named categories.
2. Now, at the very bottom of the page, add the skeleton for the categories:
<template name="categories">
</template>
This won't change the appearance of the page, but we now have a template
partial where we can list our categories.
3. Let's put in our section title within the preceding lines of code:
<template name="categories">
<div class="title">categories</div>
</template>
</div>
</template>
This creates the div categories which we can then go through and list all of
our categories. If we only had one record to deal with, the code would look
like this:
<div class="category">
{{Category}}
</div>
[ 19 ]
www.it-ebooks.info
Reactive Programming…It's Alive!
5. But, we need to wrap this into a loop (in this case, an #each statement) so
that we get all the categories:
<template name="categories">
<div class="title">categories</div>
<div id="categories">
{{#each lists}}
<div class="category">
{{Category}}
</div>
{{/each}}
</div>
Notice that we are telling the template "for each record in the lists collection"
with our {{#each lists}} command, and then, "display the Category" with
{{Category}}.
6. If you save these changes and look at the web page, you will see something
like the following screenshot:
This doesn't look much different. Yes, we have our header (categories), but where
are the categories for which we just created our template?
[ 20 ]
www.it-ebooks.info
Chapter 2
There's one more step we need to complete for the categories to show up. Currently,
the template that we just created isn't pointing towards anything. In other words, we
have a lists collection, and we have a template, but we don't have the underlying
JavaScript function that hooks them together. Let's take care of this by performing
the following steps:
...
Template.hello.events({ ...
These code chunks hook up JavaScript functions and objects to the HTML
hello template. Meteor's built-in Template object makes this possible, and
we're going to follow the same pattern, that is, to hook up our categories
template.
3. We've now declared the lists collection for all the templates to use, and we
can have the function return the results from a Meteor.Collection query.
We can do that using the find() command:
lists : function(){
return lists.find({}, { sort: { Category : 1 }});
}
[ 21 ]
www.it-ebooks.info
Reactive Programming…It's Alive!
This code will find every record in the lists collection and will sort the results
by the Category (name). Save these changes, and you will now see a populated
list of categories:
Cleaning up
We're fast approaching a working application, and we want it to look super-shiny
and clean. Let's do a bit of clean up in our code and add some CSS to make things
more readable. To do this, perform the following steps:
1. We don't need the greeting anymore. So, let's get rid of it. To do this,
remove the following lines from LendLib.html and save the page:
<body>
<h1>Lending Library</h1>
{{> hello}}
<div id="categories-container" class="container">
{{> categories}}
</div>
</body>
<template name="hello">
<h2>My Library</h2>
<button>Click Me</button>
<p>You've pressed the button {{counter}} times.</p>
</template>
[ 22 ]
www.it-ebooks.info
Chapter 2
});
Template.hello.events({
...
}); */
3. Now, let's add the Twitter Bootstrap framework, which gives us a lot of style
without much effort. Using a terminal window, create a client folder in /
LendLib/:
$ mkdir ~/Documents/Meteor/LendLib/client
Since Meteor will read and use every file put into the application folder, we want to
eliminate the redundant files. We don't have to worry too much about efficiency, but
some things are just shameful and leaving that much extraneous code lying around
is right up there with enjoying deep-fried carnival food.
1. Navigate to the Bootstrap folder (the name will vary) using the following
command:
$ cd ~/Documents/Meteor/LendLib/client/[bootstrap]/
If you know what you're doing with Bootstrap, you can just copy
the fonts, min.js, and min.css files instead of performing the
preceding instructions.
[ 23 ]
www.it-ebooks.info
Reactive Programming…It's Alive!
After all these changes, your UI should be really clean and simple:
Let's quickly make the UI more distinct and readable. To do this, we must perform
the following set of steps:
1. In LendLib.html, let's change our header from a <div> tag to an <h2> tag,
and change the text from categories to my stuff:
<template name="categories">
<h2 class="title">my stuff</h2>
[ 24 ]
www.it-ebooks.info
Chapter 2
Creating a reaction
Following the creation of our basic template and collection, and with Meteor putting
our lists collection into the reactive context, we can now proceed to watch the
reactive programming model in action.
You will instantly see the page update. Note that, this time, the full page didn't
refresh! This is because, under the hood, Meteor is tracking changes to our reactive
context (in this case, the lists collection) and the template is being updated
immediately after a change is made.
Let's make a few more changes. To do this, enter the same Fraggles command
again:
> lists.insert({Category:"Fraggles"});
But we have too many Fraggles categories now. There are a lot of Fraggles, but
unless you're some weirdo collector, you don't need two categories. So, let's remove
them. However, we can't just erase whatever we want on the client side. This is
a basic safety feature, and if we just let it happen, things could get quite chaotic.
For instance, if we tried to just remove the records using the following command:
> lists.remove({Category:"Fraggles"});
[ 25 ]
www.it-ebooks.info
Reactive Programming…It's Alive!
...then that's quite a no-no. Meteor detects stuff like this and will give us a 403 error
as follows:
There are three ways in which we can manually delete or modify records.
• The first is on the client side, by finding the ID of the record. In your browser
console, run the following command:
> lists.findOne({Category:"Fraggles"});
This will return a single record, including an _id property, similar to the
following screenshot:
• The second way is to use meteor shell. In a new terminal window (keep
your app running!), navigate to ~/Documents/Meteor/LendLib/ and enter
the following command:
$ meteor shell
This will open a console that is directly connected to the server so that we can
run commands as if they were server code; for example:
> lists.remove({Category:"Fraggles"});
This will remove all categories that are named Fraggles. The meteor shell
command comes in handy when we need to run tests or debug, so keep this
command in your pocket to use when you need it.
• The final way to delete records is how we did it in the previous chapter, with
meteor reset. In fact, let's do that right now. Stop your application from
running (Ctrl + C) and execute the following command in the terminal:
$ meteor reset
[ 26 ]
www.it-ebooks.info
Chapter 2
Start Meteor again with the meteor command, and your application screen should be
nice and clean:
It would probably be good to have a couple of categories, so let's create them really
quickly. In the browser console, enter the following commands:
> lists.insert({Category:"Collectibles"});
> lists.insert({Category:"DVDs"});
> lists.insert({Category:"Tools"});
As you can see, the changes are made instantly, with no page refresh.
Multiple clients
Good things should be shared. Meteor gets this, and as we're about to see for
ourselves, the reactive programming model allows us to share updates in real time
across multiple clients.
With your Chrome web page still open to http://localhost:3000/, open a new
browser tab and navigate to the same page.
If you really want to get fancy, you can conduct this same
experiment with multiple browsers (Firefox, Opera, or Safari).
Each session will be live and reactive!
You now have two clients open, which is simulating the application being open by
different people, at different locations, with different computers. Meteor's reactive
model allows you to treat all clients in the same manner, and a change made by one
will be propagated to all the others.
With your eyes on the new second browser, type the following command into the
console of browser #1:
> lists.insert({Category:"Vinyl Records"})
[ 27 ]
www.it-ebooks.info
Reactive Programming…It's Alive!
You will notice that the change propagates to both browsers, without a page refresh:
Feel free to make any extra collections, to remove or rename them, and so on.
Experiment a little and notice how these changes can be instantly made to every
listening client. Meteor operates under a very powerful paradigm, and in the next
chapter, you'll be able to see exactly why this is such an important and disruptive
change to web application development.
Summary
In this chapter, you successfully created the framework for your new Meteor
application. You saw firsthand how quickly a new project can be created, and you
created database and template functionality with just a few lines of code. You saw
live HTML and reactive programming in action, and you are now ready to go even
deeper into the Meteor engine. You've conquered the tip of the iceberg, my friend.
Take a break, have a cold one, and get ready for even more Meteor awesomeness!
[ 28 ]
www.it-ebooks.info
Discovering Diverse Content Through
Random Scribd Documents
"And don't I want you to be happy? You know I'd do
anything in the world for you! Don't you, now? I'd promise
faithful never to touch a drop of anything again, if that
would make it all right."
"James, you are not to speak so! And it's no use. You
promised me—faithfully—that you would stick to work, the
next that came in your way; and you threw it up the first
thing."
"Father!"
"Eh; it's you, is it?" said Plunkett. He did not think much
of seeing the two together, merely supposing that they had
just met, and Todd remarked,—
"Fine day!"
"Father, James has walked with me all the way from the
Common,—from half over the Common. I did not want him.
I've let him do it before, and I was wrong; and I told him
not to-day, and he would come."
"I told him I would tell you, and now I have," said
Marigold. Then she went indoors, leaving the two together.
"An idle fellow like that! You've too much sense to care
for him!"
"I should think not! Father, I did think he was one that
would speak true."
"Well, the best thing you can do is to see no more of
him," said Plunkett decisively. "There's no sort o'
dependence to be put on Todd. He's not fit for you, and
you're a deal too good for him. And what's more, you'll
never marry him with my will. So the sooner you can forget
him, the better. I've said enough to stop his looking in here,
again, in a hurry. And I'm sure you'd need be grateful to
Mrs. Heavitree, for the trouble she's taken."
CHAPTER IX.
NOT SO BAD.
RESENTMENT at Todd's declaration that "it was all a
mistake," and that "he hadn't meant to marry nobody,"
gave Marigold a good deal of help in casting aside overmuch
thought of him. Had he been grieved and disappointed only,
she would have been grieved too; and he might have
retained his power over her; but now Marigold's womanly
self-respect was up in arms.
She had not come down till the middle of the day, and
was suffering a good deal; but her face, though yellow and
drawn, had lost much of its acidity. "Why, nothing I could do
pleased you, and yet you're as good to me now—"
"I'm sure I don't know," she said. "I know I used to feel
so dreadful bad, I didn't know how to drag through the
days; and I could have flown out at anybody. The day we
went to the beasts' show—oh, dear! Part of the time I could
get along; and then the pain came on, till it turned me sick,
and I didn't half know what I was about, and the thought of
going home all alone—oh dear me!"
"Yes."
"At first she said not. I reasoned the matter with her.
Some measure of risk must exist, of course, in such a case;
but there is every probability that she would bear it well,
and would enjoy excellent health afterwards. If she goes on
in her present state, life cannot be lengthened many
months. A year or two at most."
"I don't know how to thank you, sir," said Marigold, with
difficulty. "It is so very very kind!"
"No," she said. "I hope I shan't, nor the girls neither. I'd
like to be a better friend to them than I was before I left;
and a better wife to you. And most of all, I'd like to serve
God truer. I thought I was going to leave you all; and now
He's put me back into life; and I'd like to make a good use
of my time. That's what I want."
Updated editions will replace the previous one—the old editions will
be renamed.
1.D. The copyright laws of the place where you are located also
govern what you can do with this work. Copyright laws in most
countries are in a constant state of change. If you are outside the
United States, check the laws of your country in addition to the
terms of this agreement before downloading, copying, displaying,
performing, distributing or creating derivative works based on this
work or any other Project Gutenberg™ work. The Foundation makes
no representations concerning the copyright status of any work in
any country other than the United States.
1.E.6. You may convert to and distribute this work in any binary,
compressed, marked up, nonproprietary or proprietary form,
including any word processing or hypertext form. However, if you
provide access to or distribute copies of a Project Gutenberg™ work
in a format other than “Plain Vanilla ASCII” or other format used in
the official version posted on the official Project Gutenberg™ website
(www.gutenberg.org), you must, at no additional cost, fee or
expense to the user, provide a copy, a means of exporting a copy, or
a means of obtaining a copy upon request, of the work in its original
“Plain Vanilla ASCII” or other form. Any alternate format must
include the full Project Gutenberg™ License as specified in
paragraph 1.E.1.
• You pay a royalty fee of 20% of the gross profits you derive
from the use of Project Gutenberg™ works calculated using the
method you already use to calculate your applicable taxes. The
fee is owed to the owner of the Project Gutenberg™ trademark,
but he has agreed to donate royalties under this paragraph to
the Project Gutenberg Literary Archive Foundation. Royalty
payments must be paid within 60 days following each date on
which you prepare (or are legally required to prepare) your
periodic tax returns. Royalty payments should be clearly marked
as such and sent to the Project Gutenberg Literary Archive
Foundation at the address specified in Section 4, “Information
about donations to the Project Gutenberg Literary Archive
Foundation.”
• You comply with all other terms of this agreement for free
distribution of Project Gutenberg™ works.
1.F.
1.F.4. Except for the limited right of replacement or refund set forth
in paragraph 1.F.3, this work is provided to you ‘AS-IS’, WITH NO
OTHER WARRANTIES OF ANY KIND, EXPRESS OR IMPLIED,
INCLUDING BUT NOT LIMITED TO WARRANTIES OF
MERCHANTABILITY OR FITNESS FOR ANY PURPOSE.
Please check the Project Gutenberg web pages for current donation
methods and addresses. Donations are accepted in a number of
other ways including checks, online payments and credit card
donations. To donate, please visit: www.gutenberg.org/donate.
Most people start at our website which has the main PG search
facility: www.gutenberg.org.