أليكسي غراتشيف: اذهب إلى الواجهة الأمامية

لقاء كييف جو مايو 2018:

أليكسي غراتشيف: اذهب إلى الواجهة الأمامية

مشرف: - أهلاً بكم! شكرا لتواجدك هنا! اليوم لدينا متحدثان رسميان - ليوشا وفانيا. سيكون هناك اثنان آخران إذا كان لدينا ما يكفي من الوقت. المتحدث الأول هو Alexey Grachev، وسيخبرنا عن GopherJS.

أليكسي غراتشيف (فيما يلي – AG): - أنا مطور Go، وأكتب خدمات الويب في Go. في بعض الأحيان يتعين عليك التعامل مع الواجهة الأمامية، وفي أحيان أخرى يتعين عليك الدخول إليها يدويًا. أريد أن أتحدث عن تجربتي وأبحاثي في ​​Go على الواجهة الأمامية.

الأسطورة هي كما يلي: أولاً سنتحدث عن سبب رغبتنا في تشغيل Go على الواجهة الأمامية، ثم سنتحدث عن كيفية القيام بذلك. هناك طريقتان - تجميع الويب وGopherJS. دعونا نرى ما هي حالة هذه الحلول وما يمكن القيام به.

ما هو الخطأ في الواجهة الأمامية؟

هل يتفق الجميع على أن كل شيء على ما يرام مع الواجهة الأمامية؟

أليكسي غراتشيف: اذهب إلى الواجهة الأمامية

ألا توجد اختبارات كافية؟ بناء بطيء؟ النظام البيئي؟ بخير.

فيما يتعلق بالواجهة الأمامية، أعجبني الاقتباس الذي قاله أحد مطوري الواجهة الأمامية في كتابه:

أليكسي غراتشيف: اذهب إلى الواجهة الأمامية

لا تحتوي جافا سكريبت على نظام كتابة. الآن سأقوم بتسمية المشكلات التي واجهتها أثناء عملي وأشرح كيفية حلها.

من الصعب أن يسمى نظام الكتابة بشكل عام نظام الكتابة في Javasript - هناك خطوط تشير إلى نوع الكائن، ولكن في الواقع لا علاقة له بالأنواع. تم حل هذه المشكلة في TypeScript (وظيفة إضافية لـ Javasript) وFlow (مدقق من النوع الثابت في Javascript). في الواقع، وصلت الواجهة الأمامية بالفعل إلى نقطة حل مشكلة نظام النوع السيئ في Javascript.

أليكسي غراتشيف: اذهب إلى الواجهة الأمامية

لا توجد مكتبة قياسية في المتصفح على هذا النحو - هناك بعض الكائنات المضمنة والوظائف "السحرية" في المتصفحات. ولكن في جافا سكريبت لا توجد مكتبة قياسية على هذا النحو. تم حل هذه المشكلة بالفعل مرة واحدة بواسطة jQuery (استخدم الجميع jQuery مع جميع النماذج الأولية والمساعدات والوظائف اللازمة للعمل). الآن يستخدم الجميع Lodash:

أليكسي غراتشيف: اذهب إلى الواجهة الأمامية

رد الاتصال الجحيم. أعتقد أن الجميع شاهدوا كود Javascript منذ حوالي 5 سنوات، وكان يبدو وكأنه "معكرونة" من التعقيد المذهل لعمليات الاسترجاعات. الآن تم حل هذه المشكلة (مع إصدار ES-15 أو ES-16)، وتمت إضافة الوعود إلى Javascript ويمكن للجميع التنفس بسهولة لفترة من الوقت.

أليكسي غراتشيف: اذهب إلى الواجهة الأمامية

حتى وصول جحيم الوعد... لا أعرف كيف تدير صناعة الواجهة الأمامية، لكنهم يقودون أنفسهم دائمًا إلى غابة غريبة. لقد نجحنا أيضًا في تحقيق الجحيم بالوعود. ثم قمنا بحل هذه المشكلة عن طريق إضافة عنصر بدائي جديد - async/await:

أليكسي غراتشيف: اذهب إلى الواجهة الأمامية

تم حل مشكلة عدم التزامن. يعد Async/await بدائيًا شائعًا إلى حد ما في العديد من اللغات. يتبع بايثون وآخرون هذا النهج، وهو جيد جدًا. تم حل المشكلة.

ما هي المشكلة التي لم يتم حلها؟ التعقيد المتزايد بشكل كبير للأطر، وتعقيد النظام البيئي والبرامج نفسها.

أليكسي غراتشيف: اذهب إلى الواجهة الأمامية

  • بناء جملة جافا سكريبت غريب بعض الشيء. نعلم جميعًا مشاكل إضافة مصفوفة وكائن ونكات أخرى.
  • جافا سكريبت متعدد النماذج. يعد هذا نظامًا ملحًا بشكل خاص الآن عندما يكون النظام البيئي كبيرًا جدًا:
    • الجميع يكتب بأساليب مختلفة - البعض يكتب بشكل هيكلي، والبعض الآخر يكتب وظيفيًا، والمطورون المختلفون يكتبون بطرق مختلفة؛
    • من حزم مختلفة، ونماذج مختلفة عند استخدام حزم مختلفة؛
    • هناك الكثير من "المرح" مع البرمجة الوظيفية في Javasript - ظهرت مكتبة Rambda والآن لا يستطيع أحد قراءة البرامج المكتوبة في هذه المكتبة.

  • كل هذا له تأثير كبير على النظام البيئي، وقد نما بشكل لا يصدق. الحزم غير متوافقة مع بعضها البعض: بعضها يعتمد على الوعود، وبعضها يعتمد على المزامنة/الانتظار، وبعضها يعتمد على عمليات الاسترجاعات. كما يكتبون في نماذج مختلفة!
  • وهذا يجعل من الصعب الحفاظ على المشروع. من الصعب العثور على خطأ إذا لم تتمكن من قراءة الكود.

ما هو تجميع الويب؟

لقد توصل الرجال الشجعان من مؤسسة Mozilla وعدد من الشركات الأخرى إلى شيء مثل Web Assembly. ما هذا؟

أليكسي غراتشيف: اذهب إلى الواجهة الأمامية

  • هذا جهاز افتراضي مدمج في المتصفح ويدعم التنسيق الثنائي.
  • تصل البرامج الثنائية إلى هناك ويتم تنفيذها محليًا تقريبًا، أي أن المتصفح لا يحتاج إلى تحليل جميع "المعكرونة" الخاصة بكود جافا سكريبت في كل مرة.
  • أعلنت كافة المتصفحات الدعم.
  • وبما أن هذا هو رمز بايت، يمكنك كتابة مترجم لأي لغة.
  • أربعة متصفحات رئيسية تأتي بالفعل مع دعم Web Assembly.
  • نحن نتوقع الدعم الأصلي في Go قريبًا. تمت إضافة هذه البنية الجديدة بالفعل: GOARCH=wasm GOOS=js (قريبًا). حتى الآن، كما أفهمها، فهي ليست وظيفية، ولكن هناك بيان بأنها ستكون بالتأكيد في Go.

ماذا تفعل الآن؟ GopherJS

على الرغم من عدم وجود دعم لتجميع الويب، إلا أنه يوجد مترجم مثل GopherJS.

أليكسي غراتشيف: اذهب إلى الواجهة الأمامية

  • يتم تحويل كود Go إلى جافا سكريبت "الخالص".
  • يعمل في جميع المتصفحات - لا توجد ميزات جديدة تدعمها المتصفحات الحديثة فقط (هذا هو Vanilla JS، الذي يعمل على أي شيء).
  • هناك دعم لكل شيء تقريبًا في Go، بما في ذلك goroutines والقنوات... وكل شيء نحبه ونعرفه كثيرًا.
  • يتم دعم المكتبة القياسية بأكملها تقريبًا، باستثناء تلك الحزم التي ليس من المنطقي دعمها في المتصفح: syscall، وتفاعلات net (يوجد عميل net/http، ولكن لا يوجد خادم، ويتم محاكاة العميل عبر XMLHttpRequest). بشكل عام، تتوفر المكتبة القياسية بأكملها - هنا في المتصفح، هنا Stdlib Go، الذي نحبه.
  • يمكن تجميع النظام البيئي للحزمة بالكامل في Go، وجميع حلول الجهات الخارجية (القوالب، وما إلى ذلك) باستخدام GopherJS وتشغيلها في المتصفح.

من السهل جدًا الحصول على GopherJS - إنها مجرد حزمة Go عادية. لقد حصلنا على أمر GopherJS لإنشاء التطبيق:

أليكسي غراتشيف: اذهب إلى الواجهة الأمامية

هذا عالم صغير مرحبًا..

أليكسي غراتشيف: اذهب إلى الواجهة الأمامية

...برنامج Go عادي، وحزمة fmt للمكتبة القياسية العادية وBinding Js للوصول إلى واجهة برمجة تطبيقات المتصفح. سيتم تحويل Println في النهاية إلى سجل وحدة التحكم وسيكتب المتصفح "Hello gophers"! الأمر بهذه البساطة: نحن نبني GopherJS – ونطلقه في المتصفح – كل شيء يعمل!

ماذا لديك في هذه اللحظة؟ الارتباطات

أليكسي غراتشيف: اذهب إلى الواجهة الأمامية

توجد روابط لجميع أطر عمل js الشائعة:

  • مسج.
  • Angular.js;
  • D3.js للتخطيط والعمل مع البيانات الضخمة؛
  • رد فعل.js;
  • VueJS;
  • حتى أن هناك دعمًا لـ Electron (أي أنه يمكننا بالفعل كتابة تطبيقات سطح المكتب على Electron)؛
  • والأكثر تسلية هو WebGL (يمكننا إنشاء تطبيقات رسومية كاملة، بما في ذلك الألعاب ذات الرسومات ثلاثية الأبعاد والموسيقى وجميع الأشياء الجيدة)؛
  • والعديد من الارتباطات الأخرى لجميع أطر عمل ومكتبات جافا سكريبت الشائعة.

الإطار

  1. يوجد إطار عمل ويب تم تطويره خصيصًا لـ GopherJS - Vecty. يعد هذا نظيرًا كاملاً لـ React.js، ولكنه تم تطويره فقط في Go، مع تفاصيل GopherJS.
  2. هناك أكياس لعبة (مفاجأة!). لقد وجدت الاثنين الأكثر شعبية:
    • إنجو؛
    • إبيتين.

سأعرض لك بعض الأمثلة لما يبدو عليه وما يمكنك كتابته بالفعل في Go:

أليكسي غراتشيف: اذهب إلى الواجهة الأمامية

أو هذا الخيار (لم أتمكن من العثور على مطلق النار ثلاثي الأبعاد، ولكن ربما يكون موجودًا):

أليكسي غراتشيف: اذهب إلى الواجهة الأمامية

ماذا أقدم؟

الآن أصبحت صناعة الواجهة الأمامية في حالة تجعل جميع اللغات التي كانت تبكي سابقًا من جافا سكريبت ستندفع هناك. الآن سيتم تجميع كل شيء في "تجميعات الويب". ما الذي نحتاجه لنأخذ مكاننا الصحيح هناك كغوفر؟

أليكسي غراتشيف: اذهب إلى الواجهة الأمامية

لقد افترضت Go تقليديًا أنها لغة برمجة للنظام، ولا توجد عمليًا مكتبات للعمل مع واجهة المستخدم. هناك شيء ما، ولكن نصفه مهجور، ونصفه غير فعال.

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

يمكنك تكييف الكثير من الحزم المختلفة الموجودة بالفعل في نظام Go البيئي مع تفاصيل المتصفح (على سبيل المثال، محرك القالب). ستعمل بالفعل، ويمكنك عمل روابط ملائمة بحيث يمكنك بسهولة عرض المحتوى مباشرة في المتصفح. بالإضافة إلى ذلك، يمكنك، على سبيل المثال، إنشاء خدمة يمكنها عرض نفس الشيء على الخادم وعلى الواجهة الأمامية، باستخدام نفس الكود - كل ما يحبه مطورو الواجهة الأمامية (الآن فقط في Go).

يمكنك كتابة لعبة! فقط للمتعة...

هذا كل ما أردت قوله.

أليكسي غراتشيف: اذهب إلى الواجهة الأمامية

الأسئلة

سؤال (يشار إليه فيما يلي بـ س): - هل أكتب بلغة Go أم Js؟

اي جي: - تكتب الإجراءات والقنوات والهياكل والتضمين - كل شيء في Go... تشترك في حدث ما، وتمرر وظيفة هناك.

В: - إذن أنا أكتب في Js "عارية"؟

اي جي: - لا، أنت تكتب كما لو كنت في Go وتتصل بواجهة برمجة تطبيقات المتصفح (لم تتغير واجهة برمجة التطبيقات). يمكنك كتابة الارتباطات الخاصة بك بحيث يتم إرسال الرسائل إلى القناة - وهذا ليس بالأمر الصعب.

В: - وماذا عن الجوال؟

اي جي: - لقد رأيت بالتأكيد: هناك ارتباطات لتصحيح Cordova الذي يقوم Js بتشغيله. في React Native - لا أعرف؛ ربما يوجد، وربما لا (لم أكن مهتمًا بشكل خاص). يدعم محرك الألعاب N-go كلا من تطبيقات الهاتف المحمول - iOS وAndroid.

В: – سؤال حول تجميع الويب. يتم شغل المزيد والمزيد من المساحة، على الرغم من الضغط و"الضغط"... ألن نقتل عالم الواجهة الأمامية بهذه الطريقة أكثر؟

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

В: - من الواضح أنه أقل من وقت التشغيل ...

اي جي: - في جافا سكريبت "الخالص"؟

В: - نعم. نقوم بضغطها قبل إرسالها...

اي جي: - لكن هذا نص... بشكل عام، الميجابايت تبدو كبيرة، ولكن هذا كل شيء (لديك وقت التشغيل بأكمله). بعد ذلك، تكتب منطق عملك الخاص، والذي سيزيد من ثنائيتك بنسبة 1٪. حتى الآن لا أرى أن هذا يقتل الواجهة الأمامية. علاوة على ذلك، سيعمل Web Assembly بشكل أسرع من Javascript لسبب واضح - وهو أنه لا يحتاج إلى تحليل.

В: - لا تزال هذه نقطة مثيرة للجدل... لا يوجد حتى الآن أي تطبيق مرجعي لـ "Vasma" (تجميع الويب) حتى يمكن الحكم عليها بشكل لا لبس فيه. من الناحية النظرية، نعم: نحن جميعًا ندرك أن النظام الثنائي يجب أن يكون أسرع، ولكن التنفيذ الحالي لنفس V8 فعال للغاية.

اي جي: - نعم.

В: – التجميع هناك يعمل بشكل رائع حقًا وليس حقيقة أنه ستكون هناك ميزة كبيرة.

اي جي: - يتم تجميع الويب أيضًا بواسطة الكبار.

В: – يبدو لي أنه لا يزال من الصعب الحكم على Web Assembly. لقد كانت هناك محادثات منذ سنوات عديدة، ولكن هناك القليل من الإنجازات الحقيقية التي يمكن الشعور بها.

اي جي: - ربما. سوف نرى.

В: - ليس لدينا مشاكل في الواجهة الخلفية... ربما يجب أن نترك هذه المشاكل في الواجهة الأمامية؟ لماذا تذهب إلى هناك؟

اي جي: – علينا أن نحتفظ بطاقم من العاملين في الخطوط الأمامية.

بعض الاعلانات 🙂

أشكركم على البقاء معنا. هل تحب مقالاتنا؟ تريد أن ترى المزيد من المحتوى المثير للاهتمام؟ ادعمنا عن طريق تقديم طلب أو التوصية للأصدقاء ، Cloud VPS للمطورين يبدأ من 4.99 دولارًا, تناظرية فريدة من خوادم المستوى المبتدئ ، اخترعناها من أجلك: الحقيقة الكاملة حول VPS (KVM) E5-2697 v3 (6 Cores) 10GB DDR4 480GB SSD 1Gbps من 19 دولارًا أو كيفية مشاركة الخادم؟ (متوفر مع RAID1 و RAID10 ، حتى 24 مركزًا وحتى 40 جيجا بايت DDR4).

Dell R730xd أرخص مرتين في مركز بيانات Equinix Tier IV في أمستردام؟ هنا فقط 2 x Intel TetraDeca-Core Xeon 2x E5-2697v3 2.6 جيجا هرتز 14C 64 جيجا بايت DDR4 4x960 جيجا بايت SSD 1 جيجابت في الثانية 100 تلفزيون من 199 دولارًا في هولندا! Dell R420 - 2x E5-2430 2.2 جيجا هرتز 6C 128 جيجا بايت DDR3 2x960 جيجا بايت SSD 1 جيجا بايت في الثانية 100 تيرا بايت - من 99 دولارًا! أقرأ عن كيفية بناء شركة البنية التحتية. فئة مع استخدام خوادم Dell R730xd E5-2650 v4 بقيمة 9000 يورو مقابل فلس واحد؟

المصدر: www.habr.com

إضافة تعليق