مقایسه Flutter و Xamarin در توسعه اپلیکیشن‌های موبایل - 8 دلیل برای انتخاب Flutter
ﺯﻣﺎﻥ ﻣﻄﺎﻟﻌﻪ: 14 دقیقه

مقایسه Flutter و Xamarin در توسعه اپلیکیشن‌های موبایل - 8 دلیل برای انتخاب Flutter

با افزایش محبوبیت توسعه اپلیکیشن‌های کراس پلتفرم، بسیاری از فریمورک‌ها و فناوری‌های جدید شروع به خودنمایی در این حوزه کرده‌اند. یکی از آن‌ها Xamarin پلتفرم متن باز تحت پشتیبانی مایکروسافت است. من در سال 2019 تصمیم گرفتم سفر ماجراجویی توسعه موبایل خود را با Xamarin آغاز کنم. تجربه بدی نبود تا اینکه با Flutter آشنا شدم.

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

مقدمه

فلاتر جعبه ابزار رابط کاربری گوگل در ساخت اپلیکیشن‌های زیبا و بومی برای موبایل، وب و دسکتاپ به وسیله یک پایگاه کد واحد است. این فریمورک به عنوان یک فناوری متن باز ارائه شده و برای توسعه دهندگان و طراحان به صورت رایگان در دسترس است. فلاتر اولین بار در سال 2015 در نشست توسعه دهندگان Dart معرفی شد و توسعه برنامه‌های کاربردی برای سیستم‌عامل اندروید (رندر محتوا تا 120 فریم بر ثانیه) را پشتیبانی می‌کرد. اولین نسخه پایدار آن هم در سال 2017 منتشر گردید.

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

در ابتدا رابط کاربری (UI) هر پلتفرم قابل استفاده مجدد نبود. اما در سال 2014 یک راهکار برای آن به وجود آمد و Xamarin.Forms متولد شد که یک لایه انتزاعی در مفاهیم UI پلتفرم‌های مختلف ارائه می‌داد. به لطف آن توسعه دهندگان توانستند از کدهای خود در همه پلتفرم‌ها مجددا استفاده کنند. بعدها در سال 2016 توسط مایکروسافت خریداری شد و با پلتفرم NET ادغام گردید.

فلاتر و زامارین هر دو فریمورک‌های توسعه اپلیکیشن موبایل کراس پلتفرم هستند، اما چه چیزی آن‌ها را از هم متمایز می‌کند؟

در حالت کلی دو تفاوت بزرگ بین زبان‌های مورد استفاده و نحوه رندر کردن رابط کاربری آن‌ها وجود دارد. در زامارین رابط کاربری با استفاده از XAML با پشتیبانی #C پیاده‌سازی می‌شود. در حالی که در فلاتر هم منطق برنامه و هم کل رابط کاربری توسط یک زبان مدرن و قدرتمند به نام Dart مدیریت می‌گردد. همچنین نحوه رندر UI نیز یک تفاوت بسیار مهم است. در فلاتر گرافیک‌ها و انیمیشن‌ها به صورت real-time توسط موتور رندرینگ Skia روی صفحه نمایش داده می‌شوند. اما فناوری زامارین کندتر است، زیرا باید درخت کنترل‌های بومی را ترجمه کند.

چرا در ابتدا Xamarin را انتخاب کردم؟

تعریف و اساس عملکرد زامارین برای اکثر توسعه دهندگان واقعا دلگرم‌کننده به نظر می‌رسد. چرا که بسیاری از ما با زبان نشانه‌گذاری HTML آشنا هستیم و به ما امکان می‌دهد توصیف کنیم که یک UI چگونه باید باشد. به همین دلیل XAML هم چیز عجیبی به نظر نمی‌آید. از طرفی سی شارپ یک زبان برنامه نویسی بسیار کاربرپسند و قدرتمند است که میلیون‌ها نفر از آن استفاده می‌کنند و دوستش دارند.

بر اساس آمار Stack Overflow Developer Survey 2021، سی شارپ توسط 86/27 درصد از توسعه دهندگان حرفه‌ای در سراسر جهان استفاده می‌شود. به علاوه زامارین به توسعه دهندگان این امکان را می‌دهد تا به طور متوسط ​​90 درصد از برنامه‌های خود را بین پلتفرم‌ها به اشتراک بگذارند. یعنی می‌توانید کل برنامه را با یک زبان بنویسید و در هر سیستم‌عاملی به ظاهر و عملکرد بومی دست پیدا کنید. اما همه چیز در تئوری جواب می‌دهد و در عمل کار با زامارین برداشت‌های کمی متفاوت برای من به جای گذاشت.

مشکل Xamarin چیست؟

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

دو مشکل بزرگی که هنگام کار با زامارین با آن‌ها مواجه شدم، عبارت بودند از:

1. رابط کاربری - در Xamarin.Forms یک پایگاه کد مشترک باعث نمی‌شود که رابط کاربری در پلتفرم‌های مختلف یکسان به نظر برسد. دلیلش هم این است که پایگاه کد XAML را به یک پیاده‌سازی مخصوص پلتفرم تبدیل می‌کند.

برای مثال کنترل ورودی را در نظر بگیرید. XAML کنترل مناسب را برای فریمورک هدف انجام می‌دهد.

رابط کاربری iOS و Android ساخته شده با زامارین

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

2. رندر کلاینت - اگر به دنبال ظاهر خاصی هستید، باید یک رندر سفارشی برای فریمورک هدف بنویسید. مواجهه با این واقعیت که نوشتن کدهای مخصوص هر سیستم‌عامل در یک برنامه کراس پلتفرم اساسا هدف رویکرد cross-platform را نادیده می‌گیرد، روند توسعه را دردناک می‌کند. به علاوه شما باید یک رندر سفارشی را نه به زبان اصلی آن پلتفرم مانند Swift یا Kotlin، بلکه با زبان C# باید ایجاد کنید.

اگرچه در سال 2020، مایکروسافت رویکرد MAUI را برای تکامل Xamarin.Forms معرفی کرد، اما من همچنان با فلاتر ماندم و تمام مشکلاتی که هنگام کار با زامارین برایم به وجود می‌آمد همگی ناپدید شد.

8 مزیت برتر Flutter

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

1. محبوبیت

نزدیک به نیم میلیون اپلیکیشن از فلاتر استفاده می‌کنند! این فریمورک به محبوب‌ترین ابزار UI کراس پلتفرم تبدیل شده، همانطور که آمار Statista و SlashData نشان می‌دهد.

فریمورک‌های کراس پلتفرم موبایل که توسط توسعه دهندگان نرم افزار در سراسر جهان از سال 2019 تا 2021 استفاده شده‌اند

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

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

2. به اشتراک‌گذاری کد

یکی از بزرگ‌ترین مزایای فلاتر این است که می‌تواند به طور کامل کد را بین پلتفرم‌ها به اشتراک بگذارد و در زمان و هزینه توسعه صرفه‌جویی کند.

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

3. عملکرد

فلاتر از ویجت‌های داخلی پلتفرم استفاده نمی‌کند. در عوض مجموعه‌ای از ویجت‌های متریال دیزاین (برای اندروید) و کوپرتینو (به سبک iOS) را ارائه می‌دهد که توسط فریمورک و موتور فلاتر مدیریت و رندر می‌شوند. به لطف این واقعیت که از ویجت‌های داخلی یک پلتفرم خاص استفاده نمی‌شود، انعطاف‌پذیری به دست می‌آوریم و از شر محدودیت‌ها خلاص می‌شویم.

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

4. ویجت‌ها

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

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

بیایید مثالی را در نظر بگیریم که بررسی می‌کند آیا یک روز خاص در هفته، روز کاری است یا نه. ببینیم می‌توان چنین چیزی را ویجت نامید؟

ویجت انتخاب تاریخ

کاربرد ویجت (کنترل سفارشی‌سازی شده)

این ویجت از متد isBusinessDay استفاده می‌کند که یک ویجت نیست، بلکه یک متد کمکی برای بررسی اینکه آیا یک روز مشخص از هفته یک روز کاری است و مقدار bool را برمی‌گرداند.

 

متد کمکی

هر view در برنامه از ویجت‌هایی ساخته شده که می‌توانند با یکدیگر ترکیب شوند و ویجت درختی را به وجود آورند. ویجت‌های مجزا را می‌توان با یکدیگر ترکیب کرد تا بلوک‌های بزرگتر ایجاد نمود. این ایده خوبی است که یک view پیچیده را به قسمت‌های کوچک‌تر تقسیم کنید و ویجت‌های جداگانه را در فایل‌های جدید بسازید. دو مزیت اصلی برای این رویکرد وجود دارد:

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

5. پکیج منجر Pub

لازم به ذکر است که پکیج منجر Pub برای زبان برنامه نویسی دارت بوده و حاوی کتابخانه‌ها و پکیج‌های قابل استفاده مجدد زیادی برای Flutter، AngularDart و برنامه‌های Dart است. برخی از پکیج‌هایی که بالاترین سطح کیفیت را نشان می‌دهند، توسط کمیته اکوسیستم فلاتر انتخاب شده‌اند.

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

6. قابلیت Hot Reload

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

7. توسعه فراتر از موبایل

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

8. دور زدن پلاگینها

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

جمع‌بندی

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

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

منبع

چه امتیازی برای این مقاله میدهید؟

خیلی بد
بد
متوسط
خوب
عالی
در انتظار ثبت رای

/@heshmati74
عرفان حشمتی
Full-Stack Web Developer

مهندس معماری سیستم های کامپیوتری، طراح و توسعه دهنده وب سایت

دیدگاه و پرسش

برای ارسال دیدگاه لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

عرفان حشمتی

Full-Stack Web Developer

مقالات برگزیده

مقالات برگزیده را از این قسمت میتوانید ببینید

مشاهده همه مقالات