Standup konec 2. iterace + prototypy (18-3-2024)¶

Poznámky na začátek¶

• Příští týden - cvičení z ASWI
  • Sdílení zkušeností z ASWI procesu
  • Připravit nějakou prezentaci toho jak se nám v projektu vede

Úkoly Lukᚶ

• Zadavatel ohledně založení Chrome Dev účtu byl kontaktován, více probereme na demo schůzce
• Figma - připraveny určité designové komponenty (úprava na 1 místě = úprava všude)
  • Design obsahuje tlačítko pro nahrávání, pozastavení a ukončení
  • Události obsahují typ, popis, id a další funkční tlačítka
  • Relativní čas od začátku nahrávání pro události
  • Přidání cílového stavu - výběr vlastností, které uživatel chce sledovat - nastala shoda při návrhu i s Honzou
  • Odkaz z Wiki nás navede na Figmu -> založit univerzitní účet, Lukáš nás následně přidá - můžeme komentovat a upravovat
• Úprava filtrů na Redmine

Úkoly Adam¶

• Rizika přidána do Redmine, navázány úkoly potlačující rizika
• Plán nasazení - dle návodu, upravíme detailněji až budeme mít přístup do Dev účtu

Úkoly Honza¶

• Návrh architektury
  • Upraven dle schůzky se zadavatelem i návrhů z týmu
  • Content skript na základě listenerů komunikuje s Browser API
  • Background skript na základě zprávy a indikátoru nahrávání reaguje
• Struktura dat
  • Rozhraní - Action (vykonaná akce, typ, kdy to bylo nahráno)
  • Implementováno DocumentAction a WindowAction
  • Result - finální stav nahrávání odkazující na element (atributy, které se mají zkontrolovat - finální stav)
    • Změna na mapu Stringů

Prototypy¶

• Testování úložišť
  • Využití synchronized - i po vypnutí jsou data stále uložena
  • Funguje i na dalších počítačích, kde je člověk přihlášen
  • Nebyl dostatek dat pro otestování rychlosti úložiště - bylo by fajn vyzkoušet pro uložení více eventů (např. Scroll)

• JavaScript prototyp
  • Ukázána funkčnost prototypu
  • Problémy s background skriptem -> doporučení pro jiné technologie
  • Orientace je poměrně složitá v souborech
  • Výhodou je méně souborů, které jsou ale nepřehledné

• Testování panelu
  • Použit chrome.sidePanel pro okno vedle
  • V Mozille něco podobného (sidebar) - nebylo řešeno
  • Použití stejné jako při popupu

• React prototyp
  • Ukázána funkčnost prototypu a vysvětlen kód
  • Z Reactu se vybuildí JavaScript
  • Problematické zaznamenávání akcí do popupu - přes background skript pak nakonec šel jednoduše
  • Ve složce react/react -> npm install -> npm build
  • Při hodně eventech (10k) problém nejspíše na straně Reactu
  • Velikost buildu cca 542kB
  • Žádný zásadní problém, popup se dostane přímo do storage, UI je vždy aktuální
  • Není doladěn TypeScript - téměř by nic nezměnilo

• Angular prototyp
  • Oproti Reactu více konfiguračních souborů - kvůli tomu, že jde o celý framework (většina souborů není tolik potřeba)
    • packages, angluar.json, manifest, index.html
  • Každá komponenta má své MVC - v template se můžou volat přímo funkce třídy
  • Striktně oddělené HTML a TypeScript
  • Direktivy v HTML (např. vykreslení tlačítka na základě podmínky)
  • Každá komponenta má lifecycle - rozhraní volá určité metody při vykreslení/překreslení
  • Při npm install -> ng build --watch (při každé změně v souboru se samo přebuildí)
  • Soubory spec.ts jsou testy - před buildem se mohou pustit
  • Velikost buildu cca 175kB

Shrnutí¶

• React nebo Angular bude hlavně řešit vykreslení
• Angular možná ukecanější, potřeba naučit se direktivy
• React možná přímočařejší - spíš jiný způsob
• React může rychleji bobtnat v komponentách - Angular generuje soubory komponent

Výsledkem je Angular pro jeho vynucení čistoty kódu