Τα βασικά του Remix

Πιθανότατα έχετε ακούσει πολλή διαφημιστική εκστρατεία γύρω από ένα από τα νεότερα παιδιά στο πλαίσιο πλαισίου, το Remix. Μπορεί να προκαλεί έκπληξη το γεγονός ότι ξεκίνησε το 2019, αλλά αρχικά ήταν διαθέσιμο μόνο ως πλαίσιο premium βασισμένο σε συνδρομές. Το 2021, οι ιδρυτές συγκέντρωσαν χρηματοδότηση εκκίνησης και δημιούργησαν το πλαίσιο ανοιχτού κώδικα για να επιτρέψουν στους χρήστες να αρχίσουν να χρησιμοποιούν το Remix δωρεάν. Οι πύλες άνοιξαν και όλοι φαίνεται να μιλούν για αυτό, καλοί ή κακοί. Ας βουτήξουμε και ας δούμε μερικά από τα βασικά του Remix.

Το Remix είναι ένα πρώτο πλαίσιο JavaScript "άκρης" διακομιστή. Χρησιμοποιεί το React, τουλάχιστον για τώρα, για τη διεπαφή και δίνει προτεραιότητα στην απόδοση της εφαρμογής από την πλευρά του διακομιστή στην άκρη. Οι πλατφόρμες μπορούν να πάρουν τον κώδικα από την πλευρά του διακομιστή και να τον εκτελέσουν ως λειτουργίες χωρίς διακομιστή ή άκρες καθιστώντας τον φθηνότερο από έναν παραδοσιακό διακομιστή και τοποθετώντας τον πιο κοντά στους χρήστες σας. Οι ιδρυτές του Remix θέλουν να το αποκαλούν πλαίσιο «κεντρικής στοίβας» επειδή προσαρμόζει τα αιτήματα και τις απαντήσεις που γίνονται μεταξύ του διακομιστή και του πελάτη για την πλατφόρμα στην οποία εκτελείται.

Ανάπτυξη Remix

Επειδή το Remix απαιτεί διακομιστή, ας μιλήσουμε για το πώς μπορείτε να το αναπτύξετε. Το Remix δεν παρέχει τον ίδιο τον διακομιστή — φέρνετε τον διακομιστή — επιτρέποντάς του να εκτελείται σε οποιοδήποτε Node.js or Ντένο περιβάλλον, συμπεριλαμβανομένων Netlify Edge και Η πλατφόρμα εφαρμογών της DigitalOcean. Το ίδιο το remix είναι ένα μεταγλωττιστής, ένα πρόγραμμα που μεταφράζει τα αιτήματα για την πλατφόρμα στην οποία εκτελείται. Αυτή η διαδικασία χρησιμοποιεί esbuild για να δημιουργήσετε χειριστές για τα αιτήματα στον διακομιστή. Οι χειριστές HTTP που χρησιμοποιεί είναι χτισμένοι σε Web Fetch API και εκτελούνται στον διακομιστή από προσαρμογή για την πλατφόρμα στην οποία θα αναπτυχθούν.

Remix στοίβες

Οι στοίβες Remix είναι έργα που έχουν μερικά κοινά εργαλεία που είναι προρυθμισμένα για εσάς. Υπάρχουν τρεις επίσημες στοίβες που συντηρούνται από την ομάδα Remix και έχουν όλα τα ονόματα των μουσικών ειδών. Υπάρχει επίσης μια σειρά από στοίβες Remix κοινότητας, συμπεριλαμβανομένων των Στοίβα K-Pop δημιουργήθηκε από την ομάδα Templates στο Netlify. Αυτή η στοίβα είναι ένα εργοστάσιο παραγωγής ενέργειας και περιλαμβάνει ένα Supabase βάση δεδομένων και έλεγχος ταυτότητας, Ανεμος εκ των όπισθεν για styling, Κυπαρίσσι δοκιμή από άκρο σε άκρο, Πιο όμορφο μορφοποίηση κώδικα, ESLint λινάζια, και TypeScript στατική πληκτρολόγηση. Δείτε την ανάρτηση της Tara Manicsic σχετικά με την ανάπτυξη του K-Pop Stack.

Διαδρομές προσωρινής αποθήκευσης

Παρόλο που το Remix απαιτεί διακομιστή, μπορεί να επωφεληθεί από αυτό Jamstack οφέλη από την προσωρινή αποθήκευση διαδρομών. Ένας στατικός ιστότοπος ή δημιουργία στατικού ιστότοπου (SSG) είναι όταν όλο το περιεχόμενό σας αποδίδεται κατά το χρόνο δημιουργίας και παραμένει στατικός μέχρι άλλη μια ανακατασκευή. Το περιεχόμενο έχει δημιουργηθεί εκ των προτέρων και μπορεί να τοποθετηθεί σε ένα CDN. Αυτό παρέχει πολλά οφέλη και γρήγορη φόρτωση ιστότοπου για τον τελικό χρήστη. Ωστόσο, το Remix δεν κάνει τυπικό SSG όπως άλλα δημοφιλή πλαίσια React, συμπεριλαμβανομένων των Next.js και Gatsby. Για να αποκτήσετε μερικά από τα οφέλη του SSG, μπορείτε να χρησιμοποιήσετε το εγγενές Κεφαλίδα HTTP Cache-Control σε ένα Remix λειτουργία κεφαλίδων για προσωρινή αποθήκευση μιας συγκεκριμένης διαδρομής ή απευθείας στο root.tsx αρχείο.

[[headers]]
  for = "/build/*"
  [headers.values]
    "Cache-Control" = "public, max-age=31536000, s-maxage=31536000"

Στη συνέχεια προσθέστε στο δικό σας λειτουργία κεφαλίδων όπου το θέλεις. Αυτό αποθηκεύει προσωρινά για μία ώρα:

export function headers() {
  return {
    "Cache-Control": "public, s-maxage=360",
  };
};

Αναμίξη δρομολόγησης

Πολλά πλαίσια έχουν κλίνει στη δρομολόγηση που βασίζονται σε συστήματα αρχείων. Αυτή είναι μια τεχνική όπου χρησιμοποιείται ένας καθορισμένος φάκελος για τον καθορισμό διαδρομών για την εφαρμογή σας. Συνήθως έχουν ειδική σύνταξη για τη δήλωση δυναμικών διαδρομών και τελικών σημείων. Η μεγαλύτερη διαφορά αυτή τη στιγμή μεταξύ του Remix και άλλων δημοφιλών πλαισίων είναι η δυνατότητα χρήσης ένθετη δρομολόγηση.

Κάθε εφαρμογή Remix ξεκινά με το root.tsx αρχείο. Εδώ αποδίδεται ολόκληρη η βάση της εφαρμογής. Θα βρείτε μερικές από τις κοινές διατάξεις HTML εδώ, όπως το <html> ετικέτα, το <head> ετικέτα, και μετά το <body> ετικέτα με τα στοιχεία που απαιτούνται για την απόδοση της εφαρμογής. Το μόνο πράγμα που πρέπει να επισημανθεί εδώ είναι το <Scripts> Το στοιχείο είναι αυτό που ενεργοποιεί τη JavaScript στον ιστότοπο. κάποια πράγματα θα λειτουργήσουν χωρίς αυτό, αλλά όχι όλα. ο root.tsx Το αρχείο λειτουργεί ως γονική διάταξη για οτιδήποτε βρίσκεται μέσα στο routes κατάλογο, τα πάντα στις διαδρομές αποδίδονται όπου το <Outlet/> συστατικό είναι μέσα root.tsx. Αυτή είναι η βάση της ένθετης δρομολόγησης στο Remix.

Ένθετη δρομολόγηση

Όχι μόνο ιδρύθηκε το Remix από κάποιους από την ομάδα Αντιδράστε το δρομολογητή, Επίσης χρησιμοποιεί React Router. Στην πραγματικότητα, είναι επαναφέροντας μερικά από τα καλά πράγματα του Remix στο React Router. Ένα πολύπλοκο πρόβλημα που προσπαθούν να λύσουν οι συντηρητές του Next.js και του SvelteKit αυτή τη στιγμή είναι η ένθετη δρομολόγηση.

Η ένθετη δρομολόγηση διαφέρει από την παραδοσιακή δρομολόγηση. Όταν μια νέα διαδρομή θα οδηγούσε έναν χρήστη σε μια νέα σελίδα, κάθε ένθετη διαδρομή είναι μια ξεχωριστή ενότητα της ίδιας σελίδας. Επιτρέπει τον διαχωρισμό των ανησυχιών διατηρώντας την επιχειρηματική λογική που σχετίζεται μόνο με τα αρχεία που τη χρειάζονται. Το Remix μπορεί να χειριστεί σφάλματα που έχουν εντοπιστεί μόνο στο τμήμα της σελίδας στο οποίο βρίσκεται η ένθετη διαδρομή. Οι άλλες διαδρομές στη σελίδα εξακολουθούν να μπορούν να χρησιμοποιηθούν και η διαδρομή που χάλασε μπορεί να παρέχει σχετικό πλαίσιο για το σφάλμα χωρίς να διακοπεί ολόκληρη η σελίδα.

Το Remix το κάνει αυτό όταν εισέρχεται ένα αρχείο root app/routes ονομάζεται το ίδιο με έναν κατάλογο αρχείων που θα φορτωθούν μέσα στο βασικό αρχείο. Το αρχείο ρίζας γίνεται α διάταξη για τα αρχεία στον κατάλογο χρησιμοποιώντας ένα <Outlet /> στοιχείο για να πει στο Remix πού να φορτώσει τις άλλες διαδρομές.

Εξάρτημα εξόδου

Η <Outlet /> Το Component είναι ένα σήμα προς το Remix για το πού πρέπει να αποδίδει περιεχόμενο για ένθετες διαδρομές. Τοποθετείται στο αρχείο στη ρίζα του app/routes κατάλογο με το ίδιο όνομα με τις ένθετες διαδρομές. Ο παρακάτω κώδικας μπαίνει σε α app/routes/about.tsx αρχείο και περιλαμβάνει την έξοδο για τα αρχεία μέσα app/routes/about φάκελο:

import { Outlet } from "@remix-run/react";

export default function About() {
  return (
    <>
      <section>
        I am the parent layout. I will be on any page inside of my named directory.
      </section>
      { /* All of my children, the files in the named directory, will go here. */ }
      <Outlet />
    </>
  )
}

Δομή φακέλου

Οποιοδήποτε αρχείο στο app/routes/ κατάλογος γίνεται μια διαδρομή στη διεύθυνση URL του ονόματός του. Ένας κατάλογος μπορεί επίσης να προστεθεί με ένα index.tsx αρχείο.

app/
├── routes/
│   │
│   └── blog
|   |   ├── index.tsx ## The /blog route
│   └── about.tsx  ## The /about route
│   ├── index.tsx  ## The / or home route
└── root.tsx

Εάν μια διαδρομή έχει το ίδιο όνομα με έναν κατάλογο, το αρχείο με το όνομα γίνεται αρχείο διάταξης για τα αρχεία μέσα στον κατάλογο και το αρχείο διάταξης χρειάζεται Εξάρτημα εξόδου για να τοποθετήσετε την ένθετη διαδρομή μέσα.

app/
├── routes/
│   │
│   └── about
│   │   ├── index.tsx
│   ├── about.tsx ## this is a layout for /about/index.tsx
│   ├── index.tsx
└── root.tsx

Οι διατάξεις μπορούν επίσης να δημιουργηθούν με το πρόθεμά τους με διπλή υπογράμμιση (__).

app/
├── routes/
│   │
│   └── about
│   │   ├── index.tsx
│   ├── index.tsx
│   ├── about.tsx
│   ├── __blog.tsx ## this is also a layout
└── root.tsx

https://your-url.com/about θα αποδώσει ακόμα το app/routes/about.tsx αρχείο, αλλά θα αποδώσει επίσης οτιδήποτε υπάρχει app/routes/about/index.tsx όπου η Εξάρτημα εξόδου βρίσκεται στη σήμανση του app/routes/about.tsx.

Δυναμικές διαδρομές

Μια δυναμική διαδρομή είναι μια διαδρομή που αλλάζει με βάση τις πληροφορίες στο url. Αυτό μπορεί να είναι ένα όνομα μιας ανάρτησης ιστολογίου ή ενός αναγνωριστικού πελάτη, αλλά ανεξάρτητα από το τι είναι $ Η σύνταξη που προστίθεται στο μπροστινό μέρος της διαδρομής σηματοδοτεί στο Remix ότι είναι δυναμική. Το όνομα δεν έχει άλλη σημασία εκτός από το $ πρόθεμα.

app/
├── routes/
│   │
│   └── about
│   │   ├── $id.tsx
│   │   ├── index.tsx
│   ├── about.tsx ## this is a layout for /about/index.tsx
│   ├── index.tsx
└── root.tsx

Λάβετε αυτά τα δεδομένα!

Εφόσον το Remix αποδίδει όλα τα δεδομένα του στον διακομιστή, δεν βλέπετε πολλά πράγματα που έχουν γίνει το πρότυπο μιας εφαρμογής React, όπως π.χ. useState() και useEffect() αγκίστρια, σε Remix. Υπάρχει λιγότερη ανάγκη για κατάσταση από την πλευρά του πελάτη, καθώς έχει ήδη αξιολογηθεί στον διακομιστή.

Επίσης, δεν έχει σημασία τι τύπο διακομιστή χρησιμοποιείτε για την ανάκτηση δεδομένων. Εφόσον το Remix βρίσκεται μεταξύ του αιτήματος και της απάντησης και το μεταφράζει κατάλληλα, μπορείτε να χρησιμοποιήσετε το πρότυπο Web Fetch API. Το Remix το κάνει αυτό σε ένα loader Λειτουργήστε αυτό αποκλειστικά εκτελείται στον διακομιστή και χρησιμοποιεί το useLoaderData() γάντζο για την απόδοση των δεδομένων στο στοιχείο. Εδώ είναι ένα παράδειγμα χρησιμοποιώντας το Cat ως υπηρεσία API για να αποδώσετε μια τυχαία εικόνα γάτας.

import { Outlet, useLoaderData } from '@remix-run/react'

export async function loader() {
  const response = await fetch('<https://cataas.com/cat?json=true>')
  const data = await response.json()
  return {
    data
  }
}

export default function AboutLayout() {
  const cat = useLoaderData<typeof loader>()
  return (
    <>
      <img
        src={`https://cataas.com/cat/${cat}`}
        alt="A random cat."
      />
      <Outlet />
    </>
  )
}

Παράμετροι διαδρομής

Σε δυναμικές διαδρομές, οι διαδρομές με πρόθεμα $ πρέπει να έχετε πρόσβαση στην παράμετρο URL για να χειριστείτε τα δεδομένα που πρέπει να αποδοθούν. ο loader η λειτουργία έχει πρόσβαση σε αυτά μέσω α params διαφωνία.

import { useLoaderData } from '@remix-run/react'
import type { LoaderArgs } from '@remix-run/node'

export async function loader({ params }: LoaderArgs) {
  return {
      params
  }
}

export default function AboutLayout() {
  const { params } = useLoaderData<typeof loader>()
  return <p>The url parameter is {params.tag}.</p>
}

Άλλες λειτουργίες Remix

Το Remix έχει μερικές άλλες βοηθητικές λειτουργίες που προσθέτουν επιπλέον λειτουργικότητα σε κανονικά στοιχεία και χαρακτηριστικά HTML στο API της μονάδας διαδρομής. Κάθε διαδρομή μπορεί να ορίσει τις δικές της από αυτούς τους τύπους συναρτήσεων.

Λειτουργία δράσης

An action Η λειτουργία σάς επιτρέπει να προσθέσετε επιπλέον λειτουργικότητα σε μια ενέργεια φόρμας χρησιμοποιώντας τον τυπικό ιστό FormData API.

export async function action({ request }) {
  const body = await request.formData();
  const todo = await fakeCreateTodo({
      title: body.get("title"),
  });
  return redirect(`/todos/${todo.id}`);
}

Λειτουργία κεφαλίδων

Κάθε Τυπικές κεφαλίδες HTTP μπορεί να μπει σε α headers λειτουργία. Επειδή κάθε διαδρομή μπορεί να έχει μια κεφαλίδα, για αποφυγή διενέξεων με ένθετες διαδρομές, τη βαθύτερη διαδρομή — ή τη διεύθυνση URL με τις περισσότερες κάθετες προς τα εμπρός (/) — κερδίζει. Μπορείτε επίσης να περάσετε τις κεφαλίδες, actionHeaders, loaderHeaders, ή parentHeaders

export function headers({
  actionHeaders,
  loaderHeaders,
  parentHeaders,
}) {
  return {
"Cache-Control": loaderHeaders.get("Cache-Control"),
  };
}

Meta λειτουργία

Αυτή η συνάρτηση θα ορίσει τις μετα-ετικέτες για το έγγραφο HTML. Το ένα βρίσκεται στο root.tsx αρχείο από προεπιλογή, αλλά μπορούν να ενημερωθούν για κάθε διαδρομή.

export function meta() {
  return {
    title: "Your page title",
    description: "A new description for each route.",
  };
};

Λειτουργία συνδέσμων

HTML link στοιχεία ζουν στο <head> ετικέτα ενός εγγράφου HTML και εισάγουν CSS, μεταξύ άλλων. ο links λειτουργία, δεν πρέπει να συγχέεται με το <Link /> συστατικό, σας επιτρέπει να εισάγετε μόνο πράγματα στις διαδρομές που τα χρειάζονται. Έτσι, για παράδειγμα, τα αρχεία CSS μπορούν να τεθούν σε εύρος και να εισαχθούν μόνο στις διαδρομές που χρειάζονται αυτά τα συγκεκριμένα αρχεία. ο link στοιχεία επιστρέφονται από α links() λειτουργεί ως συστοιχία αντικειμένων και μπορεί είτε να είναι α HtmlLinkDescriptor από το link API ή ένα PageLinkDescriptor που μπορεί να ανακτήσει εκ των προτέρων τα δεδομένα για μια σελίδα.

export function links() {
  return [
    // add a favicon
    {
      rel: "icon",
      href: "/favicon.png",
      type: "image/png",
    },
    // add an external stylesheet
    {
      rel: "stylesheet",
      href: "<https://example.com/some/styles.css>",
      crossOrigin: "true",
    },
    // add a local stylesheet,
    { rel: "stylesheet", href: stylesHref },

    // prefetch a page's data
    { page: "/about/community" }
  ]
}

Σύνδεση μεταξύ διαδρομών

Το Remix παρέχει ένα στοιχείο για μετάβαση μεταξύ των διαφορετικών διαδρομών στην εφαρμογή σας που ονομάζεται <Link/>. Για να λάβετε δρομολόγηση από την πλευρά του πελάτη, χρησιμοποιήστε το <Link to="">Name</Link> συστατικό αντί για <a href="">Name</a>. ο <Link /> συστατικό παίρνει επίσης ένα στήριγμα prefetch με δέχεται none από προεπιλογή, intent για να λάβετε εκ των προτέρων τα δεδομένα εάν το Remix εντοπίσει ότι ο χρήστης αιωρείται ή εστιάζει τη σύνδεση ή render που θα ανακτήσει τα δεδομένα της διαδρομής μόλις αποδοθεί ο σύνδεσμος.

import { Link } from "@remix-run/react";

export default function Nav() {
  return (
    <nav>
      <Link to="/">Home</Link>{" "}
      <Link to="/about">About</Link>{" "}
      <Link to="/about/community" prefetch="intent">Community</Link>
    </nav>
  );
}

Τα επόμενα βήματα

Τώρα ξέρετε τα βασικά του Remix και είστε έτοιμοι να ξεκινήσετε τη δημιουργία εφαρμογών, σωστά; Το Remix παρέχει α Εφαρμογή ανέκδοτα και σε έναν Εκμάθηση ιστολογίου για να ξεκινήσετε να εφαρμόζετε αυτές τις βασικές γνώσεις. Μπορείτε επίσης να ξεκινήσετε από την αρχή και να δημιουργήσετε μια ολοκαίνουργια εφαρμογή Remix. Ή αν είστε έτοιμοι να βουτήξετε, δώστε το Στοίβα K-Pop μια δοκιμή. Μου άρεσε πραγματικά ο χρόνος μου με το Remix και μου αρέσει η εστίαση στα πρότυπα ιστού και η επαναφορά του στα βασικά. Τώρα είναι η σειρά σας να αρχίσετε να δημιουργείτε!