يا هلا بيك يا صاحبي في عالم البرمجة! لو إنت مطور فلاتر (Flutter Developer) وبتشتغل باستمتاع عشان تبني تطبيقات موبايل كروس بلاتفอร์م (Cross-platform) شكلها حلو وسريعة، أكيد في يوم من الأيام "اتخضيت" أو حسيت بقهرة لما فتحت التطبيق بتاعك على الموبايل ولقيت فيه تقطيع أو تهنيج غريب أول ما تعمل سكرول (Scroll) سريع، أو وأنت بتفتح شاشة جديدة فيها أنيميشن (Animation) معقد.

التقطيع ده يا بطل بيسموه في الكهنوت التقني: تقطيع واجهة المستخدم أو Jank في Flutter. المشكلة دي كانت بتعمل صداع للمطورين، وخصوصاً مع المحرك القديم سكاش (Skia Graphics Engine). بس روق، استريح، واشرب كوباية الشاي بتاعتك، لأننا النهاردة هنتكلم عن البطل الجديد اللي جه ينقذ الموقف: محرك Impeller. هنعرف إزاي غير شكل الأداء تماماً على أجهزة آي أو إس (iOS) وأندرويد (Android)، وإزاي قضى على كابوس تجميع الـ شيدرز (Shader Compilation Jank) للأبد.

إيه هو وجع القلب القديم؟ مشكلة التقطيع (Jank) وتجميع الـ Shaders

زمان، لما كنت بتعمل تطبيق فلاتر، كود دارت (Dart Code) بيتحول لواجهة مستخدم عن طريق محرك الرسوميات سكاش (Skia). المحرك ده عالمي وشغال زي الفل، بس كان عنده عيب خطير جداً ومزعج اسمه Shader Compilation Jank.

عشان نفهم الموضوع ببساطة، الـ Shader ده عبارة عن كود صغير بيشتغل على كارت الشاشة (GPU) عشان يرسم أي حاجة على الشاشة، زي الألوان، الظلال، الشفافية، والأنيميشن. محرك Skia كان بيستنى لحد ما الـ Animation يشتغل قدام المستخدم لأول مرة، وفي اللحظة دي بالذات، بيقوم مترجم (Compiling) كود الـ Shader ده ويوديه لكارت الشاشة.

تخيل بقى، المستخدم بيفتح التطبيق ويعمل سكرول بسرعة، فالتطبيق فجأة بيقفز أو يهنج لمدة أجزاء من الثانية (Frame Drop) لأن المحرك مشغول بيكتب ويترجم شيدر جديد! ده بيخلي الأداء يحسس المستخدم إن التطبيق "ثقيل" ومش سلس، وده طبعاً كان بيحرق دم أي مطور نفسه التطبيق بتاعه ينافس التطبيقات الـ Native.

محرك Impeller: المنقذ القادم لحل مشكلة الأداء

فريق فلاتر في جوجل قعدوا مع نفسهم وقالوا: "لا، كده ما ينفعش، لازم نعمل إعادة هندسة كاملة لمحرك الرسوميات (Graphics Engine) من الصفر". ومن هنا اتولد Impeller.

محرك إمبلر (Impeller) اتصمم خصيصاً عشان يحل عيوب سكاش (Skia). الفكرة العبقرية وراء Impeller هي إنه بيعمل تجميع مسبق (Pre-compilation) لكل الـ Shaders اللي التطبيق ممكن يحتاجها وقت البناء (Build time) مش وقت التشغيل (Runtime).

معنى كده إيه؟ معناه إن لما التطبيق ينزل على موبايل المستخدم، كل الرسوميات متجهزة وجاهزة على الشغل فوراً على كارت الشاشة (GPU). مافيش أي وقت ضايع، مافيش أي ترجمة بتتم فجأة، وبالتالي: وداعاً للتقطيع وداعاً للـ Jank، وأهلاً بالـ 60 و 120 فريم الثابتة في الثانية!

إزاي Impeller غيّر اللعبة على نظامي iOS وأندرويد (iOS & Android)؟

رحلة إمبلر (Impeller) بدأت على أجهزة أبل (iOS)، وهناك عمل ثورة حقيقية. أجهزة آيفون (iPhones) بقت تشغل تطبيقات فلاتر بنعومة تضاهي التطبيقات المكتوبة بلغة سويفت (Swift) الأصلية. المستخدم العادي ما بقاش يلاحظ أي فرق بين تطبيق Native وتطبيق Flutter.

أما على أندرويد (Android)، فالموضوع كان محتاج شغل أكتر، نظراً لتنوع الأجهزة والشركات والمعالجات الرسومية (GPUs). بس جوجل نزلت الدعم لـ Impeller بشكل افتراضي (Default) في النسخ الحديثة من فلاتر للأندرويد، واستخدمت تقنيات حديثة زي Vulkan (بدل OpenGL القديم) عشان تطلع أقصى طاقة ممكنة من كارت الشاشة.

عشان تتأكد إن التطبيق شغال بأفضل أداء، أحياناً بنحتاج نكتب كود بسيط عشان نقيس الـ FPS أو نتأكد من تفعيل الإعدادات صح، زي الكود ده في الـ main.dart:

void main() {
  // التأكد من تهيئة الفلاتر للتعامل مع الرسوميات
  WidgetsFlutterBinding.ensureInitialized();
  
  // تشغيل التطبيق
  runApp(const MyApp());
}

المحرك الجديد بياخد الكود ده ويترجمه لتعليمات رسومية مباشرة وسريعة جداً تفهمها بيئة الأندرويد والآي أو إس بدون لف أو دوران.

مقارنة سريعة بين Skia و Impeller عشان الصورة تكتمل

عشان تكون الصورة واضحة قدامك كمطور تقني، تعال نبص على الفرق جوه الشغل:

• محرك Skia القديم: بيترجم الـ Shaders وقت التشغيل (Just-in-time)، وده بيسبب Tapping و Jank مع أول ظهور للأنيميشن.
• محرك Impeller الحديث: بيجهز الـ Shaders ويجمعها مسبقاً (Ahead-of-time)، وكمان بيستفيد من واجهات برمجة رسومية حديثة زي Metal (في آي أو إس) و Vulkan (في أندرويد).
• استهلاك الذاكرة: Impeller بيصمم الهياكل الرسومية بكفاءة عالية، صحيح ممكن يستهلك مساحة تخزين أو ميموري أكتر بشيء بسيط أحياناً، لكن المقابل في سلاسة الأداء (Smoothness) يخليه مكسب كبير جداً.

خاتمة ونصيحة من أخ

يا صاحبي، التقنية بتتطور بسرعة البرق، واللي كان مستحيل إمبارح بقى واقع النهاردة بفضل محركات زي Impeller. نصيحتي ليك كـ مطور فلاتر: دايماً حدث نسخة الفلاتر بتاعتك لآخر إصدار مستقر (Latest Stable Version)، وماتخافش تستخدم الأنيميشنز المعقدة والتصميمات الـ Fancy لأن الأدوات بقت تخدمك وتدعمك.

اتعلم دايماً تقرأ الـ Release Notes بتاعة الفريم وورك، وافهم تحت الكابود (Under the hood) الحاجات دي بتشتغل إزاي، ده هيخليك مش بس "مستخدم" للثوابت البرمجية، لأ، ده هيخليك مهندس برمجيات حقيقي فاهم هو بيعمل إيه وبيقدم للمستخدم أفضل تجربة ممكنة.