Sunday, June 29, 2014

FoodBetter - a simplistic recipe management application using MeteorJS

Recently, I decided to look into MeteorJS - an open source, full-stack web framework, that wields Javascript, mongoDB and NodeJS to create a simple way for creating reactive web applications.
Like all things in life, to really get to know something, it's not enough to just read and talk about it - you have to get dirty and actually use it for something. So I built a simple application for something that I was missing in my personal life - a recipe management app.
The app is here, and the code is in here.
The app was built for learning purposes and probably has bugs. It is, like said, very simple, and I will love to hear you ideas and feature requests here. You can fork it or even send me pull requests :)

What is awesome about MeteorJS?

  • Meteor supports 3-way binding. This means that when a client changes some data in his browser, another client that looks at the same data in a different computer sees the change immediately. You get that for free, no extra infrastructure code required so you can focus on your business logic. This is pretty amazing in my eyes. This feature makes Meteor an ideal choice if you need to implement a real time game or something like Google docs collaborative editing.
  • You can deploy to Meteor's test servers with a single command. That's right - you can just create a new application (meteor create myApp) and immediately publish it to the world (meteor deploy myapp.meteor.com). This sends your application to Meteor's test servers and makes it available for everyone to use, free of charge. Of course that if you are creating something real you should spend a few dollars and host it somewhere. Because it all runs on NodeJS, you can package the app with meteor bundle and publish it through heroku or nodejitsu. Anyway, the meteor deploy option is great if you want to get your app up and running in no time.
  • Javascript everywhere. You write JS in the server-side too, making it very simple to transfer and manipulate data.
Being a framework, Meteor takes away some of the control that you usually have. For instance, you don't use the script tag anymore, since Meteor will just load all files that reside in certain directories. Maybe it's ok, but you still have to learn about Meteor's loading process. To use Bower, for instance, you have to install a special Meteor package..

Meteor's documentation and community seems really great, and I will continue to follow MeteorJS, and develop FoodBetter with it. 


Monday, June 9, 2014

index in #each expression (Meteor & Spacebars)

Suppose you want to write an #each expression in a Meteor.js template. And suppose that you want to print the index of an item. Something like:

{{#each steps}}
    {{index}} : {{stepDescription}}
{{/each}}

This is a legitimate need, and even available in Handlebars, using {{@index}}, as you can see in this stackoverflow thread or this issue.

Meteor does not support this option yet (0.8).  They even mentioned this issue in their wiki:
Syntax extensions. Handlebars syntax is extremely minimal, and we foresee adding some additional well-chosen extensions over time. (We will also implement the top features of current Handlebars that are missing from Meteor, like #each that supports objects and lets you access the current index or key.)
This looks promising. But for people who need a solution right now, you can just create a helper that adds an _index property to each item in the array: