I previously posted about lazy-loading widgets as a way of applying micro-architecture to the frontend.
I’ve now got a real-life example running on Heroku – the Metro trending widget as a standalone app. It encapsulates CSS and javascript by inlining them. (Here is the “raw” version without global.css, etc).
It’s weight is 7kb. 3kb of this is CSS (unminified) but this is all peanuts compared to images (~100k) and the API data itself is 13k.
The data is fetched from our news feed API.
Deployment takes seconds, and it only takes needs one command: git push heroku master
The template is 30 lines, the controller is 40 lines (plus 25 lines of helper code for image resizing).
It’s written in Ruby which makes it shiny and clean. The server is Sinatra which is lightweight and embedded, which means there’s no installation/configuration.
Next i’m going to try writing some automated tests!
Oh, and here is a page on static.metro.co.uk which calls the widget on Heroku (using CORS).