در آغاز مسیر توسعه وب، معمولاً با اصطلاحات Frontend و Backend مواجه میشوید. اما این اصطلاحات دقیقاً به چه معنا هستند؟
در این مقاله به تفاوتهای بین این دو بخش خواهیم پرداخت و هر کدام را جداگانه بررسی خواهیم کرد.
مواردی که در این مقاله پوشش خواهیم داد:
- تعریف Frontend
- Frontend چیست؟
- چرا Frontend مهم است؟
- وظایف متداول توسعهدهنده Frontend
- ابزارها و تکنولوژیهای Frontend
- آیا توسعه Frontend مناسب شماست؟
- تعریف Backend
- Backend چگونه کار میکند؟
- مثالهایی از کارکردهای Backend
- وظایف متداول توسعهدهنده Backend
- ابزارها و تکنولوژیهای Backend
- آیا توسعه Backend مناسب شماست؟
Frontend چیست؟
Frontend همه چیزهایی است که یک کاربر در هنگام کلیک بر روی یک لینک یا وارد کردن آدرس وب میبیند و با آنها تعامل دارد. آدرس وب که با نام URL (Uniform Resource Locator) نیز شناخته میشود، مشخص میکند که چه صفحهای باید در مرورگر شما بارگذاری شود.
این بخش به عنوان قسمت کاربری (Client-Side) از یک برنامه وب شناخته میشود.
به عنوان مثال، به همین مقاله توجه کنید. تصویر جلدی که با آن همراه است و متنی که اکنون در حال خواندن آن هستید، بخشی از Frontend هستند.
در بالای صفحه، لوگوی freeCodeCamp و یک نوار ناوبری با لینکی به انجمن freeCodeCamp و دکمهای برای اهدای کمک مالی مشاهده میشود.
همچنین یک جعبه جستجو وجود دارد که میتوانید کلمهای را برای جستجوی مقالهای که به آن علاقه دارید وارد کنید.
لینکی برای کلیک وجود دارد که شما را به سمت درسها و گواهینامههایی هدایت میکند که به شما کمک میکند به صورت رایگان برنامهنویسی یاد بگیرید.
همه این موارد Frontend این صفحه وب را تشکیل میدهند.
کدام بخشهای یک برنامه وب به عنوان Frontend شناخته میشوند؟
Frontend شامل هر چیزی است که کاربر به صورت بصری با آن در تماس است. این شامل تمام قسمتهایی میشود که کاربر به طور مستقیم با آنها تعامل دارد؛ محتواها، استایلها، دکمهها و افکتهای حرکتی پیش از کلیک کردن بر روی یک لینک.
این موارد شامل فرمهای تماس با فیلدهای ورودی مختلف، جعبههای جستجو و منوهای کشویی میشود.
چیدمان، متنها، رنگها و همچنین تصاویر و ویدیوها بخشی از Frontend هستند.
اما Frontend تنها به استایلها محدود نمیشود. بلکه شامل سرعت بارگذاری وبسایت، سهولت در پیمایش آن، و دسترسی به آن برای افراد دارای معلولیت نیز میشود.
Frontend شامل همه بخشهایی است که ظاهر و احساس کلی برنامه وب را ایجاد میکند.
چرا Frontend مهم است؟
Frontend نمایانگر ایده، دیدگاه و رؤیای یک فرد یا تیم است که به شکلی قابل مشاهده برای دنیا عرضه شده است. این ایده باید به شکلی مناسب ارائه شود و از لحاظ بصری جذاب باشد. نحوه ارائه آن میتواند تعیینکننده چگونگی درک دیگران از آن باشد.
یک شرکت یا سازمانی که سایتی دارد که استفاده و پیمایش آن دشوار است، جذابیت بصری ندارد، و خدمات خود را به خوبی معرفی نمیکند، به احتمال زیاد مشتریان و کاربران خود را از دست میدهد.
کاربران به دلیل تجربه کاربری نامطلوب، طراحی بد، و عدم سهولت استفاده دچار سرخوردگی میشوند و به دنبال جای دیگری برای یافتن آنچه که نیاز دارند میگردند. احتمال اینکه دوباره به آن سایت بازگردند بسیار کم است.
وظایف یک توسعهدهنده Frontend چیست؟
وظایف روزمره یک توسعهدهنده Frontend میتواند بسیار متنوع باشد و به شرکت و نقشی که در آن دارند بستگی دارد.
به عنوان یک توسعهدهنده Frontend، ممکن است بخشی از کار شما طراحی باشد. این شامل ایجاد یک راهنمای استایل برای تضمین ثبات در استایلها و هویت برند و همچنین ظاهر و تصویر کلی شرکت میشود.
این طراحی شامل تایپوگرافی (فونتها) برای تمام متنها، ترکیب رنگها، لوگوی شرکت و چیدمان صفحات است، که تنها چند مثال از وظایف شماست.
شما ممکن است مسئول طراحی رابطهای کاربری (User Interfaces) با استفاده از ابزارهای طراحی باشید تا مطمئن شوید که وبسایت تمام عناصر بصری لازم را دارد و این عناصر به شکلی منظم و جذاب نمایش داده میشوند.
از طرف دیگر، ممکن است به عنوان یک توسعهدهنده Frontend کارهای طراحی انجام ندهید. در عوض، ممکن است با مدیران برنامه، طراحان گرافیک و طراحان UX/UI همکاری کنید تا مشکلات مختلف را حل کنید.
شما میتوانید تصاویر طراحی شده، گرافیکها و نتایج تحقیقات کاربری را دریافت کنید و از آنها در پروژههای خود استفاده کنید. از پیش میدانید که مخاطبان هدف شما چه کسانی هستند، مشکلات رایج مشتریان چیست و اطلاعاتی درباره چگونگی استفاده کاربران از سایت در اختیار دارید.
در این حالت، وظیفه شما به عنوان یک توسعهدهنده Frontend این است که طرحها و نمونههای استاتیک طراحی شده را به چیزی قابل استفاده تبدیل کنید، به یک وبسایت واقعی و عملی که کاربران به راحتی بتوانند با آن تعامل داشته باشند.
با استفاده از تکنولوژیهای Frontend، شما طرحهای از پیش آماده را پیادهسازی میکنید و تمام عناصر بصری را میسازید.
یکی از وظایف بزرگ یک توسعهدهنده Frontend، ایجاد وبسایتهای واکنشگرا است. شما باید مطمئن شوید که وبسایتها بر روی دستگاههای مختلف با اندازههای صفحه نمایش متفاوت، به خوبی نمایش داده میشوند و قابل استفاده هستند.
امروزه کاربران تنها از رایانههای رومیزی استفاده نمیکنند و بیشتر وبسایتها را از طریق دستگاههای موبایل و تبلت مشاهده میکنند.
علاوه بر این، توسعهدهندگان Frontend باید طراحی و توسعه وبسایت را با در نظر گرفتن مرورگرهای پرکاربرد و محبوب انجام دهند. وبسایتها باید در همه مرورگرها به خوبی نمایش داده شوند و عملکرد مطلوبی داشته باشند.
در اینجا اطلاعاتی که از مخاطبان و مشتریان هدف خود دارید بسیار حائز اهمیت است. بسته به نوع خدمات یا محصول و کاربران شما، ممکن است نیاز باشد که وبسایتها را با مرورگرهای قدیمیتر یا مرورگرهای مدرنتر سازگار کنید.
یکی دیگر از وظایف مهم یک توسعهدهنده Frontend، اطمینان از دسترسیپذیری وبسایت برای همه کاربران است. این کار شامل ایجاد امکاناتی است که تجربه مرور وب را برای همه افراد، از جمله افراد دارای معلولیت، لذتبخش کند.
از جمله ویژگیهای مهم دسترسیپذیری که یک توسعهدهنده Frontend میتواند پیادهسازی کند عبارتاند از:
- متن به گفتار (Text-to-Speech)
- ناوبری تنها با صفحهکلید
- ترکیب رنگهای قابل دسترسی با کنتراست کافی
- دکمههای بزرگ
توسعهدهندگان Frontend همچنین روی بهبود عملکرد و سرعت بارگذاری وبسایت نیز کار میکنند.
اکثر کاربران اگر بارگذاری یک وبسایت طولانی شود، سریعاً از آن خارج میشوند. بهبود زمان بارگذاری وبسایت، حتی چند ثانیه، میتواند تفاوت بزرگی ایجاد کند و کاربران را حفظ کند.
یکی دیگر از بخشهای کار یک توسعهدهنده Frontend طراحی و ایجاد فرمهای کاربردی برای وب است.
فرمهای وب پل ارتباطی بین کاربران و شرکت یا سازمان هستند. این فرمها راهی ساده برای کاربران فراهم میکنند تا سوالات خود را بپرسند، با خدمات مشتری تماس بگیرند، اطلاعاتی را ارسال کنند یا حساب کاربری ایجاد کنند.
مروری بر ابزارها و تکنولوژیهای Frontend
به عنوان یک توسعهدهنده Frontend، شما باید همواره در حال یادگیری تکنولوژیهای جدید باشید، زیرا این حوزه به سرعت تغییر میکند. با این حال، سه تکنولوژی اصلی و بنیادی که برای توسعه Frontend به کار میروند عبارتاند از: HTML، CSS و JavaScript.
این تکنولوژیها در مرورگر کاربر اجرا میشوند و پایه و اساس تمام وبسایتها در سراسر شبکه جهانی اینترنت را تشکیل میدهند.
حال بیایید بیشتر در مورد این تکنولوژیها صحبت کنیم:
- HTML که مخفف HyperText Markup Language است، ساختار و محتوای تمام صفحات وب را با استفاده از تگهای معنایی HTML تعریف میکند.
- CSS که مخفف Cascading Style Sheets است، استایلهای عناصر HTML را تعریف میکند. CSS رنگها، فونتها، اندازه متن و چیدمان صفحات وب را مشخص میکند.
- Vanilla JavaScript به شما این امکان را میدهد که به عناصر صفحه قابلیت و تعامل اضافه کنید. این زبان برنامهنویسی به شما کمک میکند صفحات وب را به صورت پویا و تعاملی طراحی کنید.
علاوه بر این سه مورد، کتابخانهها و فریمورکهای زیادی برای Frontend وجود دارند.
این ابزارها کمک میکنند تا یکپارچگی بین صفحات مختلف یک وبسایت تضمین شود و همچنین قابلیتهای آمادهای برای انجام کارهای تکراری فراهم میکنند.
از محبوبترین کتابخانهها و فریمورکها میتوان به موارد زیر اشاره کرد:
- React
- Redux
- Vue
- Angular
بسته به نقش و شرح وظایف شما، ممکن است نیاز به مهارتهای طراحی داشته باشید. برخی از ابزارهای متداولی که برای کارهای طراحی استفاده میشوند عبارتاند از:
- Figma
- Sketch
- Adobe XD
- Photoshop برای ویرایش تصاویر
آیا توسعه Frontend مناسب شماست؟
توسعه Frontend یک فعالیت خلاقانه و هنری است که ترکیبی از هنر بصری و برنامهنویسی را در خود جای داده است.
یکی از راههای تصمیمگیری در مورد اینکه آیا توسعه Frontend برای شما مناسب است یا خیر، این است که ببینید آیا از دیدن نتایج بصری کارتان لذت میبرید یا خیر.
در توسعه Frontend، شما میتوانید به سرعت نتایج کار خود را روی صفحه نمایش کامپیوتر خود مشاهده کنید.
یکی دیگر از عواملی که باید در نظر بگیرید این است که آیا برای شما مهم است که کاربران بهترین تجربه ممکن را هنگام مرور وب داشته باشند یا خیر. تجربه کاربری و ایجاد وبسایتهای قابل استفاده بخش بزرگی از این کار است.
تنها راه برای اینکه بفهمید آیا مسیر توسعه Frontend برای شما مناسب است یا خیر، این است که آن را امتحان کنید.
یک نقطه شروع عالی برای یادگیری این حوزه، گواهینامه طراحی وب پاسخگو (Responsive Web Design) از freeCodeCamp است. شما در این دوره با ساخت ۲۰ پروژه مختلف، گواهینامه دریافت میکنید.
در این دوره، شما HTML و تکنیکهای مدرن CSS را همراه با بهترین شیوههای دسترسی یاد خواهید گرفت. همچنین یاد میگیرید چگونه صفحات وب واکنشگرا طراحی کنید که با اندازههای مختلف صفحه نمایش سازگار باشند.
پس از دریافت این گواهینامه، میتوانید به یادگیری زبان برنامهنویسی JavaScript با گواهینامه الگوریتمها و ساختارهای دادهای JavaScript ادامه دهید. در این دوره، یاد میگیرید که چگونه صفحات وب را تعاملی کنید.
شما از اصول اولیه شروع کرده و نحو (syntax) و بلوکهای ساختاری لازم برای پیشرفت به موضوعات پیشرفتهتر مانند برنامهنویسی شیءگرا را یاد خواهید گرفت.
Backend چیست؟
توسعه Backend به تکنولوژیهایی مربوط میشود که مسئول ذخیره و مدیریت امن دادههای کاربران هستند. این بخش از برنامه شامل تمام منطق پنهانی است که برنامههای تحت وب را به کار میاندازد.
Backend به عنوان بخش سمت سرور (Server-Side) برنامه شناخته میشود. در واقع، Backend همه فرآیندهای پشت صحنه و بخشهای مخفی یک برنامه وب است.
این بخش شامل تمام فعالیتهایی است که زیر پوسته برنامه در حال رخ دادن است و تمام اجزای ضروری که موجب عملکرد صحیح و روان Frontend میشوند. Backend تضمین میکند که همه چیز به درستی و بهینه کار کند.
در واقع، Backend بخشی است که کاربران به طور مستقیم با آن تعامل ندارند و از فرآیندهای آن هنگام استفاده از برنامه بیاطلاع هستند.
مروری بر نحوه کار Backend برای مبتدیان
Backend مسئول دریافت درخواستها از سمت کاربر (Client) است. این بخش درخواستهای دریافتی را پردازش میکند و اطمینان حاصل میکند که دادههای مرتبط با کاربر مناسب را بازیابی کند. سپس پاسخ را به سمت کاربر ارسال میکند. این دادهها به صورت بصری و زیبا توسط کد Frontend که توسط یک توسعهدهنده Frontend ایجاد شده است، به کاربر مناسب ارائه میشوند.
Backend شامل بخشهای زیر است:
- سرور: سرور یک برنامه است که در انتظار درخواستهای دریافتی از سمت کاربر است. این سرور با دیتابیس ارتباط برقرار میکند و درخواستهای دیتابیس را ارسال میکند. زمانی که دیتابیس پاسخ دهد، سرور اطلاعات لازم را بازیابی میکند.
این فرآیند با کمک یک برنامه در حال اجرا بر روی سرور انجام میشود که شامل منطق مورد نیاز برای جمعآوری اطلاعات و منابع درخواست شده برای کاربر صحیح است. اسکریپتهای سمت سرور که به زبانهای برنامهنویسی Backend نوشته شدهاند، مسئول پردازش درخواستها هستند.
- دیتابیس: دیتابیس مانند مغز یک برنامه است. دیتابیسها برنامههایی هستند که به منظور سازماندهی، ذخیره، بازیابی و بهروزرسانی اطلاعات و محتوای یک برنامه استفاده میشوند.
مثالهایی از کارکردهای Backend
برای درک بهتر کارکردهای Backend، یک مثال واقعی از برنامههای تحت وب مدرن را بررسی میکنیم.
فرض کنید شما عضو یک پلتفرم اشتراکی تمرینات ورزشی پولی هستید.
- برای ورود به حساب کاربری: شما باید آدرس ایمیل و رمز عبور خود را در یک فیلد ورودی وارد کنید. در اینجا، چکهای اعتبارسنجی ابتدایی انجام میشود. این اعتبارسنجیها تضمین میکنند که فیلدهای مورد نیاز خالی نباشند و فرمت آدرس ایمیل صحیح باشد.
سپس، چکهایی انجام میشود تا ببینند آیا شما به عنوان کاربر در دیتابیس وجود دارید یا خیر. این چکها شامل ارسال درخواستهایی به دیتابیس برای بررسی صحت آدرس ایمیل و رمز عبوری است که هنگام ایجاد حساب کاربری خود وارد کردهاید.
اگر آدرس ایمیل و رمز عبور اشتباه باشند، یک پیام خطا نمایش داده میشود که ترکیب وارد شده وجود ندارد.
اگر همه چیز درست باشد، شما به صفحه اصلی خود هدایت میشوید و ممکن است یک پیام خوشآمدگویی با نام یا نام کاربری شما نمایش داده شود.
- برای انتخاب یک تمرین ورزشی: دیتابیس تمام اطلاعات خام شما را ذخیره میکند. تمریناتی که قبلاً انجام دادهاید در دیتابیس ذخیره شدهاند. همچنین، هر تمرینی که در لیست پخش خود ذخیره کردهاید یا به عنوان علاقهمندی علامت زدهاید نیز در دیتابیس ذخیره میشود.
شما میتوانید همه تمرینات موجود را ببینید و بر اساس دستهبندی مورد نظر خود آنها را فیلتر کنید. به عنوان مثال، میتوانید یک کلمه کلیدی مانند “شکم”، “بازوها”، “پایینتنه” یا “بالاتنه” را در جعبه جستجو وارد کنید. یا میتوانید از میان دستهبندیهای موجود مانند یوگا، کششی، HIIT، یا تمرینات قدرتی یکی را انتخاب کنید. دیتابیس همه تمرینات ذخیره شده را جستجو میکند، اما تنها نتایج فیلتر شده مربوط به دستهبندی خاص شما را نمایش میدهد.
- برای پرداخت حق اشتراک: برنامه باید قادر باشد اطلاعات کارت اعتباری یا سایر روشهای پرداخت را دریافت کند و آن اطلاعات را به صورت امن در دیتابیس ذخیره کند.
همچنین برنامه باید در زمان مناسب اطلاعات پرداخت را بهروزرسانی کند. بسته به نوع اشتراک، ممکن است یک بهروزرسانی ماهانه یا سالانه انجام شود که هر بار مبلغ صحیحی از کارت شما کسر میکند.
تمام این فرآیندها توسط Backend یک برنامه کنترل و مدیریت میشوند.
وظایف یک توسعهدهنده Backend چیست؟
نقش یک توسعهدهنده Backend میتواند از شرکتی به شرکت دیگر و از یک شغل به شغل دیگر متفاوت باشد. اما تمرکز اصلی کار توسعهدهنده Backend ایجاد و نگهداری سرویسها و برنامههایی است که به Frontend کمک میکنند تا به درستی کار کند.
به طور کلی، برخی از وظایف یک توسعهدهنده Backend شامل موارد زیر میشود:
- ایجاد، مدیریت و نگهداری دیتابیس که محصول یا خدمات از آن استفاده میکند.
- ایجاد، تعامل و نگهداری سرورها که برنامههای تحت وب را پشتیبانی میکنند.
- ایجاد قابلیتهای داخلی یا خارجی و نرمافزارهای سمت سرور با استفاده از تکنولوژیهای سمت سرور و فریمورکهای وب برای ارائه راهحل به مشکلات مختلف.
- کار با APIها (رابطهای برنامهنویسی کاربردی). طراحی، توسعه، پیادهسازی، نگهداری و مدیریت APIها که عملیات CRUD (ایجاد، خواندن، بهروزرسانی و حذف) را پشتیبانی میکنند.
- اعتبارسنجی دادهها برای اطمینان از اینکه دادهها قبل از ذخیرهسازی در دیتابیس به شکل صحیحی هستند.
- ایجاد سیستمهای ایمن برای محافظت از دادههای کاربران. این کار به خصوص در مواقعی که سیستمها با پردازش پرداختها درگیر هستند بسیار مهم است.
- تعامل با سرویسهای شخص ثالث مانند سرویسهای احراز هویت و سرویسهای پرداخت خارجی.
- سازماندهی منطق سیستم و توسعه معماری سایت.
مروری بر ابزارها و تکنولوژیهای Backend
توسعهدهندگان Backend از ابزارها و تکنولوژیهای مختلفی در کار روزانه خود استفاده میکنند تا منطق را در برنامههای تحت وب پیادهسازی کنند.
یکی از مهمترین بخشهای برنامهنویسی Backend، استفاده از زبانهای برنامهنویسی سمت سرور است. برخی از پرکاربردترین آنها عبارتاند از:
- PHP
- Ruby
- Python
- Java
- JavaScript: بله، JavaScript به طور گستردهای در توسعه Frontend استفاده میشود، اما در سالهای اخیر برای توسعه Backend نیز کاربرد پیدا کرده است. با استفاده از Node.js (یک محیط اجرایی جاوااسکریپت)، امکان پیادهسازی قابلیتهای Backend فراهم میشود.
علاوه بر زبانهای برنامهنویسی Backend، فریمورکها و کتابخانههای متعددی برای Backend وجود دارد که قابلیتهای اضافی برای ایجاد برنامههای تحت وب فراهم میکنند.
برخی از محبوبترین آنها عبارتاند از:
- Ruby on Rails
- Django
- Flask
- Express
هنگامی که توسعهدهندگان بخشی از یک تیم هستند، از Git استفاده میکنند؛ یک سیستم کنترل نسخه که تغییرات در فایلهای مختلف پروژه را پیگیری میکند. این ابزار یک ابزار همکاری متنباز برای برنامهنویسان است.
تعامل با دیتابیسها بخش بزرگی از کار توسعهدهندگان Backend است. بنابراین، دانش دیتابیسها برای آنها بسیار ضروری است.
دیتابیسها به دو دسته تقسیم میشوند: دیتابیسهای رابطهای و دیتابیسهای غیر رابطهای.
برخی از دیتابیسهای پرکاربرد عبارتاند از:
- MySQL
- PostgreSQL
- MongoDB
- Oracle
هنگامی که با دیتابیسهای رابطهای مانند MySQL، PostgreSQL و Oracle کار میکنید، از SQL (Structured Query Language) استفاده خواهید کرد.
SQL زبانی است که برای اجرای درخواستها در دیتابیس استفاده میشود. این زبان با دیتابیسهای رابطهای ارتباط برقرار کرده و دادهها را مدیریت میکند.
آیا توسعه Backend مناسب شماست؟
توسعهدهندگان Backend مسئول منطق پشت برنامههای تحت وب هستند و اطمینان حاصل میکنند که Frontend به طور بهینه عمل کند.
اگر از حل مسائل با تجزیه آنها به بخشهای کوچکتر، پیادهسازی الگوریتمها و یافتن راهحلهای مؤثر لذت میبرید، شاید توسعه Backend مناسب شما باشد.
اگر خود را فردی تحلیلگر و روشمند میدانید، توسعه Backend شامل کار با مقادیر زیاد داده است. این کار شامل تحلیل، سازماندهی و انجام محاسبات با دادههاست.
در نهایت، اگر خود را فردی هنرمند نمیدانید و بیشتر به منطق و فرآیندهای پشت صحنه علاقه دارید، شاید توسعه Backend برای شما مناسبتر باشد.
با این حال، بسیاری از افراد ممکن است کار خود را با Frontend شروع کرده و سپس به سمت Backend حرکت کنند. این امکان به آنها کمک میکند تا متوجه شوند که کدام بخش از کار برای آنها جذابتر است.
نتیجهگیری
امیدوارم که اکنون درک بهتری از مفهوم توسعه Frontend و Backend پیدا کرده باشید و بتوانید تفاوتهای بین این دو را تشخیص دهید.
برای خلاصه کردن مطالب، Frontend شامل تمام بخشهایی است که کاربر با آنها تعامل دارد، در حالی که Backend منطقی است که تعاملات Frontend را به کار میاندازد.
از اینکه این مقاله را خواندید سپاسگزارم!
دیدگاهها