Ohlédnutí za konferencemi JSNation a React Summit
Před začátkem letních prázdnin jsem navštívila Amsterdam, abych načerpala nové znalosti z oboru a poznala Benátky severu, jak se tomuto městu také říká.
12. července 2024|7 minut čtení
Jako v předešlých letech, i letos se v Amsterdamu konaly hned dvě hybridní konference na jednom místě pod záštitou GitNation. Dva dny offline a dva dny online. Využila jsem jedinečné příležitosti a osobně jsem navštívila konference JSNation a React Summit. Přes tisíc účastníků, desítky přednášek a skvělá atmosféra. Tímto článkem bych vám chtěla alespoň trochu zprostředkovat své zážitky.
Centrum města Amsterdam je protkané kanály, a proto si zde můžete užít romantiku při plavbě na lodi. Hlavní město Nizozemí je však hlavně rájem cyklistů. Většině z nich však chybí slušné vychování a chodci se tak před nimi musí mít na pozoru. Druhým nepostradatelným způsobem dopravy je zde trajekt, díky kterému se můžete přeplavit přes vodní plochu Ij při cestě z centra do severní části města.
Trajektem jsem oba dva dny cestovala do místa konference Kromhouthal, kde byla připravená stage s hlavním programem. V samostatné místnosti se nacházela vedlejší stage, do které však bylo většinou těžké se dostat kvůli velkému zájmu posluchačů. Organizátoři měli všechno perfektně připravené až na jednu věc. Kde jinde než na IT konferenci narazíte na dlouhou frontu na pánské záchody?
A teď už k samotným přednáškám…
10 Years of Independent OSS:
A Retrospective
První přednáška na konferenci JSNation nám přiblížila život a práci vývojáře open source projektů. Evan You, autor JS frameworku Vue.js, se podělil o své zkušenosti, pozitiva i negativa. Jak nelehké může být dostat svůj projekt do povědomí ostatních vývojářů, otevřít svůj kód pro ostatní přispěvatele, sehnat sponzory a při tom všem nevyhořet. Na diagramech commitů z Githubu ukázal, jak se jejich množství měnilo v závislosti na jeho aktuální životní situaci (např. žádné commity po narození dcery) či před velkými releasy. Issues z Githubu mohou být skvělým sběrným místem pro nápady a připomínky, ale vývojář je nesmí chtít vyřešit všechny nebo musí dovolit ostatním, aby mu pomohli projekt vylepšit, protože open source je hlavně o komunitě.
From Friction to Flow:
Debugging With Chrome DevTools
Jecelyn Yeen, která se podílí na vývoji Chrome Dev Tools, představila funkce, které jsou v Dev Tools třeba již léta, ale jsou tak dobře schované, že je nenajdete. Jejími slovy: „You don’t know what you don’t know“. Ukázala, kde najít možnost emulace focusované stránky, abyste mohli inspectnout element, aniž by se vám při kliku do Dev Tools zavřel. Další skvělou věcí je možnost přepisování odpovědí či hlaviček ze serveru. Některé funkce byly uživateli využívané velice málo a jejich užití se zmnohonásobilo po tom, co je vývojáři Dev Tools přesunuli na viditelnější místo. V některé z příštích verzí Chrome se můžeme těšit na AI pomocníka, který nám u chyb v konzoli pomůže pochopit jejich význam a dokonce navrhne možnosti jejich řešení.
Install Nothing:
App UIs With Native Browser APIs
Modály, menu či carousely, to jsou prvky na stránce, které jsme ještě donedávna museli řešit hromadou JavaScriptu nebo dokonce s pomocí pluginů. Jak nám však Scott Tolinski připomněl, vývoj prohlížečů jde dopředu, a proto již pro implementaci těchto prvků můžete použít native browser API. Stejně jako pro mě, možná i pro vás je doposud neznámý pojem WAAPI (Web Animation API). Dle přednášky s ním však lze tvořit super věci. A pokud jste ještě nevyzkoušeli na přechody mezi stránkami View Transitions, tak je určitě zkuste, je to game changer. Stejně jako animování "display: none;" pomocí klíčového slova "allow-discrete" v CSS.
Dive Into Advanced TypeScript
Luca Del Puppo během své přednášky rychle zjistil, že kódování naživo před publikem někdy nevyjde tak, jak si člověk představoval. I tak nám ale na ukázkách kódu zvládl představit složitější koncepty v TypeScriptu. Za dvacet minut svého výkladu stihl názorně předvést možnosti type guards, assertion funkcí či branded types. Na závěr zmínil i využití knihovny Zod pro kontrolu typů v runtime.
The Suspense Quest:
Inside React's Magic
Pokud se rádi díváte pod pokličku toho, jak funguje React, doporučuji zhlédnout přednášku Charlotte Isambert. Ta srozumitelnou formou vysvětluje, jak funguje Suspense, který využijete pro zobrazení fallback obsahu při načítání child komponent. Jak vlastně Suspense komponenta ví o requestech, které se dějí v jejích child komponentách? Co znamená “work in progress target” či “offscreen fiber”? To vše se můžete dozvědět z této skvělé přednášky.
Invisible Hand of React Performance
Ivan Akulov představil tři koncepty, které mají v Reactu vliv na performance. V Reactu 17 se objevil hook "useEffect", který nahradil class metody "componentDidMount" a "componentDidUpdate". Není to však náhrada 1:1, a proto je dobré znát rozdíly jejich vyhodnocování či vyvolání forced layoutu. Další zmínkou byl tzv. "batching", což znamená, že máme-li v kódu několikrát za sebou "setState", tato volání se shluknou do jednoho a nedojde pak k několika překreslením. Posledním hlavním bodem přednášky byl Suspense, kde Ivan vysvětlil mj. to, co se stane, pokud během hydratace stránky uživatel provede nějakou akci.
Zajímají tě novinky ze světa frontendu?
Přihlas se k našemu newsletteru nebo nás sleduj
na sociálních sítích.
Přednášky o AI
Jedním ze společných předmětů mnoha přednášek byla umělá inteligence. Ve své přednášce AI First: Applications of the Future (JSNation) Evan Seaward obhajuje důvody, proč je podle něj lepší začít vyvíjet aplikaci rovnou s ohledem na AI, na rozdíl od situace, kdy je AI dodána do projektu až v jeho průběhu.
Během svého povídání na téma Web Apps of the Future With Web AI (JSNation) představil Jason Mayes svoji vizi budoucnosti AI ve webovém vývoji. Modely strojového učení se podle něj budou nacházet přímo na straně klienta, což přinese výhody jako bezpečnost či možnost offline řešení.
Oddechovější přednáškou byla ta s názvem Come On Barbie, Let’s Go Party: Using AI for Music Mixing (JSNation). Ziv Levy je nejen vývojář, ale i vášnivý DJ, a proto se s námi podělil o své zkušenosti využití AI, a to konkrétně pro mixování hudby a extrahování zpěvu a jiných zvuků z hudebních skladeb.
Alexandra Spalato se jako řečník zúčastnila obou konferencí, a to konkrétně s přednáškami AI in Front-End Dev? Your Creative Partner or Job Snatcher? (JSNation) a AI for React Developers: Opportunities, Learning, and Innovation (React Summit). Obě se nesly víceméně ve stejném duchu, kdy na začátku nadnesla obavy, zda nevezme AI práci vývojářům. Nakonec však došla k závěru, že lidský faktor má své nezastupitelné místo a pokud si nenecháme ujet vlak, nemáme se čeho obávat.
Etickou otázku využití AI přinesla ve své přednášce Ethical AI for the Rest of Us (React Summit) Kathryn Grayson Nanz. Je nadšená z toho, že může využívat tuto top technologii, zároveň si je vědoma toho, že AI může být dobrý sluha, ale i zlý pán. Pokud vývojáři použijí ve své aplikaci generativní AI třetí strany, nemohou si být jisti jejími výstupy. Vlastníka webu pak mohou dostat výplody umělé inteligence do velikých problémů.
Přednášky o React Server Components
Toto téma se objevilo hned ve třech přednáškách po sobě. Jako první nám Kent C. Dodds ve své přednášce And Now You Understand React Server Components (React Summit) na jednoduchém projektu ukázal, jak začlenit RSC do kódu.
Následovala přednáška s názvem RSCs In Production: 1 Year Later (React Summit), v níž Theo Browne předal posluchačům své zkušenosti z posledního roku, kdy na RSC společně s App Router postavil svůj projekt UploadThing.
Do třetice bylo toto téma zmíněno v přednášce Solving i18n for React Server Components (React Summit) od Lorise Sigrista, který nám představil svůj přístup k řešení překladů vícejazyčných webů při využití server komponent.
Přednášky o přístupnosti
O tom, jak důležitou roli na webu hraje přístupnost, pojednávala např. přednáška Case Study: Building Accessible Reusable React Components at GitHub (React Summit), v níž Siddharth Kshetrapal připomněl, že používat sémantické HTML elementy je důležitý základ, ale bez přídavku JavaScriptu a aria atributů přístupný web nevykouzlíte.
Pokud jste stejně jako já dosud neslyšeli pojem accessibility tree, podívejte se na přednášku Mathilde Buenerd s názvem What Is the Accessibility Tree, Really? (JSNation). Vysvětluje zde, že každý prohlížeč si sestavuje vlastní verzi tohoto stromu, nebo který HTML atribut má nejvyšší prioritu při vyhodnocování čtečkami.
Už jste někdy viděli nebo dokonce sami použili odkaz v tlačítku? I když se vás design snaží přesvědčit o tom, že to jinak implementovat nelze, vždy se najde nějaké lepší řešení. Cat Johnson ve své krátké přednášce Nested Interactive Elements: A Nightmare in Accessibility (React Summit) zmiňuje dopad na přístupnost a přístupy k řešení těchto situací, např. s využitím CSS pro překrývání elementů.
O tom, co je to přístupnost, a že nevidomí lidé se čtečkami nejsou jediná znevýhodněná skupina uživatelů webu, povídá Chandra Carney ve své přednášce Accessibility in 2024 (React Summit). Také připomněla, že v rámci Evropského aktu o přístupnosti (EAA) bude muset hodně webů vylepšit svoji přístupnost do června příštího roku.
Jestliže vás téma přístupnosti zaujalo, nebo si o něm potřebujete něco nastudovat, určitě si přečtěte příspěvky mé kolegyně Kristýny Markové, specialistky na webovou přístupnost.
Závěrem
Program byl opravdu nabitý a každý si našel své. Jsem moc ráda za tuto zkušenost, protože zažít takovou konferenci naživo stálo za to. Už se těším na další.
Pokud se chcete dozvědět více o tom, co aktuálně řeší JS a React komunita, můžete se podívat na záznamy přednášek z konferencí:
JSNation
React Summit