تكويد و تطوير

تنسيق المشاريع الكبيرة و المتوسطه Front-End

   -   687

السلام عليكم , ان شاء الله تكونوا بخير 🙂

بدايه المشاريع الكبيرة او المتوسطه , هى مشاريع عدد صفحاتها بيكون كبير نسبيا , عدد ال componnets فيها بتكون متنوعه , و ان كانت نفس الفكره , لكن بإختلافات .. و البروجيكت نفسه بيكون ليه development path ودا لوحده سبب مقنع جدا انك تفكر الف مره فى طريقه ترتيبك للمشروع .. نبدأ نتكلم فى الجزء دا فى النقط الجايه بأذن الله ..

إستخدم SASS :

بعد تجارب كتير , لما بقارن طريقه شغلى + الانتاج و سرعته فى مراحله المختلفه , ما بين CSS و SASS .. الموضوع مختلف تماما , بصراحه CSS لوحدها , هى اسرع طريقه تقدر تبدأ بيها مشروع , لكن بنسبه ٩٩٪ , المشروع نتيجته النهائية هتكون مخيبة , و اى تعديل هيبقى الوضع كارثى بالنسبه ليك فى اوقات كتير جدا .. يعنى لو حاجه shared تخيل انك بتعدل عليها و انت بانى بنفس الكونسبت او الكلاسز دى مثلا 5 componnets , فى sass انت هتعدل تقريبا فى خلال ١٠ دقايق كل حاجه و الكود هيفضل clean و منظم جدا, اما CSS فانت عارف كويس ان الوضع هيكون سئ للغايه ..

البوست كله هيعتمد على انك هتشتغل SASS , لو موش بتستخدمها , شايف انها حاجه معقده , تقدر تشوف شرح استخدام SASS الجزء الاول من هنا , و التانى من هنا ..

لكل component ملف :

الجزء الاهم فى المشروع , هو ترتيب ملفاته .. دا هيحدد كتير من راحتك بعدين فى الشغل. خلينا نستفيد شويه من تجارب ال framework الكبيره فى ترتيبها لملفاتها فى SASS , هتلاقى لكل componnet ملف ! و اوقات ال componnet الواحد , لو متشعب , هيبقى عباره عن فولدر , و جواه اكتر من ملف ..

انا عارف ان فكره كتره الملفات بالنسبه ليك فى الاول فكره سيئه ! ممكن تشوفها دوشه , لكن هى تنظيميه و مع الاستخدام و التعود على الطريقه دى هتلاقيها انها فعلا بتختصر عليك وقت كبير جدا ضايع وسط ملفاتك و قاعد بتسكرول و تبحث عن سطر و سط ملف طويل عريض على الفاضى ..

Resources

بالنسبه ليا , مشاريعى ٩٩٪ منها معتمد على وجود فولدر واحد اسمه بيحتوى جواه على مجموعه ملفات كبيره فرعيه .. خلينا نفترض ان الفولدر الرئيسيى اسمه Theme او Resources زى ما تحب سميه ! موش مشكله تسميته , المهم فى اللى بعده, جواه بضيف الفولدرات الجايه :

 

١. FONTS :

من الاسم , الفولدر خاص بالفونتس اللى بشتغل بيها , بكون مرتبها فى مشاريع بأسماء الفونتس , و مشاريع تانيه بيبقى فيها مثلا Arabic . English , Icons , ايا كان الترتيب اللى انت ممكن تشتغل بيه , بس اللى اقصده انك فى الاخر حاول تكون مرتب حتى الفونتس جوه فولدر الفونتس موش مجرد انك فاصلها فى فولدر لوحدها وبس ..

fonts

٢. IMGS :

و دا برده من الاسم , بخلى فيه كل الملفات الخاصه بالصور , اوقات لما بكون بستخدم فيديو برده بخليه فى IMGS و بصراحه لقله المرات اللى بعمل فيها كده , فبخليه وسط الصور مفيش مشكله , و لما بيكون فى اقسام مخصصه متقسم عليها الصور , يعنى مثلا معرض اعمال ك صفحه , فأكيد هخلى ملف جوا ال IMGS مثلا اسمه Projects او شئ من هذا القبيل ” ابو صلاح قبيل” ..

ملحوظه رفيعه بالنسبه لل Images : 

فى المشاريع الكبيرة مينفعش تشتغل بصور كتير , و اذا اشتغلت بصور كتير , يفضل ان ٩٩٪ منها يكون SVG , هيبقى افضل فى اداء الموقع , و اسهل فى الاستغلال من ناحيه تكبير الصور و تصغيرها من غير ما تبوظ الجوده .. لكن بشكل عام , مينفعش تعتمد على ايقونات ك صور , مينفعش تعتمد على خلفيات كتير ك صور برده ..

و فى بعض المشاريع بتكون الكونسبت معتمده على صور كتير , فى الحاله دى , ياريت تضغط كل الصور لاقصى درجه ممكن , هتلاقى نفسك بتوفر مساحات خياليه .. بالنسبه ليا فى ماك بتستخدم تطبيق imageOptim بسيط , و بيدي نتائج رائعه فى اغلب الاوقات ..

inc

٣. INC :

دا تانى اهم فولدر , دا بيحتوى على ال javascript منظمه فى ملفات vendor و لو فى فريم ورك بستخدمه “كمثال foundation” بيكون فى فولدر للجافا سكريت الخاصه بيه. ملف vendor بيكون فيه ال libraly  اللى بشتغل بيها زى jqiery و اى بلوجين تانيه ..  و اخيرا ملف app.js و دا فيه شغل ال js الخاص بالمشروع.

كمان بيكون فيه ال layout.css اللى هو ناتج عن watch لملفات sass اللى فى المشروع ككل بعد ما عمل compile .. الفولدر دا بيحتوى على كل حاجه بعملها include فى ال html بالكامل و لحد الفولدر دا , نكون خلصنا الجزء اللى بيستلمه العميل للمشروع , دا اذا مطلبش ملفات SASS .. او لحد الجزء دا , دى الملفات اللى بتترفع على السايت لايف , لان كل اللى جاى هو خاص بيك ك front-end وبس ..

٤. SCSS :

فولدر SCSS بيكون محتوى على فولدرين جواه , الاول Framework و التانى ال Pages و ملف layout.scss ودا اللى بيعمل لود لكل الفايلز اللى انا محتاجها ..

Framework

و دا بيكون جواه الكومبوننتس اللى هشتغل بيها , بتقسم السايت مثلا _footer.scss , header .scss , cards.scss الخ .. دا فى حاله انك موش هتشتغل ب فريم ورك , لو هتشتغل بفريم ورك , فلازم تفكر فى انك ممكن تيجى فى يوم من الايام تعمل update  للفريم , علشان كده لازم تحافظ على تقسيم الفريم ورك نفسه , مثلا فى foundation , اللى بعمله انى باخد الفريم بالكامل  copy جوه الفولدر دا , و من ملف _foundation.scss بحدد انا عاوز اعمل انكلود لانهى كومبوننتس فى فونديش بس ..

جوه فولدر Framework تقدر تعمل فولدر تسميه مثلا custom او تسميه بإسم المشروع , و تخلى فيه ملفاتك اللى اتكلمنا فيها مثلا footer.scss , header .scss , cards.scss ..

Pages

ودا بيبقى محتوى على الحجات الخاصه بالصفحات بفضل انى اعمل فايل لكل صفحه home_page , inner_pages , الخ ..

layout.scss

دا اهم حاجه , انت هنا بتعمل انكلود لكل اللى انت محتاجه , لازم تفضل مرتب المحتوى فيه كويس جدا , و دا مثال على الترتيب اللى بشتغل بيه مثلا فى الفايل دا ,. لمجرد انك تاخد فكره موش اكتر


/* || ===

= CRTIVO - MAIN UI KIT
= By MOHAMED YAHIA
= Oct, 2015

===================
||    CONTENT    ||
===================

    01. Normalize
    02. Foundation




=== || */

      @import 'framework/vendor/normalize';
      @import 'framework/foundation';





/* || ===

= PORIJECT NAME - Dedicated Pages Layout

===================
||    CONTENT    ||
===================

    01. Home Page
    02. Inner Page

=== || */

      @import 'pages/home_page';
      @import 'pages/inner_page';

اهم حاجه , انك تفضل مرتب فعليا الملفات و النوتس الخاص بالانكلودز بتاعتها , لاحظ برده , متخلطش بين الفايل دا و الفايل اللى بتعمل include للفريم ورك اللى بتشتغل بيه عن طريقه , ببساطه , خلى الفريم ورك ليه فايل خاص باللود بتاعه زى الوضع الطبيعى اللى بيعمله اى فريم ورك , و متعمل لود للفايلز الخاصه بالفريم ورك بطريقه مباشرة من الفايل دا ,, هتسهل عليك كتير فى اى ابديت انت محتاجه بعدين.

 

فى الاخر , هنا تقدر تحمل نسخه من الترتيب الخاص بالملفات بالشكل دا , فولدرات بس , مفيش اى فايل الا layout.scss , و تقدر ترتب ملفاتك جواه بالطريقه دى او تحدث عليها اذا شايف حاجه انسب ليك ..

Resources.zip

اخيرا , شكرا جدا على وقتك , و ان شاء الله تكون استفدت 🙂

دمتم سالمين 🙂

المناقشة و النشر