Niedawno odnawialiśmy naszą stronę internetową, aby była bardziej atrakcyjna i nowoczesna. Wykorzystaliśmy tę okazję, aby zaprezentować niektóre z najnowszych narzędzi i technologii, których często używamy w takich projektach. W świecie IT, gdzie technologia zmienia się z tygodnia na tydzień kluczowe jest, aby być na bieżąco z nowinkami, ale równie ważne jest, aby wiedzieć, które z nich warto stosować. Uważamy, że najważniejszymi metrykami są efektywność, koszty rozwoju oraz czas wprowadzenia produktu na rynek. Oto pięć najciekawszych nowoczesnych technologii webowych, których użyliśmy na naszej nowej stronie internetowej.

1. CSS Houdini API

CSS Houdini API otwiera zupełnie nowe sposoby podejścia do animacji i styli w aplikacjach webowych. Houdini otwiera "czarną skrzynkę" CSS, umożliwiając deweloperom bezpośrednią interakcję z silnikiem renderowania przeglądarki. Oznacza to, że efekty wcześniej uznawane za zbyt skomplikowane lub zbyt kosztowne wydajnościowo są teraz możliwe do implementacji bezpośrednio za pomocą CSS — eliminując potrzebę obejść z wykorzystaniem JavaScriptu.

Na przykład, dzięki Houdini możliwe są animacje tła, takie jak przesunięcia gradientów, używając jedynie CSS, co redukuje złożoność kodu i zwiększa wydajność strony. Rezultatem są płynniejsze animacje, ale także poprawa czasu ładowania i SEO w porównaniu do tradycyjnych sposobów implementacji, takich jak wstępnie renderowane pliki video. Nowoczesne przeglądarki już teraz wspierają wiele funkcji Houdini API, co sprawia, że jest to technologia gotowa do zastosowania na produkcji już dziś.

Poniżej znajduje się prosty przykład użycia Houdini API do stworzenia niestandardowej animacji tła:

2. Dynamiczna grafika z React i SVG

SVG (Scalable Vector Graphics) w połączeniu z React to sprytne narzędzie do tworzenia dynamicznych, responsywnych wizualizacji na Twojej stronie internetowej. SVG to format grafiki wektorowej, co oznacza, że skaluje się idealnie do każdego rozmiaru i rozdzielczości ekranu bez utraty jakości — w przeciwieństwie do formatów rastrowych, takich jak PNG czy JPEG.

W połączeniu z React elementy SVG mogą być generowane za pomocą kodu, parametryzowane i interaktywne, reagując na wymiary ekranu urządzeń użytkowników końcowych oraz akcje, takie jak kliknięcia i przewijanie. To podejście pozwala deweloperom tworzyć wielokrotnego użytku, animowane komponenty, które pozostają lekkie i zoptymalizowane pod kątem wydajności. Użycie renderowania po stronie serwera (SSR) w połączeniu z React dodatkowo zwiększa wydajność, zapewniając płynne doświadczenie użytkownika na różnych urządzeniach.

Oto przykład prostego komponentu SVG stworzonego z React:

3. MDX: Elastyczność w zarządzaniu treścią

MDX to unikalny format, który łączy Markdown z JSX, zapewniając równowagę między tradycyjnymi systemami zarządzania treścią (CMS) a całkowicie opartym na kodzie tworzeniem treści. MDX pozwala użytkownikom nietechnicznym pisać treści za pomocą prostego formatu, jednocześnie dając deweloperom możliwość rozszerzenia jego możliwości za pomocą dynamicznych, interaktywnych komponentów.

Korzystając z MDX, możemy tworzyć treści, które składają się nie tylko ze statycznego tekstu, włączając w to niestandardowe elementy, takie jak wykresy, widżety i bloki kodu. MDX świetnie integruje się płynnie z systemami CMS, oferując najlepsze z obu światów — łatwe zarządzanie treścią i elastyczność niestandardowych komponentów. To efektywny sposób na **ciekawą i bogatą w efekty ** treść, jednocześnie zmniejszając złożoność procesu edycji.

Co ciekawe artykuł który czytasz jest napisany w MDX i jest demonstracją możliwości tego formatu. Oto przykład, jak wygląda poprzednia sekcja tego artykułu w MDX:

## 2. Dynamiczna grafika z React i SVG

**SVG** (_Scalable Vector Graphics_) w połączeniu z React to sprytne narzędzie
do tworzenia dynamicznych, responsywnych wizualizacji na Twojej stronie
internetowej. SVG to format grafiki wektorowej, co oznacza, że **skaluje się
idealnie do każdego rozmiaru i rozdzielczości** ekranu bez utraty jakości — w
przeciwieństwie do formatów rastrowych, takich jak PNG czy JPEG.

W połączeniu z React elementy SVG mogą być **generowane za pomocą kodu**,
parametryzowane i **interaktywne**, reagując na wymiary ekranu urządzeń
użytkowników końcowych oraz akcje, takie jak kliknięcia i przewijanie. To
podejście pozwala deweloperom tworzyć wielokrotnego użytku, animowane
komponenty, które pozostają **lekkie i zoptymalizowane pod kątem wydajności**.
Użycie renderowania po stronie serwera (SSR) w połączeniu z React dodatkowo
zwiększa wydajność, zapewniając płynne doświadczenie użytkownika na różnych
urządzeniach.

Oto przykład prostego komponentu SVG stworzonego z React:

<SVGDemo />

4. Renderowanie po stronie serwera (SSR) z Next.js

Renderowanie po stronie serwera (SSR) to technika, która wstępnie renderuje strony internetowe na serwerze, zanim zostaną wysłane do klienta. W przeciwieństwie do tradycyjnych SPA (Single Page Applications), gdzie treść jest renderowana w przeglądarce, SSR dostarcza treść bezpośrednio z serwera, co skutkuje szybszym czasem początkowego ładowania i lepszym SEO.

Korzystanie z Next.js do implementacji SSR przynosi dodatkowe korzyści, takie jak automatyczna optymalizacja obrazów, prefetching i efektywne buforowanie po stronie serwera. W ten sposób łączymy najlepsze cechy tradycyjnych statycznych stron z interaktywnością nowoczesnych SPA, zapewniając szybkie, przyjazne dla SEO doświadczenie z płynną nawigacją i interakcją użytkownika. Niezależnie od tego, czy budujemy to stronę e-commerce, landingpage, czy skomplikowaną aplikację webową, SSR może znacznie poprawić wrażenia z użytkowania usługi.

LCP (Largest Contentful Paint) to kluczowa metryka do pomiaru wydajności ładowania strony. Reprezentuje czas potrzebny na wyrenderowanie największego elementu treści na ekranie. Wynik LCP dla tej strony to około 100 ms, co jest uważane bardzo dobrym wynikiem. Tak dobry rezultat to zasługo renderowania po stronie serwera w Next.js. Dzięki temu strona ładuje się szybko i zapewnia płynne doświadczenie użytkownika.

5. tRPC: Szybszy rozwój API z mniejszą liczbą błędów

Rozwój API od dawna zdominowany jest przez REST. tRPC to nowa technologia, eliminująca zbędny kod i zapewniająca bezpieczeństwo typów pomiędzy aplikacją serwerową a kliencką. Dzięki tRPC nie ma potrzeby tworzenia powtarzających się endpointów czy parserów — zmiany wprowadzone na serwerze są automatycznie odzwierciedlane na po stronie aplikacji klienckiej, oszczędzając czas programisty i redukując ilość błędów.

tRPC zapewnia bezpieczeństwo typów, co oznacza, że typy są współdzielone w całej bazie kodu, minimalizując ryzyko błędów i utrzymując spójność. tRPC jest rozszerzeniem sprawdzonego podejścia REST, dzięki czemu działa wszędzie tam, gdzie działa REST, bez ryzyka problemów z kompatybilnością. Co więcej możliwe jest stopniowe przejście z REST na tRPC.

Podsumowanie

Wierzymy, że nowoczesne technologie mogą znacznie przyspieszyć rozwój aplikacji webowych, jednocześnie zapewniając lepszą funkcjonalność i wydajność. Śledzenie nowości w świecie IT jest kluczowe, ale równie ważne jest umiejętne wybieranie technologii, które najlepiej pasują do potrzeb klienta.