مكونات السحابة في TeleportHQ

نود اليوم أن نخصص بعض الوقت للتحدث معكم عن ميزة جديدة أضفناها إلى TeleportHQ: مكوّنات السحابة.

مقدمة إلى مكوّنات السحابة#

تتيح لك ميزة مكوّنات السحابة استيراد المكوّنات التي أنشأتها بصريًا في TeleportHQ إلى بيئات تطوير أخرى، وكذلك إلى مشاريع TeleportHQ أخرى. هذه المكوّنات متوافقة مع React وNext.js ، وتعمل من خلال استيرادها مباشرةً من شبكة توصيل المحتوى (CDN) بدلًا من استخدام مدير حزم تقليدي.

دعونا نستعرض بعض التفاصيل والعمل الذي أتاح إنشاء هذه الميزة.

وحدات ES#

كل وحدة هي جزء من التعليمات البرمجية يُنفَّذ عند تحميله.

exploringjs.com
es-modules-a-cartoon-deep-dive
es-modules-in-browsers
using-es-modules

دعم المتصفحات#

توفر المتصفحات الرئيسية مستوى أساسيًا من الدعم لـ es-modules، ويبلغ دعم هذه الوحدات 94.45%.

لا تزال بعض الميزات وصيغ اللغة، مثل الاستيراد الديناميكي و خرائط الاستيراد ، غير مدعومة بالكامل بعد. يمكننا حل هذه المشكلة باستخدام طبقات التوافق. يمكن العثور على مزيد من المعلومات حول طبقات التوافق هنا

caniuse.com/es6-module

es-module-shims

الوحدات البرمجية عبر Node.js مقابل شبكة توصيل المحتوى#

• يمكن تخزين الوحدات البرمجية مؤقتًا بشكل مستقل، مما يحسّن أوقات التحميل في الزيارات اللاحقة.
• تُقدَّم كل وحدة برمجية إلى المستخدمين بشكل منفصل باستخدام شبكة توصيل المحتوى.
• تُجرى عملية تحويل وحدات المورّدين البرمجية وإضافة الحشوات البرمجية إليها وتحسينها مسبقًا.

لدينا عدد من المزوّدين الذين يقدّمون جميع الحزم من npm

JSPM, skypack, esm.sh deno.land.

يحوّل مزوّدو شبكات توصيل الوحدات البرمجية هذه الحزم، ويحوّلونها إلى esm عند الحاجة (في حالة cjs). ويقدّمون هذه الوحدات البرمجية ليتمكن المستخدمون من استخدامها مباشرةً في المتصفحات، مع تحسينات الإنتاج.

في نمط تطوير node_modules قياسي، نحتاج إلى إعداد أدوات التجميع لتحويل الشيفرة وإضافة الحشوات البرمجية أو حتى توفير إمكانية التشغيل البيني.

يحدث هذا في كل مرة نبني فيها مشاريعنا. تخيّل الوقت الذي يمكن للمستخدمين توفيره خلال التطوير بتجاوز هذه الخطوات، والوقت الذي يمكن توفيره ضمن مسارات التكامل المستمر.

المزيد عن شبكات توصيل المحتوى في صفحاتها المخصصة

دلالات وحدات CDN في jspm
مرجع واجهة برمجة التطبيقات لشبكة Skypack CDN

وحدات ES من استوديو TeleportHQ#

في TeleportHQ، نبحث هذا الموضوع بين الحين والآخر منذ فترة. ومع مستوى دعم المتصفحات الحالي وبدء أدوات التجميع بتبنّي هذه الأساليب، أصبح هذا الخيار الأنسب.

تشمل بعض تجاربنا السابقة

• تقديم المكوّنات من الاستوديو بصفتها npm حزمًا قابلة للتثبيت.
• وإنشاء نسخة مرآة لـ npm لتحويل جميع الحزم وتقديمها إلى esm. يمكنك العثور على مزيد من التفاصيل هنا

تستخدم الوحدات في TeleportHQ المحددات العارية للوحدات لاستيراد الحزم. يمنح ذلك المستخدمين النهائيين إمكانية تحديد مصدر تقديم external-dependencies ، بحيث لا تحمّل هذه الوحدات في أي لحظة سوى التعليمات البرمجية المُنشأة من studio و code-generators. يساعد ذلك المستخدمين على الشحن بثقة وأمان، إذ يمكنهم اختيار مصدر تحميل التبعيات الخارجية.

يمكنك أيضًا تقديم التبعيات الخارجية باستخدام node_modules و cdn . تعرّف على المزيد عنها في مسارات العمل.

سير العمل#

هناك 3 أنواع مختلفة من سير العمل يمكن للمستخدمين الاختيار من بينها عند استخدام وحدات TeleportHQ.

• NextJS مع استيراد عناوين URL
• خرائط الاستيراد
• Webpack مع buildHttp

تحسينات من الاستوديو#

جميع الوحدات هي:

• محوّلة.
• مرتبطة ببعضها البعض.
• مُقدَّمة عبر شبكة توصيل محتوى عالمية.
• الإصدار مقفل.

عندما تكون الوحدات متداخلة، لا نضمّنها في حزمة. بدلًا من ذلك، نربط الوحدات باستخدام imports.

ينقسم كل مشروع بشكل أساسي إلى ثلاث فئات إذا كانت الوحدات

• الأنماط
• المتغيرات العامة والخطوط
• المكوّنات

الأنماط#

في studio يمكننا تعريف الأنماط بطرق متعددة، فئات CSS, الطباعة و رموز التصميم و رموز التخطيط. تُدمج كل هذه العناصر في es-module باسم «الأنماط». وفي كل مرة تتغير فيها الوحدة، تُسجَّل التغييرات كإصدار جديد.

Copyimport {
  projectStyleVariants,
  TOKENS,
} from 'https://jscdn.teleporthq.io/new-project-dqpb/style.js@35ff99074a6491e551432d47881ebdce23a21cef'

تُدار جميع الأنماط باستخدام styled-components و styled-system. لكن سيتمكن المستخدمون أيضًا من إنشاء وحدات باستخدام react-jss في الأيام القادمة.

تُصدّر وحدة الأنماط TOKENS و projectStyleVariants. يمكن استخدام وحدة styles بشكل مستقل داخل أي مشروع. وبذلك، يمكن للمستخدمين الحفاظ على رموز التصميم الخاصة بهم بما يتوافق بدرجة أكبر مع التصميم داخل الاستوديو.

المتغيرات العامة والخطوط#

في الاستوديو، يمكن للمستخدمين تعريف المتغيرات العامة مثل الخطوط و تحسين محركات البحث. صُمم الاستوديو لمساعدة المستخدمين على إنشاء مشاريع متكاملة. تُجرَّد جميع globals التي نستخدمها في المشروع ضمن globals وحدة.

Copyimport Globals from 'https://jscdn.teleporthq.io/new-project-dqpb/globals.js@646826692c3ac0769586600c4719b2024c8a399a'

ترث جميع المكوّنات Globals في كل مرة تُنشأ فيها وحدة. ويبدو المكوّن النموذجي كما يلي

Copyimport React from 'react'
import Globals from 'https://jscdn.teleporthq.io/new-project-dqpb/globals.js@646826692c3ac0769586600c4719b2024c8a399a';

const App = () =>. {
    return (
        <Fragment>
            <Globals />
            {/* ... */}
        </Fragment>    
    )
}

المكوّنات#

يُنشأ كل مكوّن في الاستوديو بصورة مستقلة ضمن وحدة. وترتبط المكوّنات بعضها ببعض بحسب طريقة الاستخدام.

يساعد تقسيم الوحدات بصورة مستقلة على تحسين الأداء. أولاً، لا يتكرر محتوى الوحدة.

ثانيًا، عند استخدام الوحدة أكثر من مرة، تُقدَّم من ذاكرة التخزين المؤقت.

يمكن استيراد الوحدات عدة مرات، لكنها لا تُنفَّذ إلا مرة واحدة.

Copyimport Header from 'https://jscdn.teleporthq.io/new-project-dqpb/header.js@aa99dd13a8c20277795a17204d2f6dfba52e0737'

لا يتغير إصدار الوحدة إلا عند تغيير المكوّن أو أي وحدة يعتمد عليها المكوّن.

يتغير @version الوحدة عندما تتغير المتغيرات العامة, والأنماط أو المكوّن نفسه.

الأصول#

في الاستوديو، يمكننا استخدام الوسائط المتعددة أثناء تصميم مكوناتنا. كما تُقدَّم الأصول المستخدمة عبر شبكة توصيل المحتوى (CDN).

خرائط المصدر#

يمكنك الحصول على خريطة مصدر لأي وحدة بتغيير الامتداد في نهاية الملف.

Copyhttps://jscdn.teleporthq.io/new-project-dqpb/header.map@aa99dd13a8c20277795a17204d2f6dfba52e0737

الأطر ونكهات المكونات#

أثناء تصميم المكونات في الاستوديو، يمكن للمستخدمين استخدام routeLinks, seo-tags والعديد من الميزات المعتمدة على الأطر. ولدعم ذلك، نتيح للمستخدمين اختيار البيئة المستهدفة التي تستخدم فيها الوحدات. وكما هو الحال في معظم تطبيقات cient-side React، نستخدم react-router ، وبالنسبة إلى NextJS نستخدم next/link. وينطبق الأمر نفسه على react-helmet مقابل next/head.

هذه الـ es-modules تُنشأ باستخدام مولدات الشيفرة الخاصة بنا open-source . وهي متاحة على GitHub. ونخطط لتوفير الدعم نفسه لأطر أخرى، وحتى لمجموعات style-flavour المختلفة، مثل React + React-JSS, Next + React-JSS وغيرها.

المكونات السحابية وخرائط الاستيراد#

مع ظهور وحدات ES، أصبح بإمكاننا الآن تنظيم الشيفرة حسب الوحدة واستيراد أي وحدات عند الحاجة، كما أصبح لدينا تحكم أكبر في الوحدات التي تُحمّل أثناء التشغيل باستخدام عمليات الاستيراد الديناميكي.

تذكّر الأيام الخوالي، حين كنا نحمّل JavaScript إلى المتصفح باستخدام وسم script. وكان تحكمنا محدودًا جدًا في ترتيب التحميل، وكانت السكريبتات تعتمد بعضها على بعض. لذلك، أصبح ترتيبها بالشكل الصحيح جزءًا كبيرًا من تطوير JavaScript.

ثم جاء ظهور حِزَم الوحدات وأدوات تشغيل المهام لتولّي هذا العمل اليدوي. وتوفّر خرائط الاستيراد طريقة رائعة لتطوير التطبيقات دون الحاجة إلى إعداد حزمة كاملة ومحلّل للوحدات. كما تتيح للمستخدمين استخدام «مُحدِّدات الوحدات المجردة» مباشرةً، ما يعني أن بإمكانهم كتابة

Copyimport { useState } from 'react'

وسيتولى خريطة الاستيراد حلّ مرجع React باستخدام المصدر المحدد فيها.

في إعلاننا عن وحدات ES من مكوّنات السحابة من TeleportHQ. يمكنك استخدام جميع components, styles و tokens كوحدات مستقلة. وبما أن وحدات TeleportHQ تستخدم «مُحدِّدات الوحدات المجردة»، نحتاج إلى استخدام خريطة استيراد لإخبار المتصفح بالمكان الذي ينبغي أن يبحث فيه عن التبعيات الخارجية.

وحدات ES دون مُحدِّدات الوحدات المجردة#

لنحمّل الوحدة react-dom من skypack. يمكننا ملاحظة أن تبعيات الحزمة external تُستورد هي الأخرى باستخدام عناوين URL.

Copy<iframe height="300" style="width: 100%;" scrolling="no" title="Skypack Example" src="https://codepen.io/jkrishna/embed/preview/vYWEPZQ?default-tab=js" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/jkrishna/pen/vYWEPZQ">
  Skypack Example</a> by Jaya Krishna (<a href="https://codepen.io/jkrishna">@jkrishna</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

يمكنك ملاحظة أن حزمة react-dom تستخدم بدورها object-assign و scheduler داخليًا، وتحمّلها من عناوين URL فريدة أخرى محددة مسبقًا.

Copyjs
import aa from "/-/react@v17.0.1-yH0aYV1FOvoIPeKBbHxg/dist=es2020,mode=imports/optimized/react.js";
import m from "/-/object-assign@v4.1.1-LbCnB3r2y2yFmhmiCfPn/dist=es2020,mode=imports/optimized/object-assign.js";
import r from "/-/scheduler@v0.20.2-PAU9F1YosUNPKr7V4s0j/dist=es2020,mode=imports/optimized/scheduler.js";

وحدة من TeleportHQ#

تجمع الوحدات من TeleportHQ بين bare-module-specifiers وعناوين URL فريدة محددة مسبقًا. وبذلك، يمكن للمستخدمين تولّي تحميل التبعيات، بينما تُحمّل تلقائيًا جميع الوحدات التابعة لـ studio .

تتضمن مكوّنات السحابة عادةً عمليات الاستيراد التالية.

Copyjsx
import React from 'react';
import { variant } from 'styled-system';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import Globals from 'https://jscdn.teleporthq.io/new-project-dqpb/globals.js@646826692c3ac0769586600c4719b2024c8a399a';
import { projectStyleVariants, TOKENS } from 'https://jscdn.teleporthq.io/new-project-dqpb/style.js@35ff99074a6491e551432d47881ebdce23a21cef';

يمكننا إنشاء خريطة استيراد باستخدام jspm المتاح عبر الإنترنت، أو باستخدام حزمة npm . generator.jspm.io

يمكنك إدخال جميع التبعيات التي تستخدمها. في حالتنا، react, react-dom, styled-components و prop-types و styled-system. يمكنك استخدام هذا الرابط، إذ يحمّل المُولّد هذه الوحدات وينشئ خريطة استيراد.

generator.jspm.io

إليك قالبًا مُعدًّا مسبقًا للاستخدام.

Copy<iframe height="500" style="width: 100%;" scrolling="no" title="teleportHQ - jspm - template" src="https://codepen.io/jkrishna/embed/VwMaWaN?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/jkrishna/pen/VwMaWaN">
  teleportHQ - jspm - template</a> by Jaya Krishna (<a href="https://codepen.io/jkrishna">@jkrishna</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

قوالب من Codesandbox وCodepen.#

Codepen
Codesandbox

يمكنك معرفة المزيد عن خرائط الاستيراد على:

• import-maps-the-basic-idea
• import-map-cdn
• esm-specifiers-import-maps

مكوّنات سحابية باستخدام Next.JS#

إذا كنت جديدًا على مكوّنات السحابة، فننصحك بالاطّلاع على منشورنا السريع عنها. لن يستغرق قراءته وقتًا طويلًا، ويمكنك العثور عليه هنا

استيراد عناوين URL باستخدام Next.JS#

تفضّل TeleportHQ استخدام Next JS منذ انطلاقها، لما يوفّره من سهولة في التطوير والنشر وقابلية التوسّع، بفضل إطار عمل فائق القوة يستخدم React.

في v@12 ، قدّم Next-JS ميزة جديدة تُسمّى urlImports لتحميل وحدات JS من مصادر بعيدة. ويمكن لهذه الميزة الاستغناء تمامًا عن خطوة تجميع وحدات JS وتحويلها في كل مرة. إذ يمكننا تحميل وحدة من شبكة توصيل محتوى واستخدامها مباشرةً ضمن مشاريعنا.

استيراد عناوين URL + TeleportHQ#

يمكنك إنشاء رابط فريد لوحدة برمجية بالنقر بزر الفأرة الأيمن على أي مكوّن في قائمة المكوّنات داخل الاستوديو. ويمكن استخدام الوحدة مباشرةً في أي مشروع Next-JS.

Copyjsx
import Card from 'https://jscdn.teleporthq.io/new-project-68d4/card.js@be57bcf81f65fd2541ccd1a2e69a02b3e4c88a84'

const App = () => {
    return (
    <div>
       <Card />
    </div>
  )
}

export default App

لتهيئة مشاريعك لاستخدام المكوّنات من TeleportHQ، يمكنك زيارة https://github.com/teleporthq/nextjs-http واستخدام القالب لبدء مشاريع جديدة.

Copynpx degit https://github.com/teleporthq/nextjs-http

تهيئة المشاريع الحالية#

لتهيئة أي مشروع NextJS قائم، يجب ألا يقل إصدار NextJS لديك عن الإصدار 12.

افتح ملف next.config.js، وأضف https://jscdn.teleporthq.io إلى قسم urlImports . يتيح ذلك لـ Next-JS استيراد الوحدات من نطاقات محددة فقط، ويمنع تنفيذ JS من أي نطاقات غير معروفة. يمكنك قراءة المزيد حول ذلك في url-imports-security-model.

Copyjs
module.exports = {
  reactStrictMode: true,
  experimental: {
    urlImports: ['https://jscdn.teleporthq.io']
  }
}

أضف الآن styled-components و styled-system إلى مشروعك. ويمكن القيام بذلك باستخدام

Copybash
npm install styled-components styled-system

تستخدم الوحدات من TeleportHQ هاتين الحزمتين لتعريف التنسيق ومتغيراته ورموز التصميم في المشروع. كما تستخدم جميع الاستيرادات للوحدات الخارجية محددات الوحدات الأساسية. لذا، يمكن للمستخدمين تقديم هذه التبعيات بالطريقة التي يفضلونها.

بعد ذلك، عليك تعديل next.config.jsنا. نحتاج إلى إعداد اسم مستعار في next.config.js لاستخدام الإصدار esm من styled-components. لمزيد من المعلومات حول هذه الخطوة، يمكنك الاطلاع هنا.

بعد إجراء التغييرات، سيبدو ملف next.config.js لديك شبيهًا بهذا.

Copyjs
module.exports = {
  reactStrictMode: true,
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      'styled-components': require.resolve('./node_modules/styled-components/dist/styled-components.esm.js'),
    }

    return config
  },
  experimental: {
    styledComponents: true,
    urlImports: ['https://jscdn.teleporthq.io']
  }
}

أنت جاهز الآن، شغّل ...

Copybash
npm run dev

... ومن المفترض أن يُحمَّل مشروعك على العنوان - http://localhost:3000 🚀

متفرقات#

ينشئ NextJS next.lock يضم جميع الوحدات التي تُحمَّل ديناميكيًا من شبكة توصيل المحتوى، باستثناء الوحدات التي تُقدَّم باستخدام Cache-Control: no-cache. يمكنك قراءة المزيد عن ذلك هنا.