Saturday, June 16, 2012

Leaderboard Example Part. 1


Just as i have mentioned before here is my effort to try explain (and understand myself) leaderboard example. Due to small experience in explaining things to other ppl plz try to withstand this post. I promise i will try very much to keep everything easy to understand.
Therefor don't expect super tutorial , covering everything beacuse for this moment it's not possible for me to write such post in short time.I will cover every line of the leaderboard example in the next post, so if you want more detailed explenation just follow me on Twitter @Mateutek

Let's begin.

When you go to the app folder you can see  .meteor folder , and 3 files : (leaderboard.css, leaderboard.html, leaderboard.js).

leaderboard.css is Cascade Style Sheet, W3 standard  for more info i reccomend http://code.google.com/edu/submissions/html-css-javascript/#css

leaderboard.html looks like a normal html file but has Handlebars templating language. For those who have never met sth like that (including myself), we will try to analyze and understand what is going on in here in the first place.

According to the definition, Handlebars template is regural HTML with embedded handlebars expressions e.g.  {{ content }}

We can add <template> behind </body> tag and include them on our site by adding
{{> TEMPLATE_NAME}}

{{template}} needs a name attribute => {{template name ="TEMPLATE_NAME"}}

inside we can add refference to .js functions {{TEMPLATE_CONTENT}}

Handlebars itself gives a lot of useful "helpers"  like {{#each}} or {{#if}} (I will talk about in the future) to help us define custom itterations.

leaderboard.js
We start with creating Meteor collection in which our Platform stored data.
Meteor collections are almost 100% MongoDB collections so it's easier to learn from mongo docs
One "trick" if you're coming from older data stores is that collections are automatically created on the fly - you don't have to create them ahead of time.
Upside, is they automatically are created when you need/use them.
Downside is if you misspell a collection in code, you'll start accessing the wrong collection (with some docs in one collection and others in another) so it's best to actually create a variable for your collection and use that (in Meteor) - if you use the "wrong" one from a misspelling in your code, you'll be accessing an undefined variable and that will be easy to debug (you'll get undefined variable errors)
Afterwards  we go to Client side code, 'Meteor.is_client' returns true if we run in client environment.

Then we run helper functions to get data into templates in leaderboard.html.

As i said in the beggining i will cover every line of the code for leaderboard.html and leaderboard.js

Thx for guys in the #meteor irc channel for support and info : TomWij  Lander and BadSlug

1 comment: