Meteor - newgeekorder/TechWiki GitHub Wiki

Meteor

The basic javascript app framework is nice and simple

if (Meteor.isClient) {

// add browser client code here 
} 

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

the code interacts with the Meteor handlebar like template language callued Spacebars it has been tailored to produce reactive Meteor templates when compiled.

Meteor Template Basics

The html part is defined using a template tag

<template name="leaderboard">
  Hello World
</template>

and the template is displayed anywhere in the html document with

{{> leaderboard}}

For each templates we can have associated functions

Template.leaderboard.helpers({
'player': function(){ 
    return "Some other text"
},
'otherHelperFunction': function(){
  return "Some other function"
}});

these functions can be referenced in the template with %%{{player}}%% and %%{{otherHelperFunction}}%%

Bringing the data and template together we can use the %%{{each}}%% function to print collection data In the helper function

return playerCollection.find();

and the template

{{# each player}}
   {{name}}
{{/ each}}

Events

Similar to displaying template data ..events can be configured in templates

Template.leaderboard.events({
'click': function(){
 // code goes here
}});

this is the most generic and clicking anywhere inside the template area triggers the event. To narrow the selection you can use jquery like selection on any html fields, div's etc

<li class="player">
{{name}}: {{score}}
</li>

each item on the list cab be trigged by

'click .player': function (){
    console.log("You clicked a .player element");  // your event action
}

Meteor - Interacting with Data

By default Meteor comes with Mongo bindings (see other data options below). To create a simple collection in mongo that is data bound to the Meteor template:

 MyCollection = new Mongo.Collection("my-collection");
  • On the server, this sets up a MongoDB collection called my-collection
  • on the client, this creates a cache connected to the server collection, known as "mini-mongo". Not all of mongo features are supported on client side mongo .. and some have to be called through the server

Note: the word "var" is not placed before the variable to make it global so we can use it throughout all of our files

Enter the variable in the chrome Javascript inspector and it should show the variable is a mongo collection We can even enter data through the console

MyCollection.insert({name: "David", score: 0});

the full Meteor http://docs.meteor.com/#/full/mongo_collection. With the highlights being:

  • collection.find - Find the documents in a collection that match the selector.
  • collection.findOne - Finds the first document that matches the selector, as ordered by sort and skip options.
  • collection.insert - Insert a document in the collection. Returns its unique _id.
  • collection.update - Modify one or more documents in the collection. Returns the number of affected documents.
  • collection.upsert - Modify one or more documents in the collection, or insert one if no matching documents were found. Returns an object with keys numberAffected (the number of documents modified) and insertedId (the unique _id of the document that was inserted, if any).
  • collection.remove - Remove documents from the collection

⚠️ Note: as of 5.8 use server methods and a Meteor call to remove a large number of elements Meteor collections have a remove() method. For example, on a Post collection, you can call

Post.remove("3WRHexCGhZdSa3H9L") // remove a post with that mongo '_id' 
Post.remove({title:"How to Blog"}) // remove a post with that title
Post.remove({}) // remove every post
  • collection.allow - Allow users to write directly to this collection from client code, subject to limitations you define.
  • collection.deny - Override allow rules.

Data Dependencies

Meteor works by sending the html first, then the data later. When your rendered callback fires, the data may not or may have been sent.

Pub/Sub

  • Forcing Template re-draw on data. The most natural way to force a redraw when data is changed is to use a dependency on that data.
var friends = [];
var friends_dep = new Deps.Dependency();

Template.myTemplate.friends_list = function() {
    friends_dep.depend();    /* Causes the helper to rerun when data changes */
    return friends;
};

...

function callback() {
    ...
    friends = response.data;
    friends_dep.changed();    /* Call this after you set the new data */
}

Meteor and Jquery

Meteor doesn't use $(document).ready, instead you should use Meteor.startup which is equivalent :

Meteor.startup(function() { if ( $('section#main').hasClass('postlist')) { Session.set('pageTitle', 'Posts list'); }; }); ```

Note:

  • Client loads javascript from: project/public and project/client
  • Server loads javascript from: project/public and project/server folders.

As of v1.0, Meteor is using jQuery internally in the client, so you can use your library directly without adding jQuery. However, it's recommended that you add jQuery to your Meteor project explicitly:

meteor add jquery

The Meteor docs explain in depth how JavaScript files are loaded and where static assets should go (CSS, images). but basically if added the packages are available without having to explicitly load

See also how to repackage an existing [[https://github.com/raix/Meteor-community-discussions/issues/14 | library for Meteor]]

Routing

It seems to be recommend to use IronRouter a router that works on the server and the browser, designed specifically for Meteor. Install in the usual way

> meteor add iron:router

To update iron:router to the latest version you can use the meteor update command:

> meteor update iron:router

Basic routing:

Create some routes in a client/server JavaScript file:

Router.route('/', function () {
  this.render('MyTemplate');
});

Router.route('/items', function () {
  this.render('Items');
});

Router.route('/items/:_id', function () {
  var item = Items.findOne({_id: this.params._id});
  this.render('ShowItem', {data: item});
});

Rest Interfaces

Meteor. They have a http package of their own, you won't need the custom XHR that lives in our SDK.

Meteor.http.get(url, [options], [asyncCallback])

that can also be used with (Iron router)[[https://atmospherejs.com/iron/router]]

Deploying Meteor

Build and deploy to nodejs or look at

  • Meteor-up - puppet/chef like automatic deploy to linux servers

Testing Meteor

  • Velocity the official Meteor test framework

Debugging Node and Meteor

To debug meteor app in IDE on server side, you can do following:

  • Install NodeJS plugin from the Plugin Repository.
  • Configure $NODE_OPTIONS environment variable to have "–debug=47977" value.

To accomplish that you can change directory to your meteor app and launch meteor like this:

$ NODE_OPTIONS="--debug=47977" meteor 3)

Create a Node.js Remote Debug run configuration and fill in the fields: Host : 127.0.0.1 (host of meteor app running, leave untouched if meteor is running on your local machine) Debug port : 47977 (or any other port, it should just stay in sync with $NODE_OPTIONS environment variable configured on step 2)

Local directory : /path/to/your/meteor/project/.meteor/local/build/app
Remote path : app

https://youtrack.jetbrains.com/issue/WEB-6264

Social Apps

Misc

Node and Java

  • [[http://nodyn.io/ | Nodyn]] run node inside jvm

Links and Ref

  • [[http://strongloop.com/mobile-application-development/loopback/ | Strongloop]] commercial server

  • [[http://koajs.com/ | Koa js]] offered as a next generation node .. to avoid callback hell

  • [[https://github.com/rune-ks/meteor-boilerplate | Meteor Bootstrap]] and more boilerplate

  • [[https://kadira.io | Kadira.io]] Meteor Monitoring

  • Meteor Blogs ** [[https://meteorhacks.com | MeteorHacks]] blog ** [[https://bulletproofmeteor.com | BulletProofMeteor]]

  • Meteor Documenation ** [[http://www.meteorpedia.com/read/Main_Page | Meteorpedia]] an unoffical wiki

  • [[https://github.com/oortcloud/unofficial-meteor-faq | Unofficial Meteor FAQ]]

  • [[https://github.com/awatson1978/meteor-cookbook| Meteor Cookbook]]

  • [[http://docs.meteor.com/ | Official Meteor Documents]]

  • [[https://meteorhacks.com/improved-async-utilities-in-meteor-npm.html | Async events]]

  • Meteor Misc ** Misc - [[http://venturebeat.com/2012/07/25/meteor-funding/ | Meteor takes 11 million]] in funding ** Good title [[https://www.youtube.com/watch?v=OXwnvkE5t_Y | Meteor.js: Killing Dinosaurs with JavaScript]] ** Explore Meteor packages at [[https://atmospherejs.com/ | Atmospherejs.com]] ** Nice meteor agency [[http://q42.com/ | q42.com]] in the Hauge/Amsterdam

  • Meteor Packages of Note ** [[https://editor.froala.com/ | Wyswyg editor]] ** [[https://github.com/orionjs/core | potential cms]] like the php cockpit ** Dynamically create forms from json [[http://autoform.meteor.com/quickform | Autoform]] ** [[https://atmospherejs.com/babrahams/editable-text | Editable Text]] that is not the ugly x-editable ** [[http://julian.com/research/velocity/#uiPack | Velocity]] element animation

  • Meteor Api packages ** [[https://github.com/yefim/meteor-linkedin | Meteor Linkedin]] ** [[https://jquery-datatables.meteor.com/ | Meteor Jquery Datatable]] ** [[https://github.com/austinrivas/meteor-flot | Meteor flot]] with [[http://meteor-flot-example.meteor.com/ | live example ]] ** meteor [[http://meteor-editable.meteor.com/demo | inline edit]] demo ** meteor [[http://www.andrehonsberg.com/article/facebook-graph-api-meteor-js | facebook api ]] ** oauth [[http://markleeis.me/blog/2013/05/22/meteor-dot-js-and-yelp-oauth-search/ | yelp]] connection ** [[https://atmospherejs.com/ajbarry/yahoo-finance | yahoo finance]] ** [[http://linkedin.github.io/hopscotch/ | hopscotch]] product intro tour

  • Oauth ** [[http://go.oauth.io/stackoverflow/ | oauth.io]] simplifed oauth? for a price 500 api calls for free and $19 afterwards

  • Storage Options ** mongo is out of the box ** Meteor Redis

  • MiroService Provider ** Magnetic.io
⚠️ **GitHub.com Fallback** ⚠️