JavaScript zachowuje panowanie jako jeden z najczęściej używanych języków programowania. Z tego powodu ten język programowania posiada również wiele bibliotek i frameworków. React to jedna z najpopularniejszych bibliotek JavaScript.
React zawiera również wiele frameworków i bibliotek zaprojektowanych do wykonywania różnych funkcji. Framework sieciowy zapewnia ustrukturyzowany sposób tworzenia aplikacji internetowej. Zamiast tworzyć wszystko od zera, frameworki zapewniają kod wielokrotnego użytku, który programiści mogą wykorzystać w swoich aplikacjach.
Zremiksuj to jeden z najnowszych frameworków internetowych React, który ostatnio zyskał dużą popularność. W tym artykule zdefiniujemy, czym jest framework Remix, jego funkcje, sposób konfiguracji, przypadki użycia Remix i jego ograniczenia.
Spis treści:
Co to jest Remix Framework?
Remix to kompleksowa platforma do tworzenia stron internetowych zbudowana na bazie React. Możesz użyć aplikacji Remix do stworzenia backendu i frontonu swojej aplikacji. Remix pozwala skupić się na interfejsie użytkownika i pomaga zapewnić elastyczną i szybką obsługę.
Ten framework można opisać jako cztery rzeczy: kompilator, framework przeglądarki, framework serwera i moduł obsługi HTTP.
Remix był pierwotnie usługą płatną, ale pod koniec 2021 roku stał się open source. Tak też było przejęty przez Shopify w 2022 roku.
Funkcje ramowe Remiksu
- Stosy remiksów: Ta funkcja Remix CLI umożliwia szybkie generowanie aplikacji Remix. Niektóre z tych stosów są wbudowane. Możesz także samodzielnie stworzyć aplikację od podstaw. Oficjalne wbudowane stosy mają takie funkcje, jak automatyczne potoki wdrażania, bazy danych, testowanie, uwierzytelnianie i linting. Niektóre ze stosów to popularny Blues Stack, Indie Stack i Nieczysty stos.
- Renderowanie po stronie serwera (SSR): Ta struktura umożliwia renderowanie komponentów React po stronie serwera. Początkowe renderowanie w Remix odbywa się na serwerze, wysyłając w pełni wyrenderowany dokument HTML do klienta. Renderowanie po stronie serwera ma kilka zalet, takich jak poprawa dostępności, umożliwienie wyszukiwarkom indeksowania treści i zwiększenie szybkości.
- Routing z zagnieżdżonymi trasami: Remix używa React Router 6. W tym frameworku wystarczy, że upuścisz pliki do folderu tras, a moduł tras Remix przekształci je w ścieżki, na których można nawigować. Trasa zagnieżdżona to trasa zawarta w innej trasie.
- Obsługuje TypeScript i JavaScript: Możesz używać Remix niezależnie od tego, czy używasz JavaScript czy TypeScript. Zaletą korzystania z języka TypeScript jest to, że umożliwia on deklarowanie zmiennych i ułatwia wczesne wykrywanie błędów.
- Wbudowane ładowanie i buforowanie danych: Ta struktura umożliwia programistom definiowanie modułów ładujących, które pobierają dane z różnych źródeł. Remix obsługuje pobieranie danych zarówno po stronie klienta, jak i serwera. Mechanizm buforowania zapewniany przez tę platformę ułatwia ograniczenie niepotrzebnego pobierania danych i optymalizację kolejnych żądań.
- Dzielenie kodu i pobieranie z wyprzedzeniem: Możesz podzielić kod w aplikacji Remix na małe, ładowalne bity na żądanie. Takie podejście zmniejsza początkowy rozmiar pakietu i możliwości wstępnego pobierania, które ładują dane i kod w tle.
Korzyści z Remix Framework
- Pełny stos: większość ludzi używa różnych języków lub frameworków do tworzenia aplikacji po stronie klienta i serwera. Na przykład możesz użyć React jako frontendu i użyć frameworka Node.js, takiego jak ExpressJS, jako backendu. W innych przypadkach możesz użyć frameworka Pythona, takiego jak Django w swoim zapleczu. Remix to platforma typu full-stack, co oznacza, że front-end i back-end będą znajdować się w tej samej aplikacji.
- Doskonała obsługa danych: Remix opiera się na natywnych funkcjach i konwencjach przeglądarki. Wyjątkowy przepływ danych ułatwia przesyłanie danych między front-endem a back-endem Twojej aplikacji.
- Łatwa obsługa stanu: Zarządzanie stanem w aplikacjach React może być uciążliwe, a większość programistów korzysta z bibliotek innych firm, takich jak Redux. Zastosowania remiksów ładowarki do zarządzania stanem po stronie serwera. Możesz użyć atrybutu „useLoaderData” z dowolnego komponentu w bieżącej trasie.
- Granice błędów: jeśli wystąpi błąd w zagnieżdżonej trasie lub komponencie w aplikacji Remix, błędy będą ograniczone tylko do tego komponentu. Taki błąd nie zepsuje całej aplikacji, jak w innych frameworkach. Chociaż możesz zaimplementować funkcję granicy błędu w niektórych frameworkach React, takich jak Next.js, ta funkcja jest wbudowana w Remix.
Wymagania wstępne dotyczące konfiguracji aplikacji Remix
Jeśli chcesz skonfigurować aplikację Remix, oto niektóre z rzeczy, których potrzebujesz;
- Node.js wersja od 14.17.0 lub nowsza
- Menedżer pakietów, taki jak npm (7 lub nowszy)
- Edytor kodu
- Zrozumienie, jak działają aplikacje React
Jak skonfigurować „Witaj, świecie!” na Remiksie
Stworzymy prosty projekt i nazwiemy go „Remix-app”. Możesz śledzić;
- Przejdź do lokalizacji, w której chcesz utworzyć aplikację, otwórz terminal i uruchom to polecenie;
npx [email protected] remix-app
Terminal poprosi o odpowiedź na kilka pytań i skonfigurowanie aplikacji. Możemy trzymać się podstaw i wybrać TypeScript jako nasz język.
- Przejdź do utworzonej aplikacji (Remix-app) i otwórz ją w swoim ulubionym edytorze kodu. Struktura folderów będzie następująca;
- Zbuduj swoją aplikację za pomocą tego polecenia;
npm run build
- Uruchom serwer programistyczny za pomocą tego polecenia;
npm start
Możesz teraz otworzyć okno w swojej przeglądarce za pomocą linku http://localhost:3000, który pojawi się w Twojej przeglądarce;
- Zmodyfikuj zawartość pliku app/root.tsx w następujący sposób;
import { LiveReload } from "@remix-run/react";
export default function App() {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1"
/>
<title>Remix Demo</title>
</head>
<body>
Hello world
<LiveReload />
</body>
</html>
);
}
Wyrenderowana strona będzie wyglądać następująco;
Gdzie jest używany Remix Framework
Podobnie jak Next.js i React, Remix może być używany do budowania różnych typów aplikacji. Oto niektóre z najlepszych przypadków użycia;
- Aplikacje jednostronicowe: Cały kod w aplikacji Remix jest ładowany raz. Podejście renderowane przez serwer umożliwia szybkie początkowe ładowanie, podczas gdy klient bezproblemowo obsługuje kolejne żądania.
- Strony internetowe przyjazne dla SEO: Remix wykorzystuje funkcję wstępnego renderowania do generowania statycznych stron HTML. Dzięki temu możliwe jest indeksowanie stron internetowych, nawet jeśli masz do czynienia z treściami dynamicznymi.
- Dynamiczne strony internetowe: Remix wykorzystuje w swoich aplikacjach renderowanie po stronie serwera. SSR ładuje strony na serwerze przed wysłaniem strony HTML do klienta. Dzięki temu Remix idealnie pasuje do stron internetowych, których treść jest generowana dynamicznie.
Jak działa framework Remix po stronie serwera i po stronie klienta
Renderowanie po stronie serwera
Remix renderuje twój kod w zwykłym HTML po stronie serwera. Takie podejście zmniejsza ilość kodu JavaScript, zwiększając w ten sposób szybkość ładowania. Remiks zasadniczo wykorzystuje natywne funkcje „akcji” i „ładowania”. Serwer wykona wszelkie działania po stronie serwera, które podasz, wyrenderuje kod React jako zwykły i HTML, a następnie wyśle go do przeglądarki klienta.
Renderowanie po stronie klienta
Remix, podobnie jak Next.js, oferuje funkcję „wstępnego pobierania”, która zapewnia użytkownikom płynną nawigację.
W Next.js komponent pozwala naszej witrynie wstępnie załadować stronę, do której przekierowuje i nie musi czekać na pobranie strony. Jednak takie podejście dobrze sprawdza się tylko w przypadku statycznych stron internetowych.
Remix wykorzystuje funkcję , która ułatwia pobieranie
Ograniczenia dotyczące remiksów
- Mała społeczność: Remix był pierwotnie płatną strukturą. Został jednak udostępniony jako open source w 2021 roku i wciąż jest młody. Oznacza to, że dostępne są ograniczone zasoby i narzędzia, dzięki którym tworzenie aplikacji jest dziecinnie proste.
- Bardziej stroma krzywa uczenia się: Remix wprowadza koncepcję zagnieżdżonych tras i może być mylący, jeśli pochodzisz z Reacta lub jego frameworków, takich jak Next.js. Jednak gdy już złapiesz haczyk, korzystanie z tego frameworka stanie się łatwe.
Jaka jest przyszłość remiksu?
- Prawdopodobnie zobaczymy zwiększoną adopcję: Remiks jest wciąż młody. Deweloperzy mogli nie odkryć jego potencjału i prawdopodobnie w przyszłości zobaczymy więcej firm i programistów korzystających z niego.
- Ekosystem prawdopodobnie się rozrośnie: Remix wciąż ma niewiele narzędzi i bibliotek do obsługi swojego ekosystemu. Wraz ze wzrostem popularności możemy spodziewać się większej liczby narzędzi i bibliotek.
- Społeczność będzie się rozwijać: Społeczność ma kluczowe znaczenie dla rozwoju frameworka/języka programowania. Oczekujemy, że społeczność będzie się rozrastać w miarę odkrywania przez deweloperów klejnotów Remiksu.
Czy Remix jest lepszy od Next.js?
Odpowiedź na to pytanie będzie zależała od charakteru tworzonej aplikacji. Jeśli chcesz zbudować pełną aplikację przy użyciu jednego frameworka, Remix będzie lepszy niż Next.js. Jeśli jednak chcesz dojrzałego frameworka z mnóstwem zasobów i dobrą obserwacją, Next.js będzie dla Ciebie idealnym wyborem.
Czy Remix to dobry framework?
Tak. To dobry framework do zbudowania całej aplikacji z pełnym stosem przy użyciu jednego frameworka. Jest to również niesamowita platforma, jeśli chcesz technologii z wbudowaną funkcją granic błędów. Jednak Remix nie jest właściwym frameworkiem, jeśli chcesz mieć framework z dużą społecznością i wieloma zasobami.
Czy produkcja Remix JS jest gotowa?
Tak. Jeśli jesteś zaznajomiony z wdrażaniem aplikacji Node.js, praca z aplikacjami Remix i wdrażanie ich również będzie dziecinnie proste.
Powinienem nauczyć się Remiksu czy Reagowania?
Remix to framework React. Musisz więc zrozumieć, jak działa React, zanim zaczniesz uczyć się remiksu. Jeśli jednak Twój czas jest ograniczony i chcesz nauczyć się tylko jednego frameworka, wybór będzie zależał od Twoich celów końcowych.
Remix umożliwia tworzenie aplikacji z pełnym stosem. Możesz także nauczyć się remiksu, nawet jeśli nie rozumiesz React, ale krzywa uczenia się będzie stroma.
Jeśli jednak używasz React, musisz użyć frameworka zaplecza, takiego jak Django lub Ruby on Rails, jeśli chcesz mieć aplikację z pełnym stosem. Jeśli zdecydujesz się nauczyć React, możesz polegać na jego wielu zasobach i społeczności.
Wniosek
Jest jeszcze za wcześnie, aby określić, czy Remix jest przyszłością tworzenia stron internetowych. Jego niesamowite funkcje, takie jak elastyczny routing, renderowanie po stronie serwera, dzielenie kodu i skupienie się na doświadczeniu programistów, sprawiają, że jest to bardzo obiecujący framework sieciowy.
Jednak Remix jest wciąż młody, a jego zasoby są nadal ograniczone. Ma też małą społeczność. Niewiele jest narzędzi i bibliotek Remix JS, ponieważ większość platform typu open source zależy od wsparcia społeczności i narzędzi innych firm.
Możesz także zapoznać się z niektórymi frameworkami i bibliotekami jako programista full-stack.