آشنایی با وظایفی که دولوپرهای فرانت اند و بک اند دارند

بسیاری از تازه‌واردها به صنعت توسعهٔ نرم‌افزار نمی‌دانند که کار خود را از کجا شروع کنند و بر سر اینکه حوزهٔ بک اند را برای یادگیری انتخاب کنند یا فرانت اند شک دارند و یا حتی بعضی‌ها می‌خواهند هر دو را یاد بگیرند و به‌ اصطلاح دولوپر فول اِستک شوند. حال ممکن است این سؤال پیش بیاید که اساساً معنی این اصطلاحات چیست؟ در این مقاله برای اینکه شما را در جریان کامل این فرایند قرار دهیم، اول تفاوت در حوزه‌های Front-end و Back-end را بررسی کرده سپس کمی جلوتر می‌رویم و دربارۀ هر کدام توضیحاتی تکمیلی ارائه خواهیم کرد.

برای شروع، تکنولوژی‌های فرانت اند و بک اند را با یک فروشگاه مقایسه می‌کنیم. تقریباً همۀ فروشگاه‌ها یک نمای ظاهری دارند که ویترین و دکور آن‌ها است به طوری که می‌توانیم این قسمت را Front-end فروشگاه می‌نامیم که به منزلهٔ محلی است که مشتری می‌آید و اجناس را مشاهده کرده و در نهایت خرید می‌کند. صاحب فروشگاه وقت زیادی صرف می‌کند تا در این قسمت از فروشگاه اجناس را درست در جای مناسب بچیند و تجربهٔ خرید خوبی برای مشتریانش در زمان خرید رقم بزند. در عین‌ حال، Back-end فروشگاه جایی است که در پشت پرده قرار دارد و محلی است که مشتری هرگز آن را نمی‌بیند و شامل محصولاتی است که انبار شده‌اند و هنوز در قفسه‌های جلو قرار داده نشده‌اند. علاوه بر این، یکسری عمده‌فروشان نیز وجود دارند که صاحب فروشگاه اجناس خود را از آن‌ها تأمین می‌کند، تیم لُجستیگ بسیاری از کارهای رو سروسامان می‌دهد و ... اما در عین‌ حال، مشتریان اصلاً از وجود آن‌ها باخبر نیستند. 

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

دولوپر فرانت اند (Front End) کیست؟

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

دولوپرهای فرانت اند وظیفه دارند تا یک تجربهٔ جذاب برای بازدیدکنندگان سایت رقم بزنند و معمولاً این افراد با طراحان گرافیک زیاد سروکار دارند تا ایده‌های ایشان را به واقعیت تبدیل کنند (در همین راستا پیشنهاد می‌شود مقاله طراحان وب و دولوپرهای فرانت اند چه‌طور می‌توانند با یکدیگر کنار بیایند؟ را مرور بفرمایید). به‌ طور‌ کلی، تکنولوژی‌هایی که این دست دولوپرها استفاده می‌کنند عبارتند از:

- زبان اچ‌تی‌ام‌ال: HTML مخفف واژگان HyperText Markup Language به‌ معنی «زبان نشانه‌گذاری فرامتنی» است که به‌ عنوان سنگ زیربنای وب شناخته می‌شود. تمامی اپلیکیشن‌های تحت وب با استفاده از این تکنولوژی ساخته شده‌اند و مرورگرها به‌ خوبی تگ‌های این زبان را متوجه می‌شوند و نیاز به توضیح نیست که یادگیری این زبان خیلی آسان است و توصیه می‌شود که فعالان صنعت توسعهٔ نرم‌افزار، فارغ از حوزه‌ای که در آن فعال هستند، یک آشنایی نسبی با آن داشته باشند.

- زبان سی‌اس‌اس: CSS مخفف واژگان Cascading Style Sheets است که یکی دیگر از تکنولوژی‌های مورد استفادهٔ دولوپرهای فرانت اند است که این امکان را به ایشان می‌دهد تا بتوانند مشخصات ظاهری یک صفحهٔ وب را طراحی کنند (اگر بخواهیم درک درست‌تری از تفاوت‌ زبان‌های HTML و CSS داشته باشیم، می‌توانیم یک ساختمان را در نظر بگیریم بدین شکل که این ساختمان از اِسکلت، چارچوب، سنگ و آجر ساخته شده است (HTML) اما برای اینکه زیبا به‌ نظر برسد، نیازمند کچ، رنگ، تزئینات و غیره (CSS) است.)

- جاوا اسکریپت: JS زبان برنامه نویسی است که امروزه طرفداران زیادی پیدا کرده است که یکی از اصلی‌ترین مخاطبینش دولوپرهای فرانت اند هستند (البته با وجود Node.js، دولوپرهای بک‌اند هم از آن استقبال کرده‌اند.) این زبان کمک می‌کند تا دولوپر یک تجربۀ کاربری روان برای کاربران سایت ایجاد کند و همچنین امکان افزودن جلوه‌های بصری زیبا را فراهم می‌آورد.

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

درآمدی بر پیش‌پردازنده‌‌های CSS 

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

در همین راستا، آن‌ها یک نسخه از زبان جدیدی را ساختند که در نهایت به همان CSS تبدیل می‌شد که این تبدیل و انتقال‌ها CSS Pre-Processor نام گرفت (زبان‌های Less و Sass جزو پرکاربردترین نمونه‌های زبان‌های Pre-Processor هستند.) همین که شما توانستید آشنایی تقریباً کاملی با CSS داشته باشید، هم کار با Less و هم کار با Sass را می‌توانید تجربه کنید. دلیل استفادهٔ دولوپرها از این تکنولوژی‌ها به این خاطر است که از CSS قوی‌تر هستند و می‌توان کدهای تمیزتری با آن‌ها نوشت.

فریمورک‌های جاوا اسکریپت

فریمورک‌های جاوا اسکریپت در حوزهٔ فرانت‌اند کمک می‌کنند تا با سرعت بیشتری دست به توسعهٔ وب بزنیم که در ادامه سه مورد از پرکاربردترین آن‌ها را معرفی می‌کنیم:

- انگولار: این فریمورک توسط گوگل توسعه داده شده که نسخه بعدی آن هم با نام Angular2 به بازار عرضه شده است که تفاوت‌های اساسی با نسخه اول دارد و اصطلاحاً Mobile-First است.

- اِمبر: یک فریمورک برای کدنویسی در حوزهٔ فرانت اند است که اصالت آن به شرکت اپل باز می‌گردد. در واقع، اپل یک فریمورک به نام SproutCore ساخت که بعدها نامش را به Ember تغییر دادند.

- ری اکت: React فریمورک،‌ یا بهتر بگوییم لایبرری، فرانت‌اندی است که توسط مهندسین فیسبوک ساخته شده و جامعهٔ توسعه‌دهندگان گسترده‌ای در سراسر دنیا دارد.

به طور کلی، از جمله فریمورک‌های دیگر جاوااسکریپتی که می‌توان نام برد، Backbone و VueJS است اما در نظر داشته باشید هیچ فریمورک بهتر و بدتری وجود ندارد بلکه هر کدام ویژگی خاصِ خود را دارند و شرکت‌های مختلف از فریمورک‌های مختلفی برای کاربردهای متفاوتی استفاده می‌کنند (روی‌ هم‌ رفته نگران نباشید که کدام‌ یک را انتخاب می‌کنید؛ بلکه اگر به حوزۀ فرانت‌اند علاقه دارید، مهم‌تر از انتخاب فریمورک، دانستن قوانین و اصول کار است.)

آشنایی با مفهوم Transpiler

به طور کلی، Transpiler نوعی کامپایلر است که این توانایی را دارد تا سورس‌کد برنامه‌ها را با زبانی به غیر از زبان اصلی که برنامه‌ با استفاده از آن توسعه یافته بازنویسی کنند که برخی از مهم‌ترین ترنسکامپایلرهای جاوااسکریپتی عبازتند از:

- کافی اسکریپت: زبانی شبیه به روبی است که به جاوااسکریپت تبدیل می‌شود.

- تایپ اسکریپت: این زبان یک رویکرد اساسی دارد مبنی بر اینکه جاوا اسکریپت را از یک زبان برنامه نویسی به‌ اصطلاح Dynamically-Typed، به زبانی Statically-Typed تبدیل می‌کند. در واقع، تایپ اسکریپت اساساً یک زبان متفاوت است که جزو نوآوری‌های غول نرم‌افزاری دنیا، مایکروسافت، محسوب می‌شود.

دولوپر بک اند (Back End) کیست؟

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

- دیتابیس: دیتابیس این امکان را به ما می‌دهد که داده‌ها را اضافه کرده، حذف نماییم و یا تغییر دهیم و همچنین به داده‌هایی که از قبل تولید شده‌اند، به‌ راحتی دسترسی پیدا کنیم. تقریباً همهٔ وب اپلیکیشن‌ها از دیتابیس استفاده می‌کنند و در کل دو نوع دیتابیس داریم که تفاوت عمده‌ای باهم دارند که عبارتند از SQL و NoSQL.

- معماری سه‌لایه: معماری سه‌لایه یا اصطلاحاً MVC یکی از ویژگی‌های وب اپلیکیشن‌های مدرن است و فریمورک‌هایی همچون Ruby on Rails برای زبان روبی و یا لاراول (Laravel) برای زبان پی‌اچ‌پی (PHP) از این معماری بهره می‌برند. اگر بخواهیم خیلی ساده توضیح دهیم، این فریمورک‌ها اپلیکیشن‌ را به بخش‌های مختلفی تقسیم می‌کنند و هر بخش مسئولیت‌هایی دارد که مجزا از سایر بخش‌ها است که جهت آشنایی بیشتر با مفهوم MVC، می‌توانید به آموزش مقدمه‌ای بر معماری سه‌لایه نرم‌افزاری مراجعه نمایید.

- معماری رِست‌فول: به‌ طور خلاصه، REST مفهومی است که به ما نشان می‌دهد ریکوئست‌های پروتکل HTTP چگونه به تعامل با سرور می‌پردازند که برای کسب اطلاعات بیشتر پیرامون این موضوع، به آموزش آشنایی با مفهوم RESTful API مراجعه نمایید.

- بیزینس لاجیک: در نرم‌افزارهای کامپیوتری، Business Logic مفهومی است که انتظارات سفارش‌دهندهٔ نرم‌افزار را ابتدا در قالب الگوریتم‌ها و سپس تبدیل آن‌ها به کدهای کاربردی برآورده می‌سازد. مثلاً اگر درصدد ساخت یک فروشگاه آنلاین هستید، بیزینس لاجیک شما می‌شود امکاناتی از قبیل امکان افزودن کالا به سبد خرید، اِعمال تخفیف، جمع کل حساب، وصل شدن به درگاه بانک و ...

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

فول استک (Full Stack) دولوپر کیست؟

دولوپر فول‌استک کسی است که به قول معروف همچون آچار فرانسه بوده و این توانایی را دارا است تا وظایف دولوپر فرانت اند یا بک اند و بسیاری کارهای دیگر را انجام دهد (برای آشنایی بیشتر با این مفهوم، به مقالهٔ معنی و مفهوم توسعه‌‌دهندهٔ Full Stack چیست؟ مراجعه نمایید.) دلایلی وجود دارد که شما را قانع می‌کند تا روی فول‌استک شدن تمرکز کنید که در ادامه مهم‌ترین آن‌ها را برخواهیم شمرد.

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

حال برگردیم به سراغ مثال فروشگاه که در اول بحث مطرح کردیم. فرض کنیم که خود شما صاحب فروشگاه هستید. مسلماً دوست دارید بدانید که چه‌ طور می‌توانید یک چیدمان و طراحی زیبا داشته باشید تا مشتری تجربۀ خوبی از خرید خود داشته باشد. همچنین می‌خواهید بدانید آن بخشی از فروشگاه که مشتری نمی‌بیند (انبار، لُجستیک و غیره) چگونه مدیریت می‌شود. روی هم رفته، یک مدیر فروشگاه به اصطلاح فول‌استک، کاملاً می‌داند که هر دو بخش چگونه کار می‌کنند و تأثیر یکی بر دیگری چیست و چگونه است.

در مورد توسعۀ وب هم شرایط دقیقاً همین‌طور است. در واقع، دولوپری که می‌داند کل اپلیکیشن در سمت کاربر و همچنین سمت سرور چگونه کار می‌کند و می‌تواند در تمام بخش‌های یک پروژه کد بزند، احتمالاً برای برخی شرکت‌های نرم‌افزاری ارزش به‌ مراتب بیشتری از دولوپری داشته باشد که تنها در یک حوزه دست به کد است (به واژهٔ احتمالاً خوب دقت کنید زیرا برخی شرکت‌های نرم‌افزاری تراز اول هستند که تمایل دارند دولوپرهایی را استخدام کنند که دانش عمیقی فقط در یک حوزه دارند.)

در پایان، اگر علاقمند هستید تا در این خصوص اطلاعات بیشتری به دست آورید، توصیه می‌کنید به مقالات زیر نیز مراجعه نمایید که در آن‌ها به نوعی یک Roadmap (نقشهٔ راه) برای دولوپرها ترسیم شده است:

- Roadmap پنج مرحله‌ای برای تبدیل شدن به یک وب دولوپر حرفه‌ای
- درآمدی بر مهم‌ترین اصول آموزش کدنویسی به افراد مبتدی

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