The geek in me now loves the potential of server-side javascript, non blocking goodness, [...]]]> So if you follow me on Twitter @gavin_payne (and you really should), you will see me occasionally break off into a rant on the brilliance of Node.js and all related tools to support the new breed of real time web development. Node is awesome.

The geek in me now loves the potential of server-side javascript, non blocking goodness, NPM packaging, Heroku, writing less code,  and the massive potential for developing social killer apps. The non geek in me is aware of an important options that Node.js and related stack brings to the table.

So after spending some time exploring Node, express, coffee-script, mongoDB I naturally stumbled across Meteor which is as they say on the website

A better way to build apps.

Meteor is an open-source platform for building top-quality web apps in afraction of the time, whether you’re an expert developer or just getting started.

I’m so impressed with Meteor that I want to share some learnings as I go. Starting with the very first Leaderboard example. There are a few suggested tasks that we will step through together.

I’m going to convert the whole thing to Coffeescript because it totally rocks.. and everyone should be using it. So lets get started.

Make a button that toggles between sorting by score and sorting by name. Hint: use a Session variable to hold the current sort choice.

<template name="leaderboard">
  <div class "sort">
	<input type="button" class="sortByName" value="name" />
	<input type="button" class="sortByScore" value="score" />
  </div>
  <div class="leaderboard">
    {{#each players}}
      {{> player}}
    {{/each}}
  </div>

Lets add some simple buttons to the top of the Leaderboard.  These will be used to sort the list by name and score.  Nothing very exciting here.

Template.leaderboard.players = ->
		#get all players for the leaderboard and sort
		sortListBy = (sortBy) ->
		#change the sort
			if sortBy is false
				return Players.find {}, sort: score:-1, name:1
			else 
				return Players.find {}, sort: name:1, score:-1

		sortListBy(Session.get("sortByName"))

Heres some coffescript. It reads so much easier than good old javascript.  Line 3 “sortListBy = (sortBy) ->” is how we write a simple function that passes a single variable “sortBy”. The idea here is simple. If sortListBy gets a TRUE, then we sort the list  by name. You will notice that name is before score. Giving it priority in the sort. If sortListBy gets FALSE then the opposite happens sorting the list with score the priority.

So this template seems to (im still learning about this) control and manage the leader data in the list. Changes are pushed to the view instantly. Which is very cool, as traditionally this wiring is a complete pain in the ass.

line 10: sortListBy(Session.get(“sortByName”)) wires up the function to the session variable sortByName. Any change in this session will result in an immediate update in the list.

What we need now is to update this session variable and trigger the list to change.

#events		
	Template.leaderboard.events = 
		'click input.inc': ->
			Players.update(Session.get("selected_player"), $inc:score: 5)
			return
		'click input.sortByName': ->
			Session.set("sortByName", true)	
			return
		'click input.sortByScore': ->
			Session.set("sortByName", false)	
			return

It took me a few glances to understand why its  ”click input.sortName”. Click is the click event. input.sortName is form the <input> html tag, and sortName the name of the button.

When the button is clicked, the session is updated to TRUE / FALSE.

Make a button that resets everyone’s score to a random number. (There is already code to do this in the server startup code. Can you factor some of this code out and have it run on both the client and the server?)

Lets refactor. The code in the server can be pulled out and wrapped in a function that can be accessed by the client startup code “if Meteor.is_client” and the server startup code  ”if Meteor.is_server”

#reset scoreoard
resetTable = () ->
	Players.remove({})
	if Players.find().count() == 0
		names = [
			"Ada Lovelace",
			"Grace Hopper",
			"Marie Curie",
			"Carl Friedrich Gauss",
			"Nikola Tesla",
			"Gavin Payne"
			]
		Players.insert(name: item, score: Math.floor(Math.random()*10)*5) for item in names
	return

The function clears all data first. And then populate the list with random scores. So the server startup code is looking like this

if Meteor.is_server
	Meteor.startup ->
		resetTable()
		return

We need now to create a button to randomise the list. So back in leaderboard.html we add a new button

<template name="leaderboard">
  <div class "sort">
	<input type="button" class="sortByName" value="name" />
	<input type="button" class="sortByScore" value="score" />
	<input type="button" class="randomScore" value="random" />
  </div>
  <div class="leaderboard">
    {{#each players}}
      {{> player}}
    {{/each}}
  </div>

and wire up the new event

#events		
	Template.leaderboard.events = 
		'click input.inc': ->
			Players.update(Session.get("selected_player"), $inc:score: 5)
			return
		'click input.sortByName': ->
			Session.set("sortByName", true)	
			return
		'click input.sortByScore': ->
			Session.set("sortByName", false)	
			return
		'click input.randomScore': ->
			resetTable()
			return

Implement a way to add and remove scientists from the leaderboard.

Create the template to support a new scientist name and an “add” button

<template name="newScientist">
	<div class="newScientist">
		<input type="text" id="someName">
		<input type="button" class="newScientist" value="ADD"/>
	</div>
</template>

Wire up the button the same way as above, and create the function to add the new user and a ransom score.

addScientist = () ->
	newScientist = document.getElementById("someName").value
	Players.insert(name: newScientist, score: Math.floor(Math.random()*10)*5)
	return

Lets look at the full Leaderboard.coffee so far.. The code for deleting a user is there as well…

# Set up a collection to contain player information. On the server,
# it is backed by a MongoDB collection named "players."

Players = new Meteor.Collection "players"

#reset scoreoard
resetTable = () ->
	Players.remove({})
	if Players.find().count() == 0
		names = [
			"Ada Lovelace",
			"Grace Hopper",
			"Marie Curie",
			"Carl Friedrich Gauss",
			"Nikola Tesla",
			"Gavin Payne"
			]
		Players.insert(name: item, score: Math.floor(Math.random()*10)*5) for item in names
	return

addScientist = () ->
	newScientist = document.getElementById("someName").value
	Players.insert(name: newScientist, score: Math.floor(Math.random()*10)*5)
	return

removeScientist = () ->
	scientist = Players.findOne(Session.get "selected_player")
	Players.remove({name: scientist.name})
	return

if Meteor.is_client
	Template.leaderboard.players = ->
		#get all players for the leaderboard and sort

		sortListBy = (sortBy) ->
		#change the sort
			if sortBy is false
				return Players.find {}, sort: score:-1, name:1
			else 
				return Players.find {}, sort: name:1, score:-1

		sortListBy(Session.get("sortByName"))

	Template.leaderboard.selected_name = ->
		#set the selected name
		player = Players.findOne(Session.get "selected_player")
		player && player.name

	Template.player.selected = ->
		#set the selected player in session
		if Session.equals("selected_player", this._id) then "selected" else ''

	#events		
	Template.leaderboard.events = 
		'click input.inc': ->
			Players.update(Session.get("selected_player"), $inc:score: 5)
			return
		'click input.sortByName': ->
			Session.set("sortByName", true)	
			return
		'click input.sortByScore': ->
			Session.set("sortByName", false)	
			return
		'click input.randomScore': ->
			resetTable()
			return
		'click input.newScientist': ->
			addScientist()
			return

	Template.player.events = 
		'click': ->
			Session.set("selected_player", this._id)
			return
		'click input.deleteButton': ->
			removeScientist()
			return

if Meteor.is_server
	Meteor.startup ->
		resetTable()
		return

<head>
  <title>Leaderboard</title>
</head>

<body>
  <div id="outer">
    {{> leaderboard}}
  </div>
</body>

<template name="leaderboard">
  <div class "sort">
	<input type="button" class="sortByName" value="name" />
	<input type="button" class="sortByScore" value="score" />
	<input type="button" class="randomScore" value="random" />
  </div>
  <div class="leaderboard">
    {{#each players}}
      {{> player}}
    {{/each}}
  </div>

  {{#if selected_name}}
  <div class="details">
    <div class="name">{{selected_name}}</div>
    <input type="button" class="inc" value="Give 5 points" />
  </div>
  {{/if}}

  {{#unless selected_name}}
  <div class="none">Click a player to select</div>
  {{/unless}}

  {{> newScientist}}
</template>

<template name="player">
  <div class="player {{selected}}">
	<span>
		<input type="button" class="deleteButton" value="-"/>
	</span>
    <span class="name">{{name}}</span>
    <span class="score">{{score}}</span>
  </div>
</template>

<template name="newScientist">
	<div class="newScientist">
		<input type="text" id="someName">
		<input type="button" class="newScientist" value="ADD"/>
	</div>
</template>

Digital is fusing into our daily lives more and more.  The concept of digital will soon disappear in a future where we reminisce about the good old days of offline and online.

This fusion is already underway. The mobile evolution continues to provide increasing interaction with richer digital content. While enabling technologies like [...]]]>

Digital is fusing into our daily lives more and more.  The concept of digital will soon disappear in a future where we reminisce about the good old days of offline and online.

This fusion is already underway. The mobile evolution continues to provide increasing interaction with richer digital content. While enabling technologies like NFC let us to go one-step further and interact with real word objects. These new interactions are fueling not just a mobile, but also a digital revolution.

As this fusion matures our social profiles will become our passport to interact with the world, with digital media providing the destination for new experiences.  Increasingly these experiences will become richer, personal and more captivating through our social identity data: explicit (what I say about myself), behavioral (what I do, my activities) and relationship (who I am connected to and what those connections say about me).

Pioneering this change is the retail experience.  While we fantasize about “Minority Report” style high street shopping, the reality is not as futuristic as you might think.  Retail is essentially “distribution” plus “experience”.  And the role of digital is transforming this experience in key areas.

1. Awareness: Today’s shoppers have an abundance of information, price transparency, location-based deals and special offers literally in the palm of their hands.  Countless apps, services and mechanics fight to deliver relevant retail based information.
2. Point of Sale: This is fertile ground today. After a few false starts we are poised to see great developments in the retail space. Shoppers today, and in the future, simply expect more. And the role of digital media and technology in retail is to provide this.  The goal is not to dominate the retail experience with technology for technologies sake. But to complement and enable a great retail experience that is tightly coupled with the shopper’s social needs.
3. Purchase: NCF mobile payments expect to hit $670bn in the next 2 years. While this seems like an “adventurous” statement, there is no denying the mobile wallet will have a profound effect on retail in the near future.

Again, the social profile will enable a rich retail experience relevant and useful to the shopper. The smart retailers will be first to connect these dots, understand and even more importantly make use of the resulting data.

Digital will continue to present new retail interactions and experiences for the shopper of the future. The question retailers should be asking now is how can they satisfy the unmet social needs of customers in the retail environment. This is the making of a social retail strategy. Something every serious retailer must consider moving forward.