© MeghanRegior

كيفية شحن webapp ديناميكي للغاية كموقع ثابت

تخيل طريقة أصغر حجما

في أوائل شهر أبريل ، تم منحي ثلاثة أشهر لشحن نموذج أولي تقريبًا من محفظة التشفير للشركات. كان بناء تطبيقات الويب اللامركزية (dApp) - أو تطبيقات web3 - لا يزال مجالًا جديدًا ، ويمكن أن يصبح صعبًا للغاية بسبب تحول النموذج الذي أدخلته سلاسل الحظر.

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

كونك هزيلًا يبدأ بإزالة الأشياء. قررت تحدي كل قطعة من الهندسة المعمارية القياسية:

  • ماذا لو استطعت استخدام لغة أكثر قوة تسمح بمزيد من التعبير وتجربة تطوير تفاعلية أفضل؟
  • ماذا لو كان بإمكاني الاستغناء عن الخلفية؟
  • ماذا لو استطعت الاستغناء عن الخادم؟
  • ماذا لو استطعت تقليل عملية الإصدار إلى أقل من 30 ثانية؟
  • ماذا لو كان بإمكاني الدفع مقابل ما لا أستخدمه حقًا؟

جوابي: مكدس Multis tech.

إليك جولة سريعة لإعطائك فكرة عن كيفية محاولتنا للاهتراء.

Multis هو موقع ثابت

نعم ، سمعت بشكل صحيح.

هل هو 1999 مرة أخرى؟ ليس بهذه السرعة ، web1.0 لم يعود بعد!

Multis هو مجرد مجلد يحتوي على ملف html والأصول الثابتة المعتادة (js ، css ، الصور وملفات json بموجب العقود)

الملف

حق بسيط؟

نحن ثم جعل app.multis.co نشير إلى أن أتش تي أم أل. الأمر بسيط ، إنه ثابت: يحصل جميع المستخدمين على نفس إصدار html ، وبالتالي يتم تقديمه بشكل ثابت.

تريد أن تسمع أكثر؟ حسن.

نشر مجلد

حسنًا ، يمكننا فقط وضع المجلد في Dropbox وجعل app.multis.co يشير إلى عنوان url العام لهذا المجلد بفضل خدمة مثل Duet.to - قد تنجح هذه العملية ، لكنك تشعر أنها هواة قليلاً. ماذا نفعل بدلا من ذلك؟ تحقق من مقتطفات سجلات Cloudflare DNS الخاصة بنا:

app.multis.co

من أين نحصل على عنوان IP هذا؟ Firebase.

هذه هي النقطة المهمة الأولى: نحن نستخدم استضافة Firebase.

يشبه Firebase Hosting خدمات مثل GitHub Pages أو Netlify أو Surge. يشبه برنامج Dropbox لدينا بعض الميزات الإضافية:

  • كل شيء يتم تقديمه عبر https (السماح بـ SSL Full + Strict على Cloudflare) "حتى يتم تسليم المحتوى دائمًا بشكل آمن"
استضافة Firebase من خلال Cloudflare
  • "يتم تخزين كل ملف تقوم بتحميله على أقراص صلبة في حواف CDN حول العالم. بغض النظر عن مكان تواجد المستخدمين لديك ، يتم تسليم المحتوى بسرعة. "
  • النشر بسيط مثل نشر firebase - استضافة فقط
  • "يوفر Firebase Hosting إدارة كاملة للنسخ والإصدار بنقرة واحدة على التراجع."

النقطة الأخيرة هي في الواقع كذبة: إنها تتطلب خطوات اثنين للتراجع!

إصدارات جديدة متاحة على الفور في جميع أنحاء العالم!

Html و css والصور لا تتغير في كثير من الأحيان ، لذا فإن التراجع عن تغيير ملف JavaScript.

انا اسمعك أنت غير صبور لمعرفة كيفية كتابة ملف js الذي يمثل رمز التطبيق بالكامل. سؤال رائع! دعنا نتحدث عن ذلك.

كود الكتابة

دعنا نوضح هذا الأمر: أنا بالتأكيد لا أكتب ملف js هذا مباشرة - أخبرتك أنه لم يعد عام 1999 مرة أخرى

لا يوجد شيء رائع هنا ، فأنا أكتب الشفرة في ملفات مختلفة تم تجميعها بعد ذلك في ملف واحد. أنت تعرف التدريبات.

لاحظ. cljs؟
هذه ملفات ClojureScript. ربما تكون قد سمعت بهذه اللغة ولكن إليك تعريف أنيق:

ClojureScript هي لغة حديثة وفعالة وغير قابلة للتوجيه موجهة نحو البيانات مع مكتبة قياسية رائعة تجمع إلى حزم جافا سكريبت مضغوطة ذاتيًا. استنادًا إلى Clojure ، فإنه يجلب أناقة Lisp والبرامج الوصفية لنظام جافا سكريبت البيئي.

لماذا يريد أي شخص اختيار هذه اللغة؟

يجمع ClojureScript بين إمكانية الوصول إلى نظام JavaScript الأساسي والمرونة والتطوير التفاعلي لـ Clojure والتحسين الأمثل لبرنامج Google Closure لتوفير اللغة الأكثر قوة لبرمجة الويب.

هذا من شأنه أن يضمن مقالًا آخر ، لكن كتابة ClojureScript abstracting React تجعل تطوير تطبيقات الويب الديناميكية ممتعًا حقًا. وحقا أنا أقصد حقًا f * cking رائع.

من بين كل هذه الملفات ، يتم تصدير وظيفة واحدة فقط إلى كائن النافذة العامة:

لاحظ ^: export - بيانات التعريف في Clojure

تعمل وظيفة init المتواضعة على "تدفق البيانات" باستخدام rf / dispatch-sync (انظر إعادة الإطار ، فكر في Redux على المنشطات) والتركيب! تقوم الوظيفة بتركيب مكون العرض الرئيسي في عنصر #app DOM (انظر الكاشف ، فكر في الرد على المنشطات).

ماذا بعد؟

نحتاج فقط إلى استدعاء وظيفة init هذه في html لتشغيل العرض وتدفق البيانات:

هذا الجزء من الجسم ليست معقدة للغاية

قد يظن القراء الدهاء أن الأداة المستخدمة لإنشاء ملف JavaScript النهائي هي Webpack. لكنهم مخطئون.

تجميع كلوجوريسكريبت

هناك أداة في ClojureScript تُسمى shadow-cljs ، وهي تتعامل بشكل أساسي مع التبعيات (npm) وتصنع (webpack) بميزة مميزة تتمثل في كونها موجزة - انظر لنفسك ملف التكوين الخاص بها:

الظل cljs.edn

هذا كل ما تحتاجه.

بيئة ديف

سيؤدي تطبيق watch shadow-cljs الخاص بالأوامر إلى إنشاء نسخة أولية متبوعة بتصنيفات تدريجية (تستغرق أقل من ثانية واحدة) عند كل تغيير رمز. يمكنك أيضًا الحصول على تجربة تطوير تفاعلية فريدة من نوعها بالنسبة إلى لغات Lisp - فكّر في إعادة التفاعل الساخن ولكن على المنشطات الضخمة!

البيئة همز

سيقوم تطبيق إصدار الأمر shadow-cljs بتجميع بنية الإنتاج (تستغرق أقل من 30 ثانية) باستخدام عمليات التحسين. ستحصل على ملف JavaScript من النموذج core.723222C8EF.js بفضل: module-hash-names 10 - سنتطرق إلى سبب أهمية هذا الأمر في الثانية.

بالنسبة لكل إصدار ، نستخدم سكربت باش مخصص لإدراج اسم الملف في أتش تي أم أل للمجلد النهائي (انظر بداية المقال):

عند شرائه ، يتم إبطال ذاكرة التخزين المؤقت تلقائيًا بسبب التجزئة في اسم الملف (لم يتم تخزين ملفات html مؤقتًا) - إصدار جديد من webapp مباشر!

كله تمام؟

ليس تماما بعد. قد تفكر "حسنًا ، إنهم يشحنون موقعًا إلكترونيًا ثابتًا ، ولهم الواجهة الأمامية ، ولكن أين الواجهة الخلفية؟"

سعيد سألت.

الخلفية كخدمة (BaaS)

يأتي Firebase مع خدمات أخرى توفر لنا حلولًا للمصادقة والتخزين الذي يتم إنشاؤه بواسطة المستخدم وقواعد البيانات.

من جانب العميل ، تقوم مكتبة JavaScript الخاصة بهم باستطلاع هذه الخدمات من خلال مآخذ الويب مما يسمح لنا بالوصول إلى الوقت الفعلي في غمضة عين.

كانت النسخة الأولى من قاعدة البيانات "قاعدة بيانات Realtime" الخاصة بهم رائعة ولكنها كانت تفتقد بعض الميزات المهمة المتعلقة بالتدرج. لقد أصدروا الآن قاعدة بياناتهم الجديدة "FireStore" ومن الإنصاف القول إن القوة قوية مع هذه القاعدة

يلعب Firebase جيدًا تقريبًا مع حالة التطبيق المفردة التي يتم فرضها من خلال إعادة الإطار. يتلخص في تدفق بيانات موحد كبير واحد:

  1. يقوم حدث - مثل النقر - بتشغيل معالج حدث (إرسال)
  2. يقوم هذا المعالج بتشغيل كتابة تأثير جانبي على وحدة التحكم عن بُعد (تأثير الكتابة Firestore)
  3. يتم دفع التغييرات في ديسيبل عن بعد على العميل ويؤدي إلى كتابة تأثير جانبي على ديسيبل المحلي (تأثير قراءة Firestore)
  4. المشاهدات ← DOM الظاهري ← DOM: يعرض طرق عرض ملموسة للديسيبل المحلي (اشتراكات)
  5. اذهب إلى 1.

بعد التعافي من الدوار الأولي لهذه الحلقة اللانهائية ، قد لا تزال تتساءل:

أوه ، أنت تفعل كل شيء على الواجهة الأمامية. ماذا يحدث عندما تحتاج إلى استخدام خدمة بمفتاح خاص أو إذا كنت ترغب في تشغيل مهمة حسابية مكثفة؟ لا يمكنك فعل ذلك في المتصفح!

في الواقع ، في المثال الأول من شأنه أن يعرض مفتاحي للجميع (وكما نعلم أننا لا نستطيع الوثوق بالجميع) وفي المثال الثاني من شأنه أن يضع الكثير من الضغط على متصفح المستخدم: ماذا لو كان متصفحًا للجوال؟ ماذا لو كانت المهام تستغرق بعض الوقت لإكمالها؟

يا هممم ، ستحب هذا

وظائف كخدمة (FaaS)

هناك خدمة تسمى Firebase Cloud Functions (فكر في AWS lambda) حيث تكتب وتخزين الوظائف التي سيتم تشغيلها في أحداث معينة:

  • أي طلب المتشعب
  • مصادقة Firebase (على سبيل المثال: اشتراك جديد)
  • قاعدة بيانات Firebase (على سبيل المثال: الكتابة تحت مسار محدد)

تعيش هذه الوظائف "في الخلفية" - لا يتم عرض الكود الخاص بها للمستخدم النهائي ، يمكنك الاستفادة من أي مفتاح خاص أو تشغيل مهام كثيفة الحساب. إن أبسط حالات الاستخدام بالنسبة لنا تتمثل في تكامل ضئيل مع Slack لتلقي إشعار في قناة خاصة عند قيام المستخدم بالتسجيل:

تأكد من ربط المشاركات في قناة خاصة

هاه الحلو؟

يمكن أن تكون الوظائف السحابية أكثر تعقيدًا أيضًا ، على سبيل المثال لدينا واحدة كبيرة لميزة "محفظة الاستيراد" الخاصة بنا.

بالمناسبة ، أنت لست مهووسًا (بعد): المقتطف أعلاه هو جافا سكريبت خالص. هذه هي الميزة المقنعة لـ shadow-cljs في قدرتها على استخدام JavaScript في ClojureScript (والعكس صحيح) - في هذه الحالة بالذات ، نقوم بإنشاء بنية أخرى {{target: node} بدلاً من: browser!

نشر هذه الوظائف هو أيضًا سطر واحد:

firebase نشر - وظائف فقط

Soooooooo ، ما هو الجليد على الكعكة؟

توصيل إلى blockere Ethereum

كيف يمكن للمرء أن يشعر كاملة دون اتصال لهذا الكمبيوتر العالم دائما المتاحة وغير الخاضعة للرقابة؟!

توجد أوجه تشابه مع BaaS:

  • محافظ فردية أو حسابات عقود (مصادقة المستخدم)
  • حالة العقد (قاعدة بيانات)
  • الوصول من مكتبة JavaScript على جانب العميل

ولكن أيضا الاختلافات الرئيسية:

  • لامركزية (يمكن لأي شخص الانضمام للمشاركة وتأمين الشبكة)
  • بروتوكول المال (نقل القيمة كميزة أصلية)

بشكل ممتع ، هناك قائمة متزايدة من الشركات في صناعة blockchain باستخدام ClojureScript. السبب الواضح؟ الثبات

شكر!

كيف يعمل اتصال Ethereum هذا؟ إليك مثال على ذلك:

توفير مثيل من web3 - يتلخص في توصيله بمزود Ethereum (يمكن أن يتم حقنه بواسطة Metamask ، واحد يعمل على جهازك أو جهاز بعيد مثل العقد التي توفرها Infura).

مع مكتبة re-frame-web3-fx ، يمكنك مشاهدة رصيد عنوان بحيث يكون :: coinbase-balance محدثًا دائمًا في حالتك العالمية (ندمج بعد ذلك مصدر البيانات في تدفق البيانات الموحد - راجع BaaS).

ربما تشعر بالإرهاق الشديد ، دعنا نحاول الحصول على صورة شاملة:

10000 قدم منظر على هندسة Multis

© MeghanRegior

الأموال

لا أرغب في الدفع مقابل الخدمات ، ولكن من الأفضل أن أدفع فقط مقابل الخدمة التي تستخدمها - ويعمل نموذج فريميوم بشكل جيد لتبدأ ثم تنمو (وتدفع) بالأدوات التي تستخدمها أولاً مستخدم.

اعتبارًا من اليوم ، نحن تحت الطبقة المجانية لـ Firebase و Cloudflare. وهذا يعني أن حسابنا الوحيد كان حتى الآن لشراء أسماء نطاقات مختلفة. لا تخجل من ذلك

ماذا عنك؟

هذا كل شيء الآن ، آمل أن تكون مفتونًا بفن هندسة المواقع الثابتة.

إذا كان هذا يبدو مثيراً للغاية بالنسبة لك ، فيرجى الضغط على Twitter ، فنحن نتطلع إلى توظيف مهندس Numero Uno في Multis.

rem #remoteok

Bisous