توسعه دهی frontend در مقابل backend. کدام مورد را باید یاد گرفت،‌ و چرا؟

امروزه آوازه زیادی برای تبدیل شدن به یک توسعه دهنده شنیده می‌شود. اما با این همه سر و صدای موجود، سخت است که بدانیم از کجا باید شروع کنیم.

• آیا باید شروع به یادگیری به تبدیل شدن به یک توسعه دهنده frontend کنیم؟
• یک توسعه دهنده backend؟
• یک توسعه دهنده با پشته کامل؟
• اصلا معنای این عبارات چیست؟

برای کمک به شما در درک این مسئله، ما با توضیح تفاوت بین توسعه دهی frontend و backend به صورت سطح بالا شروع خواهیم کرد. سپس به طور عمیق‌تری به هر کدام وارد خواهیم شد و درباره فناوری‌ها و مسئولیت‌های مختلف که در آن‌ها وجود دارند، صحبت خواهیم کرد.

بیایید با تقلید از یک فروشگاه آجر و ملات شروع کنیم

درباره فروشگاه‌های معمولی فکر کنید. تقریبا تمام آن‌ها یک frontend و یک backend دارند.

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

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

مغازه‌ای که یک frontend دارد، اما یک backend ندارد به سرعت محصولاتش برای قفسه‌ها تمام خواهند شد. این مغازه نخواهد توانست که به سرعت آن‌ها را مجددا ذخیره سازی کند.

مغازه‌ای که یک backend دارد، اما یک frontend ندارد بسیار برایش سخت خواهد بود که مشتری‌ها را جهت‌دهی کند. برای مثال فروشگاه Costco. در این فروشگاه، یافتن چیزی که به دنبالش هستید، بدون داشتن کمک بسیار سخت است.

هم frontend و هم backend برای این که مغازه به درستی عمل کند، حیاتی هستند. هر کدام نیازهای مختلفی را برآورده می‌کنند. «پشته کامل» یک مغازه، برای این که مغازه بتواند موفق باشد، باید به خوبی کار کند.

همین مسئله نسبت به وب‌‌اپلیکیشن‌ها هم صدق می‌کند.

یک توسعه دهنده frontend چیست؟

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

در اینجا برخی فناوری‌ها را مشاهده می‌کنید که توسعه دهندگان frontend اغلب استفاده می‌کنند:

HTML (HyperText Markup Language = زبان نشانه‌گذاری فرامتنی) سنگ گوشه وب است. تمام صفحات وب و وب‌اپلیکیشن‌ها بر پایه اسناد HTML ساخته شده‌اند که مرورگر با آن‌ها در تعامل است. یادگیری HTML بسیار ساده است. پس با وجود این که HTML از نظر فنی یک فناوری frontend است، پس اگر توسعه دهندگان حداقل سطحی از آشنایی با آن داشته باشند، برایشان بسیار کاربردی خواهد بود.

CSS (Cascading Stylesheets = استایل‌شیت‌های آبشاری) قابلیت مشخص کردن یک ظاهر خاص برای صفحه وب است. با HTML، شما می‌توانید نشان دهید که قطعه‌‌ای از یک متن، عنوان است. اما با CSS، شما می‌توانید ظاهر متن را تغییر دهید. (رنگ را تغییر دهید، یک آندرلاین اضافه کنید، متن‌ها را بولد کنید، فونت را تغییر دهید و...)

• مقاله مرتبط: Topcoat، یک فریم‌وورک سبک و سریع CSS

JavaScript یک زبان برنامه‌‌نویسی است که داخل مرورگرهای وب اجرا می‌شود. توسعه دهندگان frontend بر روی نوشتن کد JavaScript تمرکز می‌کنند که مستقیما داخل یک مرورگر وب اجرا می‌‌شود. JavaScript می‌تواند تعاملات کاربر را به صورت روان بسازد. Gmail و Google Maps مثال‌هایی از برنامه‌های متمرکز بر روی JavaScript هستند.

توسعه دهندگان  frontendمعمولا تلاش خود را بر روی استفاده از این سه فناوری برای ساخت تجربیات کاربری روان متمرکز می‌کنند.

• مقاله مرتبط: آینده JavaScript در دنیای Frontend

بهترین عادت‌های توسعه دهنده frontend

از آنجایی که توسعه دهندگان frontend بر روی بُعد باریکی از توسعه وب تمرکز می‌کنند، نظراتی درباره این که همه چیز چطور می‌تواند ساخته شود دارند.

• این مقاله را نیز از دست ندهید: ۱۰ مورد از کوچک‌‌ترین و سریع‌ترین فریم‌وورک‌های frontend

پیش پردازنده‌های CSS (CSS Pre Processors)

در سال ۱۹۹۶، یک کمیته استاندارد‌ها برای اولین بار مشخصه مربوط به نحوه نمایش ابعاد مختلف توسط مرورگرها را تعریف کرد. از آنجایی که مرورگرهای وب زیادی وجود دارند و شما می‌خواهید که صفحات وب در میان تمام مرورگرهای وب ثابت باشند، W3C (the World Wide Web Consortium = کنسرسیوم شبکه جهانی) استانداردها را ایجاد کرد.

از آن زمان، توسعه دهندگان می‌خواستند که امکانات بیشتری به CSS اضافه کنند. پس آن‌ها زبان‌های اضافی‌ای ساختند که به CSS معمولی تبدیل می‌شد. این تغییر شکل به نام «پیش‌پردازش CSS» شناخته می‌شود. علت آن این است که مرورگرهای وب در واقع این کد را درک نمی‌کنند، اما از آنجایی که در زبان دیگری نوشته شده است، در واقع نیازی ندارند که آن را درک کنند.

زبان‌های Less و Sass رایج‌ترین زبان‌های پیش‌پردازنده هستند. تفاوت آن‌ها در اینجاست که:

• Less به کلی از CSS متفاوت است. CSS معمولی در Sass کار می‌کند، اما همچنین از امکانات بیشتری پشتیبانی می‌کند.
• وبسایت Sass، آن را «CSS به همراه قدرت‌های فرا طبیعی» می‌نامد.

وقتی که CSS معمولی دستتان بیاید، یادگیری هم Less و هم Sass بسیار ساده است.

توسعه دهندگان معمولا این ابزار استفاده می‌کنند، به این دلیل که از CSS معمولی قوی‌تر هستند و کد مرتب‌تری را فراهم می‌کنند.

برای این که بتوانید راحت‌تر یکی از این پیش پردازنده‌ها را انتخاب کنید، مقاله «بهترین پیش‌پردازنده CSS‌ کدام است؟» را بخوانید.

فریم‌وورک‌‌های JavaScript

در برنامه‌نویسی، فریم‌وورک‌ها به شما کمک می‌کنند تا به کد خود ساختار بدهید. فریم‌وورک‌های frontend وجود دارند، تا به وب‌اپلیکیشن‌های دارای تعاملات کاربر پیچیده، ساختار اضافه کنند.

در حال حاضر، سه فریم‌وورک اصلی وجود دارند:

• Angular توسط گوگل توسعه داده شد و توسط بسیاری از وب‌اپلیکیشن‌‌ها استفاده شده است. نسل بعدی Angular، در واقع Angular 2 می‌باشد، و برخی تفاوت‌های کلیدی بین این دو وجود دارند.
  * دوره مربوط به آموزش Angular بر روی راکت را می‌توانید در این لینک مشاهده نمایید.
• Ember یک فریم‌وورک frontend با ریشه در Apple است. Apple یک فریم‌وورک به نام SproutCore ساخت، که بعدا به Ember تغییر نام یافت.
• React یک فریم‌وورک frontend ساخته شده توسط مهندسان Facebook است. اکوسیستم React به سرعت در حال تکامل است، اما شروع به متوقف شدن کرده است. React-Fiber یک بازنویسی کامل از این فریم‌وورک است که طراحی شده است تا سریع‌تر باشد، اما همچنین تطابق با کد React را نگه دارد.
  * دوره مربوط به آموزش React بر روی راکت را می‌توانید در این لینک مشاهده نمایید.

دیگر فریم‌وورک‌های قابل توجه هم Backbone و VueJS هستند.

در حال حاضر هیچ فریم‌وورک «مناسبی» برای استفاده وجود ندارد. شرکت‌های مختلف از فریم‌وورک‌های مختلفی استفاده می‌کنند.

پس خیلی نگران موردی که انتخاب می‌کنید نباشید. اگر به توسعه دهی frontend علاقه دارید، مهم‌تر این است که یک درک خوب از اساس داشته باشید، تا این که فریم‌وورک «مناسب» را انتخاب کنید.

Transpilerهای JavaScript

تمام مرورگرهای وب JavaScript را درک می‌کنند. برخی transpilerها کد را از زبان‌های برنامه‌نویسی دیگر مجددا در JavaScript می‌نویسند.

در اینجا برخی transpilerهای رایج را مشاهده می‌نمایید:

• ES6 نسخه بعدی JavaScript است. ES6 با نسخه‌های قدیمی‌تر JavaScript هم تطابق دارد، اما امکانات بیشتری دارد. ابزار تبدیلی که برای تغییر ES6 به JavaScript معمولی استفاده می‌شود، babel نام دارد. ES6 تقریبا جدید است، اما من خیلی به آینده آن امید دارم.
• CoffeeScript یک زبان برنامه‌نویسی به ماند Ruby است که به JavaScript تبدیل می‌شود. این زبان به طور پیشفرض در فریم‌وورک Rail قرار داده شده است و توسط بسیاری از توسعه دهندگان استفاده می‌شود.
• TypeScript یک رویکرد رادیکالی را بر می‌گزیند تا به طور اساسی JavaScript را از یک زبان تایپ شده به صورت دینامیک، به یک زبان تایپ شده به صورت استاتیک تغییرات دهد. این یعنی اساسا زبان متفاوتی است. TypeScript یک ابتکار عمل از Microsoft است. موفقیت آن عموما به نرخ استفاده از Angular 2 بستگی دارد.
  * دوره مربوط به آموزش TypeScript بر روی راکت را می‌توانید در این لینک مشاهده نمایید.

خلاصه توسعه دهی frontend

همه چیز به سرعت در حال تکامل است. این مسئله هیجان انگیز، و همچنین دلهره‌‌آور است.

عبارت «خستگی JavaScript» برای تعریف گرایش جامعه JavaScript به سمت آبجکت‌های جدید و براق استفاده می‌شود.

خیلی نگران عدم استفاده از آخرین فناوری‌ها نباشید.

یک توسعه دهنده backend چیست؟

توسعه دهندگان frontend بر روی کار با ابزار، فناوری‌ها و زبان‌های برنامه‌نویسی که داخل مرورگر اجرا می‌شوند، تمرکز می‌کنند. توسعه دهندگان backend بر روی... هر چیز دیگری به جز آن موارد تمرکز می‌کنند.

پس این مسئله در واقع مستلزم چیست؟ بیایید کمی به سمت عقب زوم کنیم.

بیایید درباره نحوه کار برنامه‌ها صحبت کنیم.

• برای شروع، یک مرورگر وب به اینترنت می‌رود و کاری که به نام «درخواست HTTP GET» شناخته می‌شود را به URLای که مشاهده شده است انجام می‌دهد.
• جادو از طریق لوله‌های موجود در اینترنت اتفاق می‌افتد.
• در نهایت، مرورگر به یک سرور (یک کامپیوتر) می‌رسد که شما به عنوان یک توسعه دهنده وب بر رویش کنترل دارید.

این کار شما به عنوان یک توسعه دهنده backend است که «باعث شوید جادو اتفاق بیفتد» و چیزی که کاربر انتظار دیدنش را دارد، به او بدهید.

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

دیتابیس‌ها

شما احتمالا بر روی کامپیوتر خود اکثر داده‌ها را در فایل‌ها و در سیستم فایل خود ذخیره می‌کنید. سرورهای شما فایل‌هایی خواهند داشت که می‌توانید به آن‌ها دسترسی داشته باشید، اما عموما شما می‌خواهید که داده‌ها را در دیتابیس‌ها ذخیره کنید.

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

اکثر وب‌اپکیلیشن‌ها از دیتابیس‌های SQL استفاده می‌‌کنند. ساخت وب‌اپلیکیشن‌هایی که شما را قادر می‌سازند تا ردیف‌هایی بسازید، آن‌ها را بخوانید، بروزرسانی کرده و از بین ببرید، بسیار رایج است. این کارها به طور خلاصه با نام «CRUD» (Create یا ساختن، Read یا خواندن، Update یا بروزرسانی و Destroy یا از بین بردن) شناخته می‌شوند.

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

معماری مدل / ویو / کنترلر. تقریبا تمام وب‌اپلیکیشن‌های مدرن، از یک استاندارد پیروی می‌کنند. Ruby بر روی Rails این کار را انجام می‌دهد، و فریم‌وورک‌های دیگر مانند ExpressJS هم این کار را انجام می‌دهند. این فریم‌وورک، مسئولیت‌های مختلف داخل یک برنامه را تقسیم می‌کند و به بخش‌های مختلف برنامه اجازه می‌دهد تا به هر مسئولیت رسیدگی کنند.

مدل، بخشی از وب‌اپلیکیشن است که مستقیما با دیتابیس در تعامل است. این مورد به عنوان لایه‌ای عمل می‌کند، که هر کوئری داده‌ای که باید اتفاق بیفتد را اجرا می‌کند.

ویو، صفحه HTMLای است که مرورگر باید ببیند. با این که ویو یک کامپوننت frontend است، اکثر توسعه دهندگان backend قادر به این هستند که اگر چیزی مورد نیاز است، سریعا آن را به صفحه اضافه کنند.

کنترلر، چسب بین قطعه‌های مختلف وب‌اپلیکیشن است.

معماری RESTful. REST مفهومی از فکر کردن درباره معنای اساسی چیزی که درخواست‌های HTTP هستند، می‌باشد. توسعه دهندگان backend می‌توانند به این فکر کنند که یک وب‌اپلیکیشن، باید انتظار دیدن چه درخواست‌های HTTPای را داشته باشد، و بدانند که چگونه آن را با استفاده از چیزی به نام «مسیریابی»  (routing) در برنامه خود به کار بگیرند.

منطق کسب و کار. در نرم‌افزار کامپیوتر، منطق کسب و کار یا منطق دامنه، بخشی از برنامه است که قوانین کسب و کار دنیای واقعی را انکور می‌کند، که تعیین می‌کنند چگونه داده‌ها ساخته شده، ذخیره شده و تغییر می‌کنند.

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

خلاصه توسعه دهی backend

توسعه دهندگان backend به سرورها و دیتابیس‌ها رسیدگی می‌کنند. آن‌ها همچنین در تبدیل درخواست‌های HTTP به پاسخ‌های واقعی از اینترنت کمک می‌کنند.

به این علت، این که یک توسعه دهنده با یک پشته کامل باشید خوب است

توسعه دهندگان دارای یک پشته کامل، قادر به نوشتن هم کد frontend و هم رسیدگی به کدی که بر روی سرور اجرا می‌شود، هستند.

چند علت وجود دارند که چرا باید بخواهید تلا‌ش‌های خود را بر روی تبدیل شدن به یک توسعه دهنده با پشته کامل متمرکز کنید.

اولا، توسعه دهندگان دارای یک پشته کامل می‌توانند بر روی هر شکلی از یک ویژگی کار کنند. این یعنی این که یک توسعه دهنده دارای یک پشته کامل، می‌تواند ایده‌ها را تبدیل به واقعیت کند، نه این که بتواند نصف مسیر را پیش بروند.

این یعنی شما یا...

• در حال کار کردن با یک شرکت برای اضافه کردن یک ویژگی هستید.
• در حال ساخت یک ایده برای یک پروژه جانبی هستید.
• در حال برطرف کردن یک باگ در یک برنامه از پیش موجود هستید.

... شما خواهید توانست که با تمام ابعاد کد کار کنید.

دوما، حتی اگر شما بیشتر به طرف کد frontend یا backend متمایل شوید، باید اساسی در بعد دیگر داشته باشید.

شما نمی‌توانید بدون این که بتوانید با یک توسعه دهنده backend درباره پیامدهای ساختارهای دیتابیس صحبت کنید، نمی‌توانید یک توسعه دهنده frontend خوب باشید.

همچنین اگر نحوه ساخت انواع APIهای RESTful که تعامل با آن‌ها برای توسعه دهندگان frontend ساده است را درک نکنید، نمی‌توانید یک توسعه دهنده backend خوب باشید.

سوما، وب‌اپلیکیشن‌ها همیشه از هر دو بخش تشکیل خواهند شد. در جهت داشتن یک درک کامل از اتفاقی که در یک وب‌‌اپلیکیشن می‌افتد، شما باید یک درک قوی از هم frontend و هم backend داشته باشید.

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

همین مسئله در توسعه دهی هم صدق می‌کند.

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

پس برای اکثر افرادی که به دنبال ورود به توسعه دهی وب هستند، بهتر است که در ابتدا بر روی ساخت یک اساس، هم در frontend و هم در backend تمرکز کنید. سپس می‌توانید به سمت یکی از آن‌ها گرایش داشته باشید.

منبع