طراحی سایت یا برنامه نویسی Front End یکی از محبوب‌ترین شغل‌‌های دنیا است. در این مقاله قصد داریم به بررسی برنامه نویسی Front End و Back End و تفاوت‌های آن‌ها بپردازیم.
اگر در مورد برنامه نویسی وب چیزی شنیده باشید، احتمالاً اطلاعاتی هر چند جزئی درباره مهارت‌های برنامه نویسی Front End و برنامه نویسی Back End هم به گوشتان خورده است. اما شاید هنوز کاملاً متوجه نشده باشید که مفاهیم فرانت اند و بک اند چه هستند و چه تفاوتی با هم دارند. در این مقاله قصد داریم در مورد این دو مفهوم بیشتر توضیح دهیم و به سؤالاتی از قبیل برنامه نویسی Front End چیست و یا برنامه نویسی Back End چیست پاسخ دهیم و همچنین تفاوت‌های این دو شاخه و همینطور وظایف اصلی یک طراح وب و یا اصطلاحا برنامه نویس Front End را مورد بررسی قرار دهیم. در ادامه این مقاله با ما همراه باشید تا کمی بیشتر در مورد زیر شاخه‌های طراحی وب بیاموزیم.
آنچه در این مقاله می‌خوانید:
- برنامه نویسی فرانت اند چیست؟
- مهم‌ترین زبان های برنامه نویسی برای Front End
- تفاوت Front End و طراحی سایت در چیست؟
- شغل های برنامه نویسی فرانت اند
- برنامه نویسی بک اند چیست؟
- مهم‌ترین زبان های برنامه نویسی برای Back End
- کدامیک را انتخاب کنیم؟ Front End یا Back End
برنامه نویسی فرانت اند چیست؟
فرض کنید تصمیم دارید یک تجارت جدید را شروع کنید. به عنوان مثال کسب و کار شما می‌تواند یک فروشگاه باشد و یا حتی می‌تواند خدمات خاصی را ارائه دهد. طبیعتا در دنیای تکنولوژی، شما هم برای توسعه کسب و کار خود به یک وب سایت حرفه‌ای نیاز دارید تا خدمات یا محصولات خود را به مشتریان معرفی کنید. باید به کاربران و مشتری‌های وب سایتتان اطلاعاتی مانند اینکه شما که هستید، کسب و کارتان چیست و در کجا کار می‌کنید ارائه دهید. به علاوه حتما باید چند عکس و محتوا در مورد محصولات و خدماتی که عرضه می‌کنید و خلاصه هر اطلاعات دیگری که یک مشتری لازم دارد در مورد شما بداند را در وب سایت خود نشر دهید. برای ساخت یک وب سایت حرفه‌ای، شما به تنها چیزی که نیاز دارید، فناوری و برنامه نویسی Front End است.
فرانت اند در‌واقع همان چیزی است که شما در مرورگر خود مشاهده می‌کنید و با آن در تعامل هستید. می‌توان گفت فرانت اند همه چیز‌هایی است که کاربر به طور مستقیم می‌بیند و تجربه می‌کند. هر چیزی که در ظاهر و جلوه بصری وب سایت وجود دارد؛ از متن و رنگ گرفته تا دکمه‌ها، تصاویر و انواع منو‌های نویگیشن که در سایت طراحی و کد نویسی شده‌اند، همه و همه نتیجه برنامه نویسی فرانت اند هستند.
مهم‌ترین زبان های برنامه نویسی برای Front End
حال که متوجه شدیم برنامه نویسی Front End چیست، وقت آن رسیده تا با مهم‌ترین زبان‌های برنامه نویسی برای یک فرانت اند کار آشنا شویم. در ادامه شما را با این برنامه‌ها آشنا خواهیم کرد:
- HTML: اولین زبان برنامه نویسی که هر برنامه نویس فرانت اندی باید با آن کار کند، یک زبان رمزگذاری شده به نام HTML است. زبان برنامه نویسی HTML محتوای وب را ایجاد کرده و سازماندهی می‌کند تا توسط یک مرورگر نمایش داده شود.
- CSS: زبانی است که معمولاً HTML را همراهی می‌کند. کار CSS این است که ساختار محتوای وب سایت‌ها مانند طرح، رنگ، فونت، قلم و همه خصوصیات محتوای سایت را تعریف کند. فرض کنید وب‌سایتی که طراحی کرده‌اید از 10 صفحه HTML تشکیل شده باشد. در همه این 10 صفحه هم یک دکمه نارنجی قرار داده اید. بدون CSS باید در هر 10 صفحه برای نارنجی کردن دکمه‌ها کد نویسی کنید؛ اما CSS کار را راحت کرده و فقط یک بار به آن دکمه رنگ اختصاص می‌دهید و حالا می‌توانید در n صفحه از آن دکمه استفاده کنید. با این قابلیت، ویرایش دکمه هم راحت‌تر می‌شود و اگر زمانی تصمیم بگیرید رنگ کلید را آبی کنید، دیگر نیاز نیست هر 10 صفحه را تغییر بدهید و فقط کافیست کد CSS را تغییر بدهید و این تغییر در همه صفحات اعمال می‌شود.
- JavaScript: زبان برنامه نویسی دیگری است که یک برنامه نویس فرانت اند با آن کار می‌کند. معمولا یک فرانت اند کار از جاوا اسکریپت برای ساختن عناصر تعاملی‌تر مانند منو‌های کشویی، پنجره‌ها و فرم‌های تماس استفاده می‌کند.
علاوه بر زبان‌های اصلی Front End، پلتفرم‌ها و چهارچوب‌هایی مانند Angular هم وجود دارند که یک برنامه نویس فرانت اند باید به آن‌ها مسلط باشد. به عنوان مثال CSS فریم وورک Bootstrap را دارد و jQuery به عنوان کتابخانه محبوب JavaScript شناخته می‌شود که کمک می‌کنند کد نویسی و کار با این برنامه‌ها ساده‌تر شوند. به علاوه افزونه‌های مخصوص CSS مانند Sass و LESS هم برای برنامه نویس‌های Front End کارایی بسیار زیادی دارند. هدف این چهارچوب‌ها این است که با فراهم کردن ابزار‌ها و قالب‌های مختلفی که با زبان‌های رمزگذاری شده رایج سازگار هستند، کد نویسی را ساده‌تر، قابل کنترل‌تر و سازماندهی شده‌تر کنند.
تفاوت Front end و طراحی سایت در چیست؟
اگرچه برنامه نویسی Front End با جنبه‌های بصری و تعاملی یک وب سایت سر و کار دارد، اما خیلی مهم است که بدانید برنامه نویسی Front End در‌واقع همان طراحی سایت نیست. یک برنامه نویس Front End در‌واقع جنبه‌های ظاهری یک وب سایت را طراحی نمی‌کند. این کار، وظیفه یک طراح سایت و یا به طور خاص‌تر وظیفه یک طراح UI است. در‌واقع برنامه نویس این طراحی ظاهری را دریافت کرده و با استفاده از زبان‌های برنامه نویسی Front End که معرفی کردیم، آن‌ها را تبدیل به چیزی کاملاً کاربردی، یعنی همان چیزی که ما می‌بینیم می‌کنند.
بنابراین یک طراح سایت با طراحی ظاهر سایت سر و کار دارد. او باید ظاهر و احساسی که وب سایت به کاربر می‌بخشد، نحوه طراحی آن و انواع دکمه‌های مورد استفاده در وب سایت را مورد بررسی قرار داده و تعریف کند. اما یک برنامه نویس Front End باید این طراحی را دریافت کرده و اجرا کند. او باید نگران عمل‌کرد و کارایی این طرح‌ها در وب سایت هم باشد و مدام تلاش کند تا طرح‌هایی که از طراح سایت دریافت کرده است را به یک وب سایت کاربرپسند و کامل تبدیل کند.
احتمالاً تا به اینجا متوجه تفاوت‌های بین کسی که طراحی سایت را انجام می‌دهد با شخصی که برنامه نویسی Front End انجام می‌دهد را متوجه شده‌اید. اما برای اینکه این موضوع را با خیال راحت کنار بگذاریم، یک مثال ساده می‌زنیم:
فرض کنید برای کسب و کار خود، یک وب سایت فروشگاهی سفارش داده‌اید. طراح سایت، آن را طراحی کرده و ظاهر سایت را به شما نشان داده است. اما حالا وقت آن رسیده که افراد بتوانند وارد سایت شما شده و بتوانند خدمات دریافت کنند. بنابراین اطلاعات مربوط به محصولات و خدمات، قسمت خرید‌ها، پروفایل کاربر، کارت‌های اعتباری و موارد دیگر باید به راحتی و بسیار کاربر پسند در اختیار آن‌ها قرار بگیرد. اینجا دقیقاً همان جایی است که وظیفه اصلی کسی که برنامه نویسی Front End را انجام می‌دهد مشخص می‌شود. او باید تمام این بخش‌ها را مدیریت کرده و هر کدام را به خوبی توسعه دهد.
شغل های برنامه نویسی فرانت اند
یک برنامه نویس Front End می‌تواند موقعیت‌های شغلی مختلفی داشته باشد و در هر شرکتی، وظایف به‌خصوصی را بر عهده بگیرد که هر کدام با دیگری کاملاً متفاوت باشند. بنابراین خوب است که به عنوان یک برنامه نویس Front End همیشه درک درست و دقیق‌تری از مسئولیت و وظایف خود داشته باشید. در ادامه به چند مورد از عناوین شغلی مربوط به برنامه نویسی Front End اشاره خواهیم کرد:
- برنامه نویسی Front End که در این مقاله به کفایت در مورد آن توضیح دادیم.
- طراح سایت (Web Designer) هم یکی از رایج‌ترین مشاغلی است که به عنوان یک برنامه نویس Front End می‌توانید تجربه کنید.
- طراح UI / UX و یا UI/UX designers هم در‌واقع همان کار برنامه نویسی Front End را انجام می‌دهد، با این تفاوت که این طراح، بر روی رابط کاربری و یا بر روی تجربه کاربر متمرکز می‌شود. یک طراح UI بر روی جنبه‌های بصری طراحی سایت کار می‌کند و یک طراح UX باید با آزمون و خطا‌های متعدد مطمئن شود که بین سایت و کاربر تعامل و رابطه خوبی برقرار می‌شود.
برنامه نویسی بک اند چیست؟
بیایید همان وب سایت فرضی‌ای که برای کسب و کارتان مثال زدیم را پی بگیریم: تا به این لحظه، نتیجه تلاش‌های شما، یک وب سایت استاتیک است و محتوای آن تغییری نمی‌کند. برای سایت‌های استاتیک همه محتوا و اطلاعاتی که باید در سایت قرار بگیرد، در زمان کد نویسی مشخص می‌شود. وب سایت‌های استاتیک برای نمایش مواردی مانند برخی از مشاغل، رستوران‌ها، اوراق بهادار و یا پروفایل‌های حرفه‌ای مناسب هستند. اما اگر شما بخواهید که کاربران و مخاطبان وب سایتتان هم بتوانند به عنوان یک مخاطب پویا با سایتتان در تعامل باشند، باید به آنچه که در پشت صحنه وب سایت اتفاق می‌افتد عمیق‌تر نگاه کنید.
بک اند، در‌واقع بخشی از وب سایت است که شما آن بخش را نمی‌بینید. یک برنامه نویس Back End مسئول کد نویسی، ارتباط با پایگاه داده‌ها و سازماندهی‌های اساسی وب سایت است. بک اند باید بتواند با فرانت اند ارتباط برقرار کند، اطلاعات را دریافت کند و به عنوان یک صفحه وب، برای کاربران سایت به نمایش بگذارد. در‌واقع هر زمانی که در یک وب سایت و یا فروشگاه اینترنتی، هر گونه تعاملی انجام دادید، به عنوان مثال یک فرم را پر کردید، آدرس اینترنتی را تایپ کردید و یا یک خرید اینترنتی انجام دادید، مرورگر شما درخواستی را به سرور ارسال کرده و اطلاعات را به صورت کد‌هایی ارسال می‌کند که مرورگر بتواند آن را تفسیر کرده و نمایش دهد.
همانطور که کمی قبل هم ذکر شد، یک وب سایت استاتیک، همیشه محتوای یکسانی دارد؛ بنابراین به پایگاه داده نیاز ندارد. اما احتمالاً تاکنون متوجه شده‌اید که اگر مایلید یک وب سایت پویا داشته باشید، داستان کاملاً متفاوت خواهد بود و برای تبدیل کردن وب سایت خود به یک سایت پویا، به مولفه‌های جدیدی در پس‌زمینه سایت خود نیاز دارید. این دقیقاً همان مفهوم بک اند است و شما به یک برنامه نویس Back End نیاز دارید.
مهم‌ترین زبان های برنامه نویسی برای Back End
بسیاری از توسعه دهندگان وب تحت عنوان شغل برنامه نویسی Front End با زبان‌های برنامه نویسی مانند HTML و CSS کار می‌کنند؛ اما آن‌ها برای تکمیل کار، به مهارت برنامه نویسی Back End هم نیاز دارند. یک برنامه نویس بک اند با استفاده از زبان‌هایی مانند Java، زبان PHP، زبان Python، زبان SQL، زبان #C و NET وب سایت را به بهترین شکل ممکن توسعه داده و به یک سایت پویا و قوی تبدیل می‌کند. یک وب سایت پویا سرعت بالا‌تری دارد؛ زیرا اطلاعات ضروری آن در پایگاه داده ذخیره می‌شود و در زمان مورد نیاز به راحتی در دسترس قرار می‌گیرد. محتوای سایت‌های پویا مانند فیس بوک، توئیتر و یا گوگل مپز، به طور مداوم در حال به‌روزرسانی است و همیشه به مهارت برنامه نویس‌های بک اند نیاز دارد.
کدامیک را انتخاب کنیم؟ Front End یا Back End
پس به طور کلی می‌توانیم بگوییم که یک فرانت اند کار بر روی اینکه صفحه وب چطور به نظر می‌رسد کار می‌کند؛ اما یک بک اند کار باید روی این که سایت چطور کار می‌کند تمرکز کند.
اگر به طراحی وب علاقه‌مند هستید، اما هنوز مطمئن نیستید که برنامه نویسی Front End را انتخاب کنید و یا با برنامه نویسی Back End شروع کنید، خوب است که در قدم اول کمی بیشتر با کار‌ها و وظایف روزانه هر کدام از این گروه‌ها آشنا شوید. اگر از ایده کار کردن با جلوه‌های بصری و زنده کردن ظاهر سایت و یا ایجاد یک تجربه کاربری درجه یک لذت می‌برید، احتمالاً باید برنامه نویسی Front End را امتحان کنید. اما اگر از کار با داده‌ها لذت می‌برید، از الگوریتم‌ها چندان سر در نمی‌آورید و دوست دارید راه‌هایی برای بهینه سازی سیستم‌های پیچیده ارائه دهید، احتمالاً برنامه نویسی Back End برای شما مناسب‌تر خواهد بود.
برخی از طراحان وب، هم به برنامه نویسی Front End و هم به برنامه نویسی Back End تسلط دارند. به این برنامه نویسان وب همه فن حریف که در هر دو شاخه مهارت دارند، برنامه نویس فول استک (Full-stack developers) می‌گویند.
با همه این‌ها، تمیز دادن کار‌های فرانت اند و بک اند همیشه هم همینقدر ساده و واضح نیست. باید در مورد تک تک شاخه‌ها و کار‌های این دو گروه بیشتر مطالعه کنید و در انتها به درون خود مراجعه کنید. هیچ کسی بهتر از خود شما نمی‌تواند به شما بگوید برای چه کاری مناسب هستید. بنابراین اول اطلاعات کامل کسب کنید و بعد به درونتان مراجعه کرده تا ببینید آیا برای برنامه نویسی Front End مناسب‌تر هستید یا در پس‌زمینه امور بیشتر موفق خواهید شد.
در این مقاله به بررسی مفاهیم فرانت اند و بک اند پرداختیم و با برنامه نویسی Front end و برنامه نویسی Back end بیشتر آشنا شدیم. متوجه شدیم به هر آنچه که کاربر می‌بیند و در ظاهر وب سایت وجود دارد، فرانت اند می‌گویند. به طور کلی در طراحی وب سایت، هر چیزی مربوط به ساخت لیست‌ها و منو‌ها، استایل‌دهی به عکس و متن، رنگ و فونت و خلاصه هر چیزی که به ظاهر، ویژگی‌های بصری و ویژوال وب مربوط باشد، جزء وظایف فرانت اند کار است. اما حوزه فعالیت بک اند به پس‌زمینه کار مربوط می‌شود که کاربر آن را حس نمی‌کند، مانند اطلاعاتی که به سمت پایگاه‌های داده فرستاده می‌شوند. شما خود را برای فرانت اند مناسب‌تر می‌بینید یا فکر می‌کنید یک بک اند کار خوب هستید؟