به عنوان یک تازه وارد در دنیای برنامه نویسی وب، احتمالا واژه های فرانت اند، بک اند و فول استک را زیاد خواهید شنید. جدای از مفاهیم فنی مثل آشنایی با HTML و CSS و JAVASCRIPT و همچنین زبان های سمت سرور، بهتر است با مفاهیم فرانت اند، بک اند و فول استک هم آشنا باشیم. در این مقاله به زبان ساده با این مفاهیم آشنا خواهیم شد. برای استفاده بهتر از این نوشته، آشنایی با HTML و CSS و JAVASCRIPT و همچنین آشنایی حداقلی با زبان های سمت سرور، لازم است.

فرض کنید میخواهید یک وبلاگ برای خود راه اندازی کنید. در این وبلاگ مقالات خود را قرار خواهید داد. هر مقاله، عنوان، تصویر و متن دارد.

فرانت اند و جهنم فایل های استاتیک

Front-End-Development

کافی است یک فایل index.html داشته باشید و به ازای هر مقاله، کد هایی را به آن اضافه کنید. عنوان مقاله با تگ H2، تصویر مقاله با تگ img و تعدادی تگ p برای پاراگراف های متن مقاله. به ازای هر مقاله این موارد را به فایل index.html اضافه می کنید. بعد از مدتی تعداد مقاله ها زیاد می شود و تصمیم میگیرید در صفحه اصلی (index.html) فقط عنوان و تصویر هر مقاله و لینکی که با ورود به آن بتوان مقاله را خواند، نمایش داده شود. کافی است به ازای هر مقاله یک صفحه html جدا بسازید و لینکی به آن صفحه، در صفحه اصلی ایجاد کنید. به همین راحتی می توانید وبلاگ خود را راه اندازی کنید! شاید حتی نیازی به JAVASCRIPT هم نداشته باشید!!!

بعد از مدتی حدود ۱۰۰ مقاله در وبلاگ منتشر می کنید. ناگهان تصمیم می گیرید که قالب وبلاگ را تغییر دهید. یعنی تغییر چیزی نزدیک به ۱۰۰ صفحه html ! به جهنم فرانت اند و فایل های استاتیک خوش آمدید!!!

تا الان با استفاده از html و css وبلاگ خود را توسعه می دادید. در واقع هربار که آدرس وبلاگ خود را باز می کنید، مرورگر یک صفحه html را دانلود کرده و نمایش می دهد. یعنی صفحات را به صورت static (ایستا) ایجاد کرده اید. به زبان ساده، فایل ها یک بار ایجاد می شوند و برای هر بار دانلود نیاز نیست مجدد ساخته شوند.

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

بک اند، دنیایی شیرین

back end development

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

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

پس احتمالا در اکثر زبان های سمت سرور (بک اند) کد نویسی با ترکیب دستورات آن زبان و کد های html و css و JavaScript انجام می شود. برای مثال در فریم ورک ASP .Net MVC فایل های cshtml (ترکیب سی شارپ و html) صفحات سایت ما را تشکیل می دهند.

در روش ذکر شده در این بخش، فرانت اند و بک اند، بسیار نزدیک به هم هستند. همچان html و css و JavaScript در سمت فرانت و یک زبان برنامه نویسی در سمت بک وجود دارد ولی کد ها ترکیب می شوند و بسیار به هم وابسته هستند.

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

توسعه دهنده فول استک

Full-Stack-developer

اگر حداقل به یکی از زبان های سمت سرور مسلط باشید و در کنار آن مفاهیم HTML و CSS و JAVASCRIPT یا فریم ورک های آن را نیز بلد باشید، شما یک فول استک دولوپر خواهید بود.

یکی از مزایای فول استک بودن این است که فرصت های شغلی بسیار بیشتری خواهید داشت. البته باید تلاش و مطالعه بسیار بیشتری نیز نسبت به سایرین داشته باشید.

جدا سازی بک اند و فرانت اند

backend-vs-frontend

در قسمت “بک اند، دنیایی شیرین” گفتیم که وابستگی بین کد های فرانت و بک باعث بروز مشکلاتی می شود. اما آیا راه حلی برای آن وجود دارد؟ آیا می توان بک و فرانت را کاملا مستقل توسعه داد؟ بله! به راحتی. کافی است به این فکر کنید که وظیفه بک اند، فراهم کردن اطلاعات است و وظیفه فرانت اند، نمایش آن اطلاعات. پس می توان این دو حوزه را به صورت کاملا مستقل توسعه داد. اما باید راه ارتباطی بین این دو حوزه فراهم کرد. یک زبان مشترک. و آن چیزی نیست جز API .

فریم ورک و کتابخانه های فرانت اند

Single-Page-Application

احتمالا نام کتابخانه React و فریم ورک های Vue و Angular را شنیده باشید. این ها، فریم ورک ها و کتابخانه های فرانت اند محسوب می شوند. اما چه کاری آز آنها بر می آید؟

با Java و Android می توانید برنامه هایی بنویسید که در گوشی های اندرویدی اجرا می شوند. با زبان هایی مثل سی شارپ و سی پلاس پلاس می توانید برنامه هایی بنویسید که روی لینوکس و ویندوز اجرا می شوند. همچنین، با فریم ورک ها و کتابخانه های فرانت اند می توانید برنامه های بنویسید که در مرورگر اجرا می شوند!

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

پس با HTML و CSS و JAVASCRIPT و فریم ورک های آن برنامه هایی می نویسیم که در مرورگر اجرا می شوند. حتی به لطف ابزار هایی مثل PWA، می توانیم امکان اجرای آفلاین و لوکال این برنامه ها را فراهم کنیم. می توانیم یک پایگاه داده کوچک درون مرورگر داشته باشیم و این برنامه ها را به صورت پنجره های جدا از مرورگر، درون ویندوز یا به صورت اپلیکیشن در تلفن های همراه اجرا کنیم. به لطف PWA .

نگاهی دقیق تر به جدا سازی فرانت اند و بک اند

JSON And C# Object

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

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

جاوا اسکریپت، زبانی انحصارگرا

Full-Stack-JavaScript

همانطور که میدانید، زبانی که با آن می توانید در فرانت اند (مرورگر) برنامه نویسی کنید، جاوا اسکریپت هست. یعنی مرورگر تنها این زبان را درک می کند. بعد از بوجود آمدن Node Js امکان توسعه بک اند با زبان جاوا اسکریپت نیز فراهم شد. پس با یک زبان می توانید هم بک و هم فرانت را توسعه بدهید. این یعنی نیاز نیست زبان های متفاوت را یاد بگیرید. کافی است با قدم زدن در امپراتوری جاوا اسکریپت، فول استک شوید.

اما وب اسمبلی به این انحصارگرایی پایان داد. با استفاده از web assembly در صورتی که زبانی از آن پشتیبانی کند، می توانید فرانت را با آن زبان پیاده سازی کنید. برای مثال در پلتفرم دات نت (از دات نت کور ۳.۱ به بعد) با استفاده از فریم ورک Blazor که بر مبنای وب اسمبلی ساخته شده، برنامه های فرانت اند را توسعه دهید.

سخن پایانی و جمع بندی

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

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

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