Reactor.js - moja odpoveď na ReactJS (diskuse)

[mirec]

Příloha:

• reactor.tar.xz (136876 bytů)

Použité zdrojáky.

[Bystroushaak]

Zajímavé. Měl bys to hodit na github, přidat k tomu dokumentaci v angličtině a hodit odkaz do /r/programming, imho by to i pár lidí používalo.

[mirec]

Zatiaľ mám akurát gist na githube. Proxy modely nad ListModelom majú hnusné API, ktoré by som najradšej prekopal. Vlastne je tam tých škaredých vecí, ktoré by som najradšej od základu prepísal viacej. Po stabilizácii API vytvorím repozitár.

Trochu offtopic .. pri programovaní v JS ma prekvapila jedna vec. Skoro všetko, čo píšem je rýchlejšie vo firefoxe, ale cudzie knižnice sú naopak zvyčajne rýchlejšie v chrome.

[FoxVK]

<offtopic> Je tady nějak přeliškováno... </offtopic>

[Petr]

Neboj, Bystroushaak je ve skutečnosti krysa

[Bystroushaak]

Ty jsi můj nový troll, nebo jsi jeden z těch starých?

[Eliß]

Bystrpusak je ve skutecnosti Firefox, tedy panda

[mirec]

Ale vreckový firefox (fenec) je skutočný vreckový lišiak ;)

[backinabag]

Hm... na Reactu se mi libi model fungovani:

UI komponenta je funkce, ktera na vstup dostane stav a vrati HTML. Kdyz chci provest nejakou zmenu v UI, na DOM nesaham, ale upravim stav a reknu o tom Reactu. Ten se pak postra o update UI.

Napriklad kdyz chci smazat polozku v todo, pouze se upravi stav (smaze dana polozka v poli), nic vic neni potreba, React upravi UI automaticky tak, ze pregeneruje danou komponentu.

Tohle je podle me obrovsky paradigm shift a hrebik do rakve klasickym frameworkum jako Angular a Ember.

Z toho kodu to vypada, ze Reactor takhle nefunguje...

[mirec]

UI komponenta je funkce, ktera na vstup dostane stav a vrati HTML. Kdyz chci provest nejakou zmenu v UI, na DOM nesaham, ale upravim stav a reknu o tom Reactu. Ten se pak postra o update UI.

To je blbosť. Pôvodne som mal napísaný vlastný šablónovací jazyk (pôvodne fork t.js, ale akosi sa na to nabalilo automatické escapovanie, filtre atď), komponenty generujúce html pri zmene stavu ... ale celé som to zahodil. Je jednoduchšíe veľkú časť 10kB knižnice než je to u 500kB knižnice. To, že je to blbosť som už zistil na vlastnej koži keď to síce fungovalo pekne, rýchlo, ale robil som chatovaciu aplikáciu a akosi som potreboval aby sa zoznam užívateľov (select s optionmi) negeneroval vždy znovu keď niekto príde / odíde z chatu. Jednoducho to bolo blbé keď som si vyberal príjemcu a zrazu sa select vymazal a vytvoril na tom istom mieste, zmizol selection a celkovo je to nepríjemné keď počas výberu zmizne menu. Preto react.js potrebuje pri generovaní listu key, ktorý sa následne využíva na diffovanie listu. Ja takéto implicitné magické hodnoty nemám rád, preto to isté u mňa zabezpečuje dvojica ListModel a ListView. ListModel je v podstate obyčajný obalený zoznam ktorý má operáciu vloženia na určené miesto, odstránenia z určitého miesta a presun. Ďalej má 2 signály - inserted a removed (move sa dá rozložiť na tieto 2). ListView sa jednoducho zahákne na ListModel a vytvára / maže komponenty. Komponenty musia byť obalené do widgetu, čo je ľahká vrstva ktorá má ešte na starosti aktualizáciu jednotlivých položiek. Takže ListView nerobí nič iné len reaguje na vloženie / vymazanie, widget sa pri zmene modelu (napr. zmena mena užívateľa) mení sám. Samozrejme inicializovať sa to musí explicitne (funkcia createList), ale zvyšok už je rovnako pohodlný ako s reactom.

Iný príbeh je ak si list neskladám sám, ale chcem ho trebarz aktualizovať z nejakej restovej služby. Na to mám triedu AutoListModel (v podstate je to len proxy na ListModel) a tá funguje takto:

var todoList = new Reactor.AutoListModel();
new Reactor.ListView(
      element,
      todoList,
      widget
);
var zoznam = [];
todoList.setData(zoznam);
zoznam.push({id: 1, ...});
todoList.setData(zoznam);

AutoListModel si už automaticky urobí diff podľa id a do modelu správne pridá / odstráni / presunie / upraví prvky. V podstate robí to isté čo react.js, ale musím ho inicializovať ručne, takže môj kód je o pár riadkov dlhší (< 10%).

[mirec]

Ešte aby to nebolo zle pochopené .. nie som spokojný ako je u mňa implementovaný ListView, ListModel ... ale je to prvé riešenie, ktoré ma napadlo pri poslednom projekte. Predchádzajúce riešenia som nezverejňoval, lebo to bolo už dávno implementované lepšie v iných knižniciach. Automatická efektívna zmena DOM podľa modelu ako to mám implementované v súčasnosti prináša výkon porovnateľný s vanilla js. Preto som sa rozhodol zverejniť fragmenty kódu práve teraz. Kým to bude ako-tak učesané tak to ešte zopár projektov potrvá.

[backinabag]

Nepochopil jsem co presne je blbost. Ze je potreba nekdy pouzivat key? To je, alespon z meho pohledu, zanedbatelny overhead (pro programatora).

Kouzlo Reactu je, ze nemusim pouzivat specialni tridy jako ListView, ListModel nebo AutoListModel. (List byl priklad jednoho widgetu - u ostatnich si musim tyhle tridy vytvaret sam?) Vzdy staci funkce, ktera prevede stav na HTML - neni treba psat kod pro upravu takro vygenerovaneho HTML, o vse se postara React. Strasne to zjednodusi uvazovani o aplikaci. Ano, neni to vzdy stejne rychle jako vanilla JS, ale porad rychlejsi (nekdy radove) nez Angular a Ember.

[mirec]

Nepochopil jsem co presne je blbost.

Blbosť je generovať html. Môj kód tak nefunguje, react.js tak nefunguje, len sa navonok tak tvári.

Kouzlo Reactu je, ze nemusim pouzivat specialni tridy jako ListView, ListModel nebo AutoListModel.

To je vec ktorá sa mi na reacte nepáči. Namiesto pohodlného ListView-u, ku ktorému mám nejaké API musím v react.js pracovať so surovým array-om. Je to vecou preferencií, keby sa mi páčil prístup react.js nemám dôvod písať niečo iné.

Ano, neni to vzdy stejne rychle jako vanilla JS, ale porad rychlejsi (nekdy radove) nez Angular a Ember.

Angular a Ember sú katastrofa. Obojstranné bindingy nemám rád. Rýchlosť je mizerná. Je to obrovské, monštrózne zložité a ako bonus celý angular prepísali.

[backinabag]

react.js tak nefunguje, len sa navonok tak tvári

Ano, tak jsem to myslel, ze React generuje reprezentaci html.

[Radek Miček]

Vzdy staci funkce, ktera prevede stav na HTML - neni treba psat kod pro upravu takro vygenerovaneho HTML, o vse se postara React.

To funguje, pokud máte malá data. Pokud budete mít milióny položek, tak to nebude zrovna efektivní.

[backinabag]

Vetsinou jde tyhle krajni pripady pomerne jednoduse zoptimalizovat.

[kralyk z abclinuxu]

Osobně se mi moc nezamlouvá, když musím psát HTML v JS nebo nějak vytvářet DOM z JS. Problém je, že pak je tvorba UI hrozně rozházená - část je v .html souborech a část je porůznu v různých kouscích kódu někde v JavaScriptu. To mi přijde jako hroznej chaos.

Volil jsem ten přístup, že napíšu vše komplet v HTML, které obsahuje pár drobných značek (ale žádný templaty), které označují přístup z JS.

Minimalistický příklad:

HTML:

<div data-ov="mojeview/view">
	Counter:
	<span data-ov="counter"><strong data-ov=".num">1</strong> <span data-ov=".unit">meter</span></span>
</div>

JS:

var model = oswin.model({
	url: { get: '/some/url' },

	data: {   // Udava strukturu dat modelu a vychozi hodnoty
		counter: {
			num: 3,     
			unit: 'meters'
		}
	},

	members: {
		ctor: function() {
			console.log('This is a constructor');
		},

		// Tady je mozne definovat dalsi vlastni promenne a funkce modelu, etc...
	}
});

var instance = model.make();  // Nova instance modelu
instance.view('mojeview');    // Automaticky si najde v DOM element oznaceny data-ov="mojeview/view" 
                              // a navaze ostatni elementy pod nim podle jejich znacek na svoje data
instance.get();               // Nacte data z get URL
instance.data.counter.units = "potatoes";    // Zmeni data. Zmena se automaticky projevi i v DOM

Model má spoustu šikovných vlastností, jako eventy (pokud uživatel změní třeba hodnotu v textovém poli, změní se automaticky i data v modelu a vyvolá se event, který může být na něco navázaný), přístup k jQuery funkcím (třeba v příkladů výše instance.$('counter.num') vrátí jQuery kolekci, která reprezentuje data.counter.num ve view, čili to je ten <strong> element), controller (opět pomocí podobných značek v HTML - nemusí se nikdy vázat ručně žádné callbacky), "kolekce" - tj. třeba vypysování různých seznamů, které jsou opět definované čistě v HTML, dále knihovna obsahuje minimalistický router a pár utilit. Má to asi 8kb gzipped.

[mirec]

Osobně se mi moc nezamlouvá, když musím psát HTML v JS nebo nějak vytvářet DOM z JS.

Ani mne ;) ReactJS to má vyriešené dá sa povedať pekne, ale strašne hnusne . V podstate renderovať react šablóny na serveri je možné len pomocou node kvôli tesnej závislosti s javascriptom. Ich šablóny vyzerajú ako zápis DOM, ale nie je to zápis DOM Nie je možné zapísať class="trieda", namiesto toho sa musí zapísať className="trieda" čo znemožňuje 1:1 mapovanie medzi atribútmi šablóny a DOM atribútmi. Ja si dovolím namiesto šetrenia pár nanosekúnd volať priamo setAttribute. V budúcnosti asi napíšem preprocesor na html s pár značkami na vloženie obsahu z kontextu, ktorý mi vygeneruje príslušný js kód a serverový renderer, ktorý mi umožní renderovať šablóny na serveri v ľubovoľnom jazyku (bez ntnosti mať node na serveri) a odosielať ich ako fallback pre crawlery, alebo browsery s vypnutým js. Keď tak nad tým rozmýšľam možno by nebolo zlé dovoliť použitie ListViewu priamo v šablóne čím by sa zredukoval duplicitný zliepací kód na serveri (fallback rendering) a u klienta.

[mirec]

přístup k jQuery

Inak pozor na jquery a prístup k data. V prípadoch keď používateľ môže nastaviť data je správanie jQuery dosť nebezpečné. Stačí napríklad v tomto kóde zmeniť použivateľské meno na false a hrabnuť zlým spôsobom na length a hneď všetky zoznamy userov, v ktorých sa vyskytuje užívateľ false prestanú fungovať:

$('<div data-username="false"></div>').data('username').length

Od istej doby sa v rozsiahlejších projektoch vyhýbam jQuery kde sa dá. U malých projektov kde chce klient rýchlo niečo zbúchať je mi to jedno.

[kralyk z abclinuxu]

jQuery data() téměř nepoužívám...

[Ondra]

Volil jsem ten přístup, že napíšu vše komplet v HTML

ja to delam presne obracene, pouzivam SmartClient a vsecho co delam je JS. Jako kdybych psal pred 20 lety ve VisualBasicu

[gsnak]

Jaku funkciu ma ta pajpa v script src?

[mirec]

Nechcel som tam dávať to isté HTML 2x, takže sa tam má includnúť súbor podľa toho, či sa použije reactor alebo react. Asi som v prvom scripte zabudol bodku