© Copyright SELA Software & Education Labs, Ltd. | 14-18 Baruch Hirsch St., Bnei Brak, 51202 Israel | www.selagroup.com
SELA DEVELOPER PRACTICEMay 31st – June 4th, 2015
Noam Kfir
Meteor: The JavaScript App Platform
Meteor Overview
Meteor is a full-stack JavaScript framework
Founded in 2011 and incubated at YCombinatorOpen source with a very active communityProduction-ready
Simplifies many common development tasksEasy to learnIntegrates with your all your favorite frameworks and libraries
IDE and Editor Support
WebStorm: Meteor plugin (enabled by default)
Visual Studio: Meteor Tools for Visual Studio (not mature)
Sublime: TernJS package
Atom: Meteor Api and Meteor Helper packages
Installing Meteor
Install package directly from meteor.comOn Windows, use the installer: https://install.meteor.com/windowsOn Mac and Linux, run: curl https://install.meteor.com/ | sh
Avoid alternate sourcesThe npm and chocolatey packages were not submitted by Meteor and are outdated and unmaintained
Demo
Install Meteor
Creating a Meteor Project
Create a project:meteor create <app-name>
Or create an app based on a built-in example:meteor create --listmeteor create --example example-name
Or use the jetBrains Meteor pluginEnabled by default on WebStorm
Demo
Create a Meteor Project
Running the Meteor Project
Run the project in debug mode:meteor
Run the project in production mode:meteor run --production
Demo
Compare Debug and Production Modes
Writing HTML
Meteor generates the HTML file and the <html> element
Our HTML files should only contain these elements:<head><body><template>
<head> and <body> elements are collected and concatenated<template> elements represent reusable views
Auto-Reload and Hot Code Push
Meteor has its own auto-reload mechanismSupports hot code pushTries to rebuild and send the minimum necessaryUsually maintains client state
To add files, just create themNo need to add <script> or <link> referencesScript and style references are automatically appended to <head>
Demo
Add and Update Files
Managing Packages
Meteor has a universal package manager (integrates with npm)Find packages on the Atmosphere package registry
Show the packages explicitly used by app:meteor list .meteor/packages
Find a packagemeteor search query
Add or remove a packagemeteor add package-namemeteor remove package-name
Demo
Add Packages
Working with Less and Bootstrap
Add the less packagemeteor add less
Meteor integrates the less compiler into the build process
To use Bootstrap, add the twbs:bootstrap packagemeteor add twbs:bootstrap
Demo
Add Styles
Isomorphism: JavaScript Everywhere
Meteor is an isomorphic frameworkThe same code runs on both the client and the server
Useful for sharing behavior such as business rulesFor example, validation runs on the server to ensure integrity and on the client to improve responsiveness
Sometimes same code works differently on the client and server
For example, same API caches on the client and persists on the server
Writing JavaScript
Separate the client and server codeExplicitly check Meteor.isClient and Meteor.isServerOr put code in client and server foldersPrefer modular approaches
Folder structure convention:Files loaded in alphabetical orderPlace files that must be loaded first in lib subfolders
Meteor automatically adds the Underscore and jQuery packages
Demo
Separate Client and Server Code
Creating Mongo CollectionsMeteor uses MongoDB to store data
Creates a local database when running in debug modeMeteor synchronizes the client cache and server database automatically
Create a collection in code shared between client and serverCollection = new Mongo.Collection('CollectionName');
Usually placed in the model folderThe server uses the mongo library to communicate with the databaseThe client uses the minimongo library to cache and emulate mongo
Demo
Create a Mongo Collection
Adding Templates
Templates represent views
HTML code blocks with namesDeclared in <template name="template-name"> elementsThe name attribute is mandatory
To include a template:Add {{> template-name}} to your HTML
Templates can be nested
Demo
Add a Simple Template
Template Helpers
A template helper represents bindable dataSimilar to a model or view model
To add template helpers:Template.templateName.helpers({ helper: value});
To bind the data to the view:{{ helper }}
Demo
Bind Simple Data
Spacebars
Spacebars is the Meteor variant of HandlebarsDesigned to support reactive templates
Loops:{{#each helper}}...{{/each}}
Conditionals:{{#if helper}}...{{else}}...{{/if}}
Contextual:{{#with helper}}...{{else}}...{{/with}}
Binding to Reactive Collections
Collections are bound using reactive cursors
To bind to a collectionTemplate.templateName.helpers({ helper: function() { return collection.find(); }});
Demo
Bind to a Reactive Collection
Working with Collections
Query data:collection.findOne(query);collection.find(query);collection.find(query).count();
Add data:collection.insert(item);
Remove data:collection.remove(itemId);
Update data:collection.update(itemId, { $set: { property: newValue } });
Template Events
Template events handle user behavior
To handle an event:Template.templateName.events({ 'event-name element-selector': function(e) { // handle the event }});
Working with Forms
Assign name attributes of form input elements
Usually handle the submit event of the formDon’t forget to cancel default behavior when necessary:e.preventDefault();
To access form data:e.target.name.value
Demo
Update a Collection
Deploying Meteor Apps
To deploy to meteor.com:meteor deploy app-name.meteor.com
Deployment processApp is deployed in production mode by defaultMeteor may ask to create a new user and log you inDeployed web app also supports live updates and hot code pushes
To deploy in debug mode:meteor deploy app-name.meteor.com --debug
Demo
Deploy to meteor.com
Adding Platforms
Meteor supports the Android and iOS mobile platformsBased on Cordova
To add Android or iOS support:meteor install-sdk platformmeteor add-platform platform
To build for Android or iOS:meteor build platform --server server
Running on Mobile
To run the app in the emulator:meteor run platform --mobile-server server
To run the app on a physical device:meteor run platform-device --mobile-server server
Can be debugged with Chrome or Safari dev toolsAdd the --debug argument to the meteor run command
Demo
Add Mobile Platforms
Meteor In a Nutshell
JavaScript Everywhere
Web and Mobile Open Source One Tool
for Everything
Live Updates Automatic Data Sync
Latency Compensation MongoDB
Hot Pushes Easy Deployment
Unified Package System
Extensible
Meteor Resources
Meteor site: docs, tutorial, forums :// .http meteor com
Angular-Meteor site: docs, tutorial :// - .http angular meteor com
Meteorpedia :// .http meteorpedia com
Discover Meteor book :// . .https www discovermeteor com
AtmosphereJS Package Registry ://https .atmospherejs com
The Meteor Repository :// . / /https github com meteor meteor
Meteor Tips site and Your First Meteor Application book :// .http meteortips com
