patrick-steele-idem

Syntax: Marko vs Vue

Custom tags and passing data

Marko:

<greeting
  name=fullName
  message-count=30

patrick-steele-idem

Below are the sizes of various UI libraries. The JavaScript bundles for each library includes the minimal code to render a very basic UI component in the browser. That is, the bundle includes the UI library and the code for a single UI component. The JavaScript bundle is generated using Rollup with NODE_ENV=production and all helpful optimizations are used to reduce the code size (envify, uglifyjs, minprops, etc.).

[marko]
  gzip:  11,802 bytes
   min:  32,289 bytes

[preact]
  gzip:   4,401 bytes
 min: 10,272 bytes

patrick-steele-idem

module.exports=function anonymous(it
/**/) {
var encodeHTML = typeof _encodeHTML !== 'undefined' ? _encodeHTML : (function (doNotSkipEncoded) {
		var encodeHTMLRules = { "&": "&#38;", "<": "&#60;", ">": "&#62;", '"': "&#34;", "'": "&#39;", "/": "&#47;" },
			matchHTML = doNotSkipEncoded ? /[&<>"'\/]/g : /&(?!#?\w+;)|<|>|"|'|\//g;
		return function(code) {
			return code ? code.toString().replace(matchHTML, function(m) {return encodeHTMLRules[m] || m;}) : "";
		};
	}());var out='Hello '+encodeHTML(it.name)+'! ';if(it.colors && it.colors.length){out+=' <ul> ';var arr1=it.colors;if(arr1){var color,i1=-1,l1=arr1.length-1;while(i1<l1){color=arr1[i1+=1];out+=' <li class="color">'+encodeHTML(color)+'</li> ';} } out+='</ul>';}else{out+='<div> No colors!</div>';}return out;
}

patrick-steele-idem

{
    "raptor": {
        "dependencies": [
            { 
                "include-pattern": "\\.*", 
                "extension-pattern": "_([A-Za-z0-9]+)\\." 
            }
        ]
    }
}

patrick-steele-idem

{
    "settings" : {
        "foo" : "low",
        "bar" : "high",
        "baz" : "low"
    }
}

patrick-steele-idem

raptor.define(
    'my.module',
    {
       hello: "World"
    });

raptor.define(
    'my.module',
    function() {
      return {

patrick-steele-idem

<!-- "LOGIC-LESS": -->
{{#cartEmpty}}
<div>
    Your shopping cart is empty!
</div>
{{/cartEmpty}}

{{#cartNotEmpty}}
<ul>
    {{cartItems}}

patrick-steele-idem

-----------------
Option A:

Hello {{name}}!
{{#hasItems}}
<ul>
  {{#items}}
    <li>{{.}}</li>
  {{/items}}
</ul>