Frontend Briefly - Novinky a postrehy zo sveta frontend vývoja #11

1. Next.js 13

Najväčší update Nextu od jeho vydania je konečnu tu 🎉 . Vo veľkom štýle ho predstavili na konferencii Next.js Conf 2022, ktorú určite odporúčam pozrieť. Tu je niekoľko noviniek:

• Priečinok app/ (beta), ktorý podporuje Layouts, React Server Components, Streaming
• Turbopack bundler (alpha): Až 700x rýchlejší oproti Webpack-u
• Nový next/image (stable): Rýchlejší a s podporou natívneho lazy loadingu
• Nový @next/font (beta): Bez layout shift-u.
• Vylepšený next/link: Zjednodušené API.

Nová verzia Nextu má však aj niekoľko breaking changes napr. minimálna verzia Reactu bola posunutá z 17.0.2 na 18.2.0. Všetko dôležité nájdeš aj na blogu Nextu.

2. Turbopack

V Next.js postupne nahradili nástroje ako je Babel alebo Terser postavené na JavaScript-e za Rust-ové alternatívy. Tieto zmeny priniesli výrazné zrýchlenie transpilácie alebo minifikácie kódu. V prípade náhrady Babel za Rust compiler (postavený na SWC) bolo zrýchlenie až 17 násobné. A náhrada Terser za SWC Minifier zrýchlila minifikáciu 6x.

Teraz je čas nahradiť Webpack za Turbopack, rovnako postavený na Rust-e. Tu je niekoľko (marketingových) porovnaní:

• 10x rýchlejší ako Vite a 700x rýchlejší ako Webpack
• Aplikáciu s 3 000 modulmi vie Turbopack spustiť za 1,8 sekundy. V prípade Vite je to 11,4 sekúnd.

Turbopack použijú v Next.js 13 ako development server a neskôr bude zabezpečovať aj produkčný build. Všetko dôležité si môžeš prečítať na blogu Vercelu.

Otázka je do akej miery ide o marketingové čísla. Evan You, tvorca Vite, napísal reakciu na prvé (marketingové) benchmarky:

3. Node.js 18 LTS

Node.js 18 je po 6 mesiacoch od vydania v Long-term Support (LTS). Nové aplikácie už môžeš pokojne vyvíjať na novom Node a staršie projekty aktualizovať. Node.js 18 bude podporovaný do apríla 2025. Najväčšie zmeny sú napr.:

• Update V8 JavaScript enginu na 10.1
• fetch API (experimental)
• Web Streams API (experimental)
• Blob, BroadcastChannel
• Test runner module (experimental)

Viac nájdeš na webe Node.js alebo na webe node.green, kde si vieš pozrieť prehľadnú tabuľku s podporovanou funkcionalitou pre všetky jeho verzie.

4. Budúcnosť webu je na Edge

Zvyčajne naše webové aplikácie nasadzujeme na server v niektorom z veľkých datacentier napr. v Kalifornii, Nemecku… Avšak trend do budúcna je iný. Už teraz vieme statický obsah cez CDN distribuovať po celom svete bližšie k používateľom. Tento trend však začína aj pre dynamické webové aplikácie, ktoré môžeš nasadiť kdekoľvek po svete. Je budúcnosť webu na Edge? Dozvieš sa na blogu Deno.

5. State Of CSS Survey

Nájdi si pár minút na vyplnenie prieskumu: State of CSS 2022. Okrem toho, že sa z prieskumu dozvieš o nových trendoch v CSSku, pomôžeš aj vývojárom prehliadačov uprednostniť ich plány a zapracovať na lepšej kompatibilite medzi prehliadačmi. Aj na základe minulého prieskumu, prehliadače zaimplementovali niekoľko vylepšení, ktoré dovtedy trápili CSS developerov. Viac si môžeš prečítať aj na portáli Smashing Magazine.

6. Budúcnosť renderovania v Reacte

V článku The future of rendering in React si prečítaš o aktuálnych vzoroch renderovania v Reacte, ich problémoch a ako sa nové vzory v React 18 snažia tieto problémy vyriešiť. Aj keď aktuálne ešte nie sú pripravené do produkcie je dobré sa na ne pripraviť.

Ďalšie články, ktoré stoja za prečítanie

• How to find all render-blocking resources with JavaScript - Ako identifikovať zdroje blokujúce renderovanie a zlepšiť tak Core Web Vitals.‍
• The wasted potential of CSS attribute selectors - Štýlovanie pomocou data-* a aria atribútov zlepšuje prístupnosť webu a aj prehľadnosť kódu.‍
• What if the team hates my functional code? - Každý dokáže napísať kód, ktorému rozumie počítač. Dobrí programátori píšu kód, ktorému rozumejú ľudia.‍
• Customize and automate user flows beyond Chrome DevTools Recorder - Ako vyexportovať user flows z Chrome DevTools do automatizovaných testov ako napr. Cypress.

Niekoľko článkov o prístupnosti

• When life gives you lemons, write better error messages -  Tipy ako písať lepšie error hlášky a čomu sa vyhnúť.
• aria-description crash course - Nový atribút pre zlepšenie prístupnosti, avšak stále nepripravený do produkcie.‍
• How to write good alt text - Ako vyzerá dobrý alternatívny text a aké chyby robíme pri jeho písaní.‍
• SEO and Accessibility Are Symbiotic - Prečo je prístupnosť dôležitá pre dobré SEO.

Zhrnutie

Ak sa ti prehľad noviniek páčil, tak sa nezabudni prihlásiť na odber nášho newslettera. Prečítať si môžeš aj novinky za minulý mesiac, ktoré sme priniesli v septembrovom Frontend Briefly.

‍