Migrating from wkhtml2image to Playwright snapshots on AWS Lambda
Unipage is the cheapest and fastest webshop solution for every type of restaurant, with over 1.400 active webshops to date.
90% of our customers at Unipage use a thermal printer to fulfill their incoming orders in their bar or kitchen. These tickets contain all the information they need to fulfill an order:
- User details / table info
- Products / prices
- Already paid for or not
- Time of consumption
- Delivery time
- …
Thermal printer usually support a protocol called ESC/POS, but this protocol comes with many challenges and limits:
- Implementation might differ between printer models
- Limited commands
- Only a handful of supported fonts/weights
- Epson-specific protocol
- Table-based layout is very difficult to achieve
- New features in ESC/POS require a firmware upgrade on the hardware
- …
Initially, we offered some basic customization on the tickets:
- Font size: small or large
- Font: type A, type B or type C
Understandably, our customers were not satisfied with the level of personalisation we could achieve.
Ticket designer
To offer our customers the flexibility they need, we created an intuitive Ticket Designer. This designer allowed our customers to easily design their ticket to their specific needs.
Converting these personalised designs back to ESC/POS commands simply was not possible. Instead, we opted to render them in HTML and create a snapshot with wkhtmltoimage.
This image bitmap would then be translated into a single bitmap ESC/POS command, and fed to the printer (over USB or network).
Suddenly, the thermal printers gained a ton of new tricks and we were able to offer our customers the flexibility they needed.
This worked beautifully for many years, and we generated over 1 million tickets using this technique.
Migrating to a serverless solution
Lately we’ve been getting reports that ticket printing is kinda slow on fridays — not coincidentally the most busy day of the week on our platform.
The order peak happens between 17:00–19:00, and during this time we receive on average around 2.500 orders.
wkhtmltoimage generates a ticket for an order synchronously, when requested. The process of generating a snapshot usually takes around 0.8s, and during this time a HTTP connection is held open.
At peak times, we often ran into the situation that 40+ wkhtmltoimage instances were generating snapshots at the same time — eating up resources of our machine and causing the delay our customers noticed.
Going serverless was on our mind for about a year, so we decided it was finally time to spend time and migrate. Thanks to Serverless, it was a delight to set up a Lambda function with an API gateway. We decided to abandon wkhtmltoimage and instead opt for a modern and robust solution: Playwright.
We wanted to make this transition as transparent as possible for the clients using it, so we kept the original HTTP endpoint and simply introduced a 302 redirect to our new AWS API Gateway.
If the ticket has not yet been created before, we spin up a headless browser, create a snapshot and push it to S3. If the client already requested the ticket once before, we can immediately point to it since it’s stored on S3.
This setup allows us to asynchronously generate tickets with a queue mechanism, so we can optimise the speed even further.
Using feature flags we could easily A/B test both mechanisms and finetune the results of our Playwright solution until it was perfect.
Impact on speed
The impact was immediately noticeable, since the overall load on our server dropped by 7% at our peak times. Our customers responded positively to our efforts and confirmed that ticket printing is very consistent compared to before.
wkhtmltoimage has served us well in the past, but it was time to move on.
Deploying Playwright on Lambda was a true delight thanks to playwright-aws-lambda in combination with Serverless. The impact on our customers was immediately visible and they responded positively.
👋 Thanks for reading, for more info on Unipage, check out our website
