Frontend at trivago

Test, test, test. If you don’t, an issue is bound to crop up in production sooner or later.

Imagine a world without open source software. Pretty scary, isn't it?

For a long time, we've mentioned that we're running our own JavaScript framework: Melody. Today, we are happy to share the framework we've been using since 2016 as an Open Source project with you. We designed Melody to be fast, memory efficient and to be flexible enough for the future.

As we all adventure around this space that we call the Internet, consuming content is often on our minds. Naturally with the vast amount of data, filtering out what’s not interesting is a huge time saver. In order to help you find your ideal hotel at the best price, trivago’s filters are one of the best ways to do so. Sadly, some visitors couldn’t even access them due to poor accessibility and performance.

Accessibility is an important topic for anyone who builds things for the web, and one that is neglected far too often. We at trivago have also been guilty of this, but we are slowly making changes with the aim of improving the accessibility of our site. Identifying and implementing these changes has not been easy. We have faced a number of challenges along the way, and we continue to do so. But we are committed to improving our site so that anyone can access and use the service we provide, regardless of how they do so.

For the past few years, Webpack has played a central and important role at trivago. We use it for handling SVG icons and to improve our startup time for the benefit of our users by loading resources on demand. We run a highly complicated build with plenty of custom plugins which perform all sorts of optimisations for us that no other tool would allow us to do. And because we truly love open source we’ve also open sourced our solution to speed up multi-compiler builds, which we rely on heavily to deliver ideal bundles to our users.

Our first right-to-left platform was released in 2014. We had developed a solution to generate right-to-left CSS with Sass mixins and variables as we have described in a blog article. We used this approach for nearly 3 years but recently migrated the right-to-left generation from pre-processing to post-processing with RTLCSS. With this article I would like to share the reasons for the migration as well as our experiences and lessons learned.