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

Step 1 ½ Windows Installer

Ok so i just got update about installing Meteor on windows.
Spread the news and pls ask about any errors you have in comments or meteor IRC channel http://meteor.com/irc


A MSI installer that installs the latest Meteor version is now available:

http://win.meteor.com/

Please note that the Meteor-Test-Installer itself will soon no longer be available and that the MSI installer will be the preferred installation method.

Must read:

• Note that you need to start CMD / Bash as administrator or reboot for it to catch the environment changes.
• On Windows 8, you will need to set node.exe in Meteor/bin to Windows 7 compatibility mode.

Thx to TomWij  for getting the installer working.

Step 1 : Installing Meteor

Depending, what OS you are using installing meteor is generally easy to do.

Starting with Linux and OSX:

First make a dir where you want to store your projects, then navigate to it.

Install meteor with following command:

$ curl install.meteor.com | /bin/sh

Create project:

 $ meteor create myapp

And, here comes the best part. Meteor runs fro your OS itself.
    Go to your project dir

$ cd myapp

   Run meteor:

$ meteor

   You should see this line in your terminal:

Running on: http://localhost:3000/

Now just open your browser and visit localhost on port 3000

Basic  app just show in console.log info after clicking  the button.If you want more interesting app built in meteor instead of

$ meteor create myapp

  just use:

$ meteor create --example leaderboard (or) wordplay (or) todos  (YourAppName)

Because Installing Meteor on Windows gives few problem at the moment, i will cover it later, but in few days i think there will be .msi installer released.

Have fun with your newly created apps and let the code be with you :)

Day 1 , Let's roll

Target: Learning about meteor platform. Despite i'm new to such complex platform I will try my best to get as much as i can from it.

this is my first blog  and first writing soo much in english so pls comment any remarks you have about both the Language and Meteor.

I guess at first everything will be a little chaotic, so i guess I will be rewriting some already covered parts of the meteor.

Follow me on twitter @mateutek for more info.

If you have idea for an interesting app i can create let me know.