Web Development Challenge A blog app in eight hours ?

Yesterday I had a long conversation  about an opportunity to work on a very cool project. He has set a coding challenge and I thought that I’d write up my attempt here for him,  my future forgetful self and anybody else who finds it useful.  (I can hide this article if needed)

Features

  • Simple blog with articles.
  • The article body should be written and rendered with Markdown.
  • Articles should have comments.
  • Visitors should be able to subscribe to the site with their email.
  • Each time an article is posted, subscribers should be sent a notification.
  • Each email should contain a link to the article and another to unsubscribe.
  • Test coverage where you feel appropriate.

Jump ahead and read about the stages of my solution with links to tags in github. The working version on Heroku is at code-challenge.guyroberts.co.uk.

First thoughts

Eight hours ? Honestly, I can sometimes spend that long on one issue.  But on second thoughts,  I can see how all the pieces will fit together as follows;

Models

User, set up by Devise. Article, has many comments. Comments, belong to article. Possibly also to other comments if we want threaded comments. Subscription,  list of email addresses. Notification, I’ll use asynchronous email notification,  so this model will hold pending messages. Blog.  If time allows,  this could hold the blog title. Tempting to add,  but then I remember YAGNI

User Interface

I’ll use Angular JS for the front end because (i) I love the tools that surround it,  grunt, yeoman, bower  (ii) I am easily confused by the Rails Asset Pipeline,  (iii) The visual components are highly polished, well supported, consistent and easy to use.   Another advantage to decoupling Rails from the front end is that creatives can be spared the need to learn anything about Rails,  they just need to know the REST api.

The Angular app will be served up as static, minimised  HTML  5, CSS (from SaSS),  and Javascript.  Grunt will do the grunt work of preparing the production code.  I’ll use Restangular,  a lovely abstraction written in JS that makes the REST models look like they exist in the client code.  Angular Bootstrap will provide the UI components and Bootstrap Sass will make it easier to manage the CSS.  Grunt provides tasks to convert Sass to css.

Rails for authentication, routing and as a REST server

ActiveRecord is a rock solid way and simple way to access the database.  Rails Routing also provides a simple way to set up the REST api.  Devise for authentication.

Code organisation

I’ll try the Rails API gem,  a lite version without helpers or views.    The Angular JS code will be kept in a top level directory called client, it’ll be scaffolded by a Yeoman generator.  The Rails and Angular code will be completely decoupled,  they could live in different projects.  I already had npm, Yeoman, and bower installed.

Other Javascript components are installed with bower,

bower install restangular –save

Development habits

I use a Macbook Pro for development and Heroku for staging, together with Textmate and vi (which I first used in 1986), otherwise no IDE .  The code will be under git on github with tags to mark release points.  A master branch will be deployed to Heroku and other branches used for features.   Git Flow not needed here.

I use two terminals for development,  one running a grunt task to serve out the angular artefacts on port 9000 and another running Rails on 3000 which answers REST requests with JSON.   A grunt task called build pulls all the code together and then I check it into git with a comment of ‘Build’.

The requirements specify Postgres as the production database, but I’ll use MySQL in development because the tools are better, as far as I can find.  There are occasionally small problems with SQL syntax that works on one but not the other.

For this project I used ruby-2.1.1 through Ruby Version Manager.   Rails 4.2.1 installed by the rails-api gem.

Mock ups

Perhaps this is over kill for a simple application, but I like to look at pictures and think about how the data flows around.   These were made with Balsamiq Mockups.  Also, they help to imagine the minimal set of buttons and other stuff on the page.  Click for detail.

 ArticleList    Subscription     Login

 UsersListOfArticles.      EditArticle

Debugging

For ruby I use byebug and for Angular, Chrome and Batarang. The Chrome Developer Tools  Javascript console is dead useful.

To manually call methods on the REST api I use the Chrome extension called ‘Advanced REST client’ with the HTTP header, Content-Type: application/json, and a body like;

{“article”: {“title”:”My first job was playing the back half of a pantomime wasp”, “body”:”I thought I was the bees knees”}}

Testing

Rspec and FactoryGirl for the Rails code. Not sure how I’ll do end to end testing yet,   rspec requests tests with some sort of Karma end to end JS testing.

Heroku

I assigned the domain name code-challenge.guyroberts.co.uk to the app by adding a CNAME entry on the CloudFlare DNS,  and then in the terminal ran

About adding Angular code

This section need a write up of its own, but not yet. There are a few fiddly steps to get grunt to proxy requests in the development environment.

Most of the ideas came from a book by Ari Learner called Riding Rails with Angular. To be honest I found it hard to follow his tutorials, but the steps needed to integrate decoupled Angular/Rails projects were gold dust.

All the Angular code is kept in a directory called ‘client’. There is no Rails code in there at all, the two are completely separate.

Initially the client directory is scaffolded like this;

Guy Roberts

About Guy Roberts

A freelance developer who conjures up Software as a Service using Angular JS, SQL, Ruby on Rails and Java. Runner, dad and glider pilot.