Meteor – What is Meteor? – Meteor on the Client Side - Blaze

What is Meteor?

• A full-stack Javascript web framework
  • Blaze Templating Engine (similar to Handlebars)
  • MongoDB
  • Node.js Backend
  • Command-line Tools
  • Packaging System
  • Deploying Server (apps can be published at [appname].meteor.com)
• NOT REST-based like Express

Installation

• No official Windows support. For unoffical Windows support, there is win.meteor.com
• You can also try Meteor in a browser at meteorpad.com

Command-Line Tools

• To create a new project: meteor create [project name]
• To run your application: meteor
• To go to the Mongo command line: meteor mongo
• To deploy to meteor.com: meteor deploy [site name]

Meteor on the Client Side - Blaze

• As mentioned before, Blaze uses spacebars, which are very similar to handlebars
• Standard tags such as {{#if [expression]}}, {{else}}, {{#each [array]}} are all available
• These tags "react" to changes in a collection and other factors automatically

Meteor on the Client Side - Templates

• A template is defined by the tag <template name="[name]">
• You can then use it in your HTML as {{> [template name]}}
• Templates can be nested within templates, giving your HTML a hierarchical structure.
• Variables used within templates are defined within your code.
  • Template.[template name].helpers lets you define functions for each of the variables in your template.
  • Template.[template name].[variable name] can also be used for just a single variable.
• Events for templates (for example, a button click) are also defined in Javascript as Template.[template name].events

Meteor on the Client Side - Packages

• Many popular client side libraries are available already as packages.
• When you add a packages, the packages CSS and JS are automatically included in your project.
• To add Bootstrap: meteor add bootstrap
• To search for a package: meteor search [name]
• You can also search Meteor packages at atmospherejs.com

Collections

• Meteor collections are stored on both the client (Minimongo) and server (Mongo) by default.
• To declare a new collection (typically done on both client and server): People = new Mongo.Collection("people");
• Remember that this is NoSQL, so there is no such thing as a schema.
• Standard methods such as insert, find, delete, update, upsert exist for these collections.

Users

• Every Meteor application has a Users collection and API built in.
• The client can use Meteor.user() or Meteor.userId() to get information about the user currently signed in, or Meteor.users to get information about all users.
• The accounts-ui package makes the user login process super easy.
  • First add accounts-ui, then one or more of accounts-base, accounts-google, accounts-facebook, accounts-github, etc.
  • This adds the loginButtons template to your HTML.
  • When you click on the login buttons for the first time, you can configure 3rd party logins.

Meteor on the Server

• Meteor applications typically don't use very much server logic.
• Server side logic is necessary for several things:
  • Access control of collections via publish
  • Integration with npm packages
  • Initial or periodic actions

Integrating NPM Packages

• Meteor allows use of npm packages by creating what's known as a "smart package".
• To start, create a packages directory and then a directory for your smart package inside this.
• Create a package.js file.
• The package.js should contain a description of the package with Package.describe, an Npm.depends, and Package.on_use that adds other JS files to the package and exports variables.
• Then do meteor add [package name] and the exported variables should be available server-side.

Making Apps More Secure

• Obviously, full client access to collections is bad for security.
• Meteor comes with two packages by default, autopublish and insecure, that make for easier development but should not be used in production.
• Autopublish mirrors the server-side database to the client, and insecure allows the client to modify anything in the database.
• To make an app ready for production, simply remove these two packages.

Publish and Subscribe: The Secure Way of Managing Data

• Meteor.Publish is used to make a certain subset of data available to the client (for example, only the currently logged in user's messages).
• Meteor.Subscribe must be used on the client to have access to these data subsets.
• For modifying database info, you can then use Meteor.methods on the server.

Advantages of Using Meteor

• Apps generally take very little time to create compared to other frameworks and with less files.
• With collection mirroring and built-in accounts, development is simple.
• Hot code push - you don't even have to refresh the page to see an update.
• Free deployment environment at meteor.com.
• PhoneGap support - Great for creating mobile apps.

Disadvantages of Using Meteor

• Still under heavy development
  • Until the 1.0 release, each update brings drastic changes.
  • Recent updates have temporarily broken some packages.
• Can put a lot of strain on the client.
• Only supports Mongo at the moment.
• A little effort has to be taken with each app to make it secure for production.

Meteor Hackathon

Meteor Hackathon

Meteor Hackathon

Meteor Hackathon

Meteor Hackathon

Meteor Hackathon