Czym Jest Remix i Dlaczego Jest o Nim Tak Głośno?

20 grudnia 2021React
3 min150 wyświetleń

Remix jest frameworkiem Javascript, który jest na rynku już od dłuższego czasu. Dlaczego w takim razie dopiero teraz jest o nim tak głośno?

Remix do tej pory był dostępny tylko w wersji płatnej, za 250$. Założyciele stwierdzili jednak, że lepiej będzie przejść na model Open Source, co momentalnie przyciągnęło do niego rzesze programistów.

Czym jest Remix?

Remix jest frameworkiem Javascript opartym na React.js.

Jest bardzo podobny do dobrze już znanych frameworków, takich jak Next.js lub Svelte, jednak ma kilka unikalnych funkcjonalności, które czynią go wyjątkowym.

Remix służy do renderowania stron po stronie serwera (SSR). Oznacza to, że dane są renderowane po stronie serwera i przesyłane do klienta z minimalną ilością JavaScript.

W przeciwieństwie do czystego Reacta, gdzie dane są pobierane na frontendzie, a następnie renderowane na ekranie, Remix pobiera dane na backendzie i serwuje HTML bezpośrednio do użytkownika.

Zalety Remix

Remix, tak jak pozostałe frameworki posiada kilka wbudowanych funkcjonalności. Oto najważniejsze z nich:

Nested pages - zagnieżdżony routing

NextJS buduje trasy w oparciu o strukturę projektu. Tworzymy wewnątrz folderu pages pliki, które będą naszymi podstronami, a framework używa tych nazw do budowania całego systemu routingu aplikacji.

React Remix, buduje trasy również w oparciu o system plików, używając folderu o nazwie routes.

Co więcej, możemy zagnieżdżać ścieżki, a dzieci odziedziczą layout rodzica, bez potrzeby dodawania zbędnego kodu.

Error boundaries

Błędy w Remix są ograniczone do komponentu, co oznacza, że jeśli otrzymasz błąd, komponent się nie wyrenderuje, lub wyświetli komunikat, a reszta strony wyświetli się normalnie. W innych frameworkach cała strona się wysypie i pokaże błąd.

Stan ładowanie aplikacji

Remix automatycznie obsłuży za Ciebie stan, gdy aplikacja ładuje dane. Wszystko, co musisz zrobić, to powiedzieć Remixowi, co ma pokazać w momencie, w którym aplikacja się ładuje.

Obsługa formularza

W tym samym pliku, w którym znajduje się formularz, można wyeksportować funkcję o nazwie action, która będzie obsługiwać na przykład metodę POST otrzymany przez formularz znajdujący się na danej stronie. Nie ma konieczności używania onSubmit lub onClick, tak jak często robimy to w React.

SEO

Dzięki renderowaniu po stronie serwera aplikacje oparte o Remix są świetnie zoptymalizowane pod kątem SEO. Co więcej, Remix posiada wbudowaną funkcjonalność meta, która pozwala nam zmienić meta tagi, zupełnie jak robiliśmy to do tej pory, używając React Helmet.

Stylowanie

Remix umożliwia dodawanie stylów dla konkretnych komponentów. Dzięki temu style z różnych plików CSS nie będą się nadpisywały, a Ty pozbędziesz się zbędnych problemów.

Podsumowanie

Remix posiada wiele wbudowanych funkcjonalności, których musiałbyś szukać w osobnych bibliotekach, lub używając innych frameworków. Dzięki temu jesteś w stanie w łatwy sposób zbudować nawet skomplikowane aplikacje.

Remix jest młodym frameworkiem, dlatego warto śledzić kolejne releasy, które z pewnością przyniosą jeszcze wiele ciekawych i użytecznych funkcjonalności.

Osobiście do tworzenia aplikacji najczęściej wybieram Gatsby.js, o którym możesz dowiedzieć się więcej tutaj 🚀

Przeczytaj także inne artykuły

Core Web Vitals - Co To Jest i Jaki Ma Wpływ na SEO?

Core Web Vitals to zbiór metryk stworzonych przez Google w 2020 roku. Określają jakość strony zwracając uwagę na jak najlepsze doświadczenia użytkownika. Core Web Vitals mają znaczący wpływ na pozycjonowanie strony, jak i na Bounce Rate.

13 maja 2022Frontend
6 min123 wyświetleń

9 Rzeczy, Które Musisz Wiedzieć Zanim Zaczniesz Uczyć Się React.js

React.js to obecnie jeden z najpopularniejszych frameworków Javascript. Ma niski próg wejścia, mimo to Juniorzy popełniają jeden znaczący błąd, który utrudnia im cały proces nauki. Sam również go popełniłem, dlatego, aby pomóc Ci lepiej wejść w świat Frontendu zebrałem 9 rzeczy, które musisz wiedzieć, zanim zaczniesz uczyć się React.js

18 marca 2022React
7 min657 wyświetleń