MarkoJS: First Impressions

Simply put, Marko is a UI library for JavaScript. It was created at eBay and powers their platform, and in their words it’s “a JavaScript templating engine that supports streaming, flushing, and asynchronous rendering.” In my partner’s words, “it’s faster than React and hotter than Vue,” which is why when we were asked to take a risk building a small Electron app for a project, we decided to take on Marko. The risk being twofold: we had never worked with Marko and it’s not well documented. The great news is that the “open chat” button on the bottom of the Marko website gives you access to one of the creators of the library, Patrick Steele-Idem. Patrick has already helped us on a few issues in the first two days of our project when we were having trouble getting our environment set up.

One of the interesting things that drew us to Marko was the fact that we didn’t necessarily have to use Webpack. Instead we’re using something called Lasso (an npm module also from eBay), which seems to be black magic in comparison to Webpack. I’ll have to dig into that deeper as the project progresses.

Another reason we were drawn to Marko was the way the code looks. It’s component based, which we liked since we’re all React fans, but in addition to HTML semantic markup and JSX syntax support, Marko offers its own concise syntax. It’s pretty.

It also has a an Atom package for syntax highlighting which is super important (language-marko).

After two days of trying to figure out how to set up our environment and structure our files, we’re up and running. The structure feels Ember-y to me (in a good way). There’s a naming convention you can use for your structure. For example, a folder named “electron-button” can hold files called index.marko, component.js, style.css and they will all have the electron-button tag on them and will look for each other when necessary. In addition, there is a view.marko file which renders the components on the screen. Our next steps for this project include figuring out how to pass things around as well as making reusable components.

After spending the last six months learning front end development, we’re excited to feel confident enough to take on something like Marko and make it work!

All images were taken from the official Marko website.