مقدمة إلى Vue JS

مدخل إلى إطار عمل جافا سكربت
VueJs

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

ما هو Vue.js؟
أهم ميزات vue.js
المكونات الرئيسية في Vue.js
إنشاء مشروع صغير بواسطة vue.js

ما هو Vue.Js framework؟

هو إطار عمل تم تصميمه من الألف إلى الياء ليكون قابلاً للتطبيق بشكل تدريجي يعتمد على معمارية Model-view-viewModel. كان الإصدار الأول في شباط (فبراير) عام 2014 من قبل مؤسسها إيفان يو (Evan You) الذي كان يعمل على إطار angular في شركة google في ذلك الوقت. حيث كان يريد استخراج الجزء الذي أعجبه من angular وبحجم صغير.

أهم ميزاته

● السهولة

يمتاز Vue.JS بسهولة استخدامه حيث يمكن بسهولة اضافته الى مشروعك عن طريق اضافة سكريبت وكذلك يسهل على المبرمجين الذين يألفون التعامل مع لغة جافا سكريبت تعلم vue.js لوضوحه و سهولة فهمه وبساطة تركيبه.

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- OR →
<!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

● المرونة

حيث يمكنك استخدام vue.js في إنشاء مشروع تفاعلي صغير أو دمجه في مشروع سابق إلى تطبيق ويب ضخم أو تطبيق للهاتف مع استخدام تقنيات اخرى.

● صغير الحجم

تمتاز نواة المكتبة بصغر حجمها مقارنة بأطر العمل أو المكتبات الأخرى. مما يعني سرعة في تحميل موقع الويب أو التطبيق واستهلاك أقل للذاكرة، تقريبا لا يتجاوز حجمه 30 كيلو بايت وهو مضغوط (gzipped) شاملة

Vue-router، Vue.js وVuex.

● يدعم الكثير من المكتبات

يوفر vue.js العديد من المكتبات المفيدة للمطورين وأغلبها تم تطويرها بنفس فريق vue.js لذلك تضمن للمطورين التوافق والتناغم بين هذه الأدوات. فمثلا هنالك مكتبه جاهزة لواجهة المستخدم UI Framework تدعى Veutify, و مكتبة لإدارة الحالة State Management تدعى Vuex.

أهم مكوناته

DOM الوهمي (Virtual DOM)

كثير ما يعطي مطورين الويب DOM اختصارا ل (Document Object Model) أهمية بالغة لما تأخذ عملية معالجته وقت مقارنة مع عمليات جافا سكريبت الأخرى .فلو كان لدينا 10 عناصر من نوع <li> في صفحة الويب واردنا حذف عنصر واحد في معظم أطر العمل تقوم بإعادة بناء القائمة كلها ,تظهر آثار هذه المشكلة في التطبيقات الضخمة والمعقدة المكونة من آلاف العناصر لذلك جاء مفهوم Virtual DOM ليحل هذه المشكلة حيث يعتمد على بناء Dom وهمي موازي للحقيقي لا يتم اجراء اي تغير على وجهة المستخدم مباشرة أي أن العمليات كلها تتم في الذاكرة العشوائية وعندما يحين وقت تحديث الصفحة يقوم ال Virtual DOM بمقارنة نفسه مع حالته التي كان عليها قبل إجراء التغييرات فيعرف بذلك التحديثات التي سيقوم بها على مستوى ال DOM الأصلي، أي أنه يقوم فقط بتحديث العناصر التي يجب عليها أن تحدث تسمى هذه العملية Diffing.

Virtual-DOM

قوالب HTML الديناميكية

أحد المكونات الأساسية الذي يقدمها vue.js هو محرك القوالب حيث يمكنك كتابة نماذج شبيه ب html ويمكن تحليله بواسطة المتصفح ليقوم محرك القوالب في vue.js بقرائتها وتحويلها إلى virtual dom ومن ثم عرضها للمستخدم.

ربط البيانات Data Binding and Reactivity System

يتم عرض البيانات في عناصر HTML المختلفة ديناميكيًا في تطبيقات الويب الحديثة. تم تجهيز Vue بآلية تفاعل خاصة بها تعمل على تحديث واجهة المستخدم تلقائيًا. يوفر هذا الأسلوب الكثير من الوقت وسطورًا إضافية من التعليمات البرمجية التي يمكن للمطور استخدامها للتركيز على تقديم ميزات أخرى ويكون أكثر إنتاجية. حيث يعتمد vue.js على نظام ربط بيانات ثنائي الاتجاه (Two-Way Data Binding) مثل إطار عمل angular حيث يتيح للمطور بكل سهولة ربط عنصر html بمتغير فكل تغيير يطرأ على محتوى العنصر <input > يقابله تغير في قيمة المتغير في الكود والعكس صحيح.

<div>
<input v-model="name"/>
<h1>{{name}}</h1>
</div>

مشروع صغير بواسطة Vue.Js

سوف نقوم بإنشاء مشروع بسيط يوضح كيف يمكن ربط واستخدام إطار العمل يقوم بعرض قيمة المتغير count وعند الضغط على زر increment يقوم بزيادة قيمته بمقدار واحد وعرضه للمستخدم. في البداية نقوم باستدعاء المكتبة إلى صفحة html باستخدام عنصر <script>. من ثم نقوم بكتابة القالب داخل عنصر <div> ونعطيه id=app لنستطيع لاحقا ربطه الى vue.js:

 <div id="app">
        <h1 class="text-center">Count: {{count}}</h1>
        <button @click="increment()">increment</button>
   </div>

بعد ذلك نقوم بإنشاء كائن من نوع Vue ونعطيه el هو id العنصر الذي يحتوي قالب النموذج ديناميكي. ثم يقوم بربط هذا القالب بكائن البيانات (data). هذا كائن خاص يستضيف البيانات التي نريد أن يقدمها Vue. في النموذج، تشير العلامة الخاصة {{}} إلى أن هذا جزء من النموذج ديناميكي، ويجب البحث عن محتواه في بيانات تطبيق Vue.
بعد ذلك في كائن (methods) نقوم بتعريف الدوال التي نريد مناداتها في النموذج الديناميكي باستخدام ربطها بالعنصر بواسطة @[event]:

        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script >
           const app= new Vue({
                el:"#app",//The Element with id of app will be our vue container
                data:()=>{
                    return {
                    count:0
                    }
                },
                methods:{
                    increment:function(){
                        this.count++;
                    }
                }
            });
           
        </script>

الملخص

بالرغم من أن vue.js لا يتلقى دعم مثل أطر العمل الأخرى لكنه حقق شعبية ضخمة في السنوات الأخير لبساطته وسهولة تعلمه بنسبة لغيره. إطار العمل vue.js كبير للغاية وما قمنا به في هذه المقال مجرد مقدمه صغير عنه و كيفية دمجه بمشروع صغير لكن في الواقع هناك الكثير من التقنيات او المكتبات المرتبطة به أو أطر عمل أخرى مبنية عليه . كذلك كيف يمكننا بناء تطبيق ويب أحادي الصفحة SPA والـ PWA او تطبيق للهاتف بواسطة Ionic Vue، ان شاء الله سيتم شرحها في المواضيع القادمة.

وسوم