As a Software Developer I really enjoy the early stages of a project. Specially going through the technology selection phase. A lot of the research takes place at this stage. Factors like: Non-functional requirements, time to market, budget, prospect teams, business model, etc, are matched with the technology and architecture that will increase the project chances to succeed.

But most of the time Developers join on-going projects where the technological building blocks are set and there are many constraints that prevent the introduction of architectural changes and/or new technologies. During this time there are very high chances that you will bump into new frameworks and platforms but you won't have the time to experiment with them.

It is at this point that you might start to pile up names into your technology radar. Waiting to have some time to review them and potentially include them in future projects.

I was working mostly with single page applications that relied on Rest APIs. Combinations of GAE and ExtJS or Backbone with Rails when Meteor entered my technological radar. I was truly impressed with Meteor fresh approach to web development.

For some time I couldn't spend enough hours experimenting with Meteor. Went through the basic examples and a couple of POCs, but not enough to determine if Meteor could suit larger projects.

Then, along with a group of friends we decided to build a side project using Meteor as the building block.

Over the last months we have been actively developing Poolville. Our motivation was to explore modern frameworks, real time reactivity and user interaction.

About Poolville

Poolville is a web platform that let’s you play a virtual tournament around the World Cup Brazil 2014. The idea is rooted in sports-pools, but we wanted to make the experience really fun and engaging. An organizer creates a tournament and invite his/her friends. Everyone picks their scores for every phase in the tournament. As the tournament evolves, players win points based on the accuracy of their predictions. There are leaderboards, badges and live interaction in every match.

Application Overview

Poolville is built on top of Meteor, Meteor core packages (accounts, d3, http), and third party packages (iron router, collection-hooks, less-bootstrap-3).

It is deployed in Digital Ocean as a multi-node application that connects to a MongoDB instance hosted by MongoHQ.

Every node runs an instance of Nginx that can act as master as a failover mechanism (currently implemented via DNS).

There are around 20 collections hierarchical designed around tournaments. Each client subscribe to a small data set containing the data relevant to its tournaments. Client side joins are used in some cases.

The only exception to Meteor reactive data approach is the use of Crossfilter in combination with dc.js to build data cubes for statistic analysis of tournament data.

Meteor Highlights & Experiments

At first Meteor concepts are simple to understand and one can identify the value of the framework just by reading the 9 points highlighted at Meteor’s front page.

However it took some hours of coding between acknowledging the points and understanding the true potential of them. During the development of Poolville there were special moments when we realized that we were starting to understand Meteor. They were definitely Wow moments.

Reactivity

Even though the concept of reactivity is easy to understand, there is a moment when You realize the true potential of reactive programming.

It applies at all levels, user interfaces, subscriptions and anything related to a change in the state of the application.

For instance, interfaces become very easy to implement. You focus on representing the state of your application, add triggers that modify that state and let Meteor do the rest.

In fact, there was a point in which instead of thinking our interfaces from a regular point of view, we started to think how to get the most from reactivity.

The tradeoff between complexity of implementation and result is so advantageous that you end up adding value to the application in terms of usability.

But, with great power comes great … ☺ And sometimes you must refrain of abusing of this resource in order to avoid poor usability or performance issues.

Inline SVGs

Most graphic elements in Poolville are SVG’s.

Many of them are inline SVG’s that are embedded as Spacebars templates.

An advantage of this approach is the ability to have UI elements that are reactive to the state of the application. Like the rounds indicator above. The same thing could have been accomplished with CSS. But working directly over SVG’s markup just as it was HTML feels simpler and easier to maintain.

A similar approach was used in the flags. In this case there is a single template representing an abstract flag. The SVG is styled with CSS to achieve the required look.

So instead of designing 32 flags, we created one graphic element that can be reused for further teams and new tournaments.

The drawback of this approach is inline-svg support and render compatibility across browsers. But for modern browsers the approach works great and it simplifies support for retina displays while saving bandwidth.

Shouts

One of coolest things about the World Cup is gathering with all your friends in a bar and enjoy a live game!

However this is hardly possible. Everyone is busy! Poolville implements a shout-out feature that is available on the live match page.

Implementing this feature was extremely easy with Meteor. It took just a couple of hours and it added a lot of interaction to the platform.

In order to implement Shouts we used a collection that acts as a cache of the latests shouts. The client subscribe to a publication of shouts sorted by timestamp and limited to a reasonable number (i.e. 10). An observer on the client detects new shouts and push a local notification.

The result was awesome, everyone shouting in real time. It felt closer to watching the game together ☺

This kind of feature, as simple as it sounds, could have been a pain to implement in most frameworks.

Latency Compensation, Blaze, Security and Other Areas

There are several other aspects that we would like to talk about and share our experiences. We thought not to include everything in this post and instead address specific points in the future, probably in more technical oriented posts.

Is Meteor ready for Production?

This was the question that we originally asked ourselves, and now with more Meteor hours under the hood, we think: Yes, Absolutely!

Meteor is up for truly innovative products and that has been proved by the growing number of Startups embracing the Framework.

Poolville is not a Startup. It is a niche product. But we think that Poolville represents a huge fraction of the Web. Small projects, websites, company internal solutions, etc.

And we believe that this is something where Meteor truly shines. It is a highly productive framework, easy to understand, with a wonderful community, a solid ecosystem of packages. It is a great framework to build new projects, websites and solutions with a very fast time to market.

Personally I would like to move many of the projects I'm involved with to Meteor. It will take time to convince the stakeholders but the benefits are there.

In addition I think it is a great framework to get started in programming!

Resources

These are some of the resources and projects we have been actively using: Meteor, Discover Meteor, Iron Router, Evented Mind, Percolate Studio, Meteor Hacks, MadEye, Meteor Talk, Atmosphere.

The Meteor community is very active, if you go for Meteor in your next project, you won't be lost!

Reference

You can experiment with Poolville here. If you would like to join an active tournament as a guest ping me on Twitter at @rldm_.