Este Remix Framework viitorul dezvoltării web?

de
Tweet
Share
Share
Pin

JavaScript păstrează domnia ca unul dintre cele mai utilizate limbaje de programare. Datorită acestui fapt, acest limbaj de programare are și multe biblioteci și cadre. React este una dintre cele mai populare biblioteci JavaScript.

React vine, de asemenea, cu multe cadre și biblioteci concepute pentru a îndeplini diferite funcții. Un cadru web oferă o modalitate structurată de a crea o aplicație web. În loc să creeze totul de la zero, cadrele oferă cod reutilizabil pe care dezvoltatorii îl pot folosi în aplicațiile lor.

Remix este unul dintre cele mai recente cadre web React care a câștigat multă acțiune în ultimul timp. Acest articol va defini ce este cadrul Remix, caracteristicile sale, cum să-l configurezi, cazurile de utilizare ale Remix și limitările acestuia.

Ce este Remix Framework?

Remix este un cadru de dezvoltare web complet construit pe React. Puteți folosi o aplicație Remix pentru a crea backend-ul și front-end-ul aplicației. Remix vă permite să vă concentrați pe interfața de utilizare și vă ajută să oferiți o experiență de utilizator rezistentă și rapidă.

Acest cadru poate fi descris ca patru lucruri: un compilator, un cadru de browser, un cadru de server și un handler HTTP.

Remix a fost inițial un serviciu plătit, dar a fost făcut open-source la sfârșitul anului 2021. A fost și achiziționat de Shopify în 2022.

Caracteristici Remix Framework

  • Stive de remix: această caracteristică Remix CLI vă permite să generați rapid aplicații Remix. Unele dintre aceste stive sunt încorporate. De asemenea, puteți crea o aplicație de la zero pe cont propriu. Stivele încorporate oficiale au caracteristici precum conducte de implementare automată, baze de date, testare, autentificare și listing. Unele dintre stive sunt popularul Blues Stack, Indie Stack și Grunge Stack.
  • Redare pe partea serverului (SSR): Acest cadru permite redarea pe partea serverului a componentelor React. Redarea inițială pe Remix are loc pe server, trimițând un document HTML redat complet către client. Redarea pe server are mai multe beneficii, cum ar fi îmbunătățirea accesibilității, permițând motoarelor de căutare să acceseze cu crawlere conținutul și îmbunătățirea vitezei.
  • Rutare cu rute imbricate: Remix folosește React Router 6. Cu acest cadru, trebuie doar să aruncați fișierele în folderul de rută, iar modulul de rută al lui Remix le va transforma în căi navigabile. O rută imbricată este o rută conținută în interiorul unei alte rute.
  • Suportă TypeScript și JavaScript: puteți utiliza Remix, indiferent dacă utilizați JavaScript sau TypeScript. Avantajul utilizării TypeScript este că vă permite să declarați variabile și să faceți mai ușor de detectat erorile din timp.
  • Încărcare și stocare în cache a datelor încorporate: acest cadru permite dezvoltatorilor să definească încărcătoare care preiau date din diverse surse. Remix se ocupă de preluarea datelor atât pe partea client, cât și pe server. Mecanismul de stocare în cache oferit de acest cadru facilitează reducerea preluării inutile a datelor și optimizarea solicitărilor ulterioare.
  • Divizarea codului și preluarea prealabilă: puteți împărți codul într-o aplicație Remix în biți mici, încărcați la cerere. Această abordare reduce dimensiunea inițială a pachetului și capacitățile de preîncărcare care încarcă date și cod în fundal.
  Cum să configurați un apel video Skype la care se poate alătura oricine

Beneficiile Remix Framework

  • Full-stack: Majoritatea oamenilor folosesc diferite limbi sau cadre pentru a-și crea părțile client și server ale aplicațiilor. De exemplu, puteți utiliza React pentru front-end și puteți utiliza un cadru Node.js precum ExpressJS pentru backend. În alte cazuri, puteți utiliza un cadru Python precum Django în backend. Remix este un cadru full-stack, ceea ce înseamnă că front-end-ul și back-end-ul dvs. vor fi în aceeași aplicație.
  • Gestionare excelentă a datelor: Remix se bazează pe caracteristicile și convențiile browserului nativ. Fluxul excepțional de date facilitează transmiterea datelor între front-end și back-end al aplicației dumneavoastră.
  • Gestionare ușoară a stării: gestionarea stării în aplicațiile React poate fi o chin, iar majoritatea dezvoltatorilor folosesc biblioteci terță parte, cum ar fi Redux. Remix utilizări încărcătoare pentru a gestiona starea pe partea serverului. Puteți utiliza atributul „useLoaderData” din orice componentă din ruta curentă.
  • Limite de eroare: dacă primiți o eroare într-o rută sau componentă imbricată într-o aplicație Remix, erorile vor fi limitate doar la acea componentă. O astfel de eroare nu va sparge întreaga aplicație, ca în alte cadre. Chiar dacă puteți implementa caracteristica limită de eroare în unele cadre React precum Next.js, această caracteristică este încorporată în Remix.

Cerințe preliminare pentru configurarea unei aplicații Remix

Dacă doriți să configurați o aplicație Remix, acestea sunt câteva dintre lucrurile de care aveți nevoie;

  • Node.js versiunea de la 14.17.0 sau mai mare
  • Un manager de pachete precum npm (7 sau mai mare)
  • Un editor de cod
  • O înțelegere a modului în care funcționează aplicațiile React

Cum se configurează „Hello, World!” pe Remix

Vom crea un proiect simplu și îl vom numi „Remix-app”. Puteți urmări de-a lungul;

  • Navigați la locația în care doriți să vă creați aplicația, deschideți terminalul și rulați această comandă;
npx [email protected] remix-app

Terminalul vă va solicita să răspundeți la câteva întrebări și să vă configurați aplicația. Putem rămâne cu elementele de bază și putem selecta TypeScript ca limbaj.

  • Navigați în aplicația creată (Remix-app) și deschideți-o în editorul de cod preferat. Structura folderului va fi după cum urmează;
  Cum să-ți schimbi numele iPhone-ului pas cu pas [2023]

  • Construiește-ți aplicația folosind această comandă;
npm run build
  • Porniți serverul de dezvoltare folosind această comandă;
npm start

Acum puteți deschide fereastra în browser folosind linkul http://localhost:3000 și aceasta va apărea în browser;

  • Modificați conținutul fișierului app/root.tsx cu următoarele;
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>

  );

}

Pagina redată va fi după cum urmează;

Unde este folosit Remix Framework

La fel ca Next.js și React, Remix poate fi folosit pentru a construi diferite tipuri de aplicații. Acestea sunt unele dintre cele mai bune cazuri de utilizare;

  • Aplicații cu o singură pagină: tot codul dintr-o aplicație Remix este încărcat o dată. Abordarea redată de server permite încărcări inițiale rapide, în timp ce clientul gestionează fără probleme cererile ulterioare.
  • Site-uri web prietenoase cu SEO: Remix folosește caracteristica de pre-rendare pentru a genera pagini HTML statice. Acest lucru face posibilă indexarea site-urilor web chiar dacă aveți de-a face cu conținut dinamic.
  • Site-uri web dinamice: Remix folosește randarea pe server în aplicațiile sale. SSR încarcă paginile pe server înainte de a trimite o pagină HTML către client. Remixul devine astfel o potrivire perfectă pentru site-urile web al căror conținut este generat dinamic.

Cum funcționează cadrul Remix pe partea de server și pe partea clientului

Redare pe partea serverului

Remix vă redă codul în HTML simplu pe partea serverului. Această abordare reduce cantitatea de JavaScript, crescând astfel viteza de încărcare. Remixul utilizează practic funcțiile native „acțiune” și „încărcare”. Serverul va efectua orice acțiuni pe partea de server pe care le furnizați, va afișa codul React simplu și HTML, apoi îl va trimite browserului clientului.

Redare pe partea clientului

Remix, la fel ca Next.js, oferă funcția de „preluare” care oferă utilizatorilor o navigare lină.

În Next.js, componenta permite site-ului nostru să preîncarce o pagină către care redirecționează și nu trebuie să aștepte descărcarea paginii. Cu toate acestea, o astfel de abordare funcționează bine numai cu site-uri web statice.

Remixul folosește funcția Limitări ale remixului

  • Comunitate mică: Remix a fost inițial un cadru plătit. Cu toate acestea, a fost făcut open-source în 2021 și este încă tânăr. Aceasta înseamnă că există resurse și instrumente limitate pentru a face crearea aplicației dvs. o briză.
  • Curbă de învățare mai abruptă: Remix introduce conceptul de rute imbricate și poate fi confuz dacă veniți de la React sau cadrele sale precum Next.js. Cu toate acestea, odată ce obțineți cârligul, utilizarea acestui cadru devine ușoară.
  Cele mai bune instrumente de colaborare pentru documente pentru echipele de la distanță [Notion + 8 Alternatives]

Care este viitorul Remix-ului?

  • Este probabil să vedem o adoptare crescută: Remix este încă tânăr. Este posibil ca dezvoltatorii să nu fi descoperit potențialul său și este probabil să vedem mai multe companii și dezvoltatori care îl folosesc în viitor.
  • Este probabil ca ecosistemul să crească: Remix are încă puține instrumente și biblioteci pentru a-și susține ecosistemul. Ne putem aștepta la mai multe instrumente și biblioteci pe măsură ce adoptarea acesteia crește.
  • Comunitatea va crește: o comunitate este esențială în dezvoltarea unui cadru/limbaj de programare. Ne așteptăm ca comunitatea să crească pe măsură ce dezvoltatorii descoperă bijuteriile lui Remix.

Este Remix mai bun decât Next.js?

Răspunsul la această întrebare va depinde de natura aplicației pe care o creați. Dacă doriți să construiți o aplicație full-stack folosind un singur cadru, Remix va fi mai bun decât Next.js. Cu toate acestea, dacă doriți un cadru matur, cu o mulțime de resurse și o bună urmărire, Next.js va fi alegerea dvs. perfectă.

Este Remix un cadru bun?

Da. Este un cadru bun pentru a vă construi întreaga aplicație full-stack folosind un singur cadru. Este, de asemenea, un cadru minunat dacă doriți o tehnologie cu limite de eroare încorporată. Cu toate acestea, Remix nu este cadrul potrivit dacă doriți un cadru cu o comunitate mare și multe resurse.

Este gata producția Remix JS?

Da. Dacă sunteți familiarizat cu implementarea aplicațiilor Node.js, lucrul cu și implementarea aplicațiilor Remix va fi, de asemenea, ușor.

Ar trebui să învăț Remix sau React?

Remix este un framework React. Prin urmare, trebuie să înțelegeți cum funcționează React înainte de a începe să învățați Remix. Cu toate acestea, dacă timpul tău este limitat și vrei să înveți doar un cadru, alegerea va depinde de obiectivele tale finale.
Remix vă permite să construiți aplicații full-stack. De asemenea, puteți învăța Remix chiar dacă nu înțelegeți React, dar curba de învățare va fi abruptă.
Cu toate acestea, dacă utilizați React, trebuie să utilizați un cadru backend precum Django sau Ruby on Rails dacă doriți o aplicație full-stack. Dacă decideți să învățați React, vă puteți baza pe numeroasele sale resurse și comunitate.

Concluzie

Este încă devreme pentru a determina dacă Remix este viitorul dezvoltării web. Caracteristicile sale uimitoare, cum ar fi rutarea flexibilă, randarea pe server, împărțirea codului și concentrarea pe experiența dezvoltatorului, îl fac un cadru web foarte promițător.

Cu toate acestea, Remix este încă tânăr, iar resursele sale sunt încă limitate. Are și o mică comunitate. Instrumentele și bibliotecile cadrului Remix JS sunt puține, deoarece majoritatea cadrelor open-source depind de suportul comunității și de instrumente terțe.

De asemenea, puteți explora câteva cadre și biblioteci pe care să le cunoașteți în calitate de dezvoltator full-stack.