Domain Driven Development a React (a dalsi JS framewroky)

[registrovany123]

Mam takovy dotaz, jak neco udelat na frontendu v Reactu.

Mam nejakou domenu, treba pro aplikaci Kaloricke tabulky:

Kód: [Vybrat]

- Uzivatel (nick)
- Potravina (nazev, kalorie)
- ZaznamPotraviny (datum, uzivatel, potravina, mnozstvi)

Instance trid tehle domeny mam jakoby v nejake globalni promenne:

Kód: [Vybrat]

const myDomain = {
  potraviny: [],
  zaznamyPotravin: [],
  uzivatel: new Uzivatel("Admin");
}


A tyhle domenove objekty jsou pomitnute do tabulky na webove strance skrze instanci komponenty TabulkaZaznamu:

Kód: [Vybrat]

datum, potravina, mnozstvi, kalorie
1.1.2021, ryze, 500g, 2000kcal
2.1.2021, maslo, 10g, 90kcal


Nasledne, co ocekavam ze muzu udelat:

Kód: [Vybrat]

myDomain.zaznamyPotravin
   .filter(zaznam => zaznam.datum === '1.2.2021' && zaznam.potravina.nazev === 'ryze')
   .forEach(zaznam => zaznam.mnozstvi = 50);


A dojde k automatickemu promitnuti teto zmeny do vykreslene instance komponenty TabulkaZaznamu:

Kód: [Vybrat]

[datum] [potravina] [mnozstvi] [suma kalorie]
[1.1.2021][ryze][50g][200kcal]
[2.1.2021][maslo][10g][90kcal]

Co vsak ale musim udelat (resp. jeste pred 3 lety (v javascriptu pravek?) jsem musel udelat) v te dobe v nejpopularnejsim frameworku na svete, v Reactu, je tenhle strasny a sileny hoven:

Kód: [Vybrat]

this.setState({
  zaznamyPotravin: this.state.zaznamPotravin
    .map(zaznam => zaznam.datum === '1.2.2021' && zaznam.nazev === 'ryze'
            ? Object.assign(new ZaznamPotravin(), zaznam, {mnozstvi: 50})
            : zaznam)
});

Tzn. musel bych kompletne vytvorit znovu cely objekt, aby to bylo jak to React vyzaduje.


Oproti tomu ve Vue.js to muzu klidne udelat tak jak jsem puvodne chtel:

Kód: [Vybrat]

this.myDomain.zaznamyPotravin
   .filter(zaznam => zaznam.datum === '1.2.2021' && zaznam.potravina.nazev === 'ryze')
   .forEach(zaznam => zaznam.mnozstvi = 50);

Vue.js totiz udela to, ze si vsechny, i vnorene atributy stavu, projde, a zaobali je do Setteru. Takze kdyz volam:

Kód: [Vybrat]

this.myDomain.zaznamyPotravin[0].mnozstvi = 50

Tak Vue vlastne zavola svuj setter na atributu "mnozstvi" a tim vi, co se mu kde zmenilo.


Muze mi nekdo vysvetlit, jak to v Reactu muze takhle fungovat, a i presto je to nejpopularnejsi framework?

[Reklama]

[Filip Jirsák]

React je nízkoúrovňovější, každou změnu stavu mu musíte explicitně oznámit. Vue přidává vlastní magii, která se snaží změny sledovat automaticky. U běžných případů to funguje, ale narazíte na okrajové případy, kdy to nefunguje (třeba některé případy práce s poli). V Reactu jsou tím pádem stavy neměnitelné, ve Vue se mění. Někomu vyhovuje to, někomu ono.

Mně víc vyhovuje přístup Reactu, protože dávám přednost tomu, když mám vše v ruce (i když toho musím napsat víc), než když je nějaká magie na pozadí, která něco dělá sama. Také mám raději neměnitelný stav, snižuje to komplexnost aplikace. Ale pokud vám vyhovuje Vue, používejte Vue.

[L..]

Slyšel jsem, že prý šroubovák a šrouby jsou lepší než hřebíky, které doteď používám. Tak jsem si teda šroubovák a nějaké ty šrouby koupil. Ale je to fakt naprd. Prý se na šrouby má používat ten placatý konec. Ale to mi nějak nešlo, protože ten mi přišel moc lehký. Tak jsem naopak uchopil šroubovák za něj a mlátil do šroubu tím, co snad měla být původně rukojeť.

To bylo o něco lepší, ale stejně po deseti minutách mlácení se mi povedlo ten šroub takhle zašroubovat jen o nějaké 2-3 milimetry. Můžete mi někdo vysvětlit, proč se šrouby a šroubováky tolik používají, když se s nima dělá tak blbě?

[BoneFlute]

Nasledne, co ocekavam ze muzu udelat:

Kód: [Vybrat]

myDomain.zaznamyPotravin
   .filter(zaznam => zaznam.datum === '1.2.2021' && zaznam.potravina.nazev === 'ryze')
   .forEach(zaznam => zaznam.mnozstvi = 50);

A dojde k automatickemu promitnuti teto zmeny do vykreslene instance komponenty TabulkaZaznamu:

Mě se to nelíbí. Jako ten zápis, že si vyfiltruju očekávané záznamy - potuď dobré. Ale jak jako, že se to někam promítne?! Já nechci aby se to tam promítlo jen tak, aniž bych mu cokoliv řekl! Ten kód mi přijde nebezpečně nečitelný.

Co vsak ale musim udelat (resp. jeste pred 3 lety (v javascriptu pravek?) jsem musel udelat) v te dobe v nejpopularnejsim frameworku na svete, v Reactu, je tenhle strasny a sileny hoven:
...
Tzn. musel bych kompletne vytvorit znovu cely objekt, aby to bylo jak to React vyzaduje.

Je to tak. V čem je problém? React ctí funkcionální paradigma. Má to své výhody i nevýhody. Určitě by se nějaká ta syntax dala vylepšit. Ale skutečnost, že vytvoří nový celý objekt je očekávané a požadované chování.

[registrovany123]

Co vsak ale musim udelat (resp. jeste pred 3 lety (v javascriptu pravek?) jsem musel udelat) v te dobe v nejpopularnejsim frameworku na svete, v Reactu, je tenhle strasny a sileny hoven:
...
Tzn. musel bych kompletne vytvorit znovu cely objekt, aby to bylo jak to React vyzaduje.

Je to tak. V čem je problém? React ctí funkcionální paradigma. Má to své výhody i nevýhody. Určitě by se nějaká ta syntax dala vylepšit. Ale skutečnost, že vytvoří nový celý objekt je očekávané a požadované chování.

Jak jako ze vytvori?  To TY MUSIS VYTVORIT cely novy chain objektu od korenoveho az po ten nejvice nested kteremu jsi modifikoval value.

A jak jako ze cti funkcionalni paradigma, co to s tim ma spolecneho? To ze nezaobali state, a neumi si automaticky nasledne zjistit co presne se mu zmenilo, nema nic co spolecneho s funkcionalnim paradigmatem, to je proste jen strohost a spartanskost te knihovny.

Btw tak jak se to dela ve vue, tak z pohledu vyvojare to tak bylo i u desktopovych UI. Stacilo naprimo zmenit nejake field a hotovo. To k cemu nutu react je uplne brutalni overkill. Porad nemuzu uverit svym ocim, nechapu proc tohle chteji vsichni pouzivat.

Jako s tim Reactem se realne nejak neda dela DDD, protoze bych pro modifikaci kazdeho jednoho fieldu snad musel mit udelany vyse uvedeny straslivy setState

[Reklama]

[Pixe]

Díky Fantasticky napsáno! Myslím že tímhle příspěvkem by se tohle i většina dalších témat tazatele z uplynulých týdnů dalo uzavřít. Jediné co mi chybí je aku šroubovák, nebo vrtačka. Třeba by ale stačil také rázový utahovák.

Slyšel jsem, že prý šroubovák a šrouby jsou lepší než hřebíky, které doteď používám. Tak jsem si teda šroubovák a nějaké ty šrouby koupil. Ale je to fakt naprd. Prý se na šrouby má používat ten placatý konec. Ale to mi nějak nešlo, protože ten mi přišel moc lehký. Tak jsem naopak uchopil šroubovák za něj a mlátil do šroubu tím, co snad měla být původně rukojeť.

To bylo o něco lepší, ale stejně po deseti minutách mlácení se mi povedlo ten šroub takhle zašroubovat jen o nějaké 2-3 milimetry. Můžete mi někdo vysvětlit, proč se šrouby a šroubováky tolik používají, když se s nima dělá tak blbě?

[registrovany123]

Co vsak ale musim udelat (resp. jeste pred 3 lety (v javascriptu pravek?) jsem musel udelat) v te dobe v nejpopularnejsim frameworku na svete, v Reactu, je tenhle strasny a sileny hoven:
...
Tzn. musel bych kompletne vytvorit znovu cely objekt, aby to bylo jak to React vyzaduje.

Je to tak. V čem je problém? React ctí funkcionální paradigma. Má to své výhody i nevýhody. Určitě by se nějaká ta syntax dala vylepšit. Ale skutečnost, že vytvoří nový celý objekt je očekávané a požadované chování.

Jak jako ze vytvori?  To TY MUSIS VYTVORIT cely novy chain objektu od korenoveho az po ten nejvice nested kteremu jsi modifikoval value.

A jak jako ze cti funkcionalni paradigma, co to s tim ma spolecneho? To ze nezaobali state, a neumi si automaticky nasledne zjistit co presne se mu zmenilo, nema nic co spolecneho s funkcionalnim paradigmatem, to je proste jen strohost a spartanskost te knihovny.

Btw tak jak se to dela ve vue, tak z pohledu vyvojare to tak bylo i u desktopovych UI. Stacilo naprimo zmenit nejake field a hotovo. To k cemu nutu react je uplne brutalni overkill. Porad nemuzu uverit svym ocim, nechapu proc tohle chteji vsichni pouzivat.

Jako s tim Reactem se realne nejak neda dela DDD, protoze bych pro modifikaci kazdeho jednoho fieldu v domene snad musel mit udelany vyse uvedeny straslivy setState

[BoneFlute]

Co vsak ale musim udelat (resp. jeste pred 3 lety (v javascriptu pravek?) jsem musel udelat) v te dobe v nejpopularnejsim frameworku na svete, v Reactu, je tenhle strasny a sileny hoven:
...
Tzn. musel bych kompletne vytvorit znovu cely objekt, aby to bylo jak to React vyzaduje.

Je to tak. V čem je problém? React ctí funkcionální paradigma. Má to své výhody i nevýhody. Určitě by se nějaká ta syntax dala vylepšit. Ale skutečnost, že vytvoří nový celý objekt je očekávané a požadované chování.

Jak jako ze vytvori?  To TY MUSIS VYTVORIT cely novy chain objektu od korenoveho az po ten nejvice nested kteremu jsi modifikoval value.

A jak jako ze cti funkcionalni paradigma, co to s tim ma spolecneho? To ze nezaobali state, a neumi si automaticky nasledne zjistit co presne se mu zmenilo, nema nic co spolecneho s funkcionalnim paradigmatem, to je proste jen strohost a spartanskost te knihovny.

Btw tak jak se to dela ve vue, tak z pohledu vyvojare to tak bylo i u desktopovych UI. Stacilo naprimo zmenit nejake field a hotovo. To k cemu nutu react je uplne brutalni overkill. Porad nemuzu uverit svym ocim, nechapu proc tohle chteji vsichni pouzivat.

Jako s tim Reactem se realne nejak neda dela DDD, protoze bych pro modifikaci kazdeho jednoho fieldu v domene snad musel mit udelany vyse uvedeny straslivy setState

Nerozumíme si.

React ctí funkcionální princip. To znamená, že když chceš modifikovat field, tak musíš vytvořit celej novej objekt. Tak to prostě je. Jestli si ho budeš tvořit ručně, nebo si na to vytvoříš nějaký nástroj, nebo začneš používat nějaký již existující - to už je jinej příběh.

V čem si dále nerozumíme, je to, že:

Stacilo naprimo zmenit nejake field a hotovo.

Tohle my nechceme dělat. A na tobě je zjisit proč to nechceme dělat, jaké k tomu máme důvody.

[Filip Jirsák]

Jak jako ze vytvori?  To TY MUSIS VYTVORIT cely novy chain objektu od korenoveho az po ten nejvice nested kteremu jsi modifikoval value.

Pokud máte v komponentě složitý řetězec objektů, asi máte moc složitou komponentu.

to je proste jen strohost a spartanskost te knihovny.

A vzhledem k oblíbenosti té knihovny je to asi oblíbený princip.

Btw tak jak se to dela ve vue, tak z pohledu vyvojare to tak bylo i u desktopovych UI. Stacilo naprimo zmenit nejake field a hotovo.

Nikoli, neměnil jste field. Mění se property – voláním funkce nebo metody.

Porad nemuzu uverit svym ocim, nechapu proc tohle chteji vsichni pouzivat.

Když to nechápate, dávalo by větší smysl snažit se to pochopit a ne to hejtovat.

Jako s tim Reactem se realne nejak neda dela DDD, protoze bych pro modifikaci kazdeho jednoho fieldu snad musel mit udelany vyse uvedeny straslivy setState

Co je na tom strašlivého?

[L..]

Díky Fantasticky napsáno! Myslím že tímhle příspěvkem by se tohle i většina dalších témat tazatele z uplynulých týdnů dalo uzavřít. Jediné co mi chybí je aku šroubovák, nebo vrtačka. Třeba by ale stačil také rázový utahovák.

Slyšel jsem, že prý šroubovák a šrouby jsou lepší než hřebíky, které doteď používám. Tak jsem si teda šroubovák a nějaké ty šrouby koupil. Ale je to fakt naprd. Prý se na šrouby má používat ten placatý konec. Ale to mi nějak nešlo, protože ten mi přišel moc lehký. Tak jsem naopak uchopil šroubovák za něj a mlátil do šroubu tím, co snad měla být původně rukojeť.

To bylo o něco lepší, ale stejně po deseti minutách mlácení se mi povedlo ten šroub takhle zašroubovat jen o nějaké 2-3 milimetry. Můžete mi někdo vysvětlit, proč se šrouby a šroubováky tolik používají, když se s nima dělá tak blbě?

Spíš bych připsal něco o tom, že se na to ptal na fóru, kde mu poradili, že se šroubovákem musí šroubovat, ale to on dělat nebude, protože přece do hřebíku se kladivem vždycky mlátilo.

[Kamil Podlešák]

Díky Fantasticky napsáno! Myslím že tímhle příspěvkem by se tohle i většina dalších témat tazatele z uplynulých týdnů dalo uzavřít. Jediné co mi chybí je aku šroubovák, nebo vrtačka. Třeba by ale stačil také rázový utahovák.

Slyšel jsem, že prý šroubovák a šrouby jsou lepší než hřebíky, které doteď používám. Tak jsem si teda šroubovák a nějaké ty šrouby koupil. Ale je to fakt naprd. Prý se na šrouby má používat ten placatý konec. Ale to mi nějak nešlo, protože ten mi přišel moc lehký. Tak jsem naopak uchopil šroubovák za něj a mlátil do šroubu tím, co snad měla být původně rukojeť.

To bylo o něco lepší, ale stejně po deseti minutách mlácení se mi povedlo ten šroub takhle zašroubovat jen o nějaké 2-3 milimetry. Můžete mi někdo vysvětlit, proč se šrouby a šroubováky tolik používají, když se s nima dělá tak blbě?

No, ještě bych dodal že existuje speciální bazmek zvaný "impact screwdriver"  (úderový šroubovák?), který tazatelův problém vyřeší.

A jako offtopic bych dodal historku, že tento nástroj na druhé světové války nakoupila US Army (zřejmě neměli valné mínění o brancích...), což způsobilo že mnoho evropanů ve Francii/Belgii/UK/etc užasle sledovalo jak americký tankista zatlouká šrouby kladivem. Což prý výrazně přispělo k poválečné "image" američanů. Ale nevím co je na tom pravdy, zní to jako typická Urban legend.

Každopádně, i předtím to byl a stále je platný koncept jak si dělat srandu z lidí odněkud, viz:
https://www.google.com/search?q=birmingham+screwdriver