Prototyping and decoupled frontends with Middlemal

Have you every developed a HTML prototype from scratch? I did it lots of times and as clean as you start in the beginning, in the end it always gets a little messy and complicated. As I want to concentrate on the HTML using the target CMS to implement the prototype is not an option because it first would have to be set up, I would have to deal with cache renewal and long load times. Also a CMS can not be just dropped to a zip file and mailed to the client to take a look at.

So before discovering Middleman, I started out with a clean directory in my webserver, created a filestructure for JavaScript, stylesheets and images and then started coding the layout in an index.html file. After the layout has matured, I started implementing the different page types. For this, I copied the index.html contents to a new file and changed only the inner HTML that represented the content. So far this is a common technique, but what if you need to change something in the layout? You need to open every single page file and do the changes. As of this problematic I sometimes used plain PHP files with include statements to have a common file for the layout and include the page templates to generate the target output. The downside of this is, that you would have to manually save the html files if you want to email the prototype to a client, or you would have to write a build script that does it for you. Now again, we are in the middle of working on problems that do not concern the html prototype. As the top of the iceberg, what if you want to use LESS/SASS of CoffeeScript? You would have to implement a proxy PHP Script to transform the contents to CSS/JavaScript…

Middleman is a Ruby based static site generator, that does exactly what I described in the last paragraph without a single step of manual help. You can use all types of templates languages and advances programming stuff for JavaScript and CSS and with execution of a single command, you will have a static html site at your hands. As a big plus, Middleman comes with a development mode, that runs a small webserver who generates static html and assets on the fly.

Middleman is not only limited for prototying but can also be used to implement decoupled JS driven Frontends. With all the apps on smartphones, most webapps nowadays have a REST API to get the plain data out of the CMS that is used to display content in native apps. Most times the API has to be coded besides the common web interface which means double work for developers. Because developers are lazy, the idea of decoupled frontends arised. A decoupled frontend is a web application that is not part of a greater system with a databackend. It’s just plain HTML and JavaScript and uses the prior described REST API to obtain data from the CMS. By this, the need for a frontend in a CMS gets eliminated and it’s only used for data entry in the backoffice.

A pretty neat combination for developing single-page, JavaScript driven and modular frontends is using middleman in combination with: Backbone, require.js and Bootstrap.

2 thoughts on “Prototyping and decoupled frontends with Middlemal

  1. Hello there! This article could not be written any better!
    Looking through this article reminds me of my previous roommate!
    He continually kept preaching about this.
    I’ll send this post to him. Pretty sure he’s going to have a great read.
    Thank you for sharing!

Leave a Reply

Your email address will not be published. Required fields are marked *