مقدمة لبناء WebApps في Vue.js

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

في هذه المقالة ، سنلقي نظرة سريعة على Vue.js ، لذا يمكنك أن تقرر بنفسك إذا كان من المحتمل أن تناسب نوعية المشاريع التي تميل إلى العمل عليها ، وما إذا كانت تبدو مناسبة لك.

ما هو Vue.js؟

على الرغم من أنه لا يتم رسمياً بطريقة تقليدية ، إلا أن "Vue" هي اختصار لـ Visual Interstanding Environment. والغرض الرئيسي منه هو تسهيل تطوير تطبيقات الويب عن طريق تقليل تعقيد التعليمات البرمجية. ولديه الكثير من القواسم المشتركة مع React.js ، ولكن الإصدار الحالي من Vue يجعله أسرع من React ، ويبدو أنه أكثر فعالية.

هل من الصعب تعلم فيو؟

إذا كنت بالفعل مشفرًا ذا خبرة ، فلن تواجه صعوبة كبيرة في البدء باستخدام Vue ، ولكن لن يكون من الصواب وصفه بلغة مبتدئين. يجب أن تكون لديك بعض الخبرة مع HTML و CSS وجافا سكريبت لبناء أي شيء عملي معها.

يعتبر منحنى التعلم مع Vue أقل انحدارًا قليلاً من React ، وهو أقل انحدارًا بكثير من Angular. إذن ، ما يمكن أن يُذكر بدقة هو أن Vue سهل التعلم نسبياً بالمقارنة مع غيرها من الأطر التنموية الشعبية الأخرى.

كيف يساعد "فيو" في تحقيق الأهداف؟

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

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

ميزة أخرى من Vue هي أنها توفر نمطية ، مما يعني أنه يمكنك إعادة استخدام المكونات التي تقوم بتطويرها في مشاريع متعددة.

هل لدى Vue أية حيل رائعة في جعبتها؟

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

ميزة أخرى مفيدة هي العرض الأصلي لأنواع معينة من الأجهزة مثل Android و iOS ، حتى تتمكن من ضبط تطبيقاتك للأجهزة التي تعمل عليها بدون الكثير من العمل الإضافي.

بدء

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

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

لتسهيل فهم ما تحتاج إليه فعلًا لإعادة إنشاء هذا المشروع ، هذه هي الخطوات المطلوبة:

1. إضافة برنامج نصي الرجوع إلى vue.js

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

هنا مثال على تضمين vue.js من CDN:

وهنا مثال على تضمين vue.js من دليل على خادمك الخاص:

بدون هذه الإشارة إلى vue.js ، لا يمكن أن يحدث أي شيء متعلق بـ Vue.

2. إضافة مكونات Vue إلى نص HTML الخاص بك

هذا ما يجري مع هذا الرمز:

في الوقت الحالي ، لا يكون الأمر منطقيًا ، ولكن الجزء Vue هو العنصر "الشبكة التجريبية" الفارغة ، بالإضافة إلى إضافة "v-directive" إلى إدخال الاستعلام (في هذه الحالة ، يكون "v-model" "، والذي يستخدم لربط رمز Vue لتشكيل المدخلات).

3. إذا كان المشروع يتطلب قالب مكون ، قم بإضافة هذا إلى نص HTML

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

4. إضافة مثيل Vue

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

  • يحدد السطر 46 أن المتصفح يجب أن يبحث عن مكون في الصفحة يسمى "الشبكة التجريبية" ، وخط 47 يحدد أنه يجب استخدام "# grid-template" كقالب للمكون (هذا هو رمز القالب الذي تمت إضافته في الخطوة 3 من سطر 9 إلى السطر 30).
  • يعرّف كتلة من سطر 48 إلى سطر 52 خصائص المكون.
  • تحدد الأسطر من 53 إلى 62 دالة لفرز البيانات في الجدول.
  • تحدد الأسطر 63 to 85 وظيفة لتصفية البيانات (من النتائج في استعلام البحث).
  • تحدد الأسطر من 86 إلى 90 دالة لترقيم الكلمات في مجموعة بيانات.
  • تحدد الخطوط 91 إلى 97 طريقة فرز البيانات.

5. أضف في رمز الإطلاق قبل علامة النص البرمجي الختامي

إذا أكملت الخطوات من 1 إلى 4 وفتحت الملف في المتصفح ، فكل ما تراه هو مربع البحث ولا شيء أكثر من ذلك. وذلك لأن كل شيء مطلوب لبناء الجدول قد تم تعريفه ولكن لم يتم إنشاؤه. لذا في الخطوة 5 ، نضيف الشفرة التي تُنشئ بالفعل الجدول الذي تم تحديده من خلال جميع الخطوات السابقة.

  • ينشئ Line 100 كائن Vue جديد.
  • يحدد الخط 101 أي عنصر لربط الإجراء بـ.
  • توفر الخطوط 102 إلى 111 بيانات الكائن التي سيتم ربطها بالعنصر.

الاختبار

بعد تحديد وإنشاء الكائن المطلوب ، فأنت الآن جاهز لاختبار النتيجة. استعد لتكون مضطربًا ، لأن هذا ما يجب أن تراه في المتصفح:

ماذا يحدث هنا؟ لماذا هو ممل جدا؟ ذلك لأنه لا يوجد أسلوب للتطبيق. إذا استخدمنا النمط الافتراضي من مثال JSFiddle ، فسيبدو الجدول كالتالي:

إن كتابة أي شيء في مربع البحث (وليس حساسًا لحالة الأحرف) سيؤدي إلى تصفية النتائج وفقًا لذلك:

سيتيح لك النقر على رأس العمود تغيير ترتيب العرض. على سبيل المثال ، يؤدي النقر على رأس عمود "الطاقة" إلى تغيير النتائج ليتم عرضها حسب مستوى الطاقة.

تحسين والتكيف

هناك مشكلة أخرى تتعلق بأمثلة الإطار وهي أنها لا تتضمن عادةً الكثير من المعلومات لمساعدة شخص غير مألوف مع تعليمات البرمجة لمعرفة كيفية تطبيق ما يراه في المثال. يقوم Vue بعمل رائع مقارنة مع Bootstrap (والذي هو غير معروف بالمعلومات) ، لكنه لا يزال يترك الكثير من الأسئلة التي لم يتم الرد عليها.

في ما يلي بعض التغييرات التي قد نجريها على هذا التطبيق لتغيير طريقة ظهوره وما يفعله:

  • نمط الجدول كجدول مخطط Bootstrap
  • تغيير عدد الأعمدة
  • غيّر البيانات إلى شيء مختلف تمامًا

1. مضيفا Bootstrap

2. التفاف العنصر في جدول Bootstrap

3. ضبط عنصر الجذر لاستخدام نموذج تخطيط Bootstrap

4. إعادة تصفيف الأسهم

5. تعديل البيانات

6. اختبارات

  • غير مرشح وغير مجزأ

  • مرتبة حسب التوجيهي (تصاعدي)

  • مرتبة حسب الاستخدام (تصاعدي)

  • تصفية ل "شرطي"

  • Filtered for "conditional" & sorted by Directive (تصاعدي)

الأفكار النهائية

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

رأس الصورة مجاملة من أليكساندر سافيتش

بوجدان رانسيا

بوجدان هو أحد الأعضاء المؤسسين لشركة Inspired Mag ، حيث اكتسب خبرة تقرب من سنوات 6 خلال هذه الفترة. يحب في وقت فراغه دراسة الموسيقى الكلاسيكية واستكشاف الفنون البصرية. انه مهووس جدا مع إصلاحات كذلك. يمتلك 5 بالفعل.