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).
No comments.