هذا المقال يوم الجمعة مخصص لترجمة مقال مثير للاهتمام صدر يوم أمس على
Medium . قررت أن أتعلم نوعًا جديدًا من الترجمات لنفسي ، لذا يرجى عدم الركل كثيرًا إذا كان هناك خطأ ما في مكان ما. وإذا كان ذلك ممكنًا ، قم بإبلاغ الأخطاء والأخطاء المطبعية في PM.
شكرا وقراءة جيدة!
حكاية عن الكيفية التي تحدد بها الميزات الجديدة لمنصة الويب والأطر المترجمة الحقبة التالية من تطوير الويب.
الصورة:
ستيفان بوشراليوم ، تعد أطر عمل مثل
Angular و
React و
Ember أساسية لتطوير تطبيقات الويب المعقدة. على مدى العقد الماضي (تم إصدار
Angular في عام 2010) ، أصبح استخدام هذه الأطر المعيار الفعلي لكثير منا. فهي تساعدنا على هيكلة الكود الخاص بنا وإدارة حالة التطبيقات وبناء واجهات معقدة تعتمد على المكونات القابلة لإعادة الاستخدام.
ومع ذلك ، كما تعلم ، فإن JavaScript هو أغلى مورد ويب يؤثر بشكل مباشر على تفاعل صفحاتنا. وحجم رمز JavaScript لتطبيقات الويب لدينا أكبر من أي وقت مضى. متوسط صفحة الويب أكبر من 3 ميغابايت ، وهو أكبر من حجم لعبة Doom الأصلية. يمكننا ، كمطورين ، الحصول على إنترنت سريع وخطط تعريفة بأسعار معقولة ، ولكن قد لا يكون لدى المستخدمين كل هذا.
وفقًا
لـ Alex Russell ، قد يعني تجاوز حجم 130 كيلوبايت فقط لجميع مواردنا أنه من المستحيل تلبية فترة التنزيل البالغة 5 ثوانٍ على هاتف قياسي وشبكة جوال. ومع ذلك ، قد تأخذ بعض أطر العمل المفضلة لدينا المزيد من تلقاء نفسها.
هل يمكننا استخدام المزايا التي توفرها لنا الأطر ، ولكن في نفس الوقت تجنب تضخم الشفرة؟ هل لديك الراحة للمطور وفي الوقت نفسه ، تجربة مستخدم ممتازة؟ أنا أؤمن بذلك. وأعتقد أننا ندخل عصرًا جديدًا من تطوير الويب ، والذي سيحدده هذا ... حقبة ستبدأ فيها أطرنا في الاختفاء.
Svelte
مثال على هذا الاتجاه هو
Svelte ، "إطار واجهة المستخدم المختفي بطريقة سحرية" (مقالة "إطار عمل واجهة المستخدم المختفي بطريقة سحرية"
في حبري - تقريبًا).
Svelte هو إطار عمل "وقت الترجمة" ليس له وقت تشغيل محدد على العميل. لقد اعتدنا على إرسال حزم JavaScript كبيرة إلى مستخدمينا ونتوقع من المتصفحات تحليل النصوص البرمجية وتنفيذها. لكن
Svelte لا يعمل على هذا
النحو . بدلاً من ذلك ، يقوم بتجميع التطبيق الخاص بك إلى وحدات JavaScript صغيرة وقائمة بذاتها وفانيليا. وبعبارة أخرى ، في الوقت الذي يتم فيه تسليم التطبيق إلى المستخدمين ، سيختفي
Svelte !
مثال على تطبيق تم تطويره باستخدام
Svelte هو
Pinafore ، وهو عميل
Mastodon PWA للشبكة الاجتماعية اللامركزية التي أنشأتها شركة
Nolan Lawson من Microsoft. يُظهر Pinafore
نتائج سريعة جدًا في اختبار صفحة الويب ودرجة 98 نقطة في
Lighthouse .
Svelte ، في حد ذاته ، أضيق الحدود للغاية ، ولكن هناك أيضًا Sapper (
S velte
App Mak
er - تقريبًا) - إطار كامل المواصفات يعتمد عليه. يتضمن Sapper ، المستوحى من Next.js ، العرض من جانب الخادم وفصل الشفرة والأنماط المحددة النطاق والتوجيه التعريفي وإعادة التحميل السريع. بالإضافة إلى ذلك ، يوفر قالب بداية
Sapper PWA بشكل افتراضي ، مع بيان تطبيق ويب وعامل خدمة مع التخزين المؤقت التلقائي للموارد.
سألت نولان عن شعوره حيال استخدام
Svelte و
Sapper . أخبرني أنه كان "حلم العمل مع"
Svelte .
سابر "أقل نضجًا" وكان لديه بعض المشاكل معه ، لكنه سعيد أيضًا. لقد بدأت أيضًا في استخدام هذين الإطارين لمشروع جديد ، وحتى الآن يبدو الجمع بين الوظائف وسرعة التشغيل العالية مثاليًا حقًا.
استنسل
استوحى Svelte مشروعًا بديلاً من Ionic:
Stencil .
مرة أخرى ، الهدف هو اعتماد "أفضل مفاهيم الأطر الأكثر شيوعًا" ، ولكن في نفس الوقت تحقيق أداء أفضل:
"مع ... الأطر التقليدية وتقنيات التجميع ، كان الفريق يكافح من أجل تلبية متطلبات الكمون وحجم الشفرة لتطبيقات الويب التقدمية التي تعمل بشكل جيد على الشبكات السريعة والبطيئة عبر مجموعة متنوعة من الأنظمة الأساسية والأجهزة." - stenciljs.com
لفهم ما يتكون
Stencil ، وجدت
مقدمة مفيدة
من Rob Bearman . هناك أيضا
فيديو من
ماكسيميليان . نتيجة
Stencil هي مكون ويب قياسي (المزيد عن مكونات الويب أدناه) ، وليست خاصة بـ
Stencil . هذا يعني أنه يمكنك استخدامه بالاشتراك مع إطار عمل آخر إذا أردت (لكن هذه المقالة تدور حول كيفية اختفاء الأطر ، وليس التكاثر!).
بشكل منفصل ، أود أن أشير إلى أنه على الرغم من حقيقة أن وثائق
Svelte لا تولي اهتمامًا كبيرًا لذلك ، ولكن يمكن أيضًا تجميع مكون
Svelte مباشرة في Web Component (
هنا مثال - إذا قمت بتعيين
customElement هنا -
نحصل على النتيجة ). ومع ذلك ، أخبرني
ريتش هاريس ، مبتكر
Svelte (و
Rollup والعديد من الأشياء المدهشة الأخرى!) أنه لا يعتقد أن هناك أي مزايا خاصة لاستخدام هذه الميزة في الوقت الحالي.
يبدو
Stencil أيضًا مثل
بوليمر Google المعروف ، ولكنه يختفي تمامًا عند الخروج. ومع ذلك ، لم أستخدم Polymer كثيرًا للتعليق بمزيد من التفصيل. ربما يستحق أيضا اهتماما أوثق. بدأ
الإصدار الثالث الأحدث في استخدام
وحدات ES (المزيد عن هذا أدناه) ، بدلاً من
استيراد HTML ، و
npm بدلاً من
Bower . هناك أيضًا مجموعة
PWA Starter Kit التي توصي باستخدام
Alex Russell كأفضل أداة لإنشاء تطبيقات ويب منتجة. يمنحك نمط
PRPL (Push ، Render ، Pre-cache ، Lazy-load) مباشرة من الصندوق.
الجيل القادم الزاوي
شكرًا لريتش هاريس لإخباري أن Angular تتبع هذا الاتجاه أيضًا! تتيح لك
Angular Elements - وهي ابتكار في
Angular 6 - تصدير مكونات Angular كمكونات ويب ذاتية الضبط. في الوقت الحالي ، لا يزال الأمر يتطلب "إصدارًا منفصلاً ومستقلًا من Angular" ، ولكنه "يعمل على عناصر مخصصة يمكن استخدامها في تطبيقات الويب التي تم إنشاؤها على أساس أطر عمل أخرى".
بالإضافة إلى ذلك ،
Ivy هو جهاز عرض جديد من الجيل الجديد في Angular ، مصمم لتقليل حجم الكود الناتج بشكل كبير. (على الرغم من أنها لا تزال تستحق نظرة: بروح المنافسة الودية ، قام Rich بإجراء
مقارنة بين نتائج تجميع مكونات الويب من Svelte و Ivy!).
من الرائع جدًا أن تتخذ الأطر الشائعة هذا النهج ، مما يجعل رمزها النهائي أيضًا أكثر إحكاما. نأمل أنه مع انتقال المزيد من تطبيقات الويب إلى نهج جديد ، سيكون لذلك تأثير كبير على أداء الإنترنت ككل.
بالإضافة إلى ذلك ، هناك المزيد والمزيد من المتطلبات الأساسية لحقيقة أننا لن نحتاج إلى أطر عمل على الإطلاق. يمكن للإطارات ، بالطبع ، تبسيط عملية التطوير ومواصلة تقديم إضافات مفيدة ، ولكن منصة الويب نفسها توفر وظائف أكثر من أي وقت مضى ...
منصة الويب كإطار عمل
في مقالتي
"A Rube Goldberg Machine" والمحادثة اللاحقة ، وصف زميلي
Ada Rose Cannon كيف يمكن اعتبار وظائف CSS و JavaScript الجديدة بمثابة أطر مضمنة في منصة الويب.
على سبيل المثال ، قد تعني خصائص CSS المخصصة (المعروفة باسم متغيرات CSS) أنك لم تعد بحاجة إلى مترجم سابق لـ CSS مثل
Sass . ويمكن لشبكة CSS أن توفر لك الآن من تحميل Bootstrap.
"لست بحاجة إلى إطار عمل لاستخدام CSS Grid. شبكة CSS هي إطار عمل. "
- راشيل أندرو
مكونات الويب
مكونات الويب قوية بشكل خاص وهي المفتاح لكثير من هذا الاتجاه. وهي تتضمن الميزات التالية - عناصر مخصصة و Shadow DOM وقوالب HTML -
ليست متاحة بعد في كل مكان ، ولكن ، كما
يقول Ada ، لديهم دعم جيد جدًا ،
وهناك ملفات متعددة توفر لهم دعمًا أفضل ، لذا يمكنك استخدامها اليوم!
طورت Ada و
Ruth John مؤخرًا تطبيق ويب لتصور الموسيقى باستخدام مكونات الويب
وتبادلوا دروسهم .
بالإضافة إلى ذلك ، يمكنك الشعور بالأمان أكثر مع الميزات الجديدة مثل Web Components إذا كنت تستخدم العرض من جانب الخادم (SSR) وقمت بتطبيق جانب العميل الخاص بك مع
التحسين التدريجي .
أفضّل شخصيًا إنشاء تجربة SSR رائعة ثم تحسينها إلى تطبيق أحادي الصفحة.
- أدا روز كانون
وحدات ES متشابهة
يمكنك أيضًا استخدام
وحدات ES الآن! مرة أخرى ، يعد دعم المتصفح جيدًا جدًا ، ويمكنك دعم المتصفحات القديمة باستخدام
النسخة الاحتياطية "nomodule" .
في الواقع ، إذا كنت توافق على نهج التحسين SSR + التقدمي ، يمكنك حتى استخدام وحدات ES دون الحاجة إلى استخدام أدوات البناء
لنقلها إلى متصفحات أخرى ، حيث لا يزال بإمكان المتصفحات القديمة العمل بدون JavaScript. وباستخدام محمل وحدة
ESM ، يمكننا أيضًا
استخدام وحدات ES مباشرة في NodeJS .
هذا أمر رائع لأنه يمكننا إعادة استخدام نصوصنا على الواجهة الأمامية والخلفية (أي "عرض متماثل") ، دون الرقص مع الدف. يمكننا تنظيم كود الواجهة الأمامية دون الحاجة إلى لصق البرامج النصية الخاصة بنا معًا ، أو وضع العديد من علامات البرامج النصية على الصفحة ، أو استخدام أدوات تحميل من جانب العميل.
هذا هو بالضبط ما أظهرته آدا في
أول حديث لها في
Twitch هذا الشهر. هناك أيضا
إدخال مدونة مع تفسيرات.
آمل أن أتمكن من مشاركة أفكاري عندما نبدأ في دخول عصر جديد من تطوير الويب. عصر أقل اعتمادًا على أطر واجهة المستخدم التقليدية ، ومكتبات CSS ، وبرامج الحزم. عصر نرسل فيه وحدات بايت أقل ونحمل تطبيقات الويب بشكل أسرع. عصر الأطر المهددة بالانقراض.
بفضل Nolan Lawson و Rich Harris و Ada Rose Cannon لمساعدتهم وإلهامهم لهذه المقالة. تم نشر هذه المقالة هنا أيضًا على مدونتي الشخصية.***
من نفسي أريد أن أشير إلى أنه للأسف ، أنا فقط في حبري أكتب عن
Svelte . لذلك ، باللغة الروسية هناك القليل من المعلومات حول هذا الإطار الرائع.
إذا قابلته للمرة الأولى ، فقد تكون مهتمًا بقراءة مقالات أخرى حول هذا الموضوع:
من يريد مراقبة تطوره بنشاط - مرحبًا بكم في قناة البرقية باللغة الروسية
SvelteJS . سنكون سعداء لرؤيتك!
مبروك للجميع في الصيف وانتصارات فريقنا! أتمنى لك عطلة نهاية أسبوع سعيدة! مرحى!