معرفی Riot.js

معرفی Riot.js

 

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

همون طور که میدونید هر روز داره به محبوبیت React   اضافه میشه (هر چند من خودم خیلی ازش استفاده نمیکنم). React یک کتابخانه برای طراحی رابط-کاربری با جاواسکریپت هست که البته وقتی از ابزار هایی مثل redux هم کنارش استفاده بشه چیزی فراتر از این میشه . به هرحال ما توی این پست نمی خوایم راجب ری اکت صحبت کنیم. بسیاری از مفاهیمی که توی ری اکت هست توی Riot هم استفاده شده در واقع اگر تعریف رسمی Riot رو نگاه کنیم:

A React-like user interface micro-library

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

اما شاید این سوال به ذهنتون برسه که خب چرا من باید از این کتابخونه استفاده کنم و از خود ری اکت که کامل تر هستش و کاربرهای بیشتری و  مطالب و آموزش های بیشتری داره استفاده نکم؟

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

توجه کنید که من هرگز نگفتم این کتابخونه جایگزینی برای ری اکت هست (شاید یه روزی هم بشه)  اما برای استفاده توی پروژه های کوچیک و متوسط واقعا خوب هستش.

یک نکته ی دیگه اینکه هرچند توی تعریف از عبارت React-like استفاده شده ولی این به این معنی نیست که این کتابخونه دقیقا شبیه ری اکت هستش برای واضح تر شدن موضوع بزارین مثال خود سایت Riot رو نگاه کنیم که کد های React  و Riot  توی اون با هم مقایسه شدن , این یک نمونه کد ری اکت :

وحالا معادل اون توی Riot

البته هدف این مثال فقط اینه که ثابت کنه شما با Riot کد کمتری می نویسید.

یک نکته مهم که نکته مورد علاقه ی من هستش  تفاوتیه که توی ساختار React و Riot وجود داره که البته که من ساختار Riot  رو بیشتر می پسندم . توی ری اکت شما کد های Html تون  رو در واقع داخل فایل جاوا اسکریپت می نویسین ! که به نظر من اصلا خوب نیست البته من خودم رو در سطحی نمیببنم که بخوام ایرادی بگیرم ولی خب….  (التبه برخی ها هم برعکس این نکته رو مزیتی برای ری اکت می دونند)  توی Riot  مسیر دقیقا برعکسه یعنی Riot هم Html  و هم (بخشی) از منطق برنامه رو توی خود Html  قرار میده میشه گفت چیزی شبیه به Angular 1.X  .

یک مثال از React

و حالا Riot:

که فکر میکنم حالا بیشتر واضح شد. از طرفی هر چند که هر دوتای این ها توی این مثال یکار انجام میدن ولی به نظر من راه Riot نزدیک تر به منطق Web-component ها هست. به هرحال  هدف من از این قسمت مقایسه این دو تا بود نه اینکه بگم کدوم خوبه کدوم بد وفقط نظرم رو گفتم شاید حتی نتونیم Riot رو یه جایگزین بدونیم برای ری اکت چون همونطور که گفته شد مایکروکتابخانه هستش و قطعا محدود تره که به نظر من بزرگترین ایرادش همینه شاید اگه یه کتابخونه ی کامل بود خیلی بیشتر و سریع تر محبوب می شد.

خب حالا بعد از این همه صحبت بریم سراغ آموزش Riot .

من توی این آموزش ها در نظر می گیرم که فرد خواننده با ری اکت آشنایی نداشته پس بخاطر همین از ساده ترین مباحث ممکن مثال میزنم.

برای شروع ابتدا فایل riot+compiler رو به هر طریقی که دوست دارید از این لینک به پروژتون اضافه کنید توجه کنید که قسمت Direct Download  شیلتر هستش و از پیشنهاد های دیگه که گفته شده فایل رو اضافه کنید (این ساده ترین روش ممکن هست با نود هم میتونید نصب کنید)  پس ابتدا یک فایل با index.html داخل روت  بسازید و riot رو به اون اضافه کنید:

حالا یک پوشه به اسم tags بسازید و یک فایل با نام foo.tag داخل اون بسازید همین فایل رو باز کنید و کدی  مثل کد زیر رو داخلش قرار بدید:

خب حالا فایل رو سیو کنید و برگردیم به فایل html  اصلی همون فایلی که riot رو بهش اضافه کردیم توی این فایل این خط رو اضافه کنید:

حالا هر جای از body فایل خودتون که دوست دارید تگی رو که ساختید رو (هر چند بار که میخواید ) بنویسید:

خب حالا فقط کافیه که داخل index.html بگین riot تک شما رو پردازش کنه  :

در اخر کافیه که پروژه رو روی یک سرور اجرا کنید (مثل wamp وXampp) فرقی نداره اگه پایتون دارید با پایتون .

اگر فایل رو اجرا کنید می بینید که :

Hi , this is our first tag created by Riot.js , Hope you like it

چاپ شده. و هرچقدر که بخواین می تونید از تگی که ساختید استفاده کنید.

حالا بیاین یه مرحله جلوتر بریم. فایل foo.tag رو به این صورت تغییر بدید:

حالا هنگام استفاده از تگ میتونید یه اسم به اون پاس بدید که هر جا که توی تعریف تگ ازش استفاده کردید استفاده بشه  , برای مثال این بار تگ رو به این صورت تعریف کنید:

و خروجی طبیعتا :

Hi Hosein , this is our first tag created by Riot.js , Hope you like it

خواهد شد .

حالا میتونید یه تگ دیگه توی همون فایل بسازید و پارامتر دیگه ای پاس بدید:

سادست مگه نه؟ حالا بیاین یجور دیگه این کار رو انجام بدیم یه تگ ساده بدون پارامتر به این صورت بسازین:

حالا قسمتی رو که به riot میگفتیم تا تگ رو اغاز کنه رو به این صورت تغییر بدین:

می بینید که نتیحه دقیقا شبیه قبلی شد.

بیایید این بار داخل فایل تگ هامون چیزی شبیه همین کد بالا بنویسیم . برای مثال فایل foo.tags رو به این صورت تغییر بدید (این دو قسمت رو باهم قاطی نکیند یکی داخل فایل index.html و این یکی داخل foo.tags) :

خب حالا اگر دوباره فایل رو اجرا کنید و بعد از به اصطلاح mount یا اجرا شدن تگ به کنسول مرورگرتون برید می بینید که عبارت Tag mounted چاپ شده.  حالا همین فایل رو به این صورت تغییر بدید:

بله درسته , دیگه تگ script نوشته نشده و خود riot  این کارو برای شما انجام میده! یعنی این تگ رو اضافه میکنه نحوه ی کارش هم اینطوره هست که آخرین تگ html که شما اون رو می بندید رو می شناسه و بعد از اون رو جاوااسکریپت در نظر میگیره.

اما ما توی اسکریپت بالا فقط یک lifecycle event رو مثال زدیم ولی event های دیگه ای هم موجوده مثل:

قبل از اینکه تگ ساخته بشه به اجرا در میاد.

قبل از اینکه تگ حذف بشه اجرا میشه.

بعد از اینکه تگ حذف میشه اجرا میشه.

و دو سه تا متد دیگه که توی سایت خود riot میتونید ببیند.

قبل از اینکه بریم سراغ مطلب بعدی تا یادم نرفته این نکته رو بگم یادتونه که گفتیم حتما باید به riot بگیم که تگ رو اغاز کنه ؟ و توی فایل index.html این کد رو نوشتیم:

حالا اگر ما از کلی تگ استفاده کرده بودیم چی باید بگیم تا تک تک اون هارو اینطوری شروع کنه؟ نه کافیه این کار رو بکنیم:

اینجوری همه ی تگ ها شروع میشن.

بریم سراغ یه نکته ی دیگه اون هم استایل دادن به این تگ ها هستش ممکنه فکر کنید چون این ها تگ های پیشفرض نیستند و تگ هایی اند که ما اون هارو ساختیم استایل دادنشون ساده نباشه اما فرقی نداره :

خب بریم سر یه مطلب دیگه , حلقه each . داخل فایل foo.tag دستورات زیر رو اضافه کنید:

حالا میخوایم این ارایه رو چاپ کنیم برای این کار داخل همین فایل در قسمت کد های html اضافه کنید :

واگر کد را اجرا کنید می بینید که همه ی اسم ها چاپ می شند. خب حالا اگر بخواهیم فقط افرادی را که سن آن ها کمتر از 35 ساله رو نشون بدیم چی؟ برای این کار کافیه:

خب پس با دستور شریطی if داخل riot آشنا شدیم .

اما یک روش دیگر برای شرط گذاری وجود داره اون هم expression ها هستند برای کار با expression ها این کد رو در نظر بگیرید:

خب این کد به این صورت کار میکنه که اگر  user.age <= 35 درست هستش پس شرط که اینجا چاپ کردن عبارت       ‘and ready for election’ هستش انجام میشه.این قسمت جالب هستش پس یکی دو تا مثال دیگه میزنم یه نوع expression دیگه داریم برای مثال :

این دستور دو طرف && رو برسی می کنه و اگر هر دو طرف درست بودند عبارت true رو برمیگردونه ولی اگر دو طرف یا یک طرف صحیح نباشند هیچ عبارتی رو برنمیگردونه.

یکی دیگه از expression های پرکاربرد :

خب تقریبا تمام قسمت های riot رو توضیح دادیم اما یک قسمت دیگه مونده اون هم کار با event ها هستش که خب مهمه. این قسمت رو با یک مثال ساده توضیح میدم فرض کنید روی صفحه دکمه ای دارید که میخواید وقتی روش کلیک میشه متنی به نمایش در بیاد خب برای این کار کافیه داخل foo.tag کدی مثل کد زیر رو بنویسیم:

فکز میکنم این مثال ساده کافی باشه توجه کنید که توی قسمت جاوا اسکریپت همه ی کد ها es6 هستند. و اینکه این یک راه برای انجام چنین کاری باriot هستس قطعا راه های دیگه ای هم هست.

logo of riotgear

قبل از اینکه این پست رو تموم کنم یه نکته ی مهم , همونطور که دید توی riot همه چیز بصورت کامپوننت بود یعنی یه سری کد جدا از برنامه ی اصلی وجود داشتند که شما میتونستید از اون ها چندین بار و هر جایی که خواستید استفاده کنید حالا فکرش رو بکنید که کامپوننت هایی رو که زیاد استفاده می کنید رو اماده داشته باشید و توی هر پروژتون استفاده کنید یا حتی بهتر تصور کنید که بتونید از کامپوننت هایی که بقیه نوشتن هم استفاده کنید و دیگه اون هارو تکرار نکنید این دقیقا کاریه که سایت riotgear.js.org  انجامش میده و کلی کامپوننت آماده ی riot توش هست فرق استفاده از این کامپوننت ها با مثلا استفاده از پلاگین های کتابخانه های دیگه اینه که استفاده از این ها بسیار سادست مثلا توی این صفحه کامپوننتی وجود داره به اسم bobble که میتونید ببنید استفاده ازش چقدر سادست واین میتونه یه نقطه ی قوت برای riot باشه.

این تقریبا تمام مطالب ابتدایی بود که باید از riot میدونستید شاید بعدا هم راجب  riot پست نوشتم شاید هم نه ولی سعی کردم این پست یه معرفی کامل باشه.

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