Jakie zmiany nadchodzą we frontendzie w 2023? Podrzucamy Wam garść przemyśleń z codziennej pracy frontend developera. Marcin podzieli się swoimi spostrzeżeniami na temat obszarów i technologii, na które zapotrzebowanie będzie rosło, i które w końcu mogą stać się nieodłączną częścią obowiązków zespołów frontendowych.
W branży IT możemy obserwować ciągłą transformację cyfrową. Zgodnie z powiedzeniem:
nowy dzień, nowy frameworkinnowacje we frontendendzie przychodzą i odchodzą, zmieniając się szybciej niż angielska pogoda. Wśród nowości pojawiają się zarówno wartościowe technologie, jak i takie, które nie sprawdzą się po czasie. Oto kilka frontendowych nowinek, z którymi warto być na bieżąco, a także podsumowanie zmian, które pojawiły się na przestrzeni ostatnich lat.
React, Next.js, CRA – największe zmiany we frontendzie
Już od kilku lat najpopularniejszym frameworkiem frontendowym jest React i nie zapowiada się, aby w 2023 nadeszły radykalne zmiany. To, co się jednak zmienia w kwestii React’a to podejście. Coraz częściej zdarza się, że wybór startera podczas tworzenia aplikacji pada na Next.js, który coraz mocniej wypiera Create React App. 13 wersja Next.js już cieszy się ogromną popularnością, pomimo tego że wciąż jest w fazie ekspertymentalnej. Nowe funkcjonalności i poprawki są dodawane co kilka dni, a dokumentacja tworzy się praktycznie na bieżąco, chociaż trzeba zaznaczyć, że nadal nie jest zalecane, aby używać jej na produkcji.Co nowego w 13 wersji Next.js?
W zeszłym roku wiele emocji wzbudziło pojawienie się Next.js 13. Zmiany zaprezentowane na konferencji Next.js Conf rozbudziły nadzieje i stały się zapowiedzią nowego oblicza frontendu. Oto krótkie podsumowanie największych nowości w Next.js 13:Zmieniony routing
Pierwszą najbardziej widoczną dla programistów zmianą jest odejście od starego routingu, który do tej pory spotykał się z ciągłą krytyką. Nowy routing w Next.js wciąż jest oparty o system plików, ale nastąpiły znaczące zmiany. Do tej pory każdy plik był osobną ścieżką w aplikacji. Wymuszało to konieczność duplikacji wspólnych elementów, co stawało się szczególnie problematyczne, np. w przypadku zagnieżdżonych elementów.
Podział na Server i Client Components
W Next.js 13 mamy do czynienia z zupełnie nową architekturą. Największą rewolucją jest podział komponentów na Server Components i Client Components. Przyspiesza to tworzenie aplikacji ze względu na zmniejszenie ilości JS. Co jeszcze daje taki podział? Server Components zostają wyrenderowanie statycznie po stronie serwera, a JS jest dodany tylko do Client Components w procesie hydratacji (ang. hydration). Termin hydratacja odnosi się do procesu dodawania kodu JavaScript do skompilowanego kodu HTML na stronie, podczas renderowania w przeglądarce. W efekcie jeżeli wszystkie komponenty będą serwerowe użytkownicy mogą otrzymać do swojej przeglądarki stronę nawet całkowicie pozbawioną kodu JS co znacznie ją odchudzi.// app/page.js
async function getData() {
const res = await fetch('https://api.example.com/...');
return res.json();
}
// This is an async Server Component
export default async function Page() {
const data = await getData();
return <main>{/* ... */}</main>;}
Code language: JavaScript (javascript)- Client Components występują tam gdzie jest niezbędne zwiększenie interakcji z użytkownikiem,
- Nowa architektura odkrywa przed nami wiele możliwości i ułatwia wiele czynności, tj. tworzenie zagnieżdzonych layoutów,
- Komponenty renderowe po stronie serwera zmniejszają ilość kodu wysyłanego do klienta, a tym samym przyśpieszają ładowanie strony.
A11y, czyli 11 liter między a i y w słowie Accessibility
Temat wydajności (ang. performance) był często obok A11y spychany na sam koniec prac frontendowych. W momentach, kiedy już wszystko było gotowe ale lighthouse świecił błędami, zdarzało się, że czasem ktoś z zespołu poświęcił więcej czasu, aby pomyśleć, jak można jeszcze przyśpieszyć lub poprawić kwestie a11y.
Dlaczego kwestie accessibility są takie ważne w rozwoju aplikacji?
Dostępność to nic innego jak przystosowanie interfejsów aplikacji lub oprogramowania do potrzeb jak największej liczby użytkowników. Jak wiadomo, coraz więcej ludzi korzysta z Internetu, w tym osoby starsze, z różnymi problemami wzrokowymi, czy ruchowymi. Na rosnącą popularność tworzenia aplikacji zgodnie z regułą dostępności składa się wiele czynników:- Udostępnianie aplikacji dla każdego bez żadnych ograniczeń
- Accessibility ma znaczenie dla SEO
Nacisk na testowanie i AI – jaka będzie przyszłość frontendu?
Co się zmieni w 2023? Według mnie zwiększy się popularność narzędzi do testowania, które pozwolą nam przewidzieć, jak wypadnie nasza aplikacja, takie jak wspomniany już lighthouse czy axe. Kiedyś temat wydajności był traktowany pobieżnie – obecnie z roku na rok rośnie świadomość na ten temat. W efekcie odpowiedzialność za wydajność bierze caly zespół. Każdy, kto uczestniczy w procesie rozwoju aplikacji, od projektantów, po testerów jest równo zaangażowany w te kwestie.Popularność ChatGPT
Temat AI był już dość popularny parę lat temu ale teraz za sprawą popularności Chat GPT powrócił. Wiele firm dopiero poszukuje u siebie miejsca na wykorzystanie możliwości sztucznej inteligencji, chociaż są też takie, które opierają swój biznes na możliwościach sztucznej inteligencji. Rozwiązania AI znajdują swoje zastosowanie również we frontendzie, np. mogą być wykorzystane przy mniej złożonych problemach lub nawet napisać kod od zera za nas. Spójrzmy na poniższy przykład kodu wygenerowanego przez ChatGPT:
