فرانت‌اند چیست؟ فرانت‌اند کار کیست؟

در دنیای برنامه نویسی به دست‌های پشت پرده، بک اند می‌گویند ولی Front endها همان‎هایی هستند که با صداقت کامل هر آنچه را که دارند در طبق اخلاص و در اختیار کاربران قرار می‌دهند. البته در دنیای برنامه‌نویسی، فرانت اند و بک اند کاملاً لازم و ملزوم همدیگرند و تا این دست‌های پشت پرده نباشند، فرانت اندهای صادق نمی‌توانند کاری از پیش ببرند و روی زیبایشان را به شما نشان بدهند.

اگر می‌خواهید درباره‌ی تفاوت فرانت اند و بک اند بیشتر بدانید و با شناخت مهارت های یک فرانت اند کار از زیر و بم کارشان سر دربیاورید. پس با ما باشید تا همه چیز را در این باره به شما بگوییم.

در بوتکمپ‌ فرانت‌اند بامداد، در محیطی کاملاً علمی و حرفه‌ای، به شیوه‌ای کاملاً پروژه‌محور همه پیش‌نیازهای ورود به بازار کار فرانت‌اند را به دست خواهید آورد.

فرانت اند ( Front end ) چیست؟

تمام برنامه‌نویس‌هایی که در زمینه‌ی طراحی و توسعه وب فعالیت دارند، اصطلاح فرانت‌اند را زیاد شنیده‌اند. حتماً می‌دانید که در زبان انگلیسی، Front به‌معنی «جلو، پیش و روبه‌رو» است. حالا سوال اینجاست که چطور می‌شود این معنی‌ها را به طراحی و توسعه وب ربط داد؟

وقتی که شما وارد یک سایت می‌شوید، فقط ظاهرش را می‌بینید. ظاهر گرافیکی، تصاویر و تمام چیزهایی که شما با آن روبه‌رو می‌شوید، همان چیزی است که برنامه‌نویس‌ها به آن فرانت اند یا سمت کاربر می‌گویند. درواقع تمام موارد قابل‌مشاهده و قابل‌درک برای کاربر، فرانت اند به حساب می‌آید.

تفاوت فرانت اند و بک اند چیست؟

برای اینکه تفاوت فرانت اند و بک اند (Back end) را راحت درک کنید، بهتر است از دنیای واقعی برایتان یک مثال بزنیم.

یک فیلم سینمایی را در نظر بگیرید. در یک فیلم ما فقط صحنه و بازیگرانی را که در آن نقش بازی می‌کنند می‌بینیم اما این موضوع باعث نمی‌شود نقش کارگردان، فیلمنامه‌نویس، طراح صحنه و سایر عوامل را انکار کنیم. درست است؟!

خب در مورد طراحی و توسعه‌ی سایت هم قضیه دقیقاً همین شکلی است. در حقیقت بک اند در پشت صحنه شرایط را فراهم می‌کند تا فرانت اند و کاربر با هم تعامل داشته باشند.

از نظر تخصصی باید بگوییم که بک اند سه بخش دارد:

• سِرور
• برنامه
• پایگاه داده (دیتابیس)

برای مثال، زمانی که شما به‌عنوان کاربر در یک سایت حساب کاربری می‌سازید، «برنامه» اطلاعاتتان را در «دیتابیس»هایی که روی «سرور» قرار دارند، ذخیره می‌کند. به‌این‌ترتیب شما هر بار با ورود به حساب کاربری‌‌ای که اعطلاتتان در آن ذخیره شده، می‌توانید از امکانات سایت استفاده کنید.

بنابراین می‌شود گفت بک اند هسته‌ی اصلی تمام رخدادهای کامپیوتری است. درست مثل یک کوه یخ که حجم بیشتری از آن زیر آب است و ما آن را نمی‌بینیم.

پیشنهاد مقاله: بک اند (back end) چیست؟ برنامه نویس back end کیست؟

مهارت‌های یک فرانت اند کار چیست؟

 

 اگر می‌خواهید یک فرانت اند کار حرفه‌ای شوید، باید چند مهارت را خیلی خوب یاد بگیرید.

1. چراغ اول را با یادگیری زبان HTML روشن کنید

HTML مخفف عبارت «Hypertext Markup Language» و به معنی «زبان نشانه‌گذاری اَبَرمتن» است. اچ‌تی‌ام‌ال همان‌طورکه اسمش هم داد می‌زند، یک زبان نشانه‌گذاری است نه زبان برنامه نویسی.

این از نشانه‌گذاری! حالا چرا اَبَرمتن؟ ابرمتن یعنی با کمک این زبان می‌توانیم به متن‌ها قابلیت بیشتری بدهیم. مثلاً شما می‌توانید به کمک قابلیت هایپرلینک، اسناد HTML را به اسناد دیگر مرتبط کنید. یک سند HTML شامل عناصری مثل تیتر، پاراگراف متنی، جدول و عکس است.

زبان HTML، ساختار و قالب کلی صفحات وب را شکل می‌دهد. برنامه‌نویس‌ها به کمک این زبان، به‌راحتی می‌توانند صفحات وب و وب اپلیکیشن‌های مختلفی را ایجاد کنند. با این زبان به‌سادگی می‌توانید یک صفحه وب استاتیک بسازید.

2. از دوستی با زبان CSS یار همیشگی HTML غافل نشوید

CSS زبان دیگری است که کوتاه‌شده‌ی عبارت «Cascading Style Sheets» است. عبارتی که نزدیک‌ترین معنایی که می‌شود برایش درنظرگرفت «برگه‌های سبک‌دهی آبشاری» یا «شیوه‌نامه‌های آبشاری» است. CCS هم زبان برنامه نویسی یه حساب نمی‌آید بلکه همان‌طور که از اسمش پیداست یک زبان سبک‌دهی است.

یعنی با لایه‌بندی و استفاده از رنگ و فونت‌های مختلف، محتوای یک سایت را بخش‌بندی می‌کند تا محتوای خوش‌قیافه‌تر و قابل‌فهم‌تری به کاربر ارائه دهد.

حالا اگر بپرسید سبک آبشاری یعنی چه؟ جواب ما کاملاً تخصصی می‌شود. آبشاری بودن برگه‌(Sheet) ها به این معنی است که وقتی شما در زبان CCS، استایل یا کلاسی را برای یک برگه‌ی CCS انتخاب کنید، این استایل روی عناصر فرزند (Children) برگه‌ها هم تاثیر می‌گذارد.

بله! گفتیم که تخصصی می‌شود! حالا قلنج نکنید، نفستان را بیرون بدهید تا با یک مثال ساده، این تعریف تخصصی را روشن کنیم.

مثلاً اگر شما رنگ متن را در یکی از برگه‌های CCS آبی انتخاب کنید، تمام سرنویس‌ (Heading) ها و پاراگراف‌های متنی‌ای هم که در این متن استفاده می‌کنید آبی خواهند شد.

ازآنجاکه زبان‌های HTML و CCS در کنارهم هسته‌ی اصلی صفحات وب را شکل می‌دهند، یادگیری مهارت استفاده از HTML و CSS در طراحی فرانت اند وب سایت به‌عنوان یک مهارت اساسی برای فرانت اند کارها شناخته می‌شود.

3. با یادگیری زبان جاوااسکریپت پویا شوید

یک برنامه‌نویس فرانت اند بعد از طراحی صفحات وب با استفاده از CCS و HTML، پویانمایی صفحات را با زبان جاوااسکریپت انجام می‌دهد.

همان‌طورکه گفتیم با کمک زبان‌های نشانه‌گذاری CCS و HTML می‌توانید یک سایت ساده‌ی استاتیک طراحی کنید. سایتی که کاربر نمی‌تواند تعاملی با آن برقرار کند. به همین دلیل فرانت اند کارها دست به دامن زبان جاوا اسکریپت می‌شوند تا با پویا کردن سایت، تجربه کاربری (UX) را بهبود دهند.

زبان جاوااسکریپت یکی از محبوب‌ترین زبان‌ها برای پویا کردن وب‌سایت است. زبانی دینامیک، سطح بالا، تفسیری و شی‌‌ءگرا که از فریم‌ورک‌های قدرتمندی هم پشتیبانی می‌کند.

یک Front end کار به کمک زبان جاوا اسکریپت می‌تواند امکانات مختلفی را به وب اضافه کند، مثل:

• اضافه کردن امکان واکنش به رویدادهای کاربری؛
• ایجاد رفتار سفارشی در سایت؛
• بارگذاری داده از سرویس‌های مختلف؛

و بسیاری امکانات دیگر که تعامل کاربر را با سایت افزایش می‌دهد.

4. به کتابخانه‌های فرانت‌اند جاوااسکریپت رسوخ کنید

زبان جاوا اسکریپت دنیای رنگارنگی از امکانات مختلف است که کار را برای برنامه نویس های فرانت اند جذاب‌تر و راحت‌تر می‌کند. در این بین یادگیری فریم‌ورک‌هایی مثل React، Angular، Vue.js و jQuery بسیار مهم و کاربردی است.

بسیاری از فرانت‌اند کارها عقیده دارند که لذت و شیرینی استفاده از زبان جاوا اسکریپت زمانی بیشتر می‌شود که از این کتابخانه‌های قدرتمند استفاده کنید.

5. با یادگیری اصول طراحی وب واکنش‌گرا به ساز کاربر برقصید

همان‌طورکه می‌دانید کاربران ممکن است با پلتفرم‌های مختلفی مثل لپ‌تاپ، گوشی موبایل و … از صفحات وب بازدید ‌کنند. به همین دلیل یادگیری اصول طراحی وب واکنش‌گرا (Responsive web design) به یک فرانت اند کار کمک می‌کند تا صفحات وبی که طراحی می‌کند، متناسب با پلتفرم‌های مختلف اجرا شوند.

6. با یادگیری گرافیک پای هنر را به دنیای کدها باز کنید

یک برنامه نویس فرانت اند با یادگیری برنامه‌هایی مثل فتوشاپ، ایلاستریتور و … می‌تواند به‌خوبی از پس طراحی یک رابط کاربری حرفه‌ای بربیاید. زیرا نمای ظاهری سایت، فونت، تصاویر و رنگ‌بندی مناسب در جذب کاربر بسیار موثر است.

7. از تجربه کاربری (UX) درس بگیرید

منظور از تجربه کاربری یا User Experience همان احساسی است که به کاربر در زمان روبرویی با سایتتان دست می‌دهد. بنابراین یک فرانت‌اند کار باید با نیازهای کاربر به خوبی آشنا باشد تا سایت یا برنامه‌ای طراحی کند که کاربر هنگام کار با آن احساس خوبی داشته باشد.

به همین دلیل یک برنامه نویس فرانت اند باید با تقویت خلاقیت و خرج کردن مقدار زیادی سلیقه، از طرح‌های چشم‌نواز، خلاقانه و کاربرپسند برای ظاهر وب یا اپلیکیشنش استفاده کند. هرچند UX را نمی‌شود فقط در این موارد خلاصه کرد.

8. یادگیری اصول سئو را دست‌کم نگیرید

به یاد داشته باشید حتی یک فرانت‌اند کار هم که با ظاهر سایت سروکار دارد باید بداند چه‌طور کدها، محتوا، تصاویر و … را برای بهتر دیده شدن سایت بهینه کند.

پیشنهاد مقاله:بهترین زبان برنامه نویسی: مقایسه کامل سی شارپ و php

تفاوت فرانت اند کار و طراح UI چیست؟

در حوزه‌ی طراحی وب ما با دو مفهوم و تخصص متفاوت روبه‌رو هستیم:

• فرانت اند کار یا برنامه نویس فرانت اند (Front End Developer)
• طراح رابط کاربری (UI Designer)

یک طراح رابط کاربری هیچ‌وقت خودش را آلوده‌ی کدها نمی‌کند بلکه این کار را به فرانت اند کار می‌سپارد. می‌پرسید چطور؟

خب ببینید طراح رابط کاربری در حقیقت یک طراح گرافیک (Graphic Designer) است که به نرم‌افزارهای گرافیکی مثل Adobe Photoshop، Illustrator، Dreamweaver، Sketch و … مسلط است. او با کمک این نرم‌افزارها، گرافیک و ظواهر سایت را طراحی می‌کند و در نهایت نتیجه‌ی کارش را به‌صورت فایل PSD در اختیار فرانت اند کار قرار می‌دهد. فرانت اند دِوِلوپر هم با استفاده از کدها طرح موردنظر را اجرایی و به زبان وب تبدیل می‌کند.

هرچند باید بدانید که ممکن است همه‌ی این کارها را یک نفر انجام دهد اما به‌هرحال هر کدام به تخصص جداگانه‌ای نیاز دارد.

فرانت اند را از کجا و چگونه شروع کنیم؟

برای کسانی که تازه به دنیای کدها وارد شده‌اند، به دلایل مختلفی یادگیری توسعه‌ی وب نسبت به حوزه‌های دیگر ساده‌تر است. این دلایل را می‌شود در موارد زیر خلاصه کرد:

• این حوزه از نظر زبان برنامه‌نویسی تنوع بیشتری دارد.
• برنامه‌نویس‌های وب معمولاً در زمان کدنویسی کمتر با مانع روبرو می‌شوند.
• ابزارهای متن- باز (Open- source) بیشتری در دسترسشان وجود دارد.
• با کمک فریم‌ورک‌های متنوع می‌توانند روند توسعه را ساده‌تر کنند.

به‌طورکلی توسعه‌دهنده‌های وب به سه گروه تقسیم می‌شوند:

• توسعه دهنده فرانت اند (Front End Developer) یا برنامه نویس های سمت کاربر (Client- side)
• توسعه دهنده بک اند (Back End Developer) یا برنامه نویس های سمت سرور (Server- Side)
• برنامه نویس‌های همه‌کاره (Full Stack Developer) که در هر دو حوزه کار می‌کنند.

اما برای شروع آموزش برنامه نویسی فرانت اند خوب است به نقشه‌ی زیر یک نگاهی بیندازید.

اگر از ما بپرسید: « مهم‌ترین زبان های برنامه نویسی فرانت اند کدام‌اند؟ »

باید بگوییم طبق این نقشه و همان‌طورکه قبلاً هم اشاره کرده‌ایم، توسعه‌ فرانت اند بر سه پایه‌ی مهم قرار دارد:

• HTML برای انجام نشانه‌گذاری
• CSS برای سبک‌دهی
• جاوا اسکریپت (js) برای منطق و تعاملات

در بخش‌های قبلی به‌طور کامل درباره اهمیت یادگیری زبان‌های HTML، CSS و جاواسکریپت صحبت کردیم. بنابراین بهتر است کمی از مراحل بعدی بگوییم.

پیشنهاد مقاله: معرفی کامل انواع زبان‌های برنامه نویسی

استفاده از jQuery در طراحی فرانت اند وب سایت

بعد از تسلط به کاربردی ترین زبان های فرانت اند نوبت می‌رسد به یادگیری کتابخانه‌ی jQuery. البته باید بدانید که کدهای jQuery همگی از دنیای جاواسکریپت آمده‌اند به همین دلیل اگر جی کوئری هم نباشد جاوااسکریپت کارتان را راه می‌اندازد. اما نکته اینجاست که بعد از یادگیری jQuery متوجه خواهید شد که به راحتی می‌توانید کدهای طولانیِ زبان js را به یک کد ساده‌ی یک‌خطی در jQuery تبدیل کنید.

جالب است بدانید که شعار سازندگان کتابخانه‌ی جی کوئری این است: «Write less, Do more» به این معنی که «کمتر بنویس، بیشتر عمل کن»! شعاری که به توسعه دهنده های فرانت‌اند می‌گوید با استفاده از این Library می‌توانند راحت‌تر و سریع‌تر به یک نتیجه‌ی بهتر برسند.

احتمالاً در بعضی از سایت‌ها اسلایدرهایی را دیده‌اید که تصاویری را پشت سر هم و در بازه‌های زمانی مشخصی به شما نشان می‌دهند یا در یک سایت ممکن است با هر کلیک تب‌ها تغییر کند. اگر شما به‌عنوان یک فرانت‌اندکار برای پویایی سایتتان قصد پیاده‌سازی چنین عناصری را داشته باشید، بهترین گزینه انتخاب jQuery است.

خبر خوب اینکه خود جی کوئری هم بیکار ننشسته و با ارائه‌ی کتابخانه‌هایی مثل jQuery UI و jQuery Mobile کار را بسیار راحت‌تر از قبل کرده است. تاجایی‌که اگر در زمینه‌ی جی کوئری دانشی نداشته باشید با یادگیری یک سری قواعد می‌توانید از این فریم‌ورک‌ها استفاده کنید.

به سمت حرفه‌ای شدن با یادگیری بوت استرپ

بعد از جی کوئری یا در کنار آن، یادگیری فریم‌ورک بوت استرپ (Bootstrap) هم ضروری است. فریم‌ورکی که به کمکش می‌توانید طراحی واکنش‌گرا را در صفحه‌ی وبسایتان اجرا کنید. لازم نیست نگران باشید، بعد از یادگیری CSS، یادگیری بوت استرپ کار راحتی برایتان خواهد بود.

اگر هم می‌خواهید به‌شکل حرفه‌ای‌تری مراحل آموزش توسعه فرانت اند را یاد بگیرید، نقشه‌ی زیر می‌تواند حسابی به شما کمک کند.

در این نقشه، خطوط زرد، مباحث مقدماتی را به شما نشان می‌دهند. مباحثی که برای آموزش برنامه نویسی Front-end کاملاً ضروری‌اند. خطوط نارنجی هم نشان‌دهنده‌ی مباحث پیشرفته‌تری هستند که می‌توانید بعد از تسلط به مباحث مقدماتی، یادگیری‌شان را شروع کنید.

پیشنهاد مقاله: 8 آموزشگاه برنامه ‌نویسی برتر در تهران

جمع‌‌بندی

در این مقاله سعی داشتیم علاوه‌بر توضیح معنای فرانت اند و بررسی تفاوت‌های آن با بک اند، راه فرانت اند کار شدن را هم به شما نشان دهیم. هرچند باید بدانید در این راه پستی و بلندی کم نیست اما با صبر و حوصله و مقادیر فراوانی خلاقیت می‌توانید مسیر دلچسبی را برای خودتان بسازید.

باوجوداینکه یک توسعه دهنده فرانت اند باید اول از همه به مهارت‌های ضروری حرفه‌اش مسلط باشد اما آن‌چه که می‌تواند شما را از سایر فرانت اندکارها متمایز کند، خلاقیت و نگاه نو شماست که کارتان را سایرین متفاوت کند.

خب اگر کمربندتان را بسته‌اید و می‌خواهید خیلی محکم و پرقدرت وارد مسیر حرفه‌ای شدن شوید، باید بگوییم که در این مسیر موسسه بامداد در کنار شماست تا راه درست را به شما نشان دهد. به‌این‌ترتیب در مسیر برنامه نویس فرانت اند شدن راه را گم نخواهید کرد و موقع رسیدن به دوراهی‌ها سردرگم نخواهید شد.

پس اگر به دنیای کدها علاقه‌مند هستید و دلتان می‌خواهد سرسختی کدها را به زیبایی و لطافت هنر آغشته کنید، مطمئن باشید که شما برای این کار ساخته شده‌اید!