As engineers, we love discovering tools that will expand our own knowledge and also improve Press Loft. Our continuous integration architecture gives us the freedom to experiment with new technologies very quickly (in the past year we’ve added between 5-10 changes a day to the site).
We’ve recently added some features to the site that can require a lot of heavy processing. An example of this is the CSV import feature. Brands can now potentially add hundreds of images to their libraries at once, and this provides some interesting technical challenges.
One of these challenges is how we convey accurate information about how the import is going.
Here’s a simple overview of how the bulk data import works:
The main problem comes in step three where the user has to sit and wait for the import to finish. What happens if a brand would like to upload 500 images at once? The page would be stuck displaying a gif for potentially a couple of minutes. This isn’t very elegant!
We looked into what we could use and one of our developers stumbled upon Pusher, a company based a few stops away in Shoreditch which provides a service that allows us to integrate real time features incredibly easily.
Pusher uses the Publish-Subscribe model to deliver real-time messages through channels that we can define. In basic terms it means we can have a page on the website that is constantly listening for messages on the channel, and whenever it picks up a message, we can trigger something to happen in the browser.
Using this technology, we can use this to provide real time feedback regarding the progress of the data import. Every time an image is saved to the system, we can ping a message down the channel and relay that information to the browser so the user can see how many images have been imported. Usually when performing an AJAX call, it’s very tricky to determine the progress of that request but this gives us a far better way of giving users helpful feedback about the status of their import:
In the example of above, the CSV file has 100 rows in it. When the user begin the import, we send a message to pusher to bring back how many rows there are (in this case, 100) and then as each image is saved, we increment the count by one. Simple!
We’re also using this technology to provide feedback on the progress of deleting images, which is useful when deleted an entire library at once.
These are two very small and simple examples that show the potential of Pusher, expect us to utilise this technology across the site in the coming months. You may notice some nice little touches we’ll begin implementing.
