Blbé javascriptové šablóny (diskuse)

[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.