فرانت‌اند، بک‌اند یا هر دو؟

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

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

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

زبان نشانه‌گذاری ابرمتن (HTML)

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

زبان CSS

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

جاوااسکریپت (JavaScript)

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

پیش‌پردازنده‌های CSS

در اواسط دهه 90 میلادی کمیسیونی متشکل از برجسته‌ترین توسعه‌دهندگان وب نسخه‌ اولیه‌ای از مجموعه قوانین در قالب یک نسخه استاندارد اولیه ارائه کردند، دستورالعملی که سازندگان مرورگرهای وب را ملزم می‌کرد عناصر مختلف مرتبط با رابط کاربری را به شکل مشخصی به کاربران نشان دهند. با توجه به این‌که مرورگرهای وب مختلفی وجود دارد و از سویی در نظر دارید تا صفحات ساخته‌شده به یک‌شکل در همه مرورگرها نشان داده شود، در نهایت، سازمان W3C استاندارد مشخصی را در این زمینه تدوین کرد. اما پس از تصویب این استاندارد توسعه‌دهندگان اعلام کردند، به ویژگی‌های جدیدی در CSS نیاز دارند تا برنامه‌های ساخته‌شده به شکل حرفه‌ای‌تری به کاربر نشان داده شود. همین مسئله باعث شد تا توسعه‌دهندگان زبان‌های جدیدی را به وجود آورند که در نهایت به همان CSS تبدیل می‌شد. این فرایند تبدیل و انتقال‌ها به نام CSS Pre-Processing معروف شد. با توجه به این‌که مرورگرهای وب به‌درستی نمی‌توانند کدهای نوشته‌شده با زبان‌های مختلف را درک کنند، از این‌رو پیش‌پردازنده‌ها به کار گرفته شدند. زبان‌های Less و Sass از جمله معروف‌ترین و پر استفاده‌ترین زبان‌های Pre-Processor هستند. زبان‌هایی که به دلیل خوانایی بالا و کدهای کمتر قدرتمندتر از CSS بوده و به همین دلیل بیشتر مورد توجه توسعه‌دهندگان قرار دارند. 

چهارچوب‌های جاوااسکریپت

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

آنگولار (Angular)

آنگولار چهارچوبی است که شرکت گوگل فرایند توسعه آن را انجام داده است. چهارچوبی که نسخه بعدی آن به نام آنگولار 2 معروف شد. نسخه دوم این چهارچوب با نسخه اول تفاوت‌های بسیاری دارد و در اصطلاح رایج Mobile-Fist است. 

Ember

امبر چهارچوب معروف دیگری است که در حوزه برنامه‌نویسی فرانت‌اند استفاده می‌شود. چهارچوبی که از سوی شرکت اپل ارائه شده، لازم به ذکر است که اپل اولین بار چهارچوبی را به‌نام SproutCore روانه بازار کرد که در ادامه به Ember تغییر نام داد. 

React

React یک چهارچوب فرانت‌اند است که از سوی مهندسان فیس‌بوک طراحی‌شده است. اکوسیستم React رشد بسیار سریعی داشت و به‌تازگی به مرحله تثبیت وارد شده است. React-Fiber چهارچوبی است که به‌طور کامل بازنویسی شده تا سریع‌تر شود، اما به‌گونه‌ای طراحی‌شده که با کدهای قدیمی React سازگاری داشته باشد. 
در کنار سه چهارچوبی که به آن‌ها اشاره شد، VueJS و Backbone نیز از چهارچوب‌های پر کاربرد جاوااسکریپت هستند. واقعیت این است که ما نمی‌توانیم به‌صراحت بگوییم یک چهارچوب خیلی خوب است، درحالی‌که چهارچوب دیگر ضعیف است. هر یک از چهارچوب‌ها ویژگی‌های خاص خود را دارند و برای مصارف مختلفی به کار گرفته می‌شوند. 

مطلب پیشنهادی

React و React Native چه هستند و چه قابلیت‌هایی دارند؟

React و React Native دو چهارچوب شگفت‌انگیز جاوااسکریپتی

Transpiler جاوااسکریپت چیست؟

مرورگرهای وب همه جاوااسکریپت را درک می‌کنند. اما Transpiler به کامپایلرهایی گفته می‌شود که قادر است سورس‌کد برنامه‌ها را به غیر از زبان اصلی که برنامه بر مبنای آن طراحی شده بازنویسی کند. از مهم‌ترین کامپایلرهای Transpiler جاوااسکریپتی به موارد زیر می‌توان اشاره کرد:
ES6
نسخه بعدی جاوااسکریپت است. نسخه جدید به‌طور کامل با نسخه‌های قدیمی جاوااسکریپت سازگار بوده، اما قابلیت‌های کاربردی متعددی نیز به آن افزوده شده است:
CoffeeScript
کافی‌اسکریپت، زبانی است که شباهت زیادی به رابی داشته و می‌تواند به جاوااسکریپت تبدیل شود.
TypeScript
تایپ‌اسکریپت که این روزها حسابی پرطرفدار شده و یکی از شاهکارهای مایکروسافت است، بر مبنای یک استراتژی جالب و قدرتمند عمل می‌کند. به این شکل که جاوااسکریپت را از یک زبان Dynamically-Type به یک زبان Statically-Typed تبدیل می‌کند. 

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

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

بانک‌های اطلاعاتی

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

مطلب پیشنهادی

معرفی کتاب:

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

مدل/نما، معماری کنترل‌کننده یا به‌اختصار معماری MVC

معماری سه لایه که در اصطلاح تخصصی آن را MVC می‌نامند، یکی از شاخص‌های اصلی برنامه‌های مدرن وب است. چهارچوب‌هایی همچون Ruby onRails برای زبان روبی یا Laravel برای زبان پی‌اچ‌پی، ExpressJS از این معماری استفاده می‌کنند. به بیان ساده، این چهارچوب‌ها برنامه‌های کاربردی را به بخش‌هایی تقسیم می‌کند که هر بخش مسئولیتی متفاوت با سایر بخش‌ها دارد. مدل، بخشی از یک برنامه وب است که تعامل مستقیمی با بانک اطلاعاتی دارد. نما یک صفحه اچ‌تی‌ام‌ال است که مرورگر وب باید آن را مشاهده کند. درحالی‌که نما یکی از مولفه‌های فرانت‌اند است، اما توسعه‌دهندگان بک‌اند هر زمان نیاز داشته باشند تغییراتی در نما ایجاد می‌کنند. 
معماری Restful
REST مفهومی است که به ما نشان می‌دهد درخواست‌های پروتکل انتقال ابرمتن چگونه با سرور در ارتباط خواهند بود. توسعه‌دهندگان بک‌اند همواره به این مسئله توجه دارند که یک برنامه وب چه درخواست‌های HTTP را باید دریافت کند و چطور باید آن‌ها را پردازش کند. 
Business Logic
در برنامه‌های کاربردی، منطق تجاری مفهومی است که سعی می‌کند نیازهای مشتری را در قالب الگوریتم‌هایی سازمان‌دهی کرده و در ادامه این نیازها را به کدهای کاربردی تبدیل کند. این منطق اعلام می‌دارد داده چطور باید ساخته‌شده، ذخیره‌شده و تغییر پیدا کنند. برای مثال، اگر در نظر دارید یک بازی شطرنج بسازید، منطق تجاری، اطلاعاتی در اختیار شما قرار می‌دهد که حرکت مهره قلعه متفاوت از حرکت مهره وزیر است. در حالت کلی باید بگوییم که توسعه‌دهنده بک‌اند فردی است که با کدهایی که در پس‌زمینه اجرا می‌شوند، در ارتباط است. فردی که ارتباط او با سرورها و بانک‌های اطلاعاتی بوده و به درخواست‌های HTTP  رسیدگی می‌کند. 

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

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

مطلب پیشنهادی

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

بازگشت به‌صورت مسئله‌ ابتدای بحث 

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