היסודות של Remix PlatoBlockchain Data Intelligence. חיפוש אנכי. איי.

היסודות של רמיקס

חותמת זמן: 13 בספטמבר 2022 8:59

בטח שמעתם הרבה הייפ סביב אחד הילדים החדשים ביותר בבלוק המסגרת, Remix. זה אולי מפתיע שזה התחיל כבר ב-2019, אבל במקור זה היה זמין רק כמסגרת פרימיום מבוססת מנוי. בשנת 2021, המייסדים גייסו מימון ראשוני ומקור פתוח למסגרת כדי לאפשר למשתמשים להתחיל להשתמש ברמיקס בחינם. שערי ההצפה נפתחו ונראה שכולם מדברים על זה, טוב או רע. בואו נצלול פנימה ונסתכל על כמה מהיסודות של רמיקס.

Remix הוא מסגרת JavaScript הראשונה של שרת "קצה". זה משתמש ב-React, לפחות לעת עתה, עבור הקצה הקדמי ומתעדף את עיבוד האפליקציה בצד השרת על הקצה. פלטפורמות יכולות לקחת את הקוד בצד השרת ולהפעיל אותו בתור פונקציות ללא שרת או קצה מה שהופך אותו לזול יותר משרת מסורתי ומקרב אותו למשתמשים שלך. מייסדי ה-Remix אוהבים לקרוא לזה מסגרת "מרכז מחסנית" מכיוון שהיא מתאימה את הבקשות והתגובות שנעשות בין השרת ללקוח לפלטפורמה שבה הוא מופעל.

היסודות של רמיקס

פריסת רמיקס

מכיוון ש-Remix דורש שרת, בוא נדבר על איך אתה יכול לפרוס אותו. Remix לא מספק את השרת עצמו - אתה מביא את השרת - מה שמאפשר להפעיל אותו בכל Node.js or Deno סביבה, כולל Netlify Edge ו פלטפורמת האפליקציות של DigitalOcean. הרמיקס עצמו הוא א מַהְדֵר, תוכנית שמתרגמת את הבקשות לפלטפורמה שהיא פועלת עליה. תהליך זה משתמש esbuild כדי ליצור מטפלים עבור הבקשות לשרת. מטפלי ה-HTTP שבהם הוא משתמש בנויים על API של אחזור אינטרנט ומופעלים בשרת על ידי מסתגל אותם עבור הפלטפורמה שבה הם ייפרסו.

ערימות רמיקס

ערימות רמיקס הן פרויקטים שיש להם כמה כלים נפוצים שמגיעים מוגדרים מראש עבורך. יש שלוש ערימות רשמיות שמתוחזקים על ידי צוות הרמיקס וכולם נקראים על שם ז'אנרים מוזיקליים. יש גם מספר ערימות רמיקס קהילתיות כולל מחסנית K-Pop נוצר על ידי צוות התבניות ב-Netlify. מחסנית זו היא תחנת כוח וכוללת א Supabase מסד נתונים ואימות, רוח גבית לסטיילינג, ברוש בדיקות מקצה לקצה, יפה יותר עיצוב קוד, ESLint מוך, ו הקלד הקלדה סטטית. בדוק את הפוסט של Tara Manicsic על פריסת מחסנית K-Pop.

מסלולי שמירה במטמון

למרות ש-Remix דורש שרת, הוא עדיין יכול לנצל את ג'מסטאק יתרונות על ידי שמירה במטמון. אתר סטטי או יצירת אתר סטטי (SSG) הוא כאשר כל התוכן שלך מעובד בזמן הבנייה ונשאר סטטי עד לבנייה מחדש נוספת. התוכן נוצר מראש וניתן לשים אותו ב-CDN. זה מספק יתרונות רבים וטעינת אתרים מהירה עבור משתמש הקצה. עם זאת, Remix לא עושה SSG טיפוסי כמו מסגרות React פופולריות אחרות, כולל Next.js ו-Gatsby. כדי לקבל חלק מהיתרונות של SSG, אתה יכול להשתמש במקור כותרת HTTP של Cache-Control ברמיקס פונקציית כותרות כדי לשמור מסלול מסוים או ישירות ב- 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 הוקם על ידי חלק מהצוות מ תגובת נתב, זה גם שימושים נתב תגובה. למעשה, הם כן מחזיר כמה מהדברים הטובים ברמיקס ל-React Router. בעיה מורכבת שהתחזוקה של Next.js ו-SvelteKit מנסים לפתור כרגע היא ניתוב מקונן.

ניתוב מקונן שונה מניתוב מסורתי. כאשר מסלול חדש ייקח משתמש לדף חדש, כל מסלול מקונן הוא קטע נפרד של אותו דף. היא מאפשרת הפרדת חששות על ידי שמירה על ההיגיון העסקי הקשור רק לקבצים שזקוקים לכך. Remix מסוגל לטפל בשגיאות הממוקמות רק לקטע של הדף שבו נמצא המסלול המקונן. המסלולים האחרים בדף עדיין ניתנים לשימוש והמסלול שנשבר יכול לספק הקשר רלוונטי לשגיאה מבלי שהדף כולו יקרוס.

Remix עושה זאת כאשר נכנס קובץ שורש app/routes נקרא כמו ספריית קבצים שתיטען בתוך קובץ הבסיס. קובץ השורש הופך ל- a פריסה עבור הקבצים בספריה באמצעות <Outlet /> רכיב כדי לומר לרמיקס היכן לטעון את המסלולים האחרים.

רכיב יציאה

אל האני <Outlet /> הרכיב הוא אות לרמיקס היכן הוא צריך להציג תוכן עבור מסלולים מקוננים. זה מוכנס לקובץ בשורש ה- app/routes ספרייה עם שם זהה למסלולים המקוננים. הקוד הבא נכנס ל-a 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 של שמה. ניתן להוסיף ספרייה גם עם an 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.

מסלולים דינמיים

מסלול דינמי הוא מסלול המשתנה בהתאם למידע בכתובת האתר. זה יכול להיות שם של פוסט בבלוג או מזהה לקוח, אבל לא משנה מה זה $ תחביר שנוסף לקדמת המסלול מסמן לרמיקס שהוא דינמי. השם לא משנה מלבד ה $ קידומת.

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 יושב בין הבקשה לתגובה ומתרגם אותה כראוי, אתה יכול להשתמש בתקן API של אחזור אינטרנט. רמיקס עושה זאת ב-a loader לתפקד כי רק פועל על השרת ומשתמש ב- useLoaderData() Hook כדי להציג את הנתונים ברכיב. הנה דוגמה באמצעות ה API של Cat as a Service כדי להציג תמונת חתול אקראית.

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 />
    </>
  )
}

פרמטרים של מסלול

במסלולים דינמיים, מסלולים עם קידומת $ צריך להיות מסוגל לגשת לפרמטר כתובת האתר כדי לטפל בנתונים שיש לעבד. ה loader לפונקציה יש גישה אליהם דרך a 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>
}

פונקציות רמיקס אחרות

לרמיקס יש כמה פונקציות עוזר נוספות המוסיפות פונקציונליות נוספת לרכיבי 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"),
  };
}

פונקציית מטא

פונקציה זו תגדיר את המטא תגים עבור מסמך ה-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 חדשה לגמרי. או אם אתה מוכן לצלול פנימה, תן את מחסנית K-Pop ניסיון. נהניתי מאוד מהזמן שלי עם רמיקס ואוהב את ההתמקדות בתקני אינטרנט ולהחזיר אותו ליסודות. עכשיו תורכם להתחיל ליצור!

בול זמן:

עוד מ טריקים של CSS