[frontendmasters.com] Meteor [2015, ENG]

Table of Contents
Building a Meteor App
Introduction
00:00:00 - 00:06:07
Introduction
Chris 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 Templates
00:06:08 - 00:14:49
Using Templates
Meteor 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. - https://github.com/eventedmind/class-frontend-masters
Adding JavaScript
00:14:50 - 00:25:22
Adding JavaScript
The Template namespace in Meteor exposes a JavaScript API for accessing all template objects. This allows developers to add helper functions to each template.Chris creates the comments function that will return an array of objects and display them on the page.
Creating Collections
00:25:23 - 00:32:38
Creating Collections
Out 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 Events
00:32:39 - 00:42:18
Handling Events
Chris 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&A
00:42:19 - 00:55:27
Building a Meteor App Q&A
Chris 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.
Core Systems
Adding Packages
00:55:28 - 01:03:20
Adding Packages
Meteor 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. - https://atmospherejs.com
Formatting a Timestamp
01:03:21 - 01:08:04
Formatting a Timestamp
Chris demonstrates how to add the formatTimestamp function that is passed a timestamp and uses the MomentJS package to return a formatted date string. - https://eventedmind.com/classes/getting-started-with-meteor
Understanding HTTP
01:08:05 - 01:17:52
Understanding HTTP
Chris 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 Polling
01:17:53 - 01:24:01
HTTP and Polling
Applications 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 & DDP
01:24:02 - 01:33:36
Web Sockets & DDP
While 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. - https://eventedmind.com/classes/introduction-to-ddp-01cfb402
Publish & Subscribe
01:33:37 - 01:45:02
Publish & Subscribe
In 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.
Subscribing
01:45:03 - 01:54:57
Subscribing
Chris 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 Subscriptions
01:54:58 - 02:07:03
Stopping Subscriptions
Next, 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.
DDP Messages
Adding to Collections
02:07:04 - 02:19:09
Adding to Collections
Instead 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. - https://eventedmind.com/classes/pub-sub-in-meteor
Publishing Changes
02:19:10 - 02:30:44
Publishing Changes
Chris 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 Fields
02:30:45 - 02:38:24
Removing Fields
Chris 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 Debugging
02:38:25 - 02:45:21
Server-side Debugging
Chris 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 Source
02:45:22 - 02:51:46
Meteor Source
After 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 Changes
02:51:47 - 03:05:38
Observing Changes
Meteor 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 Functions
03:05:39 - 03:16:41
Implementing Cursor Functions
Now 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 observeChanges
03:16:42 - 03:27:32
Q&A: Custom Databases and observeChanges
Chris 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 Introduction
03:27:33 - 03:32:02
RPC Introduction
A 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. - https://eventedmind.com/classes/rpc-meteor
Creating an RPC Function
03:32:03 - 03:41:29
Creating an RPC Function
Chris 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 Function
03:41:30 - 03:51:03
Calling an RPC Function
Now 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 & Collections
03:51:04 - 03:59:50
RPC & Collections
In 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 Simulation
03:59:51 - 04:05:04
Client Simulation
Client 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 Storage
04:05:05 - 04:14:01
Q&A: Client Simulation & Local vs Server Storage
Chris spends the next few minutes answering audience questions about client simulation and local vs. server data storage.
Security
Adding Security
04:14:02 - 04:26:03
Adding Security
Chris 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 Information
04:26:04 - 04:38:47
Displaying User Information
Since 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 Collection
04:38:48 - 04:43:00
Securing the Collection
Chris 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&A
04:43:01 - 04:49:29
Course Q&A
Chris spends a few minutes answering audience questions before concluding the first day of the course.
OpLog Tailing
04:49:30 - 05:00:57
OpLog Tailing
Before 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.
Templates
Compiling Templates
05:00:58 - 05:11:36
Compiling Templates
Chris explains the compilation process templates undergo to get rendered in the browser. The Spacebar syntax is complied into JavaScript and added to the body dynamically by Meteor.
Template API
05:11:37 - 05:23:57
Template API
Chris 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 Packages
05:23:58 - 05:32:27
Template Meteor Packages
Chris 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.
SEO
05:32:28 - 05:46:27
SEO
JavaScript-driven user interfaces can present challenges for search engine optimization. Meteor has a package named Spiderable can make an application more SEO-friendly. Chris walks through how install Spiderable and talks briefly about PhantomJS. He then demonstrates what search engines will see when browsing the application.
Meteor Reactivity
Session
05:46:28 - 05:54:37
Session
The 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. - https://eventedmind.com/classes/meteor-reactivity-with-deps
Custom Global Helpers
05:54:38 - 06:07:58
Custom Global Helpers
In 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 Helper
06:07:59 - 06:17:20
With Helper
The 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 Helper
06:17:21 - 06:24:10
If Helper
Chris 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.
ReactiveVar
06:24:11 - 06:33:51
ReactiveVar
Chris 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.
Tracker
06:33:52 - 06:43:36
Tracker
Chris 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.
Computations
06:43:37 - 06:54:12
Computations
Chris 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 Dependency
06:54:13 - 07:05:14
Tracker Dependency
A 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 Recap
07:05:15 - 07:09:51
Reactivity Recap
Chris spends a few minutes reviewing the concept of reactive data in Meteor. The core concept is a need to respond to changing data.
Stacking Computations
07:09:52 - 07:20:09
Stacking Computations
Chris 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 Source
07:20:10 - 07:27:45
Building a Data Source
Chris 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 Source
07:27:46 - 07:38:40
Changing a Data Source
Chris 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 Source
07:38:41 - 07:50:19
ReactiveVar Source
After 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 Data
07:50:20 - 07:57:00
Non-Reactive Data
If 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
Flack Application Setup
07:57:01 - 08:03:53
Flack Application Setup
Chris 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 Functions
08:03:54 - 08:12:41
Server Functions
Chris 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 Storyboard
08:12:42 - 08:15:42
UI Storyboard
Chris storyboards the user interface functionality of the application. This includes the adding of rooms, sending invites and overall chat functionality.
Adding Comments
08:15:43 - 08:28:59
Adding Comments
Chris 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 Rules
08:29:00 - 08:36:01
Updating Security Rules
Before 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 Comments
08:36:02 - 08:38:31
Rendering Comments
Chris 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 Collection
08:38:32 - 08:45:22
Subscribing to Rooms Collection
Next 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 UI
08:45:23 - 08:56:12
Active Room UI
The 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 Rooms
08:56:13 - 09:05:16
Switching Rooms
Clicking 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 Content
09:05:17 - 09:12:32
Updating Room Content
Now 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 Rooms
09:12:33 - 09:21:14
Adding Rooms
When 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 Friends
09:21:15 - 09:24:06
Inviting Friends
The 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 Application
09:24:07 - 09:31:39
Deploying the Application
Chris 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 Meteor
Iron Router
09:31:40 - 09:40:37
Iron Router
Iron 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 Templates
09:40:38 - 09:46:57
Rendering Templates
Inside 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 Context
09:46:58 - 09:58:23
Routing Data Context
Chris 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 Routes
09:58:24 - 10:01:42
Managing Many Routes
If 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 Regions
10:01:43 - 10:06:53
Yield Regions
In 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 Questions
10:06:54 - 10:12:27
Final Questions
Chris wraps up the course by fielding a few last audience questions about layouts and a little more information about Iron Meteor.