Right tooling, Right Problem: Preact at Adyen

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

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, likeCheckoutandKYC,Preact.jscame 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 thebest 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.

Change is the most constant thing but change without reason is mostly redundant. As with all things in Adyen we are guided by ourFormulaand, 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.

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

From our merchant’s perspective the switch was very seamless. The SDKs were easy to install with theNPMpackage 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.

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

Our decisions are always guided by ourAdyen way of Engineeringand 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!

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