At eBay, we’ve completely transformed how we build web applications, starting with the transition from a Java-based stack to a Node.js-based stack. Node.js has enabled teams to move faster, and it offers an abundant ecosystem of tools and libraries that are essential to modern web application development.
We built Marko, a library for building UI components with minimal boilerplate, five years ago and it has evolved based on feedback from our vibrant and growing community. Marko is completely open source and to ensure that it remains a healthy open source project, we are thrilled to announce that eBay will be contributing Marko to the JS Foundation.
Marko will continue to be a key component of eBay’s web application development stack. It takes care of automatically and efficiently updating the DOM in response to data changes. On the server, Marko takes advantage of the asynchronous and streaming primitives provided by Node.js to greatly accelerate the performance of eBay’s pages, ensuring shoppers are getting the fastest experience available when browsing on eBay.
Joining the JS Foundation
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. eBay is a member of the Linux Foundation (including the Cloud Native Computing Foundation and the Open API Initiative) and will continue to actively participate in the open source software community.
So what does it mean for Marko to join the JS Foundation? First off, with nearly 20,000 UI components within eBay, we are committed to evolving Marko and expanding the surrounding ecosystem. The Marko core team members that are employed by eBay will continue to maintain and lead the project.
As part of the JS Foundation, Marko will reside alongside other notable projects such as webpack and Mocha. By moving Marko to the JS Foundation, we feel that we will be able to more closely align with other projects in the JavaScript ecosystem. In addition, we want to make it clear that Marko has and always will be open to outside contributions and outside maintainers. While we have seen great growth in the Marko community, we believe there is still a lot of potential yet to be unlocked. Through neutral governance and close ties with other prominent projects, we believe the JS Foundation will allow the Marko community to grow and flourish.
Early history
Marko has a long history within eBay that dates back to 2012, when we started exploring using Node.js as our web application development stack. This was at a time when JavaScript HTML templating was starting to take off. At eBay, server-side rendering was very important, and we wanted support for UI components that provided encapsulation of rendering logic, client-side behavior and styling, and progressive and asynchronous HTML rendering (features that we had on our previous Java-based stack). Dust.js was used by a few teams because it offered streaming and asynchronous rendering, but it lacked support for UI components. Dust.js also provided very few hooks to optimize templates at compile-time, and it promoted what we considered the bad practice of global helpers. eBay open sourced a JavaScript toolkit named RaptorJS that included a very early version of Marko called Raptor Templates. RaptorJS is now defunct, but many of the modules that were part of RaptorJS now live on as independent projects (including Marko).
Marko has evolved a lot over the years. While Marko has always had very strong performance on the server and support for basic UI components, many other features came later and were inspired by other UI libraries/frameworks. For example, after React was announced and gained popularity due to virtual DOM (VDOM) rendering and diffing, we also introduced VDOM rendering and DOM diffing/patching into Marko to avoid manual DOM manipulation. However, unlike with React, the Marko VDOM was and will continue to be an implementation detail that could change at any time. Support for single file UI components was inspired by a similar feature found in Vue and Riot.js. Marko has always aimed to stay competitive with other UI libraries by innovating and closely following industry trends while also focusing on keeping the runtime fast and small.
Marko is now heavily used within eBay, and it is also starting to be used by outside companies, startups, government agencies and educational institutions. The Marko ecosystem has continued to grow and is now supported in many different IDEs and editors and on services like GitHub. The core Marko team has continued to grow, and it consists of a mix of eBay employees and outside developers.
Project roadmap
Asset pipeline integration
Delivering JS, CSS, images, and other front-end assets to the browser is a fundamental requirement of building any web application. As such, we believe Marko should offer first-level support for an “asset pipeline” to simplify the build chain that most developers are used to.
At eBay, we do not have a separate build step. Instead, at runtime we generate all of the JavaScript and CSS bundles required to make the page function. In addition, our tools automatically inject the required <script> tags into the page body and the required <link> tags into the page head. Furthermore, front-end assets such as images and fonts automatically get uploaded to the eBay Resource Server that backs our Content Distribution Network (CDN). We want to introduce this ease of use to all users of Marko.
Progressive Web App (PWA) samples
Progressive Web Apps offer a compelling user experience that is reliable, fast, and engaging. We want to help more developers build PWAs and will be rolling out more sample PWAs built on Marko to help guide developers.
Language Server support
Integrations with editors and IDEs is a challenge for any new language or framework. We have implemented advanced support for the Atom editor, including autocomplete of both core and user-defined tags, hyperclick to jump to tag definitions, and more. But for other editors, we only provide basic syntax highlighting.
Microsoft’s Language Server Protocol gives us the opportunity to write this advanced functionality in a way that can be shared across a growing number of editors.
Improved error messages in development
Compiler checks have been used to improve the developer experience: things like misspelled tag names or using deprecated features. And while these checks are pretty comprehensive, there are certain checks that can only be done at runtime.
In the past, we have kept runtime code size small and fast by limiting error messages and runtime error checking. We recently updated Marko to support both a development mode and a production mode, and now we want to take the logical next step to add additional code to our runtime that will provide much friendlier error messages and catch problems earlier.
UI component marketplace
Starting a new web application can be daunting, but having an arsenal of UI components to choose from can be a huge time saver. While it can be challenging to create a UI component that works well for every application, we believe it is extremely helpful for developers to showcase their UI components, even if they are to be forked and adapted for slightly different use cases.
With nearly 20k components at eBay, we want to make it easy for our own developers to find the right component for the job, and we’d like to extend this marketplace to the open source community to make it easy to find quality components for use in your app.
We are excited about the future of Marko and look forward to building it with the support of the JS Foundation. If you are interested in learning more about Marko, you can get additional information on the Marko website. Join the conversation and contribute on GitHub.
– the Marko team at eBay
Patrick Steele-Idem
Patrick Steele-Idem is a Principal Engineer on the eBay Platform team and is co-leading eBay’s open source program. He is actively engaged in many open source projects (including Marko, Lasso, and morphdom). Patrick is the original author of Marko and is now leading the Marko core team and the Lasso core team.
Michael Rawlings
Michael Rawlings is a Senior Software Engineer on the eBay Platform team where he works closely with product teams to improve the way front-end applications are built. He enjoys building tools that improve the developer experience and make it simpler to build scalable and performant apps.
Austin Kelleher
Austin is a Software Engineer on the eBay Platform team. He graduated from Penn State University in 2016 with a degree in Computer Science. Previous to joining eBay, Austin contributed to Marko and Lasso in his free time.