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.
According to Senior Software Engineer Patrick Steele-Idem, Marko directly contributes to a faster and more efficient browsing experience. “Marko offers a familiar pattern for building a UI, but it has a very different architecture and design,” said Steele-Idem. “While most UI component libraries have optimized for either the server or the browser, Marko has optimized for both. Marko renders to an HTML stream on the server, but UI components compiled for the browser render to an efficient virtual DOM. To further boost page performance, the Marko client-side runtime code was deliberately kept small and only weighs in at around 10KB compressed. This drastically reduces the time that a browser spends parsing and executing JavaScript, making it an ideal choice for even older mobile devices.”
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.
While speed has been a driving force behind Marko’s design, it also has a focus on usability. Marko supports both a familiar HTML syntax and a concise, indentation-based syntax that combines the power of HTML and JavaScript. Steele-Idem explained that the upcoming release of Marko v4 introduces a remarkably simple approach to building UI components as shown in the following clutter-free and easily readable code snippet:
Steele-Idem explained, “The goal with Marko v4 was to erase all boilerplate and conceal the underlying framework so that developers new to Marko can hit the ground running. I believe we have achieved this goal, and if you are familiar with writing HTML and JavaScript then you likely already have the skills to build high-performance web applications using Marko.”
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.