جت پک کامپوز یک ابزار مدرن UI اندروید است که توسط گوگل معرفی شده است و فرآیند توسعه اپلیکیشن را ساده کرده و سرعت آن را افزایش می دهد. به لطف این ابزار کد کمتری در مقایسه با رویکرد معمولی که از بدو تولد اندروید با آن سرو کار داشته ایم می نویسیم ، و این یعنی احتمالا با باگ کمتری مواجه خواهیم شد مزیت مسرت بخش دیگری که داراست این است که از کاتلین استفاده می کند ، اگر از React یا Flutter استفاده کرده باشید ، احتمالاً با این مفهوم آشنا شده اید و شباهت های زیادی را با آنها پیدا خواهید کرد.
چگونه کار می کند؟
مهترین اجزاء Jetpack Compose توابعی هستند که با Composable@ علامتگذاری شده اند و بخش های از رابط کاربری را منتشر می کنند در واقع ساختمان Compose روی این توابع composable که به صورت تودرتو با هم ترکیب می شوند و UI ما را تشکیل می دهند بنا شده است.
رویکرد اخباری
جت پک کامپوز بر اساس یک الگوی برنامه نویسی متفاوت تحت عنوان الگوی اخباری ساخته شده است. به طور خلاصه، به این معنی است که شما باید طرز فکر خود را از "چگونه کاری انجام دهیم" به "به چه هدفی می خواهم برسم" تغییر دهید. در روش برنامه نویسی اخباری، شما سعی می کنید به جای توصیف هر مرحله برای رسیدن به هدف، یک نتیجه مورد انتظار را توصیف کنید. در مثال قبلی ما به سادگی گفتیم "من می خواهم یک ستون با سه متن در داخل آن داشته باشم" و تمام . ما نیازی به نوشتن کد اضافی نداریم که به برنامه بگوید چگونه با موارد داخل ستون برخورد کند.
در رویکرد دستوری جاری اوضاع کمی پیچیده تر است ما برای لیست عناصر از RecyclerView استفاده می کنیم این کامپوننت برای نمایش موثر و روان مجموعه بزرگی از داده ها کاربرد دارد اما مشکلی که دارد این است که هر RecyclerView به یک adapter و هر آیتم در لیست به ViewHolder و غیره نیاز دارد. adapter مکانی است که در آن برنامه نویسان باید توضیح دهند که RecyclerView چگونه هر عنصر را ارائه می کند. و اگر بخواهیم انواع مختلف داده را رندر کنیم، ممکن است کمی نامرتب باشد. به عنوان مثال، اگر بخواهیم متن، تصویر و ویو توسعه یافته سفارشی خود را نمایش دهیم، باید یک منطق بنویسیم تا به RecyclerView بگوییم چگونه این کار را انجام دهد. این است که ، کمی پیچیده به نظر می رسد و دقیقا برعکس Jetpack Compose و رویکرد اخباری است. در این رویکرد تمام این موارد به ساده ترین حالت ممکن انجام می شود یعنی ما لیستی از عناصر داریم و فقط می خواهیم آنها را نمایش دهیم همین!!
کاتلین و Jetpack Compose
یکی از بزرگترین مزایای Jetpack Compose پیوند ناگسستنی اش با Kotlin است. این برای شما چه معنایی دارد؟ یعنی فوق العاده است، برای نمونه، می توانید از تمام ساختارهای Kotlin به طور مستقیم در کد view خود و از دستورات If برای انتخاب آنچه باید رندر شود و از حلقه‌ها برای نمایش چندین باره ی یک view استفاده کنید. همچنین می توانید از متد های فانکشنالی مانند filter، map و بسیاری دیگر استفاده کنید.
همانطور که تصویر بالا نشان می دهد: انتخاب آنچه باید نمایش داده شود، بسته به وضعیت لیست داده ، بسیار ساده است. اگر خالی است، متنی نشان دهید که «داده‌ای برای نمایش وجود ندارد»، اگر اینطور نیست، عناصر لیست را به Composables نگاشت (map) کنید و آنها را در یک ستون نمایش دهید.
وضعیت یا State
به روز رسانی یک view وظیفه مهم هر اپلیکیشنی است. تصویر برنامه ای که همیشه داده های یکسانی را نمایش بدهد ملال آور خواهد بود . در Jetpack Compose برای به‌روزرسانی یک View ، باید توابع Composable را با مجموعه‌های مختلف آرگومان بازسازی کنیم.
این پروسه را ترکیب مجدد (recomposition ) می نامند. سوال پیش می آید که " یک تابع Composable چگونه متوجه می شود که چه زمانی باید خود را بازسازی کند؟ ". و پاسخ !! - زیرا می تواند state داشته باشد.
وضعیت (State) یک یا چندین value که به یک تابع Composable اختصاص داده شده است. هر زمان که value تغییر می کند، یک فرآیند recomposition راه اندازی می شود و تابع قابل ترکیب ما با یک مقدار حالت جدید بازسازی می شود.
در این قطعه کد، می‌توانیم یک مقدار حالت counter را ببینیم. مقدار counter با استفاده از Text Composable نمایش داده می شود. هر بار که وضعیت تغییر می کند، این ترکیب با مقدار جدیدی که به متغیر counter تخصیص داده شده ، بازسازی می شود. در متد Button’s ، مقدار حالت counter افزایش می یابد و یک مقدار جدید با Text نمایش داده می شود.
صفحه بندی با Compose
اجازه بدهید به یک مثال واقعی نگاهی بندازیم که نشان می دهد چگونه Compos می تواند به کار ما سرعت داده و آن را آسان تر کند ما قصد داریم دو روش برای انجام مساله صفحه بندی (pagination) با هم مقایسه کنیم روشی که الان استفاده می شود و دیگری Compos .
صفحه بندی به چه معناست؟
صفحه بندی فرآیندی است که در آن یک مجموعه داده بزرگ به تکه های کوچکتر تقسیم می شود. , و این زمانی مفید است که نمی خواهیم همه داده ها را همزمان ارائه کنیم. چون به طور جدی به عملکرد درست اپلیکیشن ما آسیب می رساند. اینستاگرام در این زمینه یک مثال عالی است – هنگامی که مثلا بخش اکسپلورر را پیمایش می کنید و اطلاعات جدید را می خوانید. آیا شده تا به حال به پایان آن برسید؟ احتمالا نه. انگار بی نهایت است ، به این معنی که حجم عظیمی از داده برای نمایش در آنجا وجود دارد. تصور کنید چه اتفاقی می‌افتد اگر همه آن داده‌ها را به یکباره دریافت کنیم - عملا از توان دستگاه خارج است . این نشان می دهد که اینستاگرام از صفحه بندی استفاده می کند. داده ها در تکه های کوچکتر واکشی شده و روی صفحه نمایش داده می شوند. وقتی می‌خواهید به انتهای قطعه فعلی برسید، یک قطعه جدید از backend دریافت می کنیم - و غیره.
ما می‌خواهیم نشان دهیم که در مقایسه با رویکرد فعلی، اجرای صفحه‌بندی هنگام استفاده از Compose چقدر آسان است. اول از همه، بیایید ببینیم زمان استفاده از روش‌های ساختمان view کنونی به چه چیزی هایی نیاز داریم که صفحه‌بندی را راه اندازی کنیم :
یکم : RecyclerView - مسئول نمایش داده ها است
دوم : Adapter - مسئول پیاده سازی منطق
سوم : ViewHolders – نگه داشتن ارجاعات views برای استفاده نکردن از () findViewById در هر دفعه ای
که بخواهیم این ویو ها را بایند کنیم ، چون این واقعا هزینه آور است.
معمولاً می خواهیم به نحوی نشان دهیم که داده ها در حال واکشی هستند. به عنوان مثال، ممکن است بخواهیم progress bar را به عنوان آخرین آیتم لیست نشان دهیم. با رویکرد فعلی، این کمی پیچیده است. شما ممکن است یک آیتم جدید را در مجموعه داده خود قرار دهید و RecyclerView را مجبور کنید تا آن را به عنوان progress bar ارائه دهد. راه های زیادی برای رسیدن به این منظور وجود دارد. معمولاً با تعداد زیادی کد جدید مواجه می شوید. هر نوع viewی جدید Adapter شما را پیچیده تر می کند. با Compose، پیاده‌سازی صفحه‌بندی بسیار ساده است – فقط چند خط کد نیاز دارید!
اجازه بدهید نگاهی به Compos بندازیم :
تابع ComicsResultSection که مسئول نمایش داده‌های ما است. مجموعه داده ای که باید نمایش داده شود تحت عنوان آرگومان data ارسال می شود با استفاده از یک Composable به اسم LazyColumn ، می‌توانیم داده‌های خود را به صورت لیستی ارائه کنیم. LazyColumn معادل RecyclerView است که یک لیست را بصورت عمودی پیمایش می کند ( برای پیمایش افقی از LazyRow استفاده می کنیم ) و فقط داده‌هایی را که روی صفحه قابل مشاهده است ارائه می‌کند. با استفاده از ایندکس it ، می‌توانیم به سادگی بررسی کنیم که آیا شیء ارائه شده در حال حاضر آخرین مورد در مجموعه داده ما است یا خیر. اگر چنین است، می‌توانیم به سادگی روش واکشی داده را راه‌اندازی کنیم و progress bar را به عنوان آخرین عنصر لیست خود نمایش دهیم. و اینجاست که هیچ adapter و منطق پیچیده ای لازم نیست ما خیلی ساده عنوان می کنیم که روی صفحه نمایش چه چیزی را می خواهیم ببینیم.
مخلص کلام اینکه :
کامپوز یک ابزار UI مدرن امیدوارکننده و قدرتمند است که لازم است آن را در نظر داشته باشیم و شاید دیر یا زود ترغیب و یا اینکه مجبور بشویم به آن سمت کوچ کنیم . اگر به درستی به کار برده شود ، می تواند روند توسعه را سرعت بخشیده و اندازه app را کاهش دهد. علاوه بر این، با Compose کد کمتری می نویسید که به طور بالقوه یعنی داشتن باگ کمتر، شاد و پیروز باشید.
برای اطلاعات بیشتر به سایت Android Developer بخش JetPack Compos مراجعه کنید.
