Right tooling, Right Problem: Preact at Adyen
By Amy Mbaegbu, Developer Advocate, Adyen
A short walk-through of why and how Preactjs came 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.
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.”
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.
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!
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.