ثريد front end
ماهي أدوات البناء BUILD TOOLS
و لماذا نحتاج إلى إستخدامها أثناء عملية تطوير تطبيقات Front end
🧵👇🏻
ماهي أدوات البناء BUILD TOOLS
و لماذا نحتاج إلى إستخدامها أثناء عملية تطوير تطبيقات Front end
🧵👇🏻
✳ لماذا يجب إستخدام
اداوت البناء build tools؟
قديما أثناء عمليه تطوير الموقع.
أحتاج المبرمج إلى إستخدام عده مكتبات و أطر مساعده مثل
Jquery, bootstrap
في المشاريع الصغيرة لا توجد مشكلة أثناء التعامل مع مكتبات خارجية third party
👇🏻
اداوت البناء build tools؟
قديما أثناء عمليه تطوير الموقع.
أحتاج المبرمج إلى إستخدام عده مكتبات و أطر مساعده مثل
Jquery, bootstrap
في المشاريع الصغيرة لا توجد مشكلة أثناء التعامل مع مكتبات خارجية third party
👇🏻
لكن في المشاريع المتوسطة و الكبيرة
الأمر كارثي.
مثلا عند إستخدام مكتبه
bootstrap 4
يجب إستدعاء الملفات بترتيب محدد و إلا لن
تعمل
في ملفات javascript
يجب إستدعاء مكتبه jquery أولا ثم
مكتبة bootstrap.js
👇🏻
الأمر كارثي.
مثلا عند إستخدام مكتبه
bootstrap 4
يجب إستدعاء الملفات بترتيب محدد و إلا لن
تعمل
في ملفات javascript
يجب إستدعاء مكتبه jquery أولا ثم
مكتبة bootstrap.js
👇🏻
بإستخدام أدوات البناء لن نحتاج إلى
الاهتمام بأي ملف تم استدعائه أولا
أدوات البناء تقوم بحل هذه المشكلة بالنيابة عنك 😉
👇🏻
الاهتمام بأي ملف تم استدعائه أولا
أدوات البناء تقوم بحل هذه المشكلة بالنيابة عنك 😉
👇🏻
الأمر الآخر
نحتاج إلى عمل ضغط
و حذف التعليقات comments
الموجوده في الكود،
تثبيت و إستخدام المكتبات،
تشغيل سيرفر محلي أثناء عملية التطوير،
تصغير حجم الصور.
عمل كل المهام فوق بشكل يدوي أمر ممل و متكرر في أغلب المشاريع 😅
👇🏻
نحتاج إلى عمل ضغط
و حذف التعليقات comments
الموجوده في الكود،
تثبيت و إستخدام المكتبات،
تشغيل سيرفر محلي أثناء عملية التطوير،
تصغير حجم الصور.
عمل كل المهام فوق بشكل يدوي أمر ممل و متكرر في أغلب المشاريع 😅
👇🏻
✳ ادوأت البناء.
✴ webpack
من أشهر اداوت البناء في مجال الويب
تتميز بوجود العديد من الإضافات
و مجتمع كبير من المطورين.
التعامل مع Webpack أمرا صعب
للمبتدئين و يحتاج وقت من أجل إعداده و تثبيت loader المناسبة بما يتوافق مع احتياجاتنا.
👇🏻
✴ webpack
من أشهر اداوت البناء في مجال الويب
تتميز بوجود العديد من الإضافات
و مجتمع كبير من المطورين.
التعامل مع Webpack أمرا صعب
للمبتدئين و يحتاج وقت من أجل إعداده و تثبيت loader المناسبة بما يتوافق مع احتياجاتنا.
👇🏻
عند فهم طريقة عمله وبعد الإعتياد عليه، سيوفر عليك الكثير من الوقت و المجهود ويجعل بيئة التطوير رائعه.
✴ parcel
اسهل في التعامل و الاستخدام مقارنة مع webpack
لا تحتاج إلى عمل ملف إعدادات معقد كحال webpack
يتميز بدعم css, images
بدون الحاجة إلى استخدام إضافات.
✴ parcel
اسهل في التعامل و الاستخدام مقارنة مع webpack
لا تحتاج إلى عمل ملف إعدادات معقد كحال webpack
يتميز بدعم css, images
بدون الحاجة إلى استخدام إضافات.
عكس webpack التي تحتاج إلى تثبيت الكثير من الإضافات مثل
css-loader,
file-loader
من أجل عمل بناء لملفات image , css
👇🏻
css-loader,
file-loader
من أجل عمل بناء لملفات image , css
👇🏻
إستخدام أدوات البناء مهم جدا أثناء عملية التطوير و تصدير المشروع
إستخدامها يوفر لنا الوقتو المجهود في عمل
1- تصغير و ضغط ملفات javascript و css
2 - تصغير و تقليل دقه الصور
3 - توفير بيئة تطوير احترافية تسهل التعامل مع المكتبات third party
👇🏻
إستخدامها يوفر لنا الوقتو المجهود في عمل
1- تصغير و ضغط ملفات javascript و css
2 - تصغير و تقليل دقه الصور
3 - توفير بيئة تطوير احترافية تسهل التعامل مع المكتبات third party
👇🏻
في ثريد قادم إن شاء الله
سوف أشارك معكم تجربتي
في إستخدام webpack
و لماذا قررت الانتقال إلى إستخدام vite
👇🏻
سوف أشارك معكم تجربتي
في إستخدام webpack
و لماذا قررت الانتقال إلى إستخدام vite
👇🏻
نلتقي في ثريد أخر 😇
إذا أعجبك الثريد لا تنسى تعمل
ريتويت عشان
يستفيد اكبر عدد من الناس 😊
تابع حسابي @naif4web
لجديد المقالات و النصائح
في مجال البرمجة و تصميم الواجهات Ui
إذا أعجبك الثريد لا تنسى تعمل
ريتويت عشان
يستفيد اكبر عدد من الناس 😊
تابع حسابي @naif4web
لجديد المقالات و النصائح
في مجال البرمجة و تصميم الواجهات Ui
جاري تحميل الاقتراحات...