A short walk-through of why and how Preactjs came to be adopted as the tooling to develop some SDKs offered on our platform.

Introduction

Would you use a chainsaw to cut through a sheet of paper? Or scissors to cut metal? Choosing the right tooling is essential to deliver quality products and seamless user experience.

Front-end leads and developers at Adyen were spoilt for choice with the Javascript-frontend ecosystem's many options for tooling. In a couple of teams, like Checkout and KYC, Preact.js came up as a suitable technology and right now is the choice for tooling used for delivering SDKs to connect to our platform.

We always look to deliver the best product and developer experience, here we share some of the reasons why these teams chose to adopt this tool to build some of our key products. First, let’s give some context with history.

Once Upon a Time in History…

Change is the most constant thing but change without reason is mostly redundant. As with all things in Adyen we are guided by our Formula and, for our engineering teams more specifically, the Adyen way of engineering. One key guide in our engineering formula is: “We embrace new technology when it has clear benefits.”

Before adopting Preact, these teams built products with vanilla JavaScript. Features were bundled and our merchants loaded them as scripts. Our products were excellent in quality and functionality but it came at cost to our developers.

Historically, we had only just begun adopting ES6 across the board in 2017, so code here was written in ES5! Our developers still had to trudge through writing with ES5 specifications and syntax and weren’t enjoying relief from verbosity ES6 syntactic sugar brought. Also, because of the “build-in-house” approach, we were short on some of the advantages modern frameworks brought. Developers in these teams had to reinvent the wheel with most things that come with modern frameworks off the bat: managing state, deciding when to update the DOM, testing and even some community driven advantages like peer reviews on new features and issues.

You should start to see the problem here, the general developer experience was not attractive or pleasurable. Maintenance was not easy and onboarding had a learning curve that was quite steep.

Naturally, we began to look for a tool that will make this experience better. We tried out a few templating engines and found out that they were less stable and were not as feature rich as we wanted. We also did try running some other Javascript frameworks, but we found that they made our library heavier than we wanted.

Our search led us to Preact.js and we settled on it being the right tool for our specific use cases.

Right now… with clear benefits

This was not without reason; Preactjs featured some advantages and clear benefits that we embraced. Some of them:

• It is very lightweight compared to other frontend frameworks: it is about 3kb as opposed to other frameworks that came to about 45kb. Preact came in favorably because of the smaller size of the library when importing it into our code.
• It is fully featured: fast with a standard modern API(the same as React!), component based, provides a virtual DOM library on top of the DOM, and integrates well with other libraries.
• It has a shallow learning curve: this interpretes to being easier to onboard new developers, easy maintenance and an increase in productivity.
• By the time it was going to be adopted, it was already a mature framework. It had been around for about 3 years and had an active development community. It is also open source!
• It doesn’t have any production dependencies: with less Javascript to download, parse and execute and more control it checks with security compliance.

From our merchant’s perspective the switch was very seamless. The SDKs were easy to install with the NPM package manager, and because we had them built with a well-known tool, it made it easier for external developers to both understand and contribute to it.

Open Source Support

At Adyen, we believe in supporting open source projects and contributors and that’s why we became Gold sponsors for the Preactjs project. We believe in Preact.js and are investing in the community.

Our decisions are always guided by our Adyen way of Engineering and our Formula. Right now, just like a paper cutter or pair of scissors to paper, we’ve found and use just the right tool for the right problem!

Tech Careers at Adyen

We are on the lookout for talented engineers and technical people to join us in pushing the boundaries of technology forward and fostering an open-source-first culture.

Check out our developer vacancies here.