سال‌های گذشته فریمورک‌های زیادی با شعار Multi Platform و اینکه "یک بار بنویس و چند خروجی بگیر" معرفی شدند و من که سال‌های زیادی با استفاده از جاوا، اپلیکیشن‌های اندروید می‌ساختم، دنبال یک راه‌حل خوب برای توسعه سریع‌تر و با Performance خوب می‌گشتم؛ ولی هر بار که سمت استفاده از این نوع فریمورک‌ها (مثل React Native یا Xamarin و...) می‌رفتم، می‌فهمیدم که شعارهاشون فقط در حد حرف هستند و در واقعیت عملی نمی‌شوند.

من دیگه نسبت به همه این فریمورک‌ها بدبین شده بودم و یک جورهایی امیدم رو از دست داده بودم. حتی خیلی‌ها از من درباره فلاتر (Flutter) می‌پرسیدند و من می‌گفتم این هم حتما یکی مثل بقیه هست و فایده نداره. جالب اینجاست که همه می‌گفتن فلاتر، فوق العاده و یک شاهکاره هست و خیلی تعریف‌های دیگه. ولی وقتی به اون‌ها می‌گفتم نمونه کاری دارید؟ جوابشون نه بود (فقط شنیده بودن فلاتر خوبه). چون تجربه همین تعریف و تمجید‌ها رو از React Native هم داشتم، می‌گفتم پس دوباره این بچه‌ها یه پروژه Hello World با فلاتر زدند، جو گرفتتشون و میگن عالیه!

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

اولین پروژه با فلاتر - جذاب و دوست داشتنی

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

لینک طرح در وب سایت دریبل

همه کسانی که تجربه برنامه نویسی موبایل (IOS و Android) دارن، با دیدن طرح بالا متوجه میشن که چقدر پیاده‌سازی همچین طرحی سخت و دشوار هست. ولی جالبه بدونید یادگیری و پیاده سازی این طرح با فلاتر برای من که همزمان با پیاده سازی داشتم یاد می‌گرفتم فقط ۲ روز طول کشید!

پروژه تلوبیون با فلاتر - چالشی سنگین در ۳ هفته

بعد از این پروژه فهمیدم فلاتر (Flutter) با فریمورک‌های معروف قبلی خیلی فرق داره و واقعا یک انقلاب در توسعه اپلیکیشن‌های موبایل و وب و حتی دسکتاپ ایجاد می‌کنه. بنابراین شروع کردم به تحقیق‌های بیشتر و عمیق‌تر که ببینم نحوه کارش چطور هست. در حال تحقیق و تفحص بودم که یک پیشنهاد کاری جذاب از تلوبیون دریافت کردم و عضوی از تیم اونجا شدم. اینکه میگم جذاب به این دلیل بود که ۱۴ میلیون نصب داشتند و رتبه الکسای ۳ در ایران که واقعا تجربه کاری بزرگی بوده و هست.

اونجا به مدیر فنی (CTO) پیشنهاد کردم از فلاتر استفاده کنیم و مزیت‌هاش رو که گفتم با استقبال روبرو شدم و در مدت تنها ۳ هفته کل برنامه رو با فلاتر بازنویسی کردم و در نهایت منتشرش کردیم. این پروژه چالش واقعا بزرگی برای من بود و از طرفی ریسک زیادی هم داشت، چون تا به حال هیچ برنامه‌ای در ایران با ۱۴ میلیون نصب فعال، با فریمورک نوپایی مثل فلاتر پیاده سازی نشده بود.

[embed]https://up.7learn.com/z/s/wp/2021/06/flutter1.mp4[/embed]

می‌تونید اپ تلوبیون رو از لینک‌های زیر دانلود کنید:

لینک دانلود از پلی استور

لینک دانلود از کافه بازار

و اما در ادامه با توجه به تجربیاتی که داشتم، همه چیز رو از اول و کامل توضیح میدم.

فلاتر (Flutter) چیست؟

فلاتر یک فریمورک مشهور برای توسعه اپلیکیشن‌های موبایل، وب و دسکتاپ هست که در سال ۲۰۱۷ اولین نسخه‌اش توسط گوگل منتشر شد. اگر اولین صفحه از مستندات فلاتر رو مطالعه کرده باشید متوجه خواهید شد که شرکت گوگل، فلاتر رو یک Ui Toolkit معرفی کرده (ابزاری برای توسعه رابط کاربری).

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

بر خلاف فریمورک‌های مشهور دیگه در زمینه توسعه اپلیکیشن‌های موبایل، فلاتر کدهای مربوط به پیاده سازی رابط کاربری شما رو تبدیل به کدهای پلتفرم Native نمی‌کنه بلکه تمامی اجزای تشکیل دهنده رابط کاربری رو خودشون از صفر پیاده سازی کردند و مستقیما توسط یک موتور گرافیکی ۲ بعدی به نام Skia رندر میشن. اما بقیه بخش‌های تشکیل دهنده اپلیکیشن مثل کار با api‌های پلتفرم (مثلا بلوتوث، دوربین یا file manager) کاملا با زیرساخت نیتیو پیاده میشن. به همین دلیل گوگل، فلاتر رو یک فریمورک Ui معرفی می‌کنه. طبق تجربه‌ای که من داشتم، سرعت رندر رابط کاربری‌های پیچیده و انیمیشن‌ها، سرعتی حتی بیشتر از native در اندروید داشت. دلیلش هم اینه که درصد بسیار زیادی عملیات رندرینگ توسط GPU و موتور گرافیک Skia انجام میشه.

اسکیا Skia چیست؟

اسکیا (Skia) یک کتابخانه متن باز (Open Source) ۲ بعدی است که روی پلتفرم‌های مختلف که سخت افزار و نرم افزاهای مختلفی دارند، تونایی اجرا دارد. در واقع Skia مثل یک موتور گرافیکی (Graphic Engine) عمل می‌کنه و جالبه بدونید در نرم افزارهایی مثل Google Chrome، Firefox، Android، Flutter، Chrome Os و بسیاری از پلتفرم‌های دیگه، برای اجرای انیمیشن‌ها و رندرینگ از اسکیا استفاده می‌کنند.

زبان دارت (Dart) چیست؟

دارت زبانی هست که توسط گوگل برای توسعه نرم افزارهای سمت کلاینت طراحی شد ولی برای توسعه بک اند (Back End) وب و اپلیکیشن‌های دسکتاپ هم قابل استفاده است. دارت یک زبان شی گرای کامپایلری با قابلیت Garbage Collection سریع با شیوه نگارش شبیه C هست. این زبان هم می‌تونه به زبان ماشین و هم جاوا اسکریپت کامپایل بشه.

زبان Dart قابلیت‌های منحصر به فردی داره که بسیار برای من جذاب بودند، مثلا اینکه به دو روش JIT (JUST IN TIME) و AOT (Ahead Of Time) می‌تونه کامپایل بشه اونم مستقیما به زبان ماشین!

• JIT: یعنی زمان اجرا. این کامپایلر رو موقع توسعه و تست اپ استفاده می‌کنید و به این شکل کار می‌کنه که یک ماشین مجازی (Virtual Machine) ساخته می‌شه و کدهای شما رو زمان اجرا به زبان ماشین کامپایل می‌کنه و از قابلیت‌هاش اینه که بعد از هر تغییر با ذخیره کدها، تغییرات روی پروژه لحاظ می‌شه. همچنین به راحتی می‌تونید debug کنید. سرعت اجرای نرم افزار در jit به دلیل کامپایل زمان اجرا بسیار پایین‌تر از AOT هست. به همین دلیل فقط مناسب فاز توسعه و تست نرم افزار هست.

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

[info] دارت (Dart) فقط برای توسعه اپلیکیشن‌های موبایل استفاده نمیشه بلکه برای توسعه بک اند و یا فرانت اند (جاوا اسکریپت) هم میشه ازش استفاده کرد که دیگه از توضیح بقیه روش‌های کامپایل صرف نظر می‌کنم چون از حوصله بحث خارجه[/info]

مسیر یادگیری فلاتر (Flutter)

برای یادگیری فلاتر باید این مسیر رو دنبال کنید:

1. آشنایی به مبانی کامپیوتر: مفاهیمی مثل نحوه عملکرد و کاربرد کامپایلر یا مباحث ساده‌تر مثل آشنایی با نحوه عملکرد سیستم عامل، CPU، Memory و ...

2. تسلط به مفاهیم شی گرایی

3. زبان دارت (Dart)

4. آشنایی با نحوه عملکرد فریمورک Flutter

5. آشنایی با مفاهیم State Management و Widget

6. کسب تخصص در زمینه‌های مختلف فریمورک فلاتر مثل معماری‌های نرم افزاری، مدیریت Stateها، پلاگین‌ها و ...

چرا گوگل زبان Dart رو برای برنامه نویسی با فلاتر انتخاب کرد؟

برای جواب به این سوال بهتره که به مزیت‌های این زبان بپردازیم، که در ادامه متن نوشتم.

مزایای زبان دارت (Dart)

1. قابلیت Hot Reload که سرعت توسعه نرم افزار رو به شکل قابل توجهی افزایش میده.

2. یادگیری آسان برای مبتدی‌ها

3. طراحی، توسعه و پشتیبانی توسط شرکت گوگل و Community به دلیل Open Source بودن

4. Null safety و البته Type safe بودن

5. Object Allocation و Garbage Collection پرسرعت و قدرتمند، در حالی که یکی از مشکلات زبان جاوا سرعت پایین Garbage Collection اون بود که وقتی زیاد اجرا می‌شد، باعث پایین آمدن Frame Rate در اپلیکیشن‌های اندرویدی هم می‌شد و کاربر اصطلاحا لگ رو احساس می‌کرد.

فلاتر (Flutter) بهتره یا نیتیو (Native)؟

می‌تونم بگم این سوال اساسا اشتباهه، چرا؟ چون فلاتر کاملا native هستش، یعنی هر آنچه که با زبان Dart بنویسید مستقیما به زبان ماشین تبدیل می‌شه و هر آنچه که نیاز به ارتباط با apiهای پلتفرم مثلا دوربین (Camera) یا بلوتوث داشته باشه، باید براش پلاگین نوشته بشه و اون پلاگین بر اساس پلتفرمی که روش اجرا می‌شه و یک کانال (Channel) به کدی که به زبان Native اون پلتفرم نوشته شده، ارتباط برقرار کنه. زبان native در سیستم عامل اندروید جاوا (Java) یا کاتلین (Kotlin) هستش و در IOS سوییفت (Swift) یا Objective c.

از لحاظ پرفورمنس (Perfromance) فلاتر بهتره یا نیتیو؟

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

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

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

آیا فلاتر جایگزین زبان‌های native می‌شه؟

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

برای ساخت اپ با فلاتر باید زبان‌های نیتیو رو هم بلد باشیم؟

خیر، در اکثر پروژه‌های سطح کوچک تا متوسط نیازی به استفاده از زبان‌های نیتیو (مثل جاوا، کاتلین، سوئیفت و objective c) نیست و پلاگین‌های بسیار زیادی در سطح اینترنت موجود هست که شما رو از نوشتن کدهای نیتیو بی نیاز می‌کنه. بنابراین ضروری نیست ولی مزیت محسوب می‌شه.

چقدر طول می‌کشه زبان دارت (Dart) رو یاد بگیریم؟

اگر تجربه برنامه نویسی با زبان‌های جاوا، کاتلین، جاوا اسکریپت و یا ++C رو داشته باشین، نهایتا ۳ روز طول می‌کشه، ولی اگر تا بحال هیچ تجربه برنامه نویسی نداشتین ۱ ماه.

چقدر طول می‌کشه بتونیم برنامه نویس فلاتر (Flutter) بشیم؟

اگر تجربه برنامه نویسی موبایل مثل Android یا IOS داشته باشید یا با فریمورک‌های وب مثل React Js، Vue Js، Angular کار کرده باشید، ۱ تا ۳ ماه زمان می‌بره تا برنامه نویس فلاتر بشید.

فلاتر چقدر آینده داره؟

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

با فلاتر می‌شه وب سایت ساخت؟

بله می‌شه. نمونه وب سایت‌های ساخته شده با فلاتر رو از لینک زیر می‌تونی ببینی. البته طبق تجربه من فعلا گزینه مناسبی نیست، به دلیل اینکه هنوز issueهای Performance مختلفی داره و از SSR (Server Side Rendering) پشتیبانی نمی‌کنه که برای وب سایت‌هایی که سئو براشون مهمه، عیب بزرگی محسوب می‌شه.

لینک دموی وب سایت‌های ساخته شده با فلاتر

آماده‌ای به زودی یادگیری فلاتر رو شروع کنی؟

فلاتر (Flutter) از نظر من در حال حاضر یکی از بهترین روش‌های توسعه اپلیکیشن‌های موبایل هست. اگه علاقه مند به برنامه نویسی در این حوزه هستین حتما پیشنهادش می‌کنم?.

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

دوره آموزش فلاتر

خوشحال میشم شما هم تجربیات، سوالات و یا نظرات خودتون رو برای ما بنویسید و با بقیه به اشتراک بگذارید. ?