mlrawlings

/*

Some thoughts on an approach to stateful rerendering.
This definitely has some problems with more complex components
that would need solving.

*/

// input
class Foo {

mlrawlings

Overview

Given a template that displays a count passed into it:

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

mlrawlings

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:

1. create a directory outside the project
2. initialize a git repo

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>

mlrawlings

-----------compare renderToString----------
rax: 3656.802ms
rax: 3642.747ms
rax: 3654.034ms
rax: 3678.500ms
rax: 3507.327ms
rax: 3563.097ms
rax: 3820.896ms
rax: 3482.334ms
rax: 3492.528ms

mlrawlings

import styles from './styles';

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

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

mlrawlings

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)

mlrawlings

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]) => {

mlrawlings

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() {

mlrawlings