Jak jsem se seznamoval s React Fiber
aneb historie jednoho neúspěchu
Je to pár týdnu zpátky, co jsem měl přednášku na téma React Fiber v rámci Blueberry MeetUpu. Fiber jsem si vybral úmyslně, protože na zmíňky o něm narážím poslední měsíce téměř neustále. A co je ještě důležitější, nedávno vydaná verze Reactu, 16.0.0, už Fiber obsahuje. Naivně jsem si říkal, že příprava přednášky mě dotlačí k tomu, abych se naučil, jak Fiber funguje, a byl tak připraven na jeho plné nasazení do produkce. Hned na úvod se však musím přiznat, že tento plán mi až tak úplně nevyšel. Pokud bych použil terminologii z článku “Why Learning to Code is So Damn Hard” od Erik Trautman, tak jsem se během svého pokusu velmi rychle vyškrábal na “Clif of Confusion” a z něj jsem se, ještě mnohem rychleji, skutálel do “Desert of Despair”.
Ale zpět k Fiber a proč si myslím, že je důležité se s ním seznámit detailněji. React Fiber je nový reconciler, který oproti předchozímu umožňuje členit práci do dílčích úkolů a může tak svoji práci přerušit a znovu se k ní vrátit. Pokud jste se se základním konceptem Fiber ještě nesetkali, doporučuji shlédnout přednášku od Lin Clark: A Cartoon Intro to Fiber. Je to revoluční změna, protože Stack Reconciler přerušení práce neumožňuje, a dokud svůj úkol nedokončí, blokuje vykonávání jakékoliv jiné činnosti prohlížeče. Už u Stack Reconcileru bylo dobré, znát základní princip jak funguje, aby jsme mu při vývoji aplikace neházeli klacky pod nohy. A myslím si, že pochopení funkčnosti Fiber má pro nás ještě mnohem větší význam, jelikož zavádí radikální změny ovlivňující výkon aplikace.
Selhání první: vše pochopím z kódu
Po opakovaném shlédnutí Lin přednášky jsem stále měl dojem, že úplně nechápu, proč a jak se věci dějí. Tak jsem si řekl, že když projdu zdrojové kódy pro Fiber, bude mi vše hned jasné. No více jsem se mýlit nemohl! Zdrojové kódy pro React jsou nádherné pro čtení, ale pochopit je bez dalších znalostí použitých datových struktur je obtížné. Po tomto zjištění mé další kroky vedly k článkům: A look inside React Fiber — how work will get done od Korneliusz Caputa a Didact Fiber: Incremental reconciliation Rodrigo Pombo. Oba články vřele doporučuji všem zájemcům o pochopení reconcilace. Já si na ně však nevyhradil dostatek času, takže mi k pochopení přispěly jen málo. Ale toto selhání hodlám co nejdříve napravit a alternativní kód od Didact Fiber si opravdu vyzkouším a nehnu se od něj dál, dokud si opravdu nebudu jistý tím, co dělám.
Selhání druhé: testovací aplikace
V zoufalství z toho, že termín přednášky se limitně blíží, jsem udělal největší chybu z celé přípravy. Řekl jsem si, že si napíšu dvě varianty jednoduché aplikace, která úmyslně bude systém co nejvíce zatěžovat. Ale když člověk neví, jak něco funguje, těžko asi napíše testovací aplikaci. Mojí chybou bylo to, že místo jednoho náročného update UI jsem test napsal stylem tisíce jednoduchých změn v krátkých časových intervalech. Paradoxně se aplikace s Fiber chovala tak, jak jsem očekával. Co jsem však netušil, že jde pouze o artefakt toho, jak Fiber se změnami pracuje. To, co jsem tedy připravil, byl pouze test takzvaného “vyhladovění”, na což upozorňuje Lin Clark v závěru své přednášky.
Závěr
Jakkoliv se může zdát, že veškerá má aktivita ohledně učení se principů Fiber byla zbytečná, jsem ve finále rád, že jsem se do toho pustil. Zjistil jsem, že pro opravdové pochopení budu muset investovat poměrně dost času a nebude stačit si jen pročíst články. I malé střípky nových informací, které jsem během tohoto pokusu získal, mi naznačují, že to, co přichází s React 16, bude obrovská změna v přístupu vývoje aplikací. Nejde jen o samotný Fiber, ale hlavně o to, že nová verze Reactu zpřístupňuje api nejenom pro vytváření vlastních rendererů, ale i reconcilerů. To může být ideální cesta pro ladění výkonu aplikací, ve kterých záleží na každé milisekundě. Já osobně se těším na další chvíle, které strávíme s Fiber pohromadě.
PS: Pokud se do Fiber chcete pustit sami, rozhodně začněte na stránce React Fiber Resources!
