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

1. Node.js 16 predčasne zomrel

Node.js 16 je od 11. septembra 2023 mŕtvy. Podpora pre 16-tku sa predčasne skončila o sedem mesiacov skôr, aby sa zhodovala s ukončením podpory OpenSSL 1.1.1. Aktuálna LTS verzia je Node 18, avšak odporúčam už premigrovať rovno na verziu Node 20. Aktívny support pre Node 18 končí za pár dní 18.10.2023. Následne od 25.10.2023 je nová LTS verzia Node 20 s podporou až do 30.4.2026. Okrem toho v Node 20-ke pribudla aj natívna podpora pre .env súbory, čo je ďalší dôvod, prečo premigrovať na 20tku 🎉.

Aký je rozdiel medzi LTS a Current verziou? 

LTS verzie sa považujú za stabilné a určené do produkčného prostredia. Sú podporované počas dlhšieho obdobia, zvyčajne 30 mesiacov od dátumu vydania. Počas tejto doby sú pre verziu LTS pravidelne poskytované kritické opravy chýb a bezpečnostné aktualizácie. 

Current verzia obsahuje najnovšie funkcie, vylepšenia a aktualizácie. Môžu však stále prechádzať testovaním a neodporúčajú sa používať v produkčnom prostredí. Aktuálne verzie sú ukážkou toho, čo sa stane ďalšou verziou LTS, keď sa otestujú, stabilizujú a získa sa feedback od komunity.

2. Bun 1.0

Bun 1.0 je nový a rýchly JavaScript runtime. Niečo ako Node.js, ale rýchlejší. Jeho cieľom je uľahčiť developerom prácu a čas nastavovaním množstva JS toolov. Čo je Bun:

Náhrada za Node.js, takže nepotrebuješ:

• node
• npx — bunx 5x rýchlejší
• dotenv, cross-env — Bun vie čítať .env súbory (po novom už aj Node.js 😜)
• nodemon, pm2 — zabudovaný watch mode
• ws — zabudovaný WebSocket server
• node-fetch, isomorphic-fetch — zabudovaný fetch (už aj v Node.js 😜)

Transpiler — Bun vie pracovať s .js, .ts, .cjs, .mjs, .jsx, a .tsx súbormi, vďaka čomu vieš nahradiť:

• tsc
• babel, .babelrc, @babel/preset-*
• ts-node, ts-node-esm
• tsx

Bundler — Bun je JavaScript bundler, takže nepotrebuješ:

• esbuild
• webpack
• parcel, .parcelrc
• rollup, rollup.config.js

Package manager — Bun je npm kompatibilný package manager, takže vieš nahradiť:

• npm, .npmrc, package-lock.json
• yarn, yarn.lock
• pnpm, pnpm.lock, pnpm-workspace.yaml
• lerna

A množstvo ďalších “vylepšení”. Všetky nové featury nájdeš na Bun blogu.

2.1 Prišiel čas vymeniť Node za Bun?

Okolo Bun.js je v komunite veľký hype. Znamená to, že ideme nahradiť Node.js?

Ešte by som počkal a nerobil predčasné rozhodnutia. Odporúčam prečítať článok: Bun hype. How we learned nothing from Yarn. Je to jeden z najlepších článkov, aké som v poslednej dobe čítal. Myšlienky v článku neplatia len na hype okolo Bun-u, ale pre akýkoľvek hype v developerskej komunite. Ak mám vybrať jednu myšlienku z článku, tak túto: “Okay, so Yarn came around, forced npm to get better, and then died.” Ďalší zaujímavý článok je: My thoughts on Bun and other Adventures. Pozri si aj porovnanie Node, Deno a Bun v článku: Node.js vs. Deno vs. Bun: JavaScript runtime comparison.

3. Next.js 13.5

Ak sa ti zdal Next.js pomalý a vyžieral ti kopec RAMky, skús ho updatnúť na novú verziu. Next.js 13.5 prišiel s týmito vylepšeniami:

• O 22% rýchlejšie spustenie lokálneho servera
• O 29% rýchlejší HMR (Hot Reload)
• O 40% menšie využitie pamäte s next start
• Optimalizované importy packagov
• next/image vylepšenia
• Viac nájdeš na blogu

4. Server Components

React oslávil 1O rokov, ale stále prichádza s prevratnými vylepšeniami. Pred pár mesiacmi React predstavil: Server Components. Bude to veľká zmena pre React a frontend developerov. Preto vzniká aj množstvo otázok, čo to je, ako to funguje, aké sú výhody alebo či to je rovnaké ako SSR… Ak tiež hľadáš odpovede na tieto otázky našiel som dva super články, kde nájdeš odpovede:

• Making Sense of React Server Components
• Understanding React Server Components

Aké sú prvé skúsenosti so Server Components z pohľadu rýchlosti nájdeš v tomto článku: React Server Components Made Our Site Faster.

5. Novinky v prehliadačoch

Najväčšia novinka, ktorá uľahčí developerom množstvo nervov a práce sú exit/entry animácie. Konečne nemusíme inštalovať rôzne animačné libky len preto, aby sme mohli animovať display: none. Po novom už prehliadač zvládne tieto animácie aj natívne vďaka transition-behavior: allow-discrete atribútu alebo @starting-style pravidlu. Viac nájdeš v článku: Four new CSS features for smooth entry and exit animations. Podpora je zatiaľ len v prehliadači Chrome a Edge od verzie 117. Ďalšie novinky v prehliadači Chrome nájdeš v článku: New in Chrome 117.

Množstvo noviniek pribudlo aj do prehliadača Safari. Všetky novinky nájdeš na ich blogu: WebKit Features in Safari 17.0

6. Astro 3.0

Astro 3.0 je prvý veľký webový framework, ktorý podporuje View Transitions API. Plynulejšia webová navigácia s podporou animácií, ktorá bola doteraz možná len v single page aplikáciach (SPA). Ak chceš vedieť viac o View Transitions API, prečítaj si článok: View Transitions API & meta frameworks: a practical guide

Medzi ďalšie veľké novinky v Astro v3 patrí:

• Optimalizácia obrázkov (stable)
• Rýchlejší rendering
• SSR vylepšenia pre serveless
• HMR vylepšenia pre JSX
• Optimalizovaný build

7. State of HTML & CSS

Frontend developeri zvyčajne riešia len JavaScript a CSS, avšak nič z toho, čo robíme, by nebolo možné bez HTML. Môže sa zdať, že HTML sa vôbec neposúva, ale v skutočnosti pribúdajú do HTML nové elementy alebo funkcionalita. Ak chceš vedieť aké sú novinky vo web developmente pozri sa na State of HTML 2023 a tiež na State of CSS 2023. Ak sa do prieskumu aj zapojíš, pomôžeš nastaviť trend ďalšieho vývoja web developmentu.

8. Nové React kurzy

The Joy of React a react.gg sú dva moderné kurzy, ktoré stoja zato. Interaktívny spôsob, ako zvládnuť moderný React. Trochu aj závidím, že tieto kurzy neexistovali, keď som ja začínal s Reactom. Avšak aj pre skúsenejších React developerov môžu byť tieto kurzy prínosom. Dozvieš sa v nich o novinkách, ktoré pribudli (alebo ešte len pribudnú) v Reacte napr. server components, suspense alebo concurrent rendering.

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

• One Thing Nobody Explained To You About TypeScript - Ako správne nastaviť na projekte tsconfig.
• useMemo overdose - Kedy (ne)použiť useMemo hook.
• Your Cache Headers Could Probably be More Aggressive - Čo môžeme urobiť, aby sme posunuli cache performance ešte ďalej.
• Speeding up the JavaScript ecosystem - Polyfills gone rogue - Zbytočné polyfilly v populárnych packagoch nafukujú node_modules v projektoch.
• Deep Dive: Caching and Revalidating - Ako funguje cache a revalidácia v Next.js App Router.
• If you want to address tech debt, quantify it first - Riešenie technologického dlhu si vyžaduje vyčíslenie jeho nákladov a vplyvu na produktivitu.
• Four common types of code coverage - Čo je code coverage a aké sú štyri bežné spôsoby jeho merania.
• The Hidden Cost of Open Source - Vue.js Live 2023 - Aké sú reálne náklady, ktoré mnohé spoločnosti pri používaní open sourcu nezohľadňujú.
• Remix v2 - Aké novinky pribudli v Remix v2.

Niekoľko článkov o prístupnosti

Equivalent experience can cut both ways - Ako robiť web prístupný a zároveň použiteľný.

A11y-Driven Development - Prečo myslieť na prístupnosť už od začiatku developmentu.

Zhrnutie

Ak sa ti prehľad noviniek páčil, tak sa nezabudni prihlásiť na odber nášho newslettera. Vďaka tomu neprídeš o ďalšie novinky vo svete frontendu.