Blbé javascriptové šablóny

1.8.2015 22:09 | Přečteno: 5373× | Web |

Nedávno som v práci písal websocketový chat. Pri programovaní sa snažím vyhýbať veľkým knižniciam. V tomto blogu popíšem minimalistický veľmi rýchly a veľmi veľmi blbý systém šablón pre generovanie DOM javascriptom.

Pri programovaní som sa trochu inšpiroval E factory z pythonu (konkrétne s nim nemá totálne nič spoločné okrem znaku E ).

Mojim cieľom bolo navrhnúť zápis tagov tak, aby som sa pri tom nezbláznil a zároveň aby bolo možné z tohto zápisu generovať metódy pre prístup k tagom / atribútom / fragmentom textu.

Zápis elementov / tagov / fragmentov textu

Všetky typy elementov som sa rozhodol reprezentovať jedinou štruktúrou nech nezasieram zbytočne menný priestor. Spôsob zápisu je dúfam dostatočne jednoduchý:

E('nazov_tagu', [zoznam tagov / atribútov / fragmentov]);
E('@nazov_atributu', 'hodnota atribútu');
E('#text', 'fragment textu')

Každý elemnt / atribút / fragment môže mať v názve =nazov_premennej pomocou ktorého sa bude pristupovať k innerHTML elementu, alebo get/setAttribute elementu, alebo textContent fragmentu textu.

E('DIV=kontajner', []);
E('@class=trieda', '');
E('#text=fragment_textu', '');

Generované prístupové metódy sa používajú nasledovne:

tree.set.kontajner('HTML obsah'); // nastavuje innerHTML
tree.get.kontajner();
tree.elements.container; // viem nie je metóda, priamy prístup k Node
tree.set.trieda('hmm'); // setAttribute
tree.get.trieda(); // getAttribute
tree.set.fragment_textu('au'); // textContent
tree.get.fragment_textu()

Definícia E je jednoduchá keďže slúži len ako štruktúra pre generovanie DOM:

(function () {

"use strict";

var E = (function () {
    var P = function(name, value) {
        var name = name.split('=');
        this.name = name[0];
        this.propname = name[1];
        this.value = value;
    };

    return function(name, propname, value) {
        return new P(name, propname, value);
    }
}());

window.E = E;

}());

Celú špinavú prácu rieši Etree:

(function () {

"use strict";

var Etree = (function () {
    var getText = function(node) {
        return node.textContent;
    };
    var setText = function(node, value) {
        node.textContent = value;
    };
    var getHTML = function(node) {
        return node.innerHTML;
    };
    var setHTML = function(node, value) {
        node.innerHTML = value;
    };
    var getAttribute = function(node, attribute) {
        return node.getAttribute(attribute);
    };
    var setAttribute = function(node, attribute, value) {
        node.setAttribute(attribute, value);
    };
    var setData = function(self, data) {
        for (var key in data) {
            if (Object.prototype.hasOwnProperty.call(data, key) && Object.prototype.hasOwnProperty.call(self.set, key)) {
                self.set[key](data[key]);
            }
        }
    };

    return function(root, initialData) {
        var getters = {};
        var setters = {};
        var elements = {};

        var buildElement = function(nodeData, parent) {
            if (nodeData.name === '#text') {
                var node = document.createTextNode(nodeData.value);
                parent.appendChild(node);
                if (nodeData.propname !== undefined) {
                    getters[nodeData.propname] = function() { return getText(node); };
                    setters[nodeData.propname] = function(value) { return setText(node, value); };
                }
            }
            else if (nodeData.name[0] === '@') {
                var attribute = nodeData.name.substr(1)
                parent.setAttribute(attribute, nodeData.value);
                if (nodeData.propname !== undefined) {
                    getters[nodeData.propname] = function() { return getAttribute(parent, attribute); };
                    setters[nodeData.propname] = function(value) { return setAttribute(parent, attribute, value); };
                }
            }
            else {
                var node = document.createElement(nodeData.name);
                if (nodeData.value) {
                    nodeData.value.forEach(function(subElement) {
                        buildElement(subElement, node)
                    });
                }
                if (nodeData.propname !== undefined) {
                    getters[nodeData.propname] = function() { return getHTML(node); };
                    setters[nodeData.propname] = function(value) { return setHTML(node, value); };
                    elements[nodeData.propname] = node;
                }

                if (parent) {
                    parent.appendChild(node);
                }

                return node;
            }
        };

        var component = {
            tree: buildElement(root),
            get: getters,
            set: setters,
            elements: elements
        };
        component.setData = function(data) { setData(component, data); };
        if (initialData !== undefined) {
            component.setData(initialData);
        }
        return component;
    }
}());

window.Etree = Etree;

}());

Reálne používanie

Najskôr HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Bleh</title>
</head>
<body>

<h1>Blbý TODO list</h1>

<div id="container"></div>

<script src="etree.js" type="text/javascript" charset="utf-8"></script>
<script src="todo.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

A javascript, v ktorom som hádam využil väčšinu funkcí.

// todo.js

var todoTableTemplate = E('TABLE', [
    E('@border', '1'),
    E('THEAD', [
        E('TR', [
            E('TH', [
                E('#text', 'Úloha (počet: '),
                E('#text=count', ''),
                E('#text', ')')
            ]),
            E('TH', [
                E('#text', 'Priorita')
            ])
        ])
    ]),
    E('TBODY=todolist', [
    ])
]);
var todoItemTemplate = E('TR', [
    E('@class=priority_class', 'normal'),
    E('TD', [
        E('#text=task', '')
    ]),
    E('TD', [
        E('#text=priority', 'Normálna')
    ])
]);


var todoTable = Etree(todoTableTemplate);
todoTable.set.count('0');
document.getElementById('container').appendChild(todoTable.tree);

var todoList = [
    Etree(todoItemTemplate, {task: 'Naučiť sa blbý javascript'}),
    Etree(todoItemTemplate, {task: 'Napísať blbý blog'}),
    Etree(todoItemTemplate, {task: 'Robiť niečo užitočné', priority: 'Nízka', priority_class: 'low'})
];

todoList.forEach(function(todoItem) {
    todoTable.elements.todolist.appendChild(todoItem.tree);
});
todoTable.set.count(todoList.length);

Výhody / nevýhody / čo s tým?

Jednoznačným plusom je výkon a veľkosť. Réžia pri nastavovaní atribútov je minimálna. Pre niekoho bude možno nevýhodou spôsob zápisu v javascripte.

Pre zložitejšie aplikácie bude s veľkou pravdepodobnosťou nutné vymyslieť spôsob reakcie na zmenu modelu. Ja používam niekoľko ďalších "tried" (alebo ako sa tomu v JS hovorí), ktoré ešte nemajú moc stabilné API. Tu je krátky zoznam s popisom keby si to niekto chcel sám implementovať:

Signal

Generický observer, používa sa podobne ako signály a sloty v Qt: element.signals.changed.connect(on_changed), element.signals.changed.disconnect(on_changed).

ModelInstance

Obaľuje kontext a má signal changed.

ListModel

Obaľuje zoznam ModelInstance objektov, má metódy pre vkladanie, odoberanie, zoraďovanie a signály inserted / removed (zoradenie sa rozkladá na operáciu remove / insert).

Widget

Renderuje šablónu, reaguje na signál changed triedy ModelInstance.

ListView

Reaguje na zmeny v ListModeli, vytvára inštancie widgetov.

Upozornenie na záver

Nemám rád javascript. Ani sa mi nechcelo o ňom moc písať, ale potreboval som si na dnes nájsť nejakú dostatočne masochistickú zábavu aby ma netrápilo, že som pred 2 dňami prišiel o mačku Na to, že som ju mal pol roka som si ju celkom obľúbil ...

Teda v každom prípade berte do úvahy, že v javascripte štandardne nepíšem. Negarantujem, že som sa nedopustil niektorých antipatternov.

       

Komentáře

[coder]

>>prišiel som o mačku

Ešte by sa trebalo zbaviť manželky a svokry a svet bude hneď krajší.

[mirec]

Svokru ani manželku nemám, ale mačka mi chýba.

Nebola síce najkrajšia (vlastne keď prišla mala len 3 zuby, hroznú srsť, hnisavé oči a vkuse kýchala a kašľala), nebola ani najmladšia (podľa veterinára tak 15 rokov), dokonca zo začiatku sme ju doma nechceli lebo vyzerala hrozne a neznášala sa s kocúrom. No nakoniec si na seba zvykli, aj väčšina problémov sa vyriešila pár injekciami / tabletkami / masťou na oči. Stále mám kocúra (o ktorého som mimochodom tiež skoro prišiel keď ušiel z prepravky na parkovisku v meste 10km od domu no nakoniec po 4 dňoch hľadania v Poprade sa našiel), ale ten nie je ani zďaleka tak vďačný ako mačka. O mačku som prišiel blbou zhodou náhod ... v sobotu minulý týždeň jej opuchlo líce, bolo plné hnisu lenže v ten deň sa z obce nedalo dostať do Popradu kvôli tomu, že boli uzavreté všetky cesty (jedine pešo / helikoptérou), žiaden veterinár v obci nebol ochotný sa na ňu ani pozrieť a kým sa dalo dostať k nejakému inému veterinárovi už sa jej nedalo pomôcť :\

[Odin1918]

Neslo by pouzit jquery a prestat vymyslet kolo?

[mirec]

Nešlo by prečítať si o čom píšem?

[Josef Kufner]

Nezvažoval jsi React nebo Angular?

[mirec]

Áno, React som zvažoval a s angularom som pracoval. Angular nemám moc rád, ale bolo to vtedy rozhodnutie firmy. Po tom čo som videl angular 2 asi by som do toho už po druhý krát nešiel.

Oba projekty riešia šablóny doplnením HTML markupu o riadiace sekvencie (či už ng-* alebo "magickým" zápisom u reactive). Mne sa to osobne nepáči (žiadne vysvetlenie za tým nehľadajte, jednoducho sa mi viacej páči predžúvaný DOM než parsovanie stringu). Okrem toho mám zakázané to používať v súčasnej firme

Nehovorím, že moje šablóny sú ideálne. Moje šablóny sú rýchle pretože sú blbé. Sú blbé aby boli rýchle. Sú blbé aby sa v nich dali ľahšie hľadať chyby. Nie každému to musí vyhovovať, ale ak by niekto niečo podobné potreboval tak môže kľudne použiť moju implementáciu.

Môj kód je úplne odtrhnutý od akéhokoľvek MVC. Ako som v závere spomínal bindingy si riešim tiež vlastným kódom (dokopy asi 100 riadkov navyše) dosť podobným tomu ktorý beží na serveri (na serveri je tornado, takže tam je to implementované v pythone).

[xkucf03]

Ta syntaxe je hrozná, přijde mi to dost nečitelné, nepřehledné. Z tohoto pohledu¹ by bylo lepší XQuery. Kombinuješ v něm výstupní data (resp. šablonu) i logiku programu a všechno to jsou konstrukce toho jazyka, ne nějaké textové řetězce.

Další možnost je psát XML (XHTML) a vytvořit si sadu atributů nebo elementů, které k tomu přidají nějaké chování (IF, FOR, plnění proměnných…). Podobně funguje XSLT, JSPX. Nebo zkus JSX a React od Facebooku.

Celkově mi ale web přijde jako taková žumpa, že nemám moc chuť se v tom hrabat a řešit to ručně – když můžeš můžeš programovat v normálním programovacím jazyce, na serveru² a o zbytek se postará framework – a web (HTML, HTTP, JS, CSS…) tu slouží jen jako výstupní zařízení, na které se aplikace vykreslí. Ostatně když píšeš aplikaci v Qt nebo GTK, tak taky nemusíš řešit, jak funguje X server nebo Wayland – to je práce pro ten framework.

_{[1] i když chápu, že je to další jazyk, není to přímo v JavaScriptu, takže to vyžaduje další knihovnu, není to kód na pár řádků
[2] tzn. jsi přímo spojený se zbytkem své aplikace bez nějakých zatemňujících serializací a překladů (JSON, AJAX, WebSockety) – místo toho normálně používáš svoje objekty, voláš metody…}

[mirec]

IF, FOR

To už je také písanie jazyka v jazyku. Akonáhle vidím niekde v šablónach for premýšľam ako bude komponent reagovať na zmeny. Najľahšie je hodiť tam list a ten vyrenderovať, lenže na zmeny to nie je vhodné (taký select stratí vybranú položku, čo by som ešte vedel ošetriť, ale chudák človek čo otvorí select s výberom príjemcu a ten mu zrazu zmizne pretože sa niekto pripojil do chatu). Dá sa nad tým napísať diff (ehm samotné porovnanie v javascripte je na dosť riadkov, diff netuším), lenže to je tak trochu masochistické. Posledná možnosť je vytvorenie listu ako komponentu (či triedy alebo čo to je) a metód pre jeho modifikáciu (insert, push ...). Bežne sa to robí aj v reacte a presne takto riešim aktualizáciu zoznamu aj ja. Logicky mi z toho vychádza, že for bude v takomto šablónovacom jazyku zbytočné.

If ... no prežijem bez neho. Ja staviam aplikáciu z widgetov čo je šablóna + logika naplnenia šablóny kontextom (obyčajná funkcia ktorá vráti slovník, môžem v nej urobiť čokoľvek) + odkaz na inštanciu modelu (vďaka tomu môže reagovať priamo na zmeny v modeli). Ak chcem niečo podmienečne skryť / zobraziť stačí mi vo funkcii ktorá vracia kontext napísať danú podmienku a pomocou css triedy skryť / zobraziť element.

V priamom porovnaní môjho chatu a example chatu v reacte (skompilovaná verzia) na tom môj kód nie je vôbec zle. Hoci mám dosť zložitú autentifikáciu a riešim podstatne viacej stavov mám len 400 riadkov pričom obyčajný jednoduchý example z reactu má vyše 200. React.js v mojom prípade asi 50-násobne zväčší aplikáciu, ale nezmenší množstvo kódu ktoré musím napísať.

[mirec]

Ešte k sytaxi, nejaká pekná alternatíva? React má do istej miery podobný zápis po kompilácii. Môj pôvodný zámer bol tiež kompilovať niečo rozumnejšie vyzerajúce, ale:

• chcel som sa vyhnúť parsovaniu
• každý fragment sa musel dať namapovať na prístupovú metódu (vrátane fragmentov textu a atribútov, preoto ten strelený zápis atribútov rovnako ako tagy)
• jednoduché, stupídne jednoduché tak aby sa dalo prepísať do viacerých jazykov

Nakoniec som skončil u zápisu kódu tak ako by mal vyzerať po kompilácii.

[Josef Kufner]

Pokud chceš něco hezčího, tak můžeš vytvářet prosté HTML a pak ho prohnat vlastním preprocesorem, který z toho udělá ten tvůj kód. Otázkou pak ale je, jak propojit takovou šablonu s nějakým tím view-controllerem, který by to plnil daty a staral se o aktualizace. Mohlo by to dopadnout jako ta obluda XSLT, ale při troše šikovnosti by to mohlo být více jako používání direktiv v Angularu.

Když se to veme z úplně jiné strany, můžeš na to jít widgetově a psát to deklarativně v JSON. Takový framework jsem zkusil vytvořit, na pár projektech ho úspěšně používám, ale mám to jen jako serverovou část v PHP, která generuje jinak statické HTML. Nicméně na obyčejné formuláře a view je to docela praktické, neboť přepnutím sady widgetů mám ze stejné definice jak view, tak formulář. A navíc to velice pěkně spolupracuje s definicí modelu, takže jen řeknu jaké políčko chci a z modelu se vytáhne, jak má políčko vypadat. Ještě sháním někoho, kdo by mi k tomu udělal grafický editor (je libo diplomku?).

[mirec]

Pokud chceš něco hezčího, tak můžeš vytvářet prosté HTML a pak ho prohnat vlastním preprocesorem

Je to jedna z možností, ale som moc lenivý písať na to parser. Možno keby som sa vykašlal na ošetrenie chýb syntaxe tak by to vyšlo na pár riadkov.

Otázkou pak ale je, jak propojit takovou šablonu s nějakým tím view-controllerem, který by to plnil daty a staral se o aktualizace.

Jednu možnosť popisujem dole v blogu. Akurát tam ešte nemám dosť stabilné API na to aby som to chcel dať verejnosti.

[finc]

V Reactu je ten zapis ovsem magicke JSX a ve finale se jedna o funkci, coz sebou prinasi velke vyhody. Zejmena to, ze cele je to postavene na virtualnim DOM. Diky tomu mohu stejnym zpusobem psat aplikaci pro web, pro android ci iOS. Navic diky JSX muzu uz dnes v pohode pouzivat zapis ECMAScriptu 6. Nevim jak ostatnim, ale tenhle zapis mi prijde o dost vic sexy :)

// hello-world.jsx
 
import React from 'react';
 
class HelloWorld extends React.Component {
  render() {
    return 
Hello, world!
;
  }
}
 
export default HelloWorld;

A pak uz jen render :)

// index.jsx
 
import React from 'react';
import HelloWorld from './hello-world';
 
React.render(
  <HelloWorld />,
  document.body
);

Navic je tady Flux, react-router apod. Diky bohu za nej :)) Kazdopadne ti preji hodne sil, treba z toho nakonec vybrousis diamant. Vse je mozne... Jen bych se co nejvice inspiroval vecmi, ktere jiz existuji. Treba zmineny react-router je obycejna kopie routeru z emberu. A je to dobre, protoze kdyz je neco vazne dobre, proc to menit. Vzdy jsou jine oblasti, ktere stoji za starou backoru a na tech je treba zapracovat :)

[mirec]

S možnosťou použiť preprocesor rátam od začiatku, ale nejako nebola chuť ho napísať. Okrem preprocesora by som chcel aj podporu renderovania na serveri čo sa občas hodí kvôli SEO. S jsx by som musel spúšťať ešte node.js server a kŕmiť ho dátami. Všetko má svoje výhody a nevýhody, záleží od konkrétnej situácie.