دو تا رستوران توی یک خیابون؛ رستوران نیما و رستوران نوید، هر دو یک جور غذا سرو می کنند. رستوران نیما غذای خوشمزه ای داره، مواد اولیه درجه یک استفاده می کنه و بهداشت آشپزخونه رو هم رعایت می کنه اما ظاهر بیرون رستوران یک ظاهر خیلی معمولی، با تابلوی رنگ و رو رفته، مبلمان مندرس و پرسنلی با رفتاری خشک. حالا سری میزنیم به رستوران نوید؛ غذای حجیم و شکم پرکن، مواد اولیه درجه دو و نظارت نه چندان قوی روی بهداشت پخت. ولی ویترین پر زرق و برق، دکوراسیون شیک و مینیمال، پرسنل خوش برخورد و خلاصه اینکه از نظر ظاهری هیچی کم نگذاشته.
حالا یه سوال: اگه اولین بار باشه توی این خیابون قدم گذاشتین، روی هر کدوم از رستوران ها چه قضاوتی دارید؟ رستوران نیما رو انتخاب می کنید یا رستوران نوید؟ حالا همین موضوع رو به بقیه موارد روزمره تسری بدید: آشنایی با آدما در اولین برخورد، سوپر مارکت محله، لباس فروشی، نمایندگی خودرو و هزار تا مثال دیگه.
بنابراین می بینیم که ظاهر هر چیز تاثیر به سزایی در قضاوت افراد در مورد باطن هر چیز داره. این رو هم میدونیم که از روی ظاهر نباید قضاوت کرد، ولی این یک واقعیته و اگر نبود شما لباس مرتب و تمیز و شیک نمی پوشیدین.
این همه داستان رو گفتیم تا برسیم به اینکه ظاهر یک اپلیکیشن یا یک وب سایت تاثیر به سزایی در قضاوت کاربران نسبت به کیفیت و کارایی اون داره.
طبق تعریف Wikipedia، فرانت اند همان لایه گرافیکی و رابط کاربری هست که به کاربر اجازه میده با بک اند (Back-End) نرم افزار ارتباط بگیره و اطلاعات مورد نظر خودش رو دریافت کرده و یا ذخیره کنه. از دیدگاه مهندسی نرم افزار شاید بتونیم در قیاس با لایه های استاندارد شبکه (OSI)، اون رو به آخرین لایه تشبیه کرد که بالاتر از اون کاربر قرار داره.
برای ایجاد یک فضای بصری، براساس دسته بندی نرم افزار مثل وب، کلاینت و موبایل، ابزار و زبان های مختلفی استفاده میشه. در ساده ترین حالت و برای ایجاد فرانت اند در محیط وب به HTML به عنوان پایه کار نیاز داریم. HTML مثل اسکلت و سفت کاری یک ساختمان یا همون پلان کلی ساختمان هست. در مرحله سفت کاری هیچ زیبایی و ظرافتی وجود نداره و فقط محل قرارگیری اتاق ها تعیین میشه. بعد از این مرحله، نیاز داریم به ساختارمون رنگ و لعاب بدیم. برای این کار به CSS (Cascading Style Sheets) نیاز داریم تا بتونیم رنگ، اندازه متون، محل قرارگیری تصاویر و هر آنچه به زیبا سازی صفحه HTML نیاز هست رو پیاده کنیم. CSS مشابه کاری هست که رنگ آمیزی، کاشی کاری و نصب شیشه و موارد مشابه در ساختمان انجام میده. حالا نوبت به تعامل این ساختار با کاربر و back-end هست. یعنی وقتی کاربر کلیک میکنه، رنگ عوض بشه و یا اطلاعاتی رو از back-end دریافت و یا به اون ارسال کنه. برای این کار معمولا از JavaScript استفاده میشه که می تونیم اونو به تاسیسات گرمایشی ساختمان، آسانسور، دوربین مدار بسته و موارد دیگه تشبیه کرد.
هرچه پروژه بزرگتر بشه، چالش های حین توسعه به مراتب بیشتر میشه. تقریبا برای پیاده سازی فرانت اند هر پروژه ای می تونیم روی HTML، CSS و JavaScript به تنهایی حساب کنیم، اما پیچیدگی، دیباگ و توسعه اون با چالش های زیادی توام خواهد بود. بویژه اینکه می تونه بعضی از اصول برنامه نویسی مثل اصل DRY یا همان Don't Repeat Yourself رو هم نقض کنه.
برای حل این مشکل، فریم ورک ها و لایبرری هایی اومدن تا کار برنامه نویسان فرانت اند سریعتر، تمیزتر و اصولی تر انجام بشه. شرکت ها و تیم های مختلفی تا الان دست به تولید این محصولات کردند که میشه به ReactJs، Angular، Vue، Bootstrap، Ember و BackboneJs اشاره کرد.
برای شروع هر کاری، یک سری اصول و مهارت های اولیه لازمه که تا اونا رو بلد نباشیم و درک عمیقی نسبت به اونا نداشته باشیم، نمیتونیم خودمون رو برنامه نویس فرانت اند بدونیم. یک بار دیگه روی این نکته تاکید میکنم: "درک عمیق!" و یک بار دیگه: "درک عمیق!". این یعنی اگه در همین مفاهیم پایه ضعیف باشیم همیشه در مراحل بالا لنگ میزنیم و نمیتونیم برخی از چالش ها رو حل کنیم و به اصطلاح خلاقیت و ابتکار عمل داشته باشیم.
این مفاهیم پایه در فضای وب، شامل HTML، CSS و JavaScript هستند که اول با HTML، بعد با CSS و در کنار اون JavaScript هست. در گام بعدی، می تونیم سراغ فریم ورک ها و لایبرری های مورد نظرمون بریم.
یک نکته مهم دیگه اینه که در کنار مهارت های فنی، دانستن بعضی چیزها هرچند واجب نیست ولی به افزایش مهارت با کمک میکنه و ما رو یک سر و گردن از بقیه بالاتر میبره. برای مثال آشنایی کلی با تئوری رنگ و رواشناسی رنگ ها میتونه در کارمون به صورت غیرمستقیم کمک کنه.
همیشه این پرسش مطرحه که کدوم زبان برنامه نویسی از همه بهتره. این پرسش از اساس غلط هست. مثل اینه که بگیم ماشین آفرود بهتره یا یک سوپر اسپورت مثل لامبورگینی. خب معلومه بستگی به جایی که میخوایم استفاده کنیم بستگی داره. اگه میخوایم توی کوه و بیابون و سنگلاخ حرکت کنیم اون سوپر اسپورت 10 دقیقه هم دوام نمیاره.
بنابراین برای استفاده یک فریم ورک یا لایبرری باید نسبت به شرایط پروژه تصمیم گیری کنیم و تعصب خاصی روی یک استک یا همان زبان خاص نداشته باشیم.
اما به یک نکته دیگه میرسیم که من برنامه نویس فرانت اند باید همه فریم ورک ها رو بلد باشم؟ باز هم صد البته که نه! شما باید مفاهیم پایه رو خوب بلد باشی و فریم ورک رو براساس شرایط خودت انتخاب کنی. مثلا ممکنه یه نفر بخواد برای 5 سال آینده برنامه ریزی کنه تا بتونه جایی استخدام بشه. اینجاست که باید با یک تحقیق میدانی ببینه چه فریم ورکی برای شرکت ها اهمیت بیشتری داره. یا اینکه ممکنه شما برای یک پروژه بخواید امکانات خاصی در نظر بگیرید که فقط توی یک لایبرری یا فریم ورک خاصی هست. پس باید همونو رو یاد بگیرید.
البته این رو هم یادآور میشیم که آشنایی کلی با همه این فریم ورک ها کار بدی نیست ولی این تقریبا غیر ممکنه که بتونید توی همه اونا مسلط بشید. بلکه سعی کنید توی یک یا دو تا از اونا حرفه ای باشید.
ظاهر نرم افزار شما (UI) و همینطور سهولت استفاده از اون (UX) نقش به سزایی در قضاوت افراد؛ چه مشتری، چه مصاحبه کننده، نسبت به نرم افزار شما داره. چه بسا با دیدن ظاهر نرم افزار، اعتماد بیشتری به back-end شما خواهند داشت. چرا که:
رنگ رخساره خبر میدهد از سر درون
