13. Jan 2023Frontend

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

Pravidelné zhrnutie najdôležitejších noviniek, článkov či tweetov vo svete frontendu je tu! Za mesiace november a december sme pripravili top 12 noviniek, ktoré by nemali ujsť žiadnemu frontend developerovi. Okrem toho tu nájdeš odkazy na ďalšie zaujímavé články, ktoré stoja za prečítanie.

Andrej NemečekFrontend Developer

1. GitHub Universe 2022

Pozri si záznam z konferencie GitHub Universe 2022. Témy boli rôzne:

AI (GitHub Copilot)
GitHub Codespaces
GitHub Cloud
Bezpečnosť softvéru
atď…

Prehľad všetkých noviniek nájdeš aj na blogu alebo si pozri záznam z konferencie na YouTube.

2. Novinky v ekosystéme libiek a frameworkov

Za posledné dva mesiace sa doslova roztrhlo vrece s novinkami:

2.1 Next 13.1

Next v novej verzii 13.1 prináša niekoľko noviniek pre (stabilný) pages/, ale aj (beta) app/ priečinok:

app Directory (Beta): Vylepšená stabilita a výkon
Zabudovaná transpilácia modulov pomocou next-transpile-modules
Edge Runtime (Stable): Zjednodušený Node.js runtime pre Edge. Viac o Edge Runtime si prečítaš aj v tomto článku: Vercel Edge Functions are now generally available
Turbopack Update: Podpora pre Tailwind CSS, next/image, next/font atď.
Vylepšený Middleware
Ďalšie novinky si prečítaš na blogu

2.2 Ant Design 5.0

Nová major verzia UI libky Ant Desing v5.0 priniesla niekoľko nových komponentov, Design Token Model, vylepšené možnosti vlastnej úpravy komponentov atď.

2.3 Novinky v TypeScript 4.9

satisfies operator.
Podpora pre auto-accessors v pripravovanej verzii ECMAScript-u.
Vylepšený performance.
Viac na si prečítaš na ich blogu.

2.4 Deno 1.28

Najväčšia zmena v Deno 1.28 je podpora pre npm. To znamená, že môžeš začať používať viac ako 1,3 milóna npm packagov napr. Prismu, MySQL, frontendové knižnice ako React, Vue, atď.

2.5 TanStack Router

Moderný a škálovateľný routing aj keď zatiaľ len beta verzia:

100% Typesafe.
Nezávislý na konkrétnom frameworku.
Built-in cachovanie.
Veľkosť len 10 kB.
Viac nájdeš na ich webe.

2.6 SWR 2.0

Libka rieši data fetching (podobne ako Fetch API), avšak pridáva možnosť requesty cachovať a iné užitočné funkcie. Jednoznačne najväčšia novinka v SWR 2.0 je podpora pre mutácie, keďže bez toho nebola táto libka moc užitočná.

2.7 Vite 4.0

Niekoľko noviniek vo Vite 4.0:

Upgrade na nový Rollup v3.
@vitejs/plugin-react-swc plugin: build aplikácie zabezpečuje esbuild a počas developmentu je Babel nahradený za SWC.
Ďalšie novinky nájdeš na blogu.

2.8 tRPC v10

Komunikácia medzi frontendom a backendom bola a aj stále je problémová. tRPC libka slúži na vytvorenie typesafe API, ktorá využíva naplno potenciál TypeScriptu. Je to určite zaujímavá alternatíva k REST API alebo GraphQL bez nutnosti generovať kód alebo používať schému. Viac o novej verzii tRPC nájdeš na blogu a tiež si môžeš prečítať, prečo v Echobind prestali používať GrapQL, ale radšej prešli na tRPC.

3. Zoberie AI developerom prácu?

WebGPT alebo GitHub Copilot už nemusím určite predstavovať. Máme sa (nie len) developeri začať obávať o prácu, pretože nás nahradí AI? Prečítaj si zaujímavý názor na Twitteri od Jason Warner:

4. The State of CSS 2022

Výsledky prieskumu The State of CSS 2022 sú už dostupné. Dozvieš sa tu o aktuálnych, ale aj budúcich trendoch v CSSku. Do prieskumu sa zapojilo 14 310 developerov pričom aj tieto výsledky môžu ovplyvniť budúce smerovanie CSSka.

5. Nové viewport jednotky

Existujúce jednotky ako vw alebo vh fungujú dobre na počítačoch. Avšak na mobilných zariadeniach tieto jednotky nefungovali spoľahlivo, pretože veľkosť obrazovky je ovplyvnená prítomnosťou alebo absenciou dynamických panelov s adresou URL, tlačidlami atď… Preto prichádzajú nové viewport jednotky ako napr. dvh (dynamic viewport), lvh (small viewport) alebo lvh (large viewport). Detaily nájdeš v článku The large, small, and dynamic viewport units a tiež Prepare for viewport resize behavior changes.

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

What does CSR, SSR, SSG and ISR means and why should you care? – Prehľad metód, ktorými Next generuje stránky.
Minimal TypeScript Crash Course For React – Zhrnutie najčastejšie používaných typov v Reacte.
Working with Zustand - Lepšia alternatíva Redux-u?
Getting the most from GitHub Copilot – Niekoľko tipov pre lenivých programátorov ako si uľahčiť prácu.
Data Fetching: FETCH API Approach vs SWR Approach – Kedy obyčajné Fetch API nestačí, ale mali by sme radšej použiť libku.
Color Formats in CSS – Veľký prehľad formátov CSS farieb a návod ako si vybrať ten správny.
An Interactive Guide to Flexbox – Návod ako využiť flexbox naplno.
Is React going anywhere? – React je tu s nami už skoro 10 rokov. Je čas ho nahradiť?

Moderné postupy ako optimalizovať výkon webu

Prerender pages in Chrome for instant page navigations – Speculation Rules API, ktorá prichádza v nových verziách Chromu.
Optimizing Web Fonts in Next.js 13 – V novej verzii Nextu prišiel vylepšený spôsob ako optimalizovať načítanie fontov.
Optimize Interaction to Next Paint – Ako optimalizovať Core Web Vitals metriku Interaction to Next Paint.