لطفا جاواسکریپت مرورگر خود را فعال سازید!

نحوه فعال سازی در کروم
  1. ابتدا باید اینکارو بگنید
  2. بعدش اونکارو
نحوه فعال سازی در فایرفاکس
  1. ابتدا باید اینکارو بگنید
  2. بعدش اونکارو
دولوپر Front-end شویم یا Back-end؟

دولوپر Front-end شویم یا Back-end؟

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

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

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

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

در مورد اپلیکیشن‌های تحت‌ وب -وب‌سایت- هم همین قضیه صادق است که با توضیحاتی که در ادامه می‌آوریم، این قضیه روشن‌تر خواهد شد. 

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

HTML
زبان HTML مخفف واژگان HyperText Markup Language به‌معنی «زبان نشانه‌گذاری فرامتنی» است که به‌عنوان سنگ زیربنای وب است؛ قریب به اتفاق اپلیکیشن‌های تحت وب بااستفاده از این تکنولوژی ساخته شده‌اند و مرورگرها به‌خوبی تگ‌های این زبان را متوجه می‌شوند (یادگیری زبان HTML خیلی آسان است و تمام دولوپرها باید یک آشنایی نسبی با آن داشته باشند).

CSS
مخفف واژگان Cascading Style Sheets است که به‌منزلهٔ یک تکنولوژی دیگر برای دولوپرهای فرانت‌اند است که این امکان را می‌دهد تا بتوان مشخص کرد که هر قسمت از صفحۀ وب چه شکلی داشته باشد. 

اگر بخواهیم درک درست‌تری از تفاوت‌های زبان‌های HTML و CSS داشته باشیم، می‌توانیم یک ساختمان را درنظر بگیریم؛ یک ساختمان از اسکلت، چارچوب، سنگ و آجر ساخته شده است (HTML) اما برای این‌که زیبا به‌نظر برسد، نیازمند کچ، رنگ، تزئینات و غیره است (CSS).

JavaScript
جاوااسکریپت زبانی است که امروزه طرفداران زیادی پیدا کرده است که یکی از اصلی‌ترین آن‌ها، دولوپرهای فرانت‌اند هستند (البته با وجود Node.js، دولوپرهای بک‌اند هم از آن استقبال کرده‌اند). این زبان کمک می‌کند تا دولوپر یک تجربۀ کاربری روان برای کاربران سایت ایجاد کند و همچنین امکان افزودن جلوه‌های بصری زیبا را فراهم می‌آورد (Google Maps و Gmail دو نمونه از بهترین سرویس‌هایی هستند که به خوبی از جاوااسکریپت استفاده کرده‌اند).

دولوپرهای Front-end بااستفاده از این 3 تکنولوژی می‌توانند کار خود را به پیش برند اما تکنولوژی‌های مورد استفادهٔ آن‌ها محدود به این ۳ مورد نشده و در ادامه سایر چیزهایی که دولوپرهای فرانت‌اند حرفه‌ای استفاده می‌کنند تا وب اپلیکیشن‌های خوبی به بازار عرضه‌ کنند را معرفی خواهیم کرد:

CSS Pre-Processor 
درسال 1996، کمیسیون استاندارد یک نسخۀ اولیه از قانونی را تعریف کرد که تمام مرورگرهای وب چگونه باید المان‌های مختلف رابط کاربری را درمعرض دید کاربران قرار دهند. از آنجایی که مرورگرهای زیادی وجود دارند و در حین ساخت صفحات وب باید توجه شود که این صفحات با تمام این مرورگرها سازگار باشند، W3C (مخخف The World Wide Web Consortium به‌معنی کنسرسیوم شبکۀ جهانی وب) استانداردهایی را تعیین کرد و از آن پس دولوپرها خواستار این شدند که ویژگی‌های جدیدی به CSS افزوده شود.

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

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

فریمورک‌های جاوااسکریپت
در برنامه‌نویسی، این فریمورک‌ها هستند که کمک می‌کنند تا سورس‌کد خود را ساختار دهیم. فریمورک‌های جاوااسکریپت در Front-end کمک می‌کنند تا به وب‌سایت‌های خود ساختاری دهیم که تعامل کاربرانش با آن روان و ساده شود. در ادامه 3 مورد از فریمورک‌های پرکاربرد جاوااسکریپت را معرفی می‌کنیم:

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

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

React: فریمورک فرانت‌اندی است که توسط مهندسین فیسبوک ساخته شده است و اکوسیستمی دارد که سریع تکامل می‌یابد و درحال‌حاضر هم نسبت به گذشته به‌مراتب پایدارتر شده است (React-Fiber یک نسخه کامل‌تری از روی این فریمورک است که طراحی شده تا سریع‌تر باشد اما درعین‌حال سازگاری با نسخه قبلی را حفظ کرده است).

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

Transpilerهای جاوااسکریپت
تمام مرورگرهای وب جاوااسکریپت را اجرا می‌کنند؛ بعضی از Transpilerها کدها را از زبانی دیگر به جاوااسکریپت ترجمه می‌کنند و معمولاً دولوپرهای وب این ابزارها را هم یاد می‌گیرند. بعضی از معمول‌ترین آن‌ها را در زیر آورده‌ایم:

ES6: آخرین نسخۀ جاوااسکریپت که به‌اصطلاح Backwards-Compatible است اما ویژگی‌های جدیدی به آن اضافه شده است و تقریباً در مقایسه با نسخه‌های پیشین جاوااسکریپت، یک زبان کاملاً جدید محسوب می‌شود. Babel ابزاری است که کدهای نوشته شده با زبان ES6 را به جاوااسکریپت معمولی تبدیل می‌کند.

CoffeeScript: یک زبان شبیه روبی است که به جاوااسکریپت تبدیل می‌شود؛ به‌صورت دیفالت، این زبان روی فریمورک روبی‌آن‌ریلز ساخته شده است اما توسط دولوپرهای مختلفی استفاده می‌شود.

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

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

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

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

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

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

Model بخشی از اپلیکیشن است مستقیماً با دیتابیس تعامل دارد و مانند لایه‌ای عمل می‌کند که مسئول اجرای کوئری‌های مرتبط با دیتابیس است؛ View همان خروجی وب اپلیکیشن‌ است که مرورگر کدهای اچ‌تی‌ام‌ال آن‌را رندر کرده و درمعرض دید کاربران قرار می‌دهد (با این‌که View جزئی از Front-end است ولی دولوپرهای Back-end هم اگر نیاز باشد می‌توانند برای برطرف کردن نیازهای خود آن‌را دستکاری کنند). Controller هم مانند رابطی بین Model و View است (جهت آشنایی بیشتر با مفهوم MVC، به آموزش مقدمه‌ای بر معماری سه لایه نرم افزاری مراجعه نمایید).

معماری RESTFUL 
به‌طور خلاصه، REST کانسپتی است که به ما نشان می‌دهد ریکوئست‌های HTTP چه کارهایی انجام می‌دهند؛ از طریق چیزی که اصطلاحاً Routing گفته می‌شود، دولوپرهای بک‌اند قادر به این هستند تا درخواست‌های HTTP را مدیریت کنند (برای کسب اطلاعات بیشتر پیرامون این موضوع، به آموزش آشنایی با مفهوم RESTful API مراجعه نمایید).

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

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

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

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

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

سوم این‌که تمام اپلیکیشن‌های تحت وب شامل هر دو بخشی که گفته شد هستند؛ برای این‌که درک کاملی از نحوۀ کارکرد یک وب اپلیکیشن داشته باشید، باید درک نسبتاً کاملی از هر دو بخش داشته باشید تا بتوانید نحوۀ کارکرد اپلیکیشن مدنظر را به‌خوبی بفهمید.

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

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

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

منبع


هادی فاخریان