Updated: Jul 17, 2019
Sam Everett, Software Developer
Lasso.js is another open-sourced project that started at eBay, used for bundling js modules, somewhat analogous to webpack. One of eBay’s lead UI developers, Patrick Steele-Idem, stated at the 2018 Node Summit event in San Francisco that eBay uses server-side rendering for purposes of performance and search engine optimization (SEO). eBay utilizes a concept known as ‘progressive html rendering’. In order to accomplish this, eBay harnesses the power of streaming, which is built into NodeJS Core. Streaming is the sending of chunks of data in a direction. In this case the data is html. The html is flushed down in multiple chunks. Most NodeJS applications do not utilize streaming, because they use express.js for their view engine, which doesn’t support it. However, this concept is well-adapted for eBay’s use case. In addition, eBay encourages handling rendering asynchronously, so that each page is split into discrete chunks that can be handed down independently. Here is a visual representation of the benefits:
The first tier is just handing down the html all at once, when the server has finished all the preparation on the back-end, and takes one whole second for the user to see anything on the page. On the second tier the html can be handed down as discrete parts individually, but they are sent down in serial, so each individual piece will appear on the page after its antecedent. In this case the red chunk is the most expensive in terms of load time, but it’s also the second in line to be rendered, so all subsequent components will have to wait. The third tier has asynchronous flushing of each component, passed down in the order of completion. This final tier provides the best user experience, as they can see each piece of content as soon as it’s ready. All this adds up to a pretty sweet stack, optimized for loading lots of search results very fast.
Isomorphic rendering (aka server-side rendering)
Asynchronous streaming rendering
Virtual DOM rendering
Best in class performance (on eBay’s provided benchmarks)
Clean syntax with ‘zero’ boilerplate
Tiny runtime (~10kb gzip) *Angular is about 150kb, React is about 30kb
Single-file UI components
eBay released Marko in 2015 and has been steadily increasing its use. They now have over a billion pages rendered a day with Marko. The project has over 50 developers contributing to it, both in and out of eBay. Though Marko is optimized with server-side rendering in mind, it also works quite well rendered from the client. Here are a few graphics from Marko’s website highlighting its performance compared to other JS frameworks:
The benchmark here is rendering a page of 100 search results. Many DOM nodes need to be updated during this process, and the DOM itself is usually the bottleneck for this sort of situation.
Now let’s look at one of the cooler features of Marko, its declarative style of handling async rendering.
As you can see this makes async rendering intuitive to implement, you simply pass a promise into an ‘await’ component, and you’re ready to go!
Next let’s look at a basic single-file component to see how styling, state and component methods are implemented.
As you can see from this excerpt, Marko has a way to manage the component’s state, much the same syntax as React. A side note that is important to this author, there is an implementation for Redux with Marko, so you can manage your syntax with one source of truth. Marko also allows you to create methods contained within the ‘class’ enclosure. You can see that binding the button to the method is no surprise, just passing the string name of the function to the on-click attribute. You can also see how the stylings are added to the html, using the more css oriented syntax of “[tag name].[class name]”.
Now let’s take a brief look at the file structure of a Marko project with a few routes.
To sum up, it’s clear that eBay’s Marko templating framework and NodeJS stack work well for them and their use case. It is made and optimized for NodeJS server-side rendering, a great choice for displaying lots of search results on a page with SEO in mind. Marko itself has lots of attractive features and a demonstrably faster load time than many other frameworks. Finally, Marko also has a syntax that is both fresh and intuitive. Only time will tell if Marko receives a greater market share, but it’s definitely worth a peek for anyone with a use case similar to eBay.