Příspěvky

196

Vývoj / Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?

« kdy: 12. 06. 2021, 10:36:37 »

Kdyz udelam ve Vue toto:

Kód: [Vybrat]

      <template v-for="idx in 10">
          <div :key="idx">{{$root.$data.foodEntries[idx].amount}} {{called()}} </div>
      </template>

A potom:

Kód: [Vybrat]

  mounted() {
    setInterval( () => {
      console.log(this.$root.$data.foodEntries[1].amount++);
    },1000);
  }

Tak vysup z logu:

Kód: [Vybrat]

Menu.vue?ae1e:172 386
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:169 387
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:172 389
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:86 Called!
Menu.vue?ae1e:169 390

Tzn. modifikace fieldu zpusobi prinejmensim zavolani vsech metod ve foreach.

Zatim se mi jako jedine vychodisko jevi resit to pres vnitrni stav komponenty.

197

Vývoj / Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?

« kdy: 12. 06. 2021, 00:09:18 »

Vsiml jsem si ve vue, ze kdyz u jednoho zaznamu zmenim hodnotu nejakeho fieldu, tak ze dojde k prekresleni vsech ostatnich 4999 zaznamu v tabulce.

na to jste prisel jak? Jak Vue tak React delaji DOM diff komponenty a prekresluji jen zmenene nody.

Testoval jsem to tak, ze jsem si udelal metodu called(), dal ji do kazdeho radku, a ta vypise do konzole zaznam. Nasledne kdyz modifikuju "foodEntry.amount", tak dojde k zavolani metody called()  na vsech vykreslenych radcich. Takze kdyby jich bylo 1000, tak called() se zavola 1000x.

Kód: [Vybrat]

    <!--   Header   -->

    <table class="table-sm">
      <thead>
      <tr>
        <th class="table-date">Datum</th>
        <th class="table-food">Potravina</th>
        <th class="table-amount">Mnozstvi</th>
        <th class="table-calories">Energie</th>
        <th class="table-buttons"></th>
        <th class="table-buttons"></th>
      </tr>
      </thead>
      <tbody>

      <template v-for="(foodEntries, date) in this.$root.$data.foodEntriesByDate">
        <tr :key="date">
          <td>
            {{ date }} {{called()}}
          </td>
        </tr>

        <template v-if="date > '2021-06-10'" >
          <tr v-for="foodEntry in foodEntries" :key="foodEntry.id">
            <td>{{called()}}</td>
            <td>{{ foodEntry.food.name }}</td>
            <td><input class="form-control form-control-sm" type="number" step="20" v-model="foodEntry.amount"/></td>
            <td>{{ foodEntry.getTotalCalories() }}</td>
            <td>
            </td>
          </tr>
        </template>

      </template>

198

Vývoj / Jak v Reactu ci Vue modifikovat jen jeden řádek vykreslené tabulky?

« kdy: 11. 06. 2021, 23:35:18 »

Mam tady takovy principielni dotaz ohledne typu probemu, na ktery jsem narazil.

Rekneme ze mam nejaky list zaznamu v globalnim state, je jich 5000, a jsou vykreslene do tabulky. A nechci z nejakeho duvodu pouzit pagination - predstavte si ze je to neco na zpusob tabulky v excelu.

Vsiml jsem si ve vue, ze kdyz u jednoho zaznamu zmenim hodnotu nejakeho fieldu, tak ze dojde k prekresleni vsech ostatnich 4999 zaznamu v tabulce. Coz je vlastne docela logicke, a je to kupodivu docela rychle - nicmene lepsi by bylo to udelat jinak.

Chapu to spravne, ze jediny zpusob reseni je vytvorit pro radky v tabulce separatni komponentu, pres props ji predat hodnoty, uvnitr v komponente si z tech props nastavit vnitrni state, a nasledne render radku udelat z toho vnitrniho state, takze kdyz dojde ke zmene nejakeho sloupce, tak se zmena nepropise do globalniho stavu? A pridat k tomu radku tlacitko Ulozit, na ktere az kdyz se klikne tak se to propise ze state do globalniho stavu?

Ma to jeste nejake jine reseni, jak aktualizovat globalni stav ze ktereho se dela foreach, ale zabranit opetovnemu provedeni foreach?

199

Vývoj / Re:Domain Driven Development a React (a dalsi JS framewroky)

« kdy: 10. 06. 2021, 18:42:49 »

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

200

Vývoj / Re:Domain Driven Development a React (a dalsi JS framewroky)

« kdy: 10. 06. 2021, 18:36:43 »

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

201

Vývoj / Domain Driven Development a React (a dalsi JS framewroky)

« kdy: 10. 06. 2021, 10:33:36 »

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?

202

Vývoj / Re:Rdeact vs. React Native - co dneska použít?

« kdy: 09. 06. 2021, 22:32:08 »

Heledtel ja ted pisu react web, a fakt se u toho dost potim, nejvic mi zustava rozum stat jak musim updatovat vsechno pres setState,

No mě taky zůstává rozum stát, proč používáš staré a (relativně) nešikovné class komponenty a ne moderní funkcionální komponenty s hooky. Oni ty novější verze knihoven tu fakt nejsou jen proto, aby frikulíni mělo dobrý pocit, že mají něco "moderního".

navic to nekdy nedava smysl, proc musim napr. delt komplet kopii objektu kdyz na nem chci aktualizovat jen jeden field.

Pokud tohle nechápeš, tak máš základní mezery ve znalostech o Reactu a jeho principech. Není pak divu, že se ti v něm dělá blbě, když netušíš, jak vlastně funguje. Immutabilita objektů je princip, který umožňuje jednoduše zjistit, zda dostáváš starý nebo změněný objekt pouhým porovnáním referencí, bez nutnosti dělat deep compare. Což celou operaci dost zrychluje.

Hele a jakto ze mi funguje v reactu nasetovat neaco na hulvata this.state.foo.amount = 100; a pak dat this.setState({}); a ono se to stejne pak updatuje?

Me jde o to, ze jestli v tom jsou jenom perfromance issues, tak bych se na to vykvakl alespon v prubehu prototypovani.

203

Vývoj / Re:Rdeact vs. React Native - co dneska použít?

« kdy: 08. 06. 2021, 23:23:25 »

napíš do konzoly:

Kód: [Vybrat]

yarn upgrade-interactive

Diky za tip, to jsek neznal. Ale proc mi to dalo react jenom na verzi 16.8, kdyz uz je novejsi?


Heledtel ja ted pisu react web, a fakt se u toho dost potim, nejvic mi zustava rozum stat jak musim updatovat vsechno pres setState, navic to nekdy nedava smysl, proc musim napr. delt komplet kopii objektu kdyz na nem chci aktualizovat jen jeden field.

Je to brutalne casove narocne, a znovu se mi potvrzuje spravnost toho, ze jsem sel do Vue. No a ted uz zase se pokousim o react... ach jo.

204

Hardware / Re:Android vs iPhone

« kdy: 07. 06. 2021, 19:58:14 »

Ad ty aplikace od Samsungu, a nemaji nahodou problemy s kvalitou? Ja nejak pochybuju, ze kvalitativne budou na tom tak jako Apple appky.

Aplikace od Applu mají taky dost bugů.

Jo maji, stejna zkusenost, ale stejne si myslim, ze na to jsou lip. Samozrejme nejlepsi je si sehnat extra appku na vschno, od firmy co se na to specializuje.

205

Vývoj / Rdeact vs. React Native - co dneska použít?

« kdy: 07. 06. 2021, 17:19:49 »

Delam neco jako kaloricketabulky.cz, a momentalne v Reactu:

Kód: [Vybrat]

  "dependencies": {
    "react": "^16.5.0",
    "react-dom": "^16.5.0",
    "react-scripts-ts": "2.17.0",
    "react-search-field": "^1.2.1"
  },
  "devDependencies": {
    "@types/jest": "^23.3.2",
    "@types/node": "^10.9.4",
    "@types/react": "^16.4.14",
    "@types/react-dom": "^16.0.7",
    "typescript": "^3.0.3"
  }

Tak co, mam to dostatecne moderni? Nebo jsem zaspal dobu a uz je to 1-2 roky stare vsechno?

206

Hardware / Re:Android vs iPhone

« kdy: 07. 06. 2021, 17:09:52 »

Ad ty aplikace od Samsungu, a nemaji nahodou problemy s kvalitou? Ja nejak pochybuju, ze kvalitativne budou na tom tak jako Apple appky.

Samsung email klient neodstranuje emaily, kdyz je promazu v PC. Telefon i PC je na stejnym IMAP uctu.
(nevim co je to za verzi, je to to, co prislo predinstalovany na Note4)

Tak to by byl alespon pro me duvod tu aplikaci odinstalovat... ze nejde odinstalovat?

207

Hardware / Re:Android vs iPhone

« kdy: 07. 06. 2021, 13:25:50 »

Ad ty aplikace od Samsungu, a nemaji nahodou problemy s kvalitou? Ja nejak pochybuju, ze kvalitativne budou na tom tak jako Apple appky.

208

Hardware / Re:Android vs iPhone

« kdy: 05. 06. 2021, 17:49:09 »

Jj, na osx uz je normal file system a je dobre uelany. Pred par roky neslo napr. ani downloadovat soubory z Uloz.to, ted uz to jde normalne pres Safari, a soubor uz se stahuje normalne do adresarove struktury do slozky downloads. A je topropojene s iCloudem - momentalne se mi to asi libi vic ne to ma Android.Tzn. jeste pred par roky jsem si rval u iPadu vlasy, dneska uz to funguje, Apple razi cestu ze jako nepotrebujes notebook kdyz mas iPad - coz je trochu prehnane, ale pointa je, ze uz se to da pouzivat.

209

Hardware / Android vs iPhone

« kdy: 05. 06. 2021, 14:02:41 »

Mam momentalne uz 3 roky Maca a iPhone, a jsem i vlastnikem Andoridu. A musim rict, ze nekdy me ta Apple kultura docela stve, a vice se mi libi Android, da se s tim delat vice veci. Ale pak, kdyz se nad tim tak zamyslim, tak kdyz koupim telefon a vyprcha pcatecni nadseni, tak s nim delam toto:

1. 90% casu lezi na stole nebo v kapse

Ve zbylych 10% casu:

2. Pisu a ctu smsky, a kopiruju z nich tokeny do Maca
3. Telefonuju nekomu
4. Fotim
5. Zapisuju si poznamku do Notes a nebo nastavuju Reminder

Pak dlouho nic, a pak:

6. Ctu emaily (ale nepisu)
7. Kontrokuju kalendar
8. Zapnu Mapu
9. Jdu nouzove na Internet


No a tak si rikam, ze kdyz z takoveho praktickeho hlediska porovnam Android a iPhone tak vlaste ten Android ma docela problem. Protoze ty vyse uvedene ukony umi iPhone lip, je to automaticky zintegrovane s Macam (napr. Ctrl+C funguje napric zarizenimi), muzu volat a psat SMS z Maca, a taky ty ukonu muzu ovladat hlasem pres Siri, napr. kdyz jedu na kole tak muzu takhle zapsat Reminder nebo poznamku do Notes. Jo a taky, je to dobre zabezpecene, a mam updaty k mobilu na 5 a vice let.

Mohl by mi proto nekdo rict, co lepsiho mi prinese Android?

210

Windows a jiné systémy / Re:Mizející SMS z Androidu

« kdy: 05. 06. 2021, 10:33:24 »

souhlasim s pruzkumnbojem, Android nema co komu by default mazat data. To jsou takove ty veci ktere jako uzivatel iPhone nemusim resit, protoze vetsinou funguji dobre. SMSky mam rovnez automaticky aniz bych to nejak nastavoval zalohovane v iCloud. A taky si je muzu prohlizet na Macbooku a na tabletu.