At eBay, we were founded with the core belief that we should use technology to empower and connect people, globally. In the technology world, we’re a core contributor to and believer in open source technology. Not only does a company culture of open source help us empower our developers, but it also enables our technologists to collaborate across the organization and with peers across the industry.
Our approach is simple: we first look for open source solutions and if we don’t find them, we build products internally that we often then contribute back to the open source community. With a company focus on transforming our platform to create a cutting-edge shopping experience, our technology organization has worked to not only think long-term and reimagine commerce, but we’ve also replatformed eBay, harnessing open source in numerous ways. These efforts range from leveraging its structured data to deploying cutting-edge mobile browsing technologies such as AMP.
Now, eBay is out with an updated version 4 of Marko, a simple, intuitive and speedy user interface component building library. Marko was created in-house at eBay and is fully open source. Among its many benefits, Marko greatly accelerates the performance of eBay’s pages and browsing modules, ensuring shoppers are getting the fastest experience available when browsing on eBay.
Given eBay’s business model, site speed is critical. Therefore, eBay developers are always looking for new ways to create faster loading web apps. One method of reducing page load times is by flushing server-rendered HTML over the wire as early as possible and to keep code size small, so that users can quickly view and interact with pages.
All of these features contribute to Marko’s noteworthy performance, as shown in the following graphic, provided by Steele-Idem, depicting Marko’s speed benchmarked against its competitors:
Source: Server-side Rendering Shootout with Marko, Preact, Rax, React and Vue
Marko utilizes an innovative approach to offer a seamless transition from a server-rendered page to an interactive client-side web page, according to Steele-Idem. “Unlike libraries such as React, Marko does not require that the page is rerendered in the browser when it has already been rendered on the server. Instead, Marko serializes the server-side UI state and other required information to allow the page to instantly boot in the browser. This cuts the time-to-interactive in half on older devices,” said Steele-Idem.
To optimize client-side rendering performance, Marko utilizes advanced features like virtual DOM rendering, DOM diffing/patching, batched updates, and efficient event delegation, added Steele-Idem.
But, the benefits speak for themselves as Marko has already been downloaded hundreds of thousands of times worldwide and has an active Gitter chat room. Because of Marko’s speed and focus on architectural simplicity, it can make a big difference for any organization – ranging from startups, government agencies, and of course commerce companies.
Early adopters have responded favorably to the latest release of Marko, including Riqra, a South American-based virtual wholesaler of consumer goods for small businesses. “Marko has helped significantly improved our development workflow by providing an incredible API and an ecosystem of powerful tools such as Lasso.js and browser-refresh,” said Riqra CTO Julio Canares. “Thanks to Marko we are building isolated, debuggable and testable UI components that are blazingly fast in production.”
Marko is just one example of eBay’s many contributions to the open source community. To read more about eBay’s involvement with other open source projects, see the following:
Apache Kylin - a sophisticated big data analysis tool which eBay donated to the Apache Software Foundation, where it is now stewarded as a top-level open source project.
Apache Eagle– a monitoring system for Hadoop, donated to the Apache Software Foundation.
fabio - a fast, modern, zero-conf load balancing HTTP(S) router for deploying microservices.
Interested in hearing more about Marko? If so, you can get additional information on the Marko website. Join the conversation and contribute on Github.