Michael Rawlings mlrawlings

Marko

Marko is a high performance UI library from eBay. Marko began life as a templating language, so let's begin there.

Templates

Most templating languages are pretty simplistic, they understand their own constructs, but don't understand the HTML structure itself. Marko is different. Marko fully understands the HTML language, in fact, the first version of Marko was built on top of an off-the-shelf HTML parser. We've since developed our own parser that extends the language by adding typed attributes, argument expressions and even a concise syntax. It's quite beautiful.

<h2>Hello ${data.name}!</h2>

Using `src/node_modules/` for module development

The issue 👎

Often you'll find that you need utility methods or other functionality that might make sense as an external module that you could :tada: open source 🎉, but the process can be painful:

create a directory outside the project
initialize a git repo

Overview

Given a template that displays a count passed into it:

<div>
    The current count is: ${data.count}
</div>

	const path = require('path');
	const { createMacro } = require("babel-plugin-macros");
	const objectToAST = require("babel-plugin-preval/src/object-to-ast"); // https://github.com/kentcdodds/babel-plugin-preval/blob/b6eeba02ee93d425cc673ffc23dc62375d0416e5/src/object-to-ast.js

	export default fn =>
	createMacro(({ references, state, babel }) => {
	references.default.forEach(referencePath => {
	if (referencePath.parentPath.type === "CallExpression") {
	const __filename = state.file.opts.filename;
	const __dirname = path.dirname(__filename);

	if (process.env.LOG_ONLY) {
	var chalk = require('chalk');
	var MOVE_LEFT = new Buffer('1b5b3130303044', 'hex').toString();
	var CLEAR_LINE = new Buffer('1b5b304b', 'hex').toString();
	var hiddenCount = 0;
	Object.keys(console).forEach(methodName => {
	var method = console[methodName];

	if (method != console.Console) {
	console[methodName] = function() {

	function pend(getPromises, Child) {
	return class extends Component {
	constructor(props) {
	super(props);

	let promises = getPromises(props);

	this.state = { pending: promises };

	Object.entries(promises).forEach(([name, promise]) => {

	html
	head
	title -- My Site - ${input.title}
	include(input.scripts)
	if(!input.scripts)
	script src='/jquery.js'
	body
	include(input.content)
	include(input.foot)
	if(!input.foot)

	import styles from './styles';

	class {
	onBannerClick(item) {
	alert('click banner:' + item.title);
	}
	}

	div style=styles.container
	h2 -- Marko Banner: