I love simplicity. Here is a post which explains how to code a job board web app in 48 lines.

01 The Framework

Of course, 48 lines of written code is the caveat: We can't build this app with literally 48 lines of code. To create an app with 48 lines of written code we need a framework base. In this case we use Meteor.js

(The second caveat is that we are dodging error logging and loading progress bars, purely for the sake of brevity. We'll assume the API just works, and maybe I'll write another post expanding on this app).

02 The packages

To distill the code even more we will use some preprocessor packages: namely, Jade and Coffeescript. We also need the http package to connect to our APIS. And for the minimum style we'll pull in a bootstrap package called Bootswatch (with the Material design theme).

From the command line:

$ meteor add mquandalle:jade coffeescript http bootswatch:paper

03 The Files

We need two files: an app.jade (layout) file, and an app.coffee (script) file.

04 The HTML

A header in Jade is as easy as pie:

head
 title JBLY

In the body we will use two templates, just to separate the header from the content. The + sign is Jade's way of including templates.

body
 +head
 +layout

And now for our templates. Template one is the header:

template(name="head")
 nav.navbar
 a.navbar-brand JBLY

Template two is the job data

template(name="layout")
 .jobs
  table.table
   thead
    tr
    th Company
    th Title
    th Location
   tbody
    each job
    tr
     td {{company}}
     td {{title}}
     td {{location}}

04 The Script

We'll be connecting to Github jobs API (which is open). And we'll store the results in a temporary (null) Mongo database Collection.

Jobs = new Mongo.Collection(null)

On the server we will connect to the API through a Meteor Method, thusly:

if Meteor.isServer
 Meteor.methods githubJobs: () ->
  @unblock()
  githubjobs = Meteor.http.call "GET", "https://jobs.github.com/positions.json"

Then on the client we need to "wire up" the templates to our logic: In this first snippet we are calling the method to pull the data into our temporary collection once the template is rendered:

if Meteor.isClient
 Template.jobs.rendered = ->
  Jobs.remove({})
  githubjobs = Meteor.call "githubJobs", (error, results) ->
  Jobs.insert job for job in results.data

And in this second snippet we "push" the data from our temporary collection to the template:

Template.jobs.helpers
 job:
  Jobs.find();

And that, my friends, is that. Let's run it (back to the command line).

$ meteor

And you should have something looking like this:

Now I pass the baton to my good friend (and awe-inspiring programmer) Gabriele - to show us how it is really done in Python (over to you, sir).