الاسباب التي تدفعك لاختيار إطار العمل Vue.js

raheel · 01-04-2019, 06:01 PM

اختيار إطار عمل جافاسكريبت ليس أسهل مهمة في العالم في وقتنا هذا، بالخصوص إذا علمنا أن الخيارات متعددة ومجتمع جافاسكريبت من أنشط المجتمعات في عالم لغات البرمجة.
نسبة ساحقة من مطوري الويب حول العالم متفقون ويعلمون جيدا أن الثلاثي المتكون من أنجولار، React.js و Vue.js هم الأكثر شعبية والأكثر استخداما في تطبيقات ومشاريع الويب الحديثة، والإختيار بين واحد منهم يعتبر مهمة أصعب حيث أن لكل واحد نقاط قوة كبيرة ومزايا خاصة تجذب مطوري واجهات الويب الأمامية.
إطار العمل Vue.js، الذي طوره في البداية شخص واحد فقط، استطاع اقتسام هذه الكعكة مع React.js و Angular اللذان يقف خلفهما عملاقا الويب Facebook و Google، وهذا ليس من قبيل الصدفة.
Vue.js يتمتع بمزايا كثيرة تكسبه جاذبية خاصة وتجعله خيارا مفضلا لأعداد هائلة من المطورين. وفي هذا المقال، سنستعرض لكم 3 من أهم هذه الأسباب التي قد تجعلك مقتنعا باستخدام Vue.js في مشاريعككم القادمة.
1. ابدأ بسهولة كما كنت تفعل مع jQuery

في السابق، عندما كنا نريد إضافة مكتبة جيكويري لمشروعنا كنا فقط نقوم باستدعائها عن طريق الوسم <script> كما نستدعي أي ملف جافاسكريبت. بنفس الطريقة يمكن إضافة Vue.js لمشاريعنا :
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
1

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>

بعد ذلك يمكننا إنشاء ملف الجافاسكريبت الخاص بنا حيث سنكتب أكواد Vue.js.
لنرى مثالا صغيرا عن سهولة استخدام Vue.js في مشاريع الويب :
app.html
<div id="app"> <h1>{{ message }}</h1> <input v-model="message"> </div>
1
2
3
4

<div id="app">
<h1>{{ message }}</h1>
<input v-model="message">
</div>

app.js
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
1
2
3
4
5
6

var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})

app.css
h1 { font-size: 36px; color: #444; }
1
2
3
4

h1 {
font-size: 36px;
color: #444;
}

لا يوجد أسهل من هذا
تتبع مكتبة Vue.js نظام تدفق بيانات ثنائي الإتجاه (Two-Way Data Binding) في غاية المرونة، حيث أن تغيير البيانات من واجهة المستخدم يقابله تحديث أتوماتيكي للبيانات في كود جافاسكريبت والعكس صحيح.
تنويه

يجب التنويه هنا إلى أن هذه الطريقة في البدء مع Vue.js قد تكون صالحة في حال احتجنا Vue لغرض بسيط في صفحة واحدة أو بعض صفحات مشروعنا. ولكن عندما يكون المشروع في أغلبه عبارة عن كود جافاسكريبت أو تطبيقا أحادي الصفحة Single Page Application فإن الحل الأفضل والموصى به لتثبيت Vue.js هو عن طريق الحزمة Vue-CLI. هذه الأخيرة تعني ل Vue.js ما تعنيه حزمة create-react-app بالنسبة ل React.js أو Angular-CLI لإطار العمل أنجولار.
هذه المرونة نقطة إيجابية بالنسبة لمكتبة Vue.js، إذ يمكننا بواسطتها تطوير مشاريع كاملة ومعقدة في نفس الوقت الذي يمكننا استخدامها لغايات أقل تعقيدا مثل إنشاء مكونات (Components) تستخدم في أجزاء معينة فقط من صفحات الموقع، وهذا هو السبب في وصف Vue.js بأنه Progressive framework.
الاسباب التي تدفعك لاختيار إطار

2. النظام البيئي ل Vue.js مدعوم كله تقريبا بشكل رسمي

الاسباب التي تدفعك لاختيار إطار

معظم المكتبات المكونة للنظام البيئي لإطار العمل Vue.js مدعومة رسميا من طرف الفريق نفسه المطور ل Vue.js، وهذه ميزة فريدة لا نراها على سبيل المثال في أطر عمل أو مكتبات منافسة مثل React.js.
هذه الميزة تضمن للمطورين توافقية دائمة وتناغما مستمرا بين مختلف هذه المكتبات (Vuex ،Vue-router ،Vue-cli إلخ…) التي تستخدم بشكل مكثف في جل مشاريع Vue.js.
الجميل كذلك في هذه النقطة أننا لو أردنا مكتبة، على سبيل المثال لإدارة الحالة (State management) في تطبيقات Vue، فلن يكون علينا البحث بعيدا عن الحل الأفضل من بين، ربما، عشرات المكتبات الموجودة لنفس الغرض، لأن فريق Vue.js وفر لنا مكتبة خاصة لهذه المهمة واسمها Vuex موثقة أيضا بشكل جيد على الموقع الرسمي ل Vue.js.
هذا النظام البيئي الغني والمتراص جعل من Vue.js إطار عمل قابلا للتفكيك وفق احتياجاتنا، فعوض جمع كل تلك الوظائف في قلب ونواة الإطار، كما هو الحال في إطار العمل Angular مثلا، قام الفريق المطور بقيادة Evan You بتقسيم كل ذلك إلى مكتبات مستقلة عن نواة المكتبة الأساسية. بهذا تم الحفاظ على حجم Vue.js الصغير وجعل منها مكتبة وإطار عمل في نفس الوقت.
3. السرعة الفائقة والأداء الممتاز

إطار العمل Vue صغير بالمقارنة مع الثنائي Angular و React.js، فحجمه وهو مضغوط (gzipped) لا يتجاوز 30 كيلو بايت شاملة Vue-router ،Vue.js و Vuex
هذا الحجم الصغير يعني وقت تحميل سريع في المتصفح واستهلاك أقل للذاكرة.
السبب الآخر لقوة أداء وسرعة Vue.js هو الإعتماد على مبدأ Virtual DOM الذي تم استلهامه من React.js. هذا المبدأ يعتمد على إنشاء شجرة DOM وهمية في ذاكرة المتصفح (عبارة عن كائن جافاسكريبت)، وبعد كل تغير في حالة التطبيق يتم مقارنة Virtual DOM مع DOM الحقيقي ليتم تحديث الأجزاء فقط التي طرأ عليها التغيير وليس شجرة DOM كلها.

المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress

01-04-2019, 06:01 PM	#1
raheel تاريخ التسجيل: Feb 2019 العمر: 38 المشاركات: 1,149 التقييم: 10	raheel تاريخ التسجيل: Feb 2019 العمر: 38 المشاركات: 1,149 التقييم: 10 الاسباب التي تدفعك لاختيار إطار العمل Vue.js الاسباب التي تدفعك لاختيار إطار العمل Vue.js اختيار إطار عمل جافاسكريبت ليس أسهل مهمة في العالم في وقتنا هذا، بالخصوص إذا علمنا أن الخيارات متعددة ومجتمع جافاسكريبت من أنشط المجتمعات في عالم لغات البرمجة. نسبة ساحقة من مطوري الويب حول العالم متفقون ويعلمون جيدا أن الثلاثي المتكون من أنجولار، React.js و Vue.js هم الأكثر شعبية والأكثر استخداما في تطبيقات ومشاريع الويب الحديثة، والإختيار بين واحد منهم يعتبر مهمة أصعب حيث أن لكل واحد نقاط قوة كبيرة ومزايا خاصة تجذب مطوري واجهات الويب الأمامية. إطار العمل Vue.js، الذي طوره في البداية شخص واحد فقط، استطاع اقتسام هذه الكعكة مع React.js و Angular اللذان يقف خلفهما عملاقا الويب Facebook و Google، وهذا ليس من قبيل الصدفة. Vue.js يتمتع بمزايا كثيرة تكسبه جاذبية خاصة وتجعله خيارا مفضلا لأعداد هائلة من المطورين. وفي هذا المقال، سنستعرض لكم 3 من أهم هذه الأسباب التي قد تجعلك مقتنعا باستخدام Vue.js في مشاريعككم القادمة. 1. ابدأ بسهولة كما كنت تفعل مع jQuery في السابق، عندما كنا نريد إضافة مكتبة جيكويري لمشروعنا كنا فقط نقوم باستدعائها عن طريق الوسم <script> كما نستدعي أي ملف جافاسكريبت. بنفس الطريقة يمكن إضافة Vue.js لمشاريعنا : <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> 1 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> بعد ذلك يمكننا إنشاء ملف الجافاسكريبت الخاص بنا حيث سنكتب أكواد Vue.js. لنرى مثالا صغيرا عن سهولة استخدام Vue.js في مشاريع الويب : app.html <div id="app"> <h1>{{ message }}</h1> <input v-model="message"> </div> 1 2 3 4 <div id="app"> <h1>{{ message }}</h1> <input v-model="message"> </div> app.js var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) 1 2 3 4 5 6 var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) app.css h1 { font-size: 36px; color: #444; } 1 2 3 4 h1 { font-size: 36px; color: #444; } لا يوجد أسهل من هذا تتبع مكتبة Vue.js نظام تدفق بيانات ثنائي الإتجاه (Two-Way Data Binding) في غاية المرونة، حيث أن تغيير البيانات من واجهة المستخدم يقابله تحديث أتوماتيكي للبيانات في كود جافاسكريبت والعكس صحيح. تنويه يجب التنويه هنا إلى أن هذه الطريقة في البدء مع Vue.js قد تكون صالحة في حال احتجنا Vue لغرض بسيط في صفحة واحدة أو بعض صفحات مشروعنا. ولكن عندما يكون المشروع في أغلبه عبارة عن كود جافاسكريبت أو تطبيقا أحادي الصفحة Single Page Application فإن الحل الأفضل والموصى به لتثبيت Vue.js هو عن طريق الحزمة Vue-CLI. هذه الأخيرة تعني ل Vue.js ما تعنيه حزمة create-react-app بالنسبة ل React.js أو Angular-CLI لإطار العمل أنجولار. هذه المرونة نقطة إيجابية بالنسبة لمكتبة Vue.js، إذ يمكننا بواسطتها تطوير مشاريع كاملة ومعقدة في نفس الوقت الذي يمكننا استخدامها لغايات أقل تعقيدا مثل إنشاء مكونات (Components) تستخدم في أجزاء معينة فقط من صفحات الموقع، وهذا هو السبب في وصف Vue.js بأنه Progressive framework. 2. النظام البيئي ل Vue.js مدعوم كله تقريبا بشكل رسمي معظم المكتبات المكونة للنظام البيئي لإطار العمل Vue.js مدعومة رسميا من طرف الفريق نفسه المطور ل Vue.js، وهذه ميزة فريدة لا نراها على سبيل المثال في أطر عمل أو مكتبات منافسة مثل React.js. هذه الميزة تضمن للمطورين توافقية دائمة وتناغما مستمرا بين مختلف هذه المكتبات (Vuex ،Vue-router ،Vue-cli إلخ…) التي تستخدم بشكل مكثف في جل مشاريع Vue.js. الجميل كذلك في هذه النقطة أننا لو أردنا مكتبة، على سبيل المثال لإدارة الحالة (State management) في تطبيقات Vue، فلن يكون علينا البحث بعيدا عن الحل الأفضل من بين، ربما، عشرات المكتبات الموجودة لنفس الغرض، لأن فريق Vue.js وفر لنا مكتبة خاصة لهذه المهمة واسمها Vuex موثقة أيضا بشكل جيد على الموقع الرسمي ل Vue.js. هذا النظام البيئي الغني والمتراص جعل من Vue.js إطار عمل قابلا للتفكيك وفق احتياجاتنا، فعوض جمع كل تلك الوظائف في قلب ونواة الإطار، كما هو الحال في إطار العمل Angular مثلا، قام الفريق المطور بقيادة Evan You بتقسيم كل ذلك إلى مكتبات مستقلة عن نواة المكتبة الأساسية. بهذا تم الحفاظ على حجم Vue.js الصغير وجعل منها مكتبة وإطار عمل في نفس الوقت. 3. السرعة الفائقة والأداء الممتاز إطار العمل Vue صغير بالمقارنة مع الثنائي Angular و React.js، فحجمه وهو مضغوط (gzipped) لا يتجاوز 30 كيلو بايت شاملة Vue-router ،Vue.js و Vuex هذا الحجم الصغير يعني وقت تحميل سريع في المتصفح واستهلاك أقل للذاكرة. السبب الآخر لقوة أداء وسرعة Vue.js هو الإعتماد على مبدأ Virtual DOM الذي تم استلهامه من React.js. هذا المبدأ يعتمد على إنشاء شجرة DOM وهمية في ذاكرة المتصفح (عبارة عن كائن جافاسكريبت)، وبعد كل تغير في حالة التطبيق يتم مقارنة Virtual DOM مع DOM الحقيقي ليتم تحديث الأجزاء فقط التي طرأ عليها التغيير وليس شجرة DOM كلها. المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress
	اقتباس

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
كل شء عن أطر العمل Angular ،React.js و Vue.js	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	10-04-2019 08:34 PM
كيف ظهرت وتطورت أطر عمل جافاسكريبت ؟	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	10-04-2019 08:25 PM
معلومات عن أطر العمل Angular ،React.js و Vue.js	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	01-04-2019 06:34 PM
مراحل تطور أطر عمل جافاسكريبت	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	01-04-2019 06:00 PM
مؤسسة ركن حماية	شاميةة	قسم الإعلانات التجارية	1	06-06-2018 09:35 AM

اسم العضو		حفظ البيانات؟
كلمة المرور

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)