نقش برنامه نویسی بک اند و فرانت اند در طراحی سایت

folder_openبرنامه نویسی
comment1 دیدگاه
طراحی سایت

برنامه نویسی بک اند و فرانت اند در طراحی سایت

خلاصه

می توان اینطور تعبیر کرد که Front-End و  Back-End در حقیقت دو روی یک سکه هستند.در واقع عملکرد یک وبسایت به صورت جداگانه به عملکرد هر کدام از این بخش ها،وابسته است.امروزه اصطلاحات برنامه نویسی و توسعه بک اند و فرانت اند در دنیای طراحی سایت بسیار متداول است.

تسلط در هر دو زمینه  برنامه نویسی بک اند Back-End و فرانت اند Front-End در دنیای طراحی سایت حرفه ای اهمیت ویژه‌ای دارد. نقش هر کدام  از این حوزه ها در طراحی سایت متفاوت است و در عین حال ارتباط تنگاتنگی با یکدیگر دارد. اگر فردی روحیات خلاق و هنری دارد،  طراحی فرانت اند وب سایت برای او بسیار ایده‌آل است. اما اگر کسی ذهنی استدلال گرا و منطق محور داشته باشد، در زمینه برنامه نویسی بک اند  می تواند بسیار موفق ظاهر شود. امروزه اصطلاحات برنامه نویسی و توسعه بک اند و فرانت اند در دنیای طراحی سایت بسیار متداول است. در سال های اخیر گرایش شرکتهای تولید نرم افزار و حتی برنامه نویسان فریلنس، به طراحی و پیاده سازی بخش های رابط کاربری (UI) و منطق برنامه ها به صورت تفکیک شده، بسیار زیاده شده است. با تفکیک این دو بخش از یکدیگر می توان از مزایای ساخت یافتگی این نوع معماری در طراحی سایت حرفه ای بهره برد. در حال حاضر هم توسعه نرم افزار به شکل MVC توانسته تا حد بالایی منطق برنامه ها را از ویژگی های رابط کاربری آن جدا سازد و نگاهی جدیدی نسبت به استفاده از پایگاه داده ها با لایه بندی و مدل سازی آن ایجاد کند. برنامه نویسی بک اند و فرانت اند دو بخش اصلی و بنیادین و شناخته شده در مهندسی نرم افزار و طراحی سایت فروشگاهی هستند.

برنامه نویسی Back-End و Front-End دو بخش اصلی و بنیادین و شناخته شده در مهندسی نرم افزار و طراحی و توسعه وب سایت ها هستند.

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

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

Front-End در واقع بخشی است که کاربران آن را می‌بینند و با آن در تعامل هستند. اما Back-End تعیین می کند که این بخش ها چگونه باید کار کنند.

تفاوت برنامه نویسی Front-End و Back-End در چیست؟ 

در چند سال گذشته اگر شخصی از طراحی سایت حرف می زد ، عمده مباحث بیشتر مرتبط  با Back-End می شد، اما در سال های اخیر این موضوع دچار تغییرات گسترده ای شده است و نیاز داریم میان کسی که سایت را در نرم افزاری مانند فتوشاپ طراحی می کند و کسی که آنها را تبدیل به کد های HTML و CSS می کند، تفاوت بگذاریم. این موضوع زمانی که طراحی سایت حرفه ای به سوی استفاده از جاوا اسکریپت و JQuery روی آوردند بسیار جدی تر شد.

در حال حاضر برای طراحی سایت فروشگاهی هم  به افرادی که با نرم افزار های گرافیکی مانند فتوشاپ و یا نرم افزار های مشابه کار می کنند و هم کسانی که آن طرح ها را به کد های  HTML، CSS، جاوا اسکریپت و JQuery  بدل می کنند، نیاز است تمام آن چیزی که در طراحی سایت فروشگاهی می بینید، مانند صفحات، منو ها، دکمه ها، فونتها، فرم های تماس و … در واقع مجموعه ای ازکدهای  HTML،CSS و جاوا اسکریپت می باشد که توسط مرورگر وب شما کنترل می شوند.

“طراحان سایت”، هم افرادی هستند که با نرم افزار های گرافیکی کار می کنند و هم کسانی که آن طرح ها را به کد های  HTML، CSS، جاوا اسکریپت و JQuery بدل می کنند.

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

 

فرانت اند Front-End چیست؟

نقش طراحان وب در طراحی حرفه ای سایت در طول سالیان متمادی تغییر کرده است. اما کارکرد اصلی آن ها کماکان طراحی ظاهر وب سایت ها است. هر آن چیزی را که در نگاه اول  می بینید، هر رنگ و لعاب و هر دکمه، تصاویر و منوهای راهنما و… همه و همه، فرانت اند را تشکیل می‌دهند.  Front-Endدر واقع آن بخش از طراحی سایت ها است که کاربر آن را می بیند و با آن در تعامل است و می‌تواند از طریق آن با بک اند Back-End و ویژگی های آن در سیستم کار کند. فعالیت های مربوط به Front-End، در سمت مشتری انجام می‌شوند. به بیان دیگر کاربر به وب سایت به چشم یک برنامه کاربردی موبایل نگاه می‌کند. یکی از کارهایی که هنگام طراحی سایت باید به آن توجه داشت پوشش دادن، ایجاد جذابیت های بصری و ظاهری وب سایت است.  تجارب کاربران از استفاده و تعامل ساده با وب سایت می تواند به طراحان در امر توسعه کمک کند. این هنر و خلاقیت یک طراح  وب است تا بهترین استفاده را از این تجارب داشته باشد. اند. Front-End معمولا از دو قسمت تشکیل می شود: توسعه فرانت اند و طراحی سایت. طراحان Front-End تنها با کدها و دستورات سر و کله نمی زنند؛ بلکه بیشتر به دنبال آن هستند تا با ایجاد فضایی ایمن و راحت برای کاربران و با بهره برداری از ابزارهای مختلفی مانند:CSS،HTML  و Java Script و فریم ورک Bootstrap ، تعاملی روان و پویا را برای تمامی کاربران به ارمغان بیاورند. در ادامه به نقش هر یک از این ابزارها خواهیم پرداخت.

Front-End در واقع آن بخش از وب سایت ها است که کاربر آن را می بیند و با آن در تعامل است.

  • CSS: از نظر اهمیت ارزش برابری نسبت به HTML دارد و برای  برطرف کردن نقاط ضعف  آن به وجود آمد؛ و مکملی برای آن محسوب می شود. از CSS بیشتر در زیبا سازی طراحی سایت استفاده می شود. مواردی مانند: رنگ، فونت، گرافیک و … با استفاده از CSS تنظیم می شود.
  • HTML: زبانی است که با استفاده از آن هایپر تکست ها نشانه گذاری می شود و یک زبان برنامه‌ نویسی محسوب نمی شود. بلکه بیشتر از آن در جداسازی اجزای منطقی و نیز ایجاد یک ساختار برای اطلاعات و یک نوشتار مانند: فهرست ها، عناوین، تصاویر، جداول و بند ها مورد استفاده قرار می گیرد. از سوی دیگر، HTML را نباید به عنوان زبانی برای چیدمان و صفحه‌آرایی یا نقاشی در طراحی سایت یاد کرد. واقع زبان نشانه گذاری و فریم اصلی که برای ایجاد محتوا مورد نیاز مرورگر است توسط این زبان ایجاد و برای کاربر نمایش داده می شود. برای نوشتن متن های اولیه و برخی از عملکردهای وب سایت از این زبان نشانه گذاری استفاده می شود.
  • JavaScript: یکی از محبوب ترین زبان های برنامه نویسی در طراحی سایت حرفه ای است.  جاوا اسکریپت زبانی پویا، تفسیری و شی گرا است که از سبک های مختلفی در برنامه نویسی پشتیبانی می‌کند. شی گرایی در واقع یک الگو و طرز تفکر در مبحث برنامه نویسی است. رویکرد برنامه نویسی شی گرا از پایین به بالا یا جزء به کل است. در واقع باید گفت که در ابتدا واحدهای کوچک از برنامه ایجاد و سپس با اتصال این واحدها به یکدیگر، واحدهای بزرگ‌تر تشکیل می شوند و به این ترتیب برنامه توسعه می یابد. فریم ‌ورک‌ های مختلف این زبان مجموعه‌ای از کتابخانه‌ها را در اختیار شما قرار می‌دهند استفاده کنید. از این زبان می‌توان برای در طراحی سایت، برنامه نویسی Server side سمت سرور، بازی اپلیکیشن‌های موبایل، طراحی سایت فروشگاهی، نرم افزار های تحت ویندوز استفاده کرد. در حقیقت می‌توان اینگونه برداشت کرد که زبان برنامه نویسی Java Script، زبانی برای طیف وسیعی از نیازهاست. با استفاده از زبان زیبایی بیشتری به وب سایت خود اضافه کنید. این زبان بیشتر به خاطر Dropdown ها و نیز فرم های تماس زیبا شناخته می شود.
  • Bootstrap: این چارچوب (Framework) مجموعه ای از ابزارهای رایگان برای ساخت نرم افزارها و صفحات تحت وب است. هدف Bootstrap از بین بردن خلاء میان طراحی سایت و کدنویسی است تا کدنویسان ترغیب به استفاده از طراحی های استاندارد و پیش فرض نماید. این فریم ورک برای نیل به این هدف دستورات CSS و توابع jQuery مورد نیاز را برای شما فراهم کرده تا با استفاده از آن بتوانید با استفاده از دستورات پیش فرض و رعایت اصول متناسب با طراحی Bootstrap زمان لازم برای طراحی سایت را بسیار کاهش داده و خروجی آن را همگام با استانداردهای روز دنیا توسعه دهید.

برنامه نویسان فرانت اند با بهره برداری از ابزارهای مختلفی مانند:CSS،HTML  و JavaScript و فریم ورک Bootstrap سعی در ایجاد محیطی امن و پویا برای کاربران هستند.

بک اند Back-End چیست؟

بک اند Back-End به عنوان اسکریپت های Server Side یا سمت سرور شناخته می‌شود.(در ادامه درباره این اسکریپت ها توضیحاتی ارائه خواهیم داد.) و قابلیت مشاهده و دسترسی برای کاربر ممکن نیست. به طور کلی هر چیزی که در پشت پرده طراحی سایت ها اتفاق می افتد عاملی است برای آنچه که در صفحه‌ی مانیتور مشاهده می کنید. بک اند Back-End بیشتر مانند یک پشتیبان غیر مستقیم عمل می کند. بر خلاف فرانت اند این قسمت در سمت سرور است و برای اطمینان از اینکه این بخش به درستی کار می‌کند با آن در ارتباط است. در تمام اپلیکیشن‌ها یک رابط کاربری وجود دارد که با تمام سیستم‌های پیچیده‌ای که در پس زمینه اتفاق می افتد، سر و کار دارد. و هرکسی با این قسمت سر وکار دارد  به عنوان برنامه نویس و توسعه دهنده‌ی وب سایت شناخته می شود.

برنامه نویسان Back-End هر چیزی که یک طراح سایت ایجاد می کند مانند: لایبرری ها، نوشتن ای پی آی ها، و… را کنترل می‌کنند. هنگامی که اطلاعات را در فیلد هایی که به این منظور طراحی گردیده، وارد کردید، برنامه  اطلاعات را در دیتابیس هایی که بر روی سرور قرار دارد، ذخیره می کند. همه اطلاعاتی که وارد کردید، درون سرور باقی خواهد ماند و مثلا زمانی که می خواهید برای تهیه پرینت بلیت، مجددا وارد حساب کاربری­تان شوید، تمام اطلاعات برای شما قابل رویت خواهد بود. زبان های برنامه نویسی که بیشتر برای برنامه نویسان Back-End  متداول است و مورد استفاده قرار می گیرند، شامل PHP، Ruby، Python و … می باشد. به کسانی که این تکنولوژی ها استفاده می کنند تا با یکدیگر کار کنند، یا توسعه دهندگان بک اند می گوییم. همچنین برا سهولت در استفاده از این فناوری ها از فریم ورک هایی مانند:  Ruby on Rails، Cake PHPو … برای سرعت بخشیدن به توسعه برنامه استفاده می شود.

برنامه نویسی Back-End ترکیبی از توسعه و نگهداری و هسته‌ی منطقی نرم افزار یک اپلیکیشن است.

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

چه تفاوتی بین اسکریپت های Server-Side و Client-Side وجود دارد؟

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

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

اسکریپت‌های Server-Side  روی سروری که میزبانی وب ‌سایت شما را به عهده دارد اجرا می‌شوند؛ نه بر روی سیستم شما، در حالی که  اسکریپت های Client-Side  معمولا با زبان جاوا  انجام می‌شود.

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

 

به چه کسی برنامه نویس فول استک Full Stack می گویند؟

همانطور که قبلا نیز اشاره کردیم، در دنیای طراحی سایت حرفه ای،‌ برنامه نویسان در دو جبهه فعالیت می کنند. گروهی از آنها وظیفه طراحی و توسعه قسمتی که کاربر با آن تعامل دارد را بر عهده دارند و گروه دیگر از برنامه نویسان وظیفه‌ی کد نویسی سمت سرور و قسمت های مخفی سایت را برعهده دارند. اما در این بین گروه دیگری از برنامه‌نویسان وجود دارند، که هر دو مهارت یعنی طراحی سایت Front-End و برنامه‌نویسی وب Back-End را باهم دارند. در واقع  این دسته از برنامه نویسان کسانی هستند که به تنهایی قادرند یک پروژه‌ی بزرگ را به انجام برسانند. به این دسته برنامه نویس Full Stack می‌گویند

 برنامه نویسان فول استک در هر دو بخش یعنی طراحی وب Front-End و برنامه‌نویسی وب Back-End می توانند فعالیت کنند.

برنامه نویس Full Stack، از تمامی مهارت‌های لازم برای طراحی سایت حرفه ای برخوردار است. یک برنامه نویس Full Stack،در هر دو جبهه دارای تجربه و مهارت است. او هم  قادر است جلوه های بصری خوبی را برای خدمات آنلاین طراحی کند و هم در سمت سرور برنامه نویسی توانا است. یک برنامه نویس Full Stack،  نه تنها باید قادر باشد طراحی سایت و برنامه نویسی وب را به درستی انجام دهد، بلکه باید یک عیب یاب حرفه ای Debugger نیز  باشد. او  همچنین باید بتواند سرور را به خوبی مدیریت کند و اندکی از مدیریت پروژه بداند. تنها تسلط بر HTML,CSS,PHP, MySQL از شما یک برنامه نویس Full Stack  حرفه ای نمی سازد. در واقع برنامه نویسان Full Stack باید چندین سال در بخش های مختلف به کسب تجربه بپردازند و بر ریزه کاری های برنامه نویسی در هر دو بخش به تسلط کافی برسند، تا از عهده وظایفشان برآیند. بنابراین نمی توان با چند سال کار کردن در این زمینه ها خود را یک برنامه نویس Full Stack بنامید!

 

استفاده از برنامه نویس Full Stack یا تیمی از برنامه نویسان برای طراحی سایت؟

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

برای مثال ممکن است برنامه نویسی که در بحث منطق قوی تر ظاهر می شود، در برنامه نویسی Server-Side عملکرد بهتری داشته باشد؛ اما در طراحی های هنری و بصری خروجی خوبی ارائه ندهد. البته باید خاطر نشان کرد که  این به معنای استفاده نکردن از برنامه نویسان Full Stack در پروژه ها نیست. ممکن است شخصی بتواند در هر دو جبهه موفق عمل کند.کسانی که  به خوبی تلاش کرده و  به اندازه کافی تجربه و مهارت کسب‌ کرده‌اند، می توانند گزینه مناسبی برای هدایت و مدیریت تیم باشند.

بسته به نوع و بزرگی پروژه می توان از تیم های چند نفره برنامه نویسی و یا از یک برنامه نویس Full Stack حرفه ای استفاده کرد.

جمع بندی:

در این نوشتار به برنامه نویسی Front-End و Back-End و تفاوت این دو پرداختیم. به ‌طور خلاصه دریافتیم که Front-Endدر واقع آن بخش از طراحی سایت است که کاربر آن را می بیند و با آن در تعامل است و می‌تواند از طریق آن با بک اند Back-End و ویژگی های آن در سیستم کار کند. فعالیت های مربوط به Front-End، در سمت کاربر انجام می‌شوند به بیان دیگر کاربر به وب سایت به چشم یک برنامه کاربردی موبایل نگاه می‌کند. در انتها به برنامه نویس فول استک و ویژگی های آن پرداختیم. گفتیم که یک برنامه نویس Full Stack، هم  قادر است جلوه های ظاهری خوبی را برای خدمات آنلاین طراحی کند و هم می‌تواند در سمت سرور به خوبی برنامه نویسی کند. شما می‌توانید با توجه به علایق  و توانمندی هایتان هرکدام از این گرایش‌ها را انتخاب کنید و اگر بتوانید در هرکدام تجربیات کافی به‌دست آورید، یک برنامه‌نویس حرفه‌ای فول‌استک شوید و پروژه هایی مانند طراحی سایت فروشگاهی را انجام دهید.

 

Tags: , ,

مطالب مرتبط

1 دیدگاه. جدید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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

فهرست