دوست دارم در این نوشته درباره ی تجربیات خودم در زمینه ی طراحی وب های تک صفحه ای با شما در میان بزارم .
بهتره همین اول بریم سراغ تعریف ها تا ببینیم هدفمون کلا از این مطلب آموزشی چی هست
خب همانطور که از اسمش پیداست spa یا single page application به سایت هایی گفته میشه که کلا تک صفحه هستند یعنی با باز کردن مرورگر و زدن آدرس یک سایت تمام و کمال آن سایت در مرورگر شما لود میشود و دیگر برای درخواست های مختلف رفرش اتفاق نمیوفتد .
البته این مورد را با AJAX اشتباه نگیرید AJAX یک تکنولوژی هست ولی spa یک روش طراحی سایت برمبنای AJAX است .
اگر بخواهیم سایت های تک صفحه ای را خوب درک کنیم فرض کنید شما یک اپلیکیشن در کامپیوتر خود باز کردید و در حال کار با آن هستید .
ایا هنگام انجام یک عملیات جدید در کامپیوتر خود ،برای انکه اپلیکیشن درخواست را به سخت افزارهای شما ارسال کند و پاسخ را بگیرد و .... صبر میکنید یا اصلا این فرایند را احساس میکنید ؟ مطمئنا نه
یا یه مثال دیگه فرض کنید تو گوشی موبایل اپ اینستاگرام را باز کردید .اپ یکبار باز میشه و همون ابتدا نیازهای اصلی خودش را از سرورهای اینستاگرام دریافت میکنه و بعد برای هر دریافت جدید یکبار دیگر منتظر نمیمانید ( حالا بحث اینستاگرام کمی فرق داره چون اینطوری داریم از بحث دور میشیم اینجا بهتره به بحث اپلیکیشن های RealTime مراجعه کنید )
خب بجای این مثال ها شما برنامه ی تحت وب تلگرام را در نظر بگیرید .
این سایت و برنامه ای که براش نوشته شده نمونه ی کاملی از یک سایت spa است .
در وب سایت های spa اگر درخواست به سمت سرور ارسال شود یا چیزی قرار باشد از سمت سرور به سایت ارسال گردد بصورت AJAX انجام میگیره و صفحه هرگز ریفرش نمیشه
خب حالا که مفهوم اولیش را فهمیدیم بریم سراغ Vuejs و ReactJs
ویو جی اس یک فریمورک برای زبان برنامه نویسی جاوااسکریپت است . همانطور که میدانید جاوا اسکریپت یک زبان برنامه نویسی سمت مرورگر کاربر است و باهاش میشه برنامه هایی نوشت که در سمت مرورگر کاربران اجرا بشه
ولی از اونجایی که جاوا اسکریپت کدنویسیش سخت و پیچیدست فریمورک ها و کتابخانه های خیلی زیادی برای این زبان برنامه نویسی ساخته شده است
از جمله کتابخانه های معروفی که استفاده میشود JQUERY نام دارد و تقریبا همه یکبار ازش استفاده کردن .
ولی خب بحث اصلی این بود که کار با DOM با این کتابخانه ها و فریمورک ها چطور انجام بگیره که بهتر باشه ؟
یه پرانتز اینجا باز کنم که DOM به معنی این است که وقتی یک سایتی بصورت کامل بارگزاری شد مرورگر آن را بخش بندی میکنه به نام Document Object Model .
مثلا هر کدام از تگ های html که در صفحه هست هرکدام یک آبجکت در نظر گرفته میشه و به این ترتیب میشه همه ی آنها را در آن واحد مدیریت کرد .
خب دیگه اینو همه میدونیم هر آنچه که در یک وب سایت میبینیم html و چیز دیگری وجود ندارد که قالب اصلی سایت ها را بسازد پس میتوانیم با استفاده از تگ های html و مدیریت ارزش ها و محتواهای انها برنامه هایی بنویسیم که در مرورگر کار کنه
ما میتونستیم این کار رو با JQUERY یا حتی خود js خالی انجام بدیم ولی میدونید چقدر دردسر داشت ؟
اینجا بود که برخی فریمورک ها و کتابخانه هایی ظهور کردن که این کار را آسان بکنند و با خاصیت DOM اچ تی ام ال سایت هایی بسازند که مثل یک برنامه ی نصب شده در کامپیوتر یا گوشی عمل کند
این فریمورک ها و کتابخانه ها به ترتیب زیر بودند
اما این وسط Vue.js از همه سریعتر ، از همه سبک تر و راحت بود . من خودم تونستم ویو جی اس را با دوره ی Vue.js استاد نیک زاد در عرض ده روز کامل یاد بگیرم .
و با فریمورک لاراول خیلی راحت تونستم چند سایت spa بسازم سرعت سایت ها بی نظیر بود چون چیزی در سایت لود نمیشد وقتی کلیک میکردید یک مطلب جدید یا محصول جدیدی را ببینید بدون لود شدن باز میشد انگار دارید با برنامه ی نصب شده کار میکنید .
React.js چیست ؟
خب Reactjs هم یک کتابخانه ی اوپن سورسه که توسط فیسبوک توسعه داده شده .
هدف اصلی فیسبوک از ساختن این کتابخانه مدیریت فرانت اند وب سایت توسط جاوا اسکریپت است که به سادگی هر چه تمامتر انجام بگیرد .
البته یک مزیتی که Reactjs نسبت به Vue.js هم دارد این است که React برای ساختن اپلیکیشن های موبایل بصورت کراس پلتفرم هم کاربرد دارد
البته برای این کار در قالب React یک فریمورکی به نام React Native وجود دارد اما با یادگیری React شما هر دوی آنها را میتوانید کار کنید پس با یک تیر دو نشان میزنید .
ری اکت نسبت به ویو جی اس توسط برنامه نویسان زیادی استفاده شده است که دو دلیل بیشتر ندارد یک اینکه توسط یک تیم قوی در فیسبوک ساخته شده است در حالیکه ویو توسط یک فرد ساخته شده
و دومین دلیل این است که ری اکت سن بیشتری نسبت به ویو دارد .
مقاله ادامه دارد بزودی مینویسم
