Researching MeteorJS

I’ve been looking to upgrade one of my old sites and learn some more Javascript tricks. The basic site requirements are:

  • easily add blocks of content
  • content blocks should include (optionally) background images, color theme, title, content (markdown or similar) and some metadata
  • admin-only access to edit/update methods
  • test framework should be Jasmine or Mocha

It seemed like this might be a perfect small-ish project to investigate some of the new Javascript web-app frameworks. This post will serve to share some of my findings. Though there are piles of frameworks to choose from (and framework combos), I started off looking into MeteorJS – http://meteorjs.org.

Getting Started

curl https://install.meteor.com | /bin/sh
meteor create /projects/myapp_meteor
cd /projects/myapp_meteor
meteor

At this point, we’ve got a webserver listening at localhost:3000.

Building out the app

I added a Block collection in models/block.coffee; setup admin and index templates under the client/ directory. Then after adding a form admin template, a block template and a loop on the index page to draw all blocks, the basic app was almost in place. The final step was adding meteorite to my system (seems like a must have – think bundler for meteor) and added the meteor-router package to the project (this makes it easy to build out a multi-page app). Finally wuth a bit of file reorg to give the project a semblance of structure, I ended up with a directory tree that looked like this (ignoring .meteor/):


main.html
routes.coffee
client/
  client.coffee
  admin.template.coffee
  index.template.coffee
models/
  blocks.coffee
server/
  server.coffee
stylesheets/
  main.css
views/
  admin.html
  index.html
  block.html

Meteor picked up these changes with out a hiccup – live updates are pretty cool.

Here’s a couple of snippets of the code to see how simple things are:

A collection:

# models/blocks.coffee
Blocks = new Meteor.Collection('blocks')

The template for the block:

<!-- in views/block.html -->
<template name="block">
  <div class="block {{selected}} {{color}}">
    <span class="title">{{title}}</span>
    <div class="content">{{content}}</span>
    <span class="link">{{link}}</span>

    <div class="delete" id="{{id}}"><a href='#'>x</a></div>
  </div>
</template>

The admin template with an input form:

<!-- in views/admin.html - DOM here is bootstrap ready -->
<template name="add_block_inputs">
  <div class="add_block_inputs">
    <div class="row">
      <label>title</label>
      <input id="block_title" type="text" placeholder="enter a title"/>
    </div>
    <div class="row">
      <label>content</label>
      <textarea id="block_content" placeholder="enter some content"></textarea>
    </div>
    <div class="row">
      <label>link</label>
      <input id="block_link" type="text" placeholder="enter link"/>
    </div>
    <div class="row">
      <label>color</label>
      <select id="block_color">
        <option value='dark_purple'>dark purple</option>
        <option value='burgundy'>burgundy</option>
        <option value='olive'>olive</opiton>
      </select>
    </div>
    <input class="btn add_block" type="button" value="add block" />
  </div>
</template>

In the client, we bind the button to submit the new data, and bind a “remove” action on the X for each block.

# in admin.template.coffee
if Meteor.isClient

  Template.admin.blocks = ->
    Blocks.find {},
      sort:
        title: 1

  Template.admin.events
    "click input.add_block": ->
      # template data, if any, is available in 'this'
      tt = @document.getElementById("block_title").value
      md = @document.getElementById("block_content").value
      lk = @document.getElementById("block_link").value
      cl = @document.getElementById("block_color").value
      Blocks.insert title: tt, content: md, link: lk, color: cl if tt || md || lk || cl
      false

    "click .block .delete": ->
      Blocks.remove(this)
      false

And that’s basically it. At this point, Meteor is showing me all my blocks and allows me to add and remove blocks with ease. The collection is auto-tied into a MongoDB instance which is setup automagically (assuming you have MongoDB installed and running on your machine).

The next steps are to figure out authorization to control read/write access to the database and figure out how to get a test framework up and running.

I had lunch with the 2nd Rate Genius team who’ve recently been down this same road. From there investigations, it seems that the Meteor auth stuff has been pretty well developed and should be easy to hook in. And their system of allow/deny on collections should be pretty easy to set up to help control data access.

I’m looking forward to some more learning with this Javascript full-stack solution. As I learn more, I’ll share what I can.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s