Book Image

Getting Started with Meteor.js JavaScript Framework

By : Isaac Strack
Book Image

Getting Started with Meteor.js JavaScript Framework

By: Isaac Strack

Overview of this book

<p>Meteor is a brand new platform built entirely in JavaScript that allows you to build modern, dynamic web applications in the blink of an eye. With support for nearly every popular JavaScript framework (and more being added every day), Meteor provides you with the ability to quickly and easily develop sophisticated and stylish web applications.<br /><br />"Getting Started with Meteor" is an easy to follow, step-by-step approach to learning how to build modern web applications with Meteor. Through the development of a complete and ready-to-use application, you will experience exactly how easy and fast it can be to develop robust, flexible web applications, so you can build your own “killer” app in no time.<br /><br />"Getting Started with Meteor" will walk you step-by-step through all the major advantages that Meteor has to offer. You’ll be up and running in less than two minutes, and will develop an actual application you can use. As you move quickly through the exercises, you’ll be able to experience first-hand how easy it is to develop in Meteor, and will gain invaluable best practices you can apply immediately to your coding projects.<br /><br />You will learn about reactive programming and how Meteor takes advantage of the latest web technologies. You will gain a solid understanding of what&nbsp; the best design patterns are for developing web apps, and when to use them. You will learn how Meteor uses HTML templates and NoSQL (document-based) databases together to make coding applications simple and fun. Finally, you’ll gain best practices for security and performance, making your web applications fast, secure, and easy to use. If you want to build a web application but hate how difficult it seems to be, this book will show you the easy way to build and deploy modern web apps.<br /><br />This book will teach you everything you need to know to get up and running with Meteor, and start you on your way to becoming an expert web applications developer.</p>
Table of Contents (14 chapters)

Making code changes


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.

Changing from todos to items

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.

  1. Change title in the head section:

    <head>
      <title>Items</title>
    </head>
  2. 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.

  1. 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:

  2. We need to deal with one more area, and we've successfully turned our todos application into an items 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>
  3. Save your changes, and check your work: