Hands-on with the Marko JavaScript framework

Innovation in full-stack, server-side rendering JavaScript frameworks continues apace. Marko is developed under the aegis of eBay, who uses it in their e-commerce site. Marko is intended to be an easy-to-learn and high-performance framework.

Ryan Carniato, creator of SolidJS, has been involved in the development of Marko. He describes it as “built specifically to handle the high performance needs of eBay’s platform.” Considering eBay draws 307 million monthly users, Marko can almost certainly handle your use case.

Marko components

Let’s begin our exploration of Marko with its component system. Marko has one of the simplest component definition and discovery systems yet devised. You can see a simple component definition here, a color picker. Notice that in the main index.marko file, there is an HTML element called <color-picker>, along with a property containing an array of hexidecimal colors. How does Marko find the color-picker component?

The answer is that Marko begins at the directory where the component usage is found, then, beginning at the sibling directories, moves up looking for a /component directory containing the required component definition. If no such component is found in that app code, Marko will turn to installed dependencies and scan them as well.

Note that Marko searches upward, so that directories in separate branches are not aware of each other. This provides a kind of scoping for the components.

In our case, Marko doesn’t have to look far, because there is a /components/color-picker/index.marko file. (Marko also will load components from a file with the component name in the components directory, or a file inside the component directory with the component name as folder and file.)

Copyright © 2021 IDG Communications, Inc.

Source link

Leave a Comment

Your email address will not be published. Required fields are marked *