7 komentářů k článku Custom Elements v praxi:

1. 

   Josef Marianek 31.3.2020 v 11:53

   Dekuji moc
   Zase jsem se neco noveho dozvedel. Posledni dobou jen koukam, co vsechno je v html5 a modernim js mozne. Popravde, uz jsme prepsali jednu puvodne c++/qt aplikaci do web verze a sice neumi uplne vsechno, ale skoro vsechno. Tyhle custom html elementy se urcite budou hodit.

   Odpovědět
2. 

   Vít Heřman 5.4.2020 ve 14:11

   Co si myslíte o novějších reaktivních knihovnách/frameworcích?
   Mám velmi rád všechny vaše články a talky o JS. Vaším článkem z roku „JavaScriptové MVC frameworky“ z roku 2013 jsem se inspiroval velmi dlouho až do příchodu Reactu. Článek by zasloužil rozšíření o React, Svelte, Vue, možná nový Angular a další. Zajímal by mne Váš názor, zda kritika alespoň někde trochu nepolevila :-) Byť vím, že máte mnohem raději low level technologie, a že v žádném frameworku asi nikdy nic skutečně dělat nebudete. Děkuji :-)

   Odpovědět
1. 

   Ondřej ŽáraAutor příspěvku 6.4.2020 ve 22:35

   Re: Co si myslíte o novějších reaktivních knihovnách/frameworcích?
   Díky za feedback! Obávám se, že pokračování článku o frameworcích asi hned tak nevyjde. V těch současných mám velmi malý rozhled. React jako takový je spíš jen knihovna, takže do srovnání moc nepatří; Svelte je natolik pre-procesovaný nástroj, že se vlastně úplně o JS framework nejedná, takže ve srovnání mi také přijde nefér. Vue znám jen z rychlíku, ale v nejbližších týdnech mám v plánu se s ním trochu seznámit.

   Odpovědět
1. 

   Mlocik97 7.4.2020 ve 15:02

   Re: Co si myslíte o novějších reaktivních knihovnách/frameworcích?
   Svelte/Sapper > Kdejaký JS Framework (ako VueJS, Angular, či React (ktorý je frameworkom, když sa rozšíri o 12 ďalších knižníc/rozšírení/modulov či jak to chce nazvať)) React ale pravda že samo o sobe je len knižnica, navyše je nabobtnaná a extrémne nezmyselná. Nie len že aby to fakt fungovalo je potreby to mať spolu s 12 knižnicami, čož je proste moc veľký objem, ktorý lejeme do štamprlíka, ale ešte má toľko chaotických a nezmyselných vlastností. Ceľkovo to perfektne zhrnuté je https://www.reddit.com/r/reactjs/comments/bv9nxf/react_sucks/

   najhorší je podla mňa boilerplate. Vo Svelte viem z externého Rest API získať dáta v JSON podobe a vyparsovať je do tabuľky v 5 riadkoch kódu, v Reacte je to minimálne 40 riadkov.

   skuste v Reacte na koľko riadkov by ste spravili jednoduchú kalkulačku na sčitovanie 2 čísel, čo vo Svelte spravíte za pomoci 1 riadka JS a 3 riadkov HTML a to:

   let a = 0, b = 0;
   
   
   <input type="number" bind:value={a}>
   <input type="number" bind:value={b}>
   <p>{a} + {b} = {a + b}</p>
   

   skuste si toto v Reacte,…

   taká jednoduchá vec, v Reacte na 20 riadkov JS. Ako menej boilerplatu som ešte nevidel (vo Svelte), snaď len v AngularJS, kde ste nemuseli deklarovať premenné, tzv, interaktívne sčitovanie 2 čísiel na 0 riadkov JS, a 3 riadky HTML. To v čistom Reacte neurobíte ani keby ste sa postavili na hlavu. Ako Svelte/Sapper je momentálne najlepšie riešenie a extrémne jednoduchá vec pre aj úplných začiatočníkov. Pomocou Svelte/Sapper by aj totálny laik, človek čo sotva vie zapnúť prehliadač by dokázal naprogramovať plnohodnotnú kalkulačku, plnehodnotný informačný web o covid-19 (ako je napr. worldometers) alebo kludne aj vlastný blog (bez možnosti komentovať články, či prihlasovania), a to za jeden deň úplne v pohode. V Reacte, ja čo už mám za sebou aj väčšie projekty, mám v Reacte problém naprogramovať najtriviálnejšie veci, zatiaľ čo vo Svelte/Sapper či AngularJS dokážem naprogramovať komplexné web aplikácie či desktop aplikácie (v Electron či Svelte-native)

   Osobne tvrdím že React by mal umrieť, pretože tá vec nie je k ničomu dobrá, nemá ani jednu výhodu voči Svelte/Sapper. No možno jednu, že je preň už veľa hotových modulov/component či jak to nazvete.

   Btw. toto je len môj názor, nemusíte súhlasiť ak nechcete, ale i tak ak ste React favorit, tak odporúčam vyskúšať Svelte/Sapper a verte mi že vätšina z Vás už ho nebudete nikdy chcieť ani vidieť, a zostanete pri Svelte/Sapper.

   Odpovědět
3. 

   L. 11.4.2020 ve 15:41

   React nabobtnalý? „Extrémně nesmyslný“? Tak to asi používáme každý nějaký jiný React. Ten ve kterém píšu já je geniálně jednoduchý a velmi logický (pokud se člověk zbaví zlozvyků, neprasí a dělá věci jak se dělat mají). Nějaké počty knihoven jsou nesmyslné měřítko, záleží na tom, jakou kdo zvolí granularitu.

   Získání JSON z RESTu a vypsání do tabulky? Komunikace přes REST je jaksi naprosto mimo React, nicméně přes třeba modernější graphql by to s knihovní komponentou mohlo vypadat nějak takhle:

   () => (<Query query={QUERY}>
     ({data}) => {data && <table>
      {data.map(row => <tr key={row.id}><td>{row.id}</td><td>{row.nazev}</td></tr>)}
     </table>})
   </Query>)
   

   Dalo by se to zformátovat i přehledněji, ale pak by někteří mohli namítat, že je to na moc řádek :) A samozřejmě kdybych použil nějakou knihovnu na tabulky, tak je to ještě jednodušší.

   A že je tam moc bolerplate? Kde proboha? React je naopak extrémně úsporný, protože komponenta je prostě funkce. Třeba ta sčítačka

   () => {
     const [a, setA] = useState(0)
     const [b, setB] = useState(0)
   
     return (<>
       <input type="number" value={a} onChange={(event) => setA(event.value)} />
       <input type="number" value={b} onChange={(event) => setB(event.value)} />
       {a} + {b} = {a+b}
     </>)
   }
   

   Je to devět řádků a samozřejmě by se to dalo zformátovat na méně :) (Sorry, jestli v tom handlingu eventů mám někde blbě název, na tohle se v reálu samozřejmě používá knihovna.)

   Obecně porovnávat knihovny / frameworky na takovýchhle trivialitách je nesmysl. Když má příklad pět řádků, tak pak to, že se React komponenta píše jako funkce přidá opticky 40% řádků, ale reálně je to naprosto marginální. Použitelnost knihovny/frameworku se opravdu projeví až na nějakém větším projektu. Malý projekt se vždycky nějak naprasí.

   Na Svelte jsem se koukal a nijak mě neuchvátil. Spíš naopak, přijde mi to jako taková splácanina. Třeba speciální tagy na if/then/else / cykly. Tenhle přístup se neosvědčil už u JSP. Jenže mezitím vyrostla nová generace, která to už nepamatuje a tak si potřebuje nabít nos znovu :-)

   No a když jsem se kouknul na vygenerovaný JS, tak to byl teda děs běs. V tom bych nechtěl něco ladit. Na Reactu je geniální to, že komponenty jsou prostě JS/TS kód, maximálně s JSX kompilací. Navíc, u trochu větší aplikace přesáhne tenhle vygenerovaný bolerplate podle mě velikost knihovny/knihoven Reactu, takže balíček aplikace bude větší.

   Což mě vede k pár otázkám ohledně Svelte:

   • Funguje s ním napovídání v IDE (možné atributy u custom komponent)?
   • Funguje tam typová kontrola (když komponenta chce property nějakého typu, tak tam nejde dát jiný typ, samozřejmě předpokládám TS)?
   • Pro Redux jsou výborné Redux DevTools, kde vidím obsah store, akce, mohu si tím procházet v čase zpět a zase dopředu, na ladění naprosto geniální (to je nevýhoda lokálních stavů, které jsou sice jednodušší na použití, ale hůře se ladí). Existuje podobný debugger pro Svelte?
   • Pro React existují React Developer Tools, kde mohu vidět strom komponent, jejich properties atp. Existuje něco podobného pro Svelte?
   • Musím kvůli každé komponentě zakládat nový soubor (v Reactu ne, ve Svelte, zdá se, ano)?

   A na konec jedna složitější otázka. Za naprosto geniální vlastnost hooků považuji to, že je možné s nimi obalit nějakou business logiku, která mi vystaví nějaké proměnné a funkce na manipulaci s nimi. Tuhle logiku pak mohu jednoduše napojovat do různých komponent. O něco podobného jsem se snažil v různých jiných frameworcích, ale až v Reactu je to opravdu jednoduché a elegantní:

   const useCounter = (initial?: number = 0) => {
     const [count, setCount] = useState(initial)
   
     const increment = () => setCount(Math.min(count+1, 10))
     const decrement = () => setCount(Math.min(count-1, 0))
     return [ count, increment, decrement ]
   }
   
   () => {
     const [ count, increment, decrement ] = useCounter()
   
     return (<>
       Count: {count}
       <button onClick={decrement}>-</button>
       <button onClick={increment}>+</button>
     </>)
   }
   

   Tady funkce/hook useCounter obaluje logiku čítače od jedné do desíti. Tohle je samozřejmě jednoduchý příklad, v reálu by ta logika byla složitější. Použití v komponentách je pak triviální jeden řádek – volání funkce. Žádný kód okolo. Lze něco podobně elegantního udělat ve Svelte?

   Abych to shrnul: Za svůj docela dlouhý programátorský život jsem dělal v mnoha frameworcích. A React je z nich jednoznačně nejjednodušší a nejelegantnější. To platí i pro jeho kamaráda Redux, spolu tvoří opravdu silné kombo. Asi jediná věc, která občas dělá problémy je právě „stavebnicovost“ toho systému. Je spousta možností, jak k tvorbě aplikace přistoupit, takže je potřeba se v týmu sjednotit na jednom přístupu, aby aplikace nebyla „každý pes jiná ves“. A když různí členové mají různé pozadí a různé oblíbené přístupy, tak to ze začátku může trochu drhnout.

   Odpovědět
1. 

   Mlocik97 12.4.2020 ve 15:03

   Re:
   K tvojim argumentom sa radši nejdu vyjadrovať, lebo vidieť že zo Svelte/Sapper si videl nula celá nič riadkov kódu. Jediný argument, s ktorým u teba môžem súhlasiť je podpora typovej kontroly (TS), ale i na tom sa pracuje. Všetko ostatné čo si napísal sú nezmysli. Aj ten boilerplate ešte si napísal viac riadkov a ešte to obhajovať jak je dobrý React s tým že s tým že mu pripisuješ vlastnosť úplne inej knižnice. Toľko nezmyslov čo si tu napísal ani nehovorím. React != Redux != GraphQL.

   Btw, iba si potvrdil minimálne môj argument (ktorý je rovnaký ako v odkaze na reddit):

   need to install 12 different packages to make it useful
   React is just Angular if you hacked 12 libraries together that aren’t meant to work together cohesively.

   Odpovědět
1. 

   L. 12.4.2020 ve 17:10

   Re:
   Ale to nebyly argumenty, to byly otázky :-) Nicméně tedy beru jako odpověď, že Svelte nemá pořádnou typovou kontrolu, má mizernou (až žádnou?) podporu v IDE, ladění generovaného kódu je obtížné a prakticky neexistují specializované vývojářské nástroje.

   Aj ten boilerplate ešte si napísal viac riadkov

   Ty jsi tvrdil, že sčítačka v Reactu bude mít 20 řádků. Moje má 9. Co jsem se posledně koukal, tak 9 je méně, než 20 ;-)

   Nikde jsem netvrdil, že Redux / GraphQL (client) je React. Jsou to knihovny / součásti ekosystému, které se dají s Reactem použít, pokud je to pro daný případ potřeba. Zajímalo by mne, kde se bere ten nesmyslný přístup, že jedna knihovna musí nutně řešit všechny problémy. V programování jde o výsledek. Kolik „import“ mám ve zdrojáku je prakticky jedno.

   Jinak, rozumně vyjadřovat se dá i k naprosto mimózním argumentům. Ukážu to na tom tvém (zprostředkovaném) „o dvanácti knihovnách“:

   need to install 12 different packages to make it useful
   React is just Angular if you hacked 12 libraries together that aren’t meant to work together cohesively.

   • Nevím, jak dotyčný došel zrovna k číslu 12, nikde neuvádí jejich seznam
   • Ze stejného důvodu lze těžko zjistit, kde přišel na to, že nejsou určené pro spolupráci s Reactem. Protože knihovny co používám já jako Redux, GraphQL client, Material UI, Redux Forms, Next.js, … pro spolupráci s Reactem určené přímo jsou a žádné hackování není potřeba (*)
   • Ani s těmi knihovnami není React Angular. React je založený na funkcionálních/třídních komponentách, mělkém porovnávání parametrů a virtuálním DOMu. Angular je založený na custom elementech. Úplně jiná technologie a styl psaní.
   • No a poslední a nejdůležitější argument: Až najdu zákazníka, který bude řešit, kolik knihoven v aplikaci importuji, tak se tím začnu zabývat. Zatím jsem takového nepotkal. Takže ten argument je naprosto mimo už jen kvůli tomuhle.

   *) Pokud chceš vidět něco, co je opravdu „hacked together“, podívej se na JSF. Takový bastl jsem ještě neviděl. Děs běs.

   Odpovědět