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

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

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

برای شروع، این تکنولوژی‌ها را با یک فروشگاه مقایسه می‌کنیم. تقریباً همۀ فروشگاه‌ها یک نمای ظاهری دارند که ویترین و دکور آن‌ها است به طوری که می‌توانیم این قسمت را Front-end فروشگاه می‌نامیم که به منزلهٔ محلی است که مشتری می‌آید و اجناس را مشاهده کرده و در نهایت خرید می‌کند. صاحب فروشگاه وقت زیادی صرف می‌کند تا در این قسمت از فروشگاه اجناس را درست در جای مناسب بچیند و تجربهٔ خرید خوبی برای مشتریانش در زمان خرید رقم بزند. در عین‌ حال، Back-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 تبدیل می‌کند. در واقع، تایپ‌اسکریپت اساساً یک زبان متفاوت است که جزو نوآوری‌های غول نرم‌افزاری دنیا، مایکروسافت، محسوب می‌شود.

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

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

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

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

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

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

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

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

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

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

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

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

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

منبع