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

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

لذلك ، دعنا ننتقل إلى المشكلة. أتذكر مقالة ، وكذلك ، في الأماكن المفتوحة في هبر ، كان هناك العديد من المقالات المشابهة. يتم تقديمها جميعًا على أنها هزلية ، لكن كما يقولون "في كل مزحة هناك ذرة من الحقيقة" ، وهنا ليس قليلاً ... لكن هنا السؤال ، ما مدى فائدة كل هذه الأطر ، هل هناك حاجة؟

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

سوف أقوم باستطراد صغير لشرح اختيار التقنيات التي سيتم استخدامها في المثال للواجهة الأمامية نفسها. من أجل عدم الخوض في مجموعة متنوعة لا تعد ولا تحصى من الأطر ، دعونا نذهب من مستوى رائع. لذلك ، أصبح كل شيء بسيطًا جدًا ، لا يوجد DOM ظاهري ، هناك مكونات ويب. هذا يمكن أن ينتهي ، ولكن لا يزال شبيبة. إذا قررنا التخلص من js النقي ، فسنضطر إلى حل مشاكل البنية الأساسية بطريقة ما ، والتخلص من كود الغلاية ، إلخ. وبعبارة أخرى ، لجعل دراجتك قليلاً ... لكي لا أفعل ذلك ، أود أن أغتنم شيئًا حيث تم فعل كل شيء بالفعل وبجودة عالية بما فيه الكفاية. وفقًا لذلك ، وقع اختياري على Polymer - إطار عمل من Google ، والذي دفع مكونات الويب إلى المعيار.

العودة إلى التجمع. اعتاد الكثيرون منكم (على أي حال ، مطورو Java) على أداة مثل maven و gradle ، وربما تمكنوا من معرفة أنهم يقومون بعمل رائع مع التلاعب بالموارد (maven بالتأكيد أسوأ قليلاً ، لكن gradle ليس لديه أي مشاكل على الإطلاق أي شيء). يتيح لنا مجتمع الواجهة الأمامية اتخاذ npm ، والتي تحتاج إلى nodeJs ، ولكن هذا لا يكفي ، كما أن webpack في المقدمة. وما زال يتعين عليهم فهم ووضع كل مطور. أم ... أود فقط أن أفرغ المستودع ، وصنع بناء القوالب وبدء العمل ، لذلك دعونا نتوقف عند مستوى المعتاد.

بالطبع ، لا يمكننا الاستغناء عن npm على الإطلاق ، على الأقل نحتاج إلى مستودع حيث يمكن الحصول على مكتبات js من npm وتوفره ، لكن الأداة المساعدة اختيارية. يمكنك العثور على بعض الحلول الجيدة مثل هذا ، لكنهم يقومون دائمًا بتنزيل nodeJs وتشغيل مهام npm. خيار ، لكنني أرغب في تقليل التواصل مع npm قبل التفاعل مع المستودع والمزيد. كحل ، اكتب المكوّن الإضافي الخاص بك لاستخدامه في الدرج على الرغم من أن كتابة المكونات الإضافية لـ gradle بسيطة جدًا ، نظرًا للتنوع الواسع من الخيارات لتحديد الإصدارات لمستودع npm ، فإن المهمة أكثر تعقيدًا إلى حد ما. لحسن الحظ ، هناك وثائق واضحة لهذا.

لذلك ، دعنا نكتب سكريبت gradle لتحميل التبعيات. يتم استخدامه بواسطة kotlin dsl لسبب أن إعادة كتابة groovy dsl تافهة بما فيه الكفاية ، ولكن على العكس ، سيستغرق الأمر وقتًا إذا لم تكن هناك خبرة سابقة.

repositories { mavenLocal() jcenter() } dependencies { classpath("com.github.artfable.gradle:gradle-npm-repository-plugin:0.0.3") } apply(plugin = "artfable.npm") configure<GradleNpmRepositoryExtension> { output = "$projectDir/src/libs/" dependencies = mapOf( Pair("@polymer/polymer", "3.0.5"), Pair("@polymer/app-layout", "3.0.1"), Pair("@polymer/paper-toolbar", "3.0.1"), Pair("@polymer/paper-icon-button", "3.0.1"), Pair("@polymer/iron-icons", "3.0.1"), Pair("@webcomponents/webcomponentsjs", "2.1.3") ) } 

هذا البرنامج المساعد سوف تضيف لنا npmLoad . للسماح لمجموعة IDE بلطف ، قم بتعريفها في مجموعة

 tasks["npmLoad"].group = "frontend" 

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



دعونا نحاول أن نبدأ الآن ، ... ومع ذلك ، لم ينجح شيء. التبعيات داخل مكونات البوليمر سقطت. والحقيقة هي أن العديد من مكتبات js تدفع الواردات مع توقع نوع من المحولات مثل بابل. مثل هذا الاستيراد يشبه هذا:

 import '@polymer/polymer/polymer-legacy.js'; 

استيراد بناء الجملة هذا غير صحيح ، لأنه بالنسبة للمتصفح ، يجب أن يبدأ المسار فقط بـ "/" أو "./" أو "../". بالإضافة إلى ذلك ، في هذا النموذج لا يمكن اعتباره نسبيًا أو مطلقًا ، حيث يتم إجراء الحساب هنا لبداية دليل المكتبة من الجذر. لذلك ، يجب إصلاح هذه المسارات ، ولكي لا تفعل ذلك بنفسك ، يمكنك أن تأخذ مكوّنًا إضافيًا مُعدًا.

وفقا ل

 classpath("com.github.artfable.gradle:gradle-js-import-fix-plugin:0.0.1") 

 apply(plugin = "artfable.js.import.fix") configure<GradleJsImportFixExtension> { directory = "$projectDir/src/libs" } 

ستتم إضافة المهمة jsImportFix والتي ستجلب جميع الواردات بالترتيب.

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

لا يمثل العثور على أي مكون إضافي للبناء على هذا الموضوع مشكلة ، في الأساس ، كلهم ​​يأخذون libsass كأساس وهناك غلاف في java - jsass . المشكلة الوحيدة للجميع (على الأقل في الوقت الذي فكرت فيه) هي تكرار الملفات التابعة.

مثال:

الملف أ:

 @import “b”; @import “c”; 

_B و _c الملفات:

 @import “d”; 

نتيجة لذلك ، ندخل في الملفين الأساسيين المتماثلين من الملف _c. يمكنك ببساطة إصلاحه ، إذا أضفت المستورد إلى jsass ، يسمح api. في الواقع ، أنا هنا مرة أخرى مع قراري هنا (إذا لم يكن هناك مثل هذه المتطلبات ، فمن الأفضل استخدام حل آخر).

إضافة تبعيات npm إلى القائمة

 Pair("bootstrap", "4.1.3") 

البرنامج المساعد التبعية

 classpath("com.github.artfable.gradle:gradle-sass-plugin:0.0.1") 

 apply(plugin = "artfable.sass") configure<GradleLibsassPluginExtension> { group(delegateClosureOf<GradleLibsassPluginGroup> { sourceDir = "src/sass" outputDir = "src/css" } as Closure<Any>) } tasks.create("processResources") 

سيتعين إنشاء المهمة المزيفة processResources إذا لم يكن البرنامج المساعد java مرتبطًا (ونحن لسنا في حاجة إليها هنا). هذا بالطبع عيب ، ثم سأصلحه بالتأكيد.

يرجى ملاحظة أن ملف css الناتج يجب ألا يكون متصلاً بالرأس ، لأن ذلك لن يكون مرئيًا داخل المكون ، ولكن مباشرة في قالب المكون نفسه.

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

تم تحميل الكود الكامل إلى جيثب (ربما يتعين عليك الترحيل إلى gitlab لاحقًا ...).

آمل أن تكون الفكرة الأساسية واضحة ، وبعد ذلك يمكنك إضافة أي شيء تريده بكل بساطة. شكرا للقراءة.