This course is outdated and does not reflect our current course standards.
Table of Contents
Building a Meteor App
IntroductionChris Mather begins the Meteor course by talking briefly about his company Evented Mind. He also opens the Flack app he will be building and discusses his approach for delivering the content of the course.
Using TemplatesMeteor applications use a tempting syntax similar to Handlebars or Mustache. Chris demonstrates this template syntax while creating a new Meteor application. He also introduces the #each helper which can be used to iterate over a value and generate markup.
Creating CollectionsOut of the box, Meteor uses Mongo to manage the storage of data for both the client and server. Mongo Collections return a cursor object which provide a helpful API for facilitating updates to the user interface when the data is changed.
Handling EventsChris creates another template for adding new comments. This leads him into demonstrating how to handle events in Meteor. Chris creates an event handler
Building a Meteor App Q&AChris spends a few minutes answering audience questions. He clarifies the difference between a helper and an event handler. He also talks about scalability and browser compatibility.
Adding PackagesMeteor packages are similar to Ruby Gems or NPM modules. Packages can be installed directly from the command-line. Chris demonstrates how to add the MomentJS package for handing Date formats. He also walks through the atmospherejs.com website which makes it easy to find Meteor packages.
Formatting a TimestampChris demonstrates how to add the formatTimestamp function that is passed a timestamp and uses the MomentJS package to return a formatted date string.
Understanding HTTPChris takes a break from Meteor topics to speak generally about how applications are served over a network. First, he explains the basics of HTTP and how a browser request files over a network. He also shows the large number of packages that make up a Meteor application and talks about how build process will concatenate and minify these files.
HTTP and PollingApplications can use AJAX requests to check for more data at a certain interval. This technique is referred to as “polling”. Chris explain how polling compares to traditional requests and also introduces “long polling”.
Web Sockets & DDPWhile polling works for making periodic background requests, Web Sockets are more efficient since they keep the connection with the server open. This leads Chris to introduce DDP or the Distributed Data Protocol.
Publish & SubscribeIn Meteor, clients can subscribe to a data stream from the server. The server will publish to all connected clients simultaneously over DDP. Chris sets up this subscription model inside the Flack application and tasks the audience with publishing a cursor. He also talks briefly about the Meteor documentation.
SubscribingChris adds the code enabling the server to publish a data stream to any connected client. He also spends some time introspecting the the DDP messages that are sent between client and server when a subscription starts.
Stopping SubscriptionsNext, Chris takes an in-depth look at the DDP messages sent when a subscription is stopped. After that, Chris inserts a record into the Mongo database to demonstrate how the application responds to changes in the collection. When the database is changed, a new DDP message is sent to all connected clients and the user interface is updated.
Adding to CollectionsInstead of connecting to the Mongo database, Chris modifies the server code to create a collection of data manually. He inserts rows using the added() method to help illustrate what a cursor object is doing under the hood.
Publishing ChangesChris continues his examination of DDP message by comparing the changed() method with the added() method. The changed() method will send a changed DDP message when a document is altered. He also demonstrates that adding a field to an existing document will also trigger and changed message.
Removing FieldsChris answers a few audience questions about modifying fields in a collection. After that, he demonstrates how to completely remove a field. This sends a DDP changed message with an action of “cleared” and a value containing the field that was removed.
Server-side DebuggingChris talks for a few minutes about server-side debugging in Meteor with Node Inspector. He installs Node Inspector and demonstrates how it listens on a separate port to enable browser-based debugging of the server code.
Meteor SourceAfter answering a could audience questions, Chris wraps up his discussion about DDP messages by demonstrating the removed() and error() messages. He also spends a few minutes walking through the Meteor source code to reiterate that Meteor is made up of a large number of core packages.
Observing ChangesMeteor provides an API for observing changes on a cursor. Using the observeChanges function, developers can register handlers for when the added, changed, and removed functions are called. Chris demonstrates how to respond to these changes on the server side.
Implementing Cursor FunctionsNow that Chris has explained the process for observing changes on a cursor, he implements his own added(), changed(), and removed() functions for a cursor. He also includes the ready() function and an API for stopping the subscription.
Q&A: Custom Databases and observeChangesChris pauses to field some audience questions. These questions include tying Meteor into a different database architecture to using and practical use cases for the observeChanges API.
Remote Procedure Calls
RPC IntroductionA remote procedure call is the ability to directly call a function on the server. Christ spends a few minutes diagramming what an RPC call looks like and how it will be implemented.
Creating an RPC FunctionChris uses the Meteor.methods function on the server to create a function that can be used in a remote procedure call. He then calls the function from the browser console to demonstrate that a network request is sent when the function is called.
Calling an RPC FunctionNow that Chris has created a function on the server that can be called, he adds the client code to call the function and handle the returned value. Once the client code is working, he pauses to answer few questions about call vs. apply.
RPC & CollectionsIn Meteor, collections use remote procedure calls under the hood. Chris diagrams the flow of data when calling the insert() method on a collection to illustrate how RPCs are used when communicating with the Mongo database.
Client SimulationClient simulation is a technique of implementing a server RPC server function on the client. This allows the client to respond immediately the request without having to wait for the server. Once the server responds, the client can synchronize the local store and user interface with the result.
Q&A: Client Simulation & Local vs Server StorageChris spends the next few minutes answering audience questions about client simulation and local vs. server data storage.
Adding SecurityChris adds a couple Meteor packages to enable authentication and better secure access to the database. He then creates a login template and adds logic to verify if the user is logged in before allowing them to add comments. For the purpose of this demo, Chris is using GitHub OAuth authentication.
Displaying User InformationSince the application now has authentication, Chris adds more user information to the interface. Since he has access to the user information, he can make the comment data more dynamic. While implementing these changes, Chris also answers a few audience questions.
Securing the CollectionChris wraps up his conversation on security by securing the collection. Up to this point, anything can be written to the database. Using the allow() method on the Comments collection, Chris is able to business logic to verify well-formed data is being inserted, updated, and removed. - AT 4:39:24 - Audio is out of sync again
Course Q&AChris spends a few minutes answering audience questions before concluding the first day of the course.
OpLog TailingBefore moving on to the next section, Chris spends some time talking in detail about the OpLog. The OpLog is a record of all Mongo transactions. Through an API, Meteor “tails” this OpLog enabling the pushing of data to connected clients when changes occur.
Template APIChris dives a little deeper into the Meteor’s template API. He first creates a simple template. Then he explores the Template namespace to look at the properties and methods that exist on teach template. Finally, he looks at the code behind Meteor’s rendering of templates on the page.
Template Meteor PackagesChris briefly explores the source code for two Meteor packages, Blaze and Spacebars, to provide some additional resources for learning more about the rendering engine. He also answers a few audience questions about other tempting frameworks and lifecycle methods.
SessionThe Session object in Meteor is a key-value store. Through the Session API, getters and setters are used to update these values. When a value’s data source is changed, the user interface is automatically updated to reflect the new value.
Custom Global HelpersIn response to an audience question, Chris demonstrates how to create a custom global helper function. Rather than defining a helper that’s scoped to a specific template, He uses the registerHelper function to make the helper global. Chris also spends a few minutes exploring the Call Stack panel in Google Chrome.
With HelperThe with helper can be used to define a special data context within a template. The helper is passed a function that will return an object. This object will become the data context for the template to find any referenced properties.
If HelperChris dives a little deeper into the “if” helper. He talks about why calling a function from the if helper is more powerful can utilize the reactive properties of Meteor. Chris also demonstrates that helpers like “if” only trigger a repaint of their block, not the entire page.
ReactiveVarChris installs the reactive-var package which will allow for the creation of individual reactive variables as opposed to a Session which is a dictionary of variables. Like a Session, a ReactiveVar has a getter and a setter. Chris compares these two constructs and also answers a few audience questions about helpers.
TrackerChris goes under the hood of Meteor’s reactive nature to better explain how function like helpers are re-run. This is facilitated by a Meteor package called Tracker. The Tracker package creates a computation, or function-wrapper, which re-runs a function whenever it’s invalidated.
ComputationsChris implements the computation logic that will re-run a function whenever it is invalidated. This allows him to demonstrate how the function is queued and when the invalidation loop runs. Chris also introduces the Tracker.flush() method which will process all reactive updates immediately, bypassing the queue.
Tracker DependencyA Tracker Dependency is a unit of reactive data that a computation depends on. For example, a Session will create a different dependency for each of it’s properties. When a piece of data is changed, the dependency will cause the computation to invalidate.
Reactivity RecapChris spends a few minutes reviewing the concept of reactive data in Meteor. The core concept is a need to respond to changing data.
Stacking ComputationsChris uses the debugger to step through the function call stack in an attempt to clarify how computations are added to the dependency tracker. When the depend() function is called, any computation in the scope of the containing function are added in the order they are encountered.
Building a Data SourceChris demonstrates how to building a custom data source modeled after a Meteor ReactiveVar. He creates a get() method which returns the value of the object. He also tasks the audience with creating a set() method that changes the value and triggers a change in the dependency.
Changing a Data SourceChris walks through the solution for adding a dependency to track the data source as well as a setter that will trigger a change in the dependency. He also describes the role of the depend function in greater detail.
ReactiveVar SourceAfter answers a couple audience questions, Chris walks through the Meteor source code for the ReactiveVar package to show how reactive code is implemented.
Non-Reactive DataIf a situation arises where a function should not re-run when a change in the data source occurs, the Tracker.nonReactive method can be used to avoid the re-execution. Chris demonstrates how to implement a non-reactive function and answers a few audience questions about order of execution.
Flack Application SetupChris walks through the project files for the Flack application he will be building. Most of the HTML and CSS code is already implemented. He will be focusing on adding the client/server code to make the application functional.
Server FunctionsChris explains the two publishing functions on the server that provide a list of comments and a list of users. He also spends a few minutes describing the code behind the “invite a friend” feature which sends an email to a friend from the current user. Chris ends with a walk through the way the application manages auth-tokens when users are created.
UI StoryboardChris storyboards the user interface functionality of the application. This includes the adding of rooms, sending invites and overall chat functionality.
Adding CommentsChris adds the CommentsAdd template to the layout. After doing this, he implements the form-submit event that will take any text entered in the comments field and add it to the collection.
Updating Security RulesBefore the comments can be added to the collection, the insert, update, and remove security rules in the collection’s allow function need to be implemented. Chris adds logic to verify the current user before allowing a comment to be added.
Rendering CommentsChris adds an #each block to the CommentsList template that will loop through and display all the comments. He also shows the CommentItem and verifies comments are rendering correctly.
Subscribing to Rooms CollectionNext Chris adds code to subscribe to the rooms collection. This will allow the list of active rooms to be displayed in the left column of the Flack application.
Active Room UIThe current room in the list needs an extra CSS class so it will be recognized as the active room. Chris implements a template helper function that will conditionally decide if a room is the active room.
Switching RoomsClicking on a room will need to change the active room. Chris walks through how to add a click event to the room elements. He also explains why he has the main room hard-coded and a filter for all rooms that are not the main room.
Updating Room ContentNow that Chris has implemented the ability to switch rooms, the content for the room needs updating. Chris adds a helper function that will display the correct room name above the comments. He also makes sure the comments list is pulling from the active room and modifies the insert function to add new comments correctly.
Adding RoomsWhen the user clicks the plus button, a modal dialog should appear with a form to add a new room. Chris first adds a showRoomAddDialog helper function for making the modal visible. After the new room is added to the collection, the dialog is closed and the new room becomes the active room.
Inviting FriendsThe invite-a-friend feature will send an email to a new user to join the Flack application. Chris walks through how to add a confirmation message after the email is sent.
Deploying the ApplicationChris wraps up the Flack application be demonstrating how to deploy it to meteor.com . He uses the “meteor deploy” command to package all the necessary files and upload them to their destination. He also answers a few audience questions about pagination and other deployment methods.
Iron RouterIron Router is a client and server router Chris designed for Meteor applications. Currently, it’s an external package, but in the future, routing will be core to Meteor. Chris adds the Iron Router package to a new application to demonstrate how routing is handled in Meteor.
Rendering TemplatesInside the route handler, Chris adds a render function to indicate which template should be rendered when the given route is detected. He then introduces the syntax for creating dynamic routes which makes it possible for one route definition to render multiple templates.
Routing Data ContextChris explains how a route can provide a data context for a template. This is done by adding a data property to the render function. The data property can be a basic object or something more reactive like the result of the find() function of a Mongo collection.
Managing Many RoutesIf an application requires managing a large number of routes, the route() method can be passed an object instead of a function. The purpose of this object is to specify templates and subscription handles in a cleaner, more readable way.
Yield RegionsIn response to an audience questions, Chris spends a few minutes explaining yield regions. Yield regions allow you to specify where child templates will be placed in a layout when a route function is called. This allows for the reuse of layouts across multiple templates.
Final QuestionsChris wraps up the course by fielding a few last audience questions about layouts and a little more information about Iron Meteor.