أساسيات Remix PlatoBlockchain Data Intelligence. البحث العمودي. عاي.

أساسيات ريمكس

الطابع الزمني: 13 سبتمبر 2022 8:59 صباحًا

ربما سمعت الكثير من الضجيج حول واحد من أحدث الأطفال في كتلة الإطار ، ريميكس. قد يكون من المفاجئ أن تكون قد بدأت في عام 2019 ، لكنها كانت متاحة في الأصل فقط كإطار عمل مميز قائم على الاشتراك. في عام 2021 ، جمع المؤسسون التمويل الأولي وفتحوا إطار العمل للسماح للمستخدمين بالبدء في استخدام Remix مجانًا. انفتحت البوابات ويبدو أن الجميع يتحدث عنها ، سواء أكان ذلك جيدًا أم سيئًا. دعنا نتعمق ونلقي نظرة على بعض أساسيات Remix.

Remix هو أول إطار عمل JavaScript للخادم "edge". يستخدم React ، على الأقل لغاية الآن، للواجهة الأمامية ويعطي الأولوية لتقديم التطبيق من جانب الخادم على الحافة. يمكن للمنصات أن تأخذ الكود من جانب الخادم وتقوم بتشغيله كملف وظائف بدون خادم أو حافة جعله أرخص من الخادم التقليدي وجعله أقرب إلى المستخدمين. يحب مؤسسو Remix تسمية إطار عمل "المكدس المركزي" لأنه يكيّف الطلبات والاستجابات التي تتم بين الخادم والعميل للنظام الأساسي الذي يتم تشغيله عليه.

أساسيات ريمكس

نشر ريمكس

نظرًا لأن Remix يتطلب خادمًا ، فلنتحدث عن كيفية نشره. لا يوفر Remix الخادم نفسه - فأنت تقوم بإحضار الخادم - مما يسمح بتشغيله في أي مكان نود.جي إس or دينو البيئة ، بما في ذلك Netlify الحافة و منصة تطبيقات DigitalOcean. ريمكس نفسه هو ملف مترجم، وهو برنامج يترجم طلبات النظام الأساسي الذي يعمل عليه. تستخدم هذه العملية esbuild لإنشاء معالجات للطلبات إلى الخادم. معالجات HTTP التي تستخدمها مبنية على ملف واجهة برمجة تطبيقات جلب الويب ويتم تشغيلها على الخادم بواسطة التكيف لهم من أجل النظام الأساسي الذي سيتم نشرهم فيه.

مكدسات ريمكس

مكدسات ريمكس هي مشاريع تحتوي على بعض الأدوات الشائعة التي يتم تكوينها مسبقًا من أجلك. هناك ثلاث مجموعات رسمية التي يحتفظ بها فريق Remix وتم تسميتها جميعًا على اسم الأنواع الموسيقية. هناك أيضًا عدد من مجموعات Remix المجتمعية بما في ذلك كيبوب ستاك تم إنشاؤه بواسطة فريق القوالب في Netlify. هذا المكدس هو مركز قوة ويتضمن ملف سوباباس قاعدة البيانات والمصادقة ، الريح الخلفية للتصميم ، شجر السرو اختبار شامل أجمل تنسيق الكود ESLint linting و نسخة مطبوعة على الآلة الكاتبة كتابة ثابتة. ألق نظرة على منشور تارا مانيكسك حول نشر الكيبوب ستاك.

طرق التخزين المؤقت

على الرغم من أن Remix يتطلب خادمًا ، إلا أنه لا يزال بإمكانه الاستفادة من جامستاك الفوائد عن طريق طرق التخزين المؤقت. إنشاء موقع ثابت أو موقع ثابت (SSG) هو عندما يتم عرض كل المحتوى الخاص بك في وقت الإنشاء ويبقى ساكن حتى إعادة بناء آخر. تم إنشاء المحتوى مسبقًا ويمكن وضعه على CDN. يوفر هذا العديد من الفوائد وتحميل الموقع السريع للمستخدم النهائي. ومع ذلك ، لا يقوم Remix بعمل SSG نموذجي مثل أطر React الشائعة الأخرى ، بما في ذلك Next.js و Gatsby. للحصول على بعض فوائد SSG ، يمكنك استخدام اللغة الأصلية رأس HTTP التحكم في ذاكرة التخزين المؤقت في ريمكس الرؤوس للتخزين المؤقت لمسار معين أو مباشرة في 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 فقط من قبل بعض الفريق من رد فعل راوترهذا ايضا يستخدم رد فعل راوتر. في الحقيقة هم كذلك إعادة بعض الأشياء الجيدة حول Remix إلى React Router. المشكلة المعقدة التي يحاول مشرفو Next.js و SvelteKit حلها الآن هي التوجيه المتداخل.

التوجيه المتداخل يختلف عن التوجيه التقليدي. عندما يأخذ المسار الجديد المستخدم إلى صفحة جديدة ، يكون كل مسار متداخل قسمًا منفصلاً من نفس الصفحة. يسمح بفصل الاهتمامات عن طريق الحفاظ على منطق الأعمال مرتبطًا فقط بالملفات التي تحتاجها. يمكن لـ Remix معالجة الأخطاء المترجمة إلى قسم الصفحة الذي يوجد به المسار المتداخل فقط. لا تزال المسارات الأخرى على الصفحة قابلة للاستخدام ويمكن أن يوفر المسار الذي تم قطعه سياقًا ذا صلة بالخطأ دون تعطل الصفحة بأكملها.

يقوم Remix بهذا عندما يكون ملف الجذر بتنسيق app/routes يسمى نفس دليل الملفات التي سيتم تحميلها داخل الملف الأساسي. يصبح الملف الجذر ملف نسق للملفات الموجودة في الدليل باستخدام امتداد <Outlet /> مكون لإخبار Remix بمكان تحميل المسارات الأخرى.

مكون المخرج

• <Outlet /> المكون هو إشارة إلى 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 يقع بين الطلب والاستجابة ويترجمه بشكل مناسب ، يمكنك استخدام المعيار واجهة برمجة تطبيقات جلب الويب. ريمكس يفعل هذا في ملف 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 على بعض الوظائف المساعدة الأخرى التي تضيف وظائف إضافية إلى عناصر وسمات HTML العادية في ملف API وحدة الطريق. يمكن لكل مسار تحديد نوع خاص به من هذه الوظائف.

وظيفة العمل

An action تتيح لك الوظيفة إضافة وظائف إضافية إلى إجراء نموذج باستخدام الويب القياسي واجهة برمجة تطبيقات FormData.

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 جديد تمامًا. أو إذا كنت مستعدًا للغطس ، فامنح كيبوب ستاك محاولة. لقد استمتعت حقًا بوقتي مع Remix وأحب التركيز على معايير الويب وإعادتها إلى الأساسيات. الآن حان دورك لبدء الإنشاء!

الطابع الزمني:

اكثر من الخدع المغلق