Breaking down monolithic webapps with remote widgets

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s