مقدمة شاملة إلى إطار عمل jQuery Mobile: بناء تطبيقات ويب للجوال بفعالية

مقدمة إلى عالم تطوير الويب المتنقل مع jQuery Mobile

في الأيام الأولى لشبكة الويب، كانت عملية بناء التطبيقات تبدو معقدة وتفتقر إلى الحيوية. على سبيل المثال، كان إنشاء تطبيق بسيط لتغيير صورة عند مرور مؤشر الفأرة يتطلب العديد من أسطر التعليمات البرمجية، ولم يكن يعمل على جميع المنصات. لكن الأمور تحسنت بشكل ملحوظ مع ظهور مكتبة jQuery، التي مكنت المطورين من بناء تطبيقات JavaScript مذهلة تعمل بسلاسة على بيئات متنوعة.

بعد ذلك، ارتقى فريق jQuery بمستوى التطوير من خلال إطلاق jQuery UI، مما أتاح للمطورين إنشاء تطبيقات ويب ذات واجهات جذابة بالاعتماد على جوهر jQuery الحالي. وفي عام 2010، شهد العالم إطلاق jQuery Mobile، الذي نقل عملية التطوير إلى مستوى جديد من الكفاءة والفعالية.

صُمم jQuery Mobile مع التركيز الأساسي على الأجهزة المحمولة، وهو إطار عمل موحد وفعال يقدم مكونات واجهة المستخدم (UI)، وانتقالات البيانات، وميزات أخرى مثيرة. يستفيد jQuery Mobile من وظائف HTML5 و CSS3 و jQuery بالإضافة إلى jQuery UI، ليجمعها في إطار عمل واحد يتيح للمطورين تحقيق التناسق عبر مختلف المنصات والأجهزة.

الميزات الأساسية التي يقدمها إطار عمل jQuery Mobile

1. بساطة وسهولة استخدام لا مثيل لهما

يتميز إطار عمل jQuery Mobile بالبساطة والمرونة الفائقة. نظراً لأن واجهة تهيئة الإطار تعتمد على لغة الترميز (markup-driven)، يمكن للمطورين بسهولة بناء واجهات تطبيقاتهم الأساسية بالكامل باستخدام HTML، مع الحد الأدنى من تعليمات JavaScript أو بدونها على الإطلاق. المهام المعقدة التي تتطلب عدة أسطر من JavaScript، مثل استدعاءات Ajax ومعالجة نموذج كائن المستند (DOM)، يمكن تحقيقها بسهولة ببضعة أسطر من التعليمات البرمجية في jQuery Mobile.

على سبيل المثال، إذا أردنا أن ينقر المستخدم لإخفاء نص معين بعد إنشاء الصفحة في DOM ولكن قبل اكتمال التحسين، يمكننا ببساطة استخدام معالج حدث pagecreate. هذا الأمر كان سيتطلب عدة أسطر من التعليمات البرمجية لإنجازه بدون jQuery Mobile:

$( document ).on( "pagecreate" , "#mypagetest" , function ( ) {
  $( "span" ).on( "click" , function ( ) {
    $( this ).hide();
  });
});

في التعليمات البرمجية أعلاه، يشير المعامل #mypagetest إلى معرف الصفحة الذي يحدد حدث الصفحة. كما تُستخدم الدالة on() لربط معالجات الأحداث. علاوة على ذلك، تسمح بساطته للمطورين بتقسيم تطبيقاتهم إلى صفحات متعددة. بفضل هذا الإطار، يمكن للمطورين "كتابة أقل، وإنجاز المزيد".

2. التحسين التدريجي والتدهور اللطيف

يُعد التحسين التدريجي (Progressive Enhancement) والتدهور اللطيف (Graceful Degradation) من الميزات الرئيسية التي تدفع مرونة jQuery Mobile. فهما يمكّنانه من دعم الأجهزة المتطورة والأجهزة ذات الإمكانيات الأقل (على سبيل المثال، تلك التي تفتقر إلى دعم JavaScript). يتيح الإطار للمطورين بناء تطبيقات يمكن الوصول إليها من قبل أكبر عدد من المتصفحات والأجهزة، سواء كان ذلك متصفح Internet Explorer 6 القديم أو أحدث أجهزة Android أو iPhone.

كما يمنح jQuery Mobile المطورين القدرة على عرض المحتوى الأساسي (كما هو مبني) على الأجهزة الأساسية. ويتم إثراء المنصات والمتصفحات الأكثر تطوراً بشكل متزايد باستخدام ملفات JavaScript و CSS الإضافية المرتبطة خارجياً، مما يوفر تجربة مستخدم محسنة.

3. دعم مدخلات المستخدم سهلة الاستخدام

أثناء تطوير تطبيقات jQuery Mobile، يمكن للمطورين تضمين واجهة برمجة تطبيقات (API) بسيطة لدعم وظائف إدخال المستخدم القائمة على اللمس، الفأرة، وتركيز المؤشر. يتضمن الإطار أيضاً عدة أنواع من عناصر النموذج سهلة التصميم والمتوافقة مع اللمس. تتضمن الأمثلة مجموعات مربعات الاختيار (checkbox) وأزرار الراديو (radio sets)، ومؤشرات التمرير (slider)، وتصفية البحث (search filtering)، وعناصر اختيار القائمة (menu selection).

بالإضافة إلى ذلك، يتضمن كل عنصر من عناصر النموذج نسخة بديلة "مصغرة" (mini)، يمكن دمجها بسهولة في صفحات الويب المحمولة. على سبيل المثال، إليك كيفية إنشاء زر مربع اختيار باستخدام jQuery Mobile. لاحظ أن السمة data-mini="true" تُضاف لإنشاء نسخة مصغرة من الزر:

<form>
  <input type="checkbox" name="checkbox-mini-0" id="my-checkbox" data-mini="true">
  <label for="checkbox-mini-0">Click here to agree</label>
</form>

علاوة على كل هذا، لضمان تحسين تجربة المستخدم على الأجهزة المحمولة، يحتوي الإطار على نظام تنقل غني يعتمد على Ajax يسمح بانتقالات سلسة للصفحات المتحركة. مع أحداث انتقال jQuery Mobile، يمكنك تحريك الانتقال من الصفحة النشطة الحالية إلى الصفحة الجديدة. على سبيل المثال، يمكنك استخدام حدث pagebeforeshow (يتم تشغيله على الصفحة "المستهدفة") وحدث pagebeforehide (يتم تشغيله على الصفحة "المغادرة") عند الانتقال من صفحة إلى أخرى. يتم تشغيل كلا الحدثين قبل بدء الرسوم المتحركة للانتقال. لنرى كيف يمكن تطبيقها:

$( document ).on( "pagebeforeshow" , "#myfirstpage" , function ( ) {
  // عند دخول myfirstpage
  alert( "myfirstpage is about to appear" );
});

$( document ).on( "pagebeforehide" , "#myfirstpage" , function ( ) {
  // عند مغادرة myfirstpage
  alert( "myfirstpage is about to disappear" );
});

4. إمكانية الوصول (Accessibility)

بالإضافة إلى قدراته المتعددة المنصات، تم إنشاء jQuery Mobile مع مراعاة قوية لإمكانية الوصول. يأتي الإطار بدعم لتطبيقات الإنترنت الغنية التي يمكن الوصول إليها (WAI-ARIA) لمساعدة الأشخاص ذوي الإعاقة الذين يستخدمون قارئات الشاشة والتقنيات المساعدة الأخرى على الوصول بسهولة إلى صفحات الويب.

5. حجم خفيف الوزن

يضيف الحجم الخفيف لإطار عمل jQuery Mobile (حوالي 40 كيلوبايت عند تصغيره) إلى سرعته الفائقة. بالإضافة إلى ذلك، فإن حقيقة أنه يستخدم الحد الأدنى من الاعتماديات على الصور تسرع من قدراته بشكل كبير، مما يضمن أداءً سلساً على الأجهزة المحمولة.

6. أنظمة السمات (Theming) وودجات واجهة المستخدم (UI Widgets)

يحتوي jQuery Mobile على نظام سمات مدمج يمكّن المطورين من تحديد نمط تطبيقاتهم الخاص. باستخدام أداة jQuery Mobile Themeroller، يمكن للمطورين تخصيص تطبيقاتهم بفعالية لتناسب ألوانهم وأذواقهم وتفضيلاتهم. يأتي الإطار أيضاً مع العديد من الودجات المبتكرة والمتعددة المنصات التي تمكن المطورين من إنشاء تطبيقات مخصصة بشكل أفضل. بعض الودجات المتاحة هي أشرطة الأدوات الثابتة (persistent toolbars)، والأزرار (buttons)، ومربعات الحوار (dialogs)، وودجت النوافذ المنبثقة (popup) الشائع الاستخدام.

7. الاستجابة والتجاوبية (Responsiveness)

تتيح الاستجابة الكاملة لإطار العمل (full responsiveness) لنفس قواعد التعليمات البرمجية الأساسية أن تتناسب بشكل مريح مع أنواع مختلفة من الشاشات، من الأجهزة المحمولة إلى الشاشات بحجم سطح المكتب. هذا يضمن تجربة مستخدم متسقة ومُحسّنة بغض النظر عن الجهاز المستخدم.

هيكل الصفحة الأساسي في jQuery Mobile

يحتوي هيكل jQuery Mobile على جميع مكونات وسمات واجهة المستخدم المطلوبة لإنشاء تطبيقات ومواقع ويب للجوال سهلة الاستخدام وغنية بالميزات من جميع الأنواع، سواء كانت أساسية أو متقدمة. يمكنك استخدام jQuery Mobile لبناء صفحات الويب، وأنواع مختلفة من طرق عرض القوائم (list views)، وأشرطة الأدوات (toolbars)، ومجموعة واسعة من عناصر النماذج والأزرار، ومربعات الحوار (dialogs)، بالإضافة إلى وظائف أخرى.

الأهم من ذلك، نظراً لأن jQuery Mobile مبني فوق جوهر jQuery، فإنه يتيح للمطورين الاستفادة من تعليمات jQuery UI البرمجية والوصول إلى التسهيلات الرئيسية. وتشمل هذه التأثيرات القوية للرسوم المتحركة والصور لصفحات الويب، ومعالجة DOM، ومعالجة الأحداث، و Ajax للاتصال بالخادم.

دعنا نلقي نظرة على كيفية ظهور تعليمات تطوير jQuery Mobile البرمجية. على سبيل المثال، في هذا الوقت من جائحة COVID-19 عندما يعمل معظم الناس من المنزل أو من مساحات العمل المشتركة، دعنا ننشئ صفحة ويب بسيطة توضح بعض أخطاء إدارة الفريق التي يرتكبها الناس. إليك التعليمات البرمجية:

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Mobile Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
  <div data-role="page" date-theme="c">
    <div data-role="header">
      <h1>fCC jQuery Mobile Sample</h1>
    </div>
    <div data-role="content">
      <p>COVID-19 Work-From-Home Team Management Mistakes To Avoid</p>
    </div>
    <p>
      <ul data-role="listview" data-inset="true" data-filter="true">
      </ul>
    </p>
    <p>
      <ul>
        <li><a href="#">Using Unnecessary Tools</a></li>
        <li><a href="#">Foregoing Team Evaluations</a></li>
        <li><a href="#">Micromanaging</a></li>
        <li><a href="#">Hiring Too Quickly</a></li>
        <li><a href="#">Not Having Contingencies</a></li>
      </ul>
    </p>
    <div data-role="footer">
      <h4>alfrickopidi.com, 2020 - Copyright</h4>
    </div>
  </div>
</body>
</html>

إليك المخرجات عند فتح أسطر التعليمات البرمجية أعلاه في المتصفح:

من الجدير بالذكر أنه عند تصغير أو تكبير المتصفح، يتكيف حجم العناصر في القائمة أيضاً بشكل مناسب. وبالتالي، يمكن الوصول إلى صفحة الويب بسهولة على أجهزة مختلفة ذات دقة شاشة متباينة دون القلق بشأن عدم الاتساق. سيتغير حجم العناصر وفقاً لنوع الجهاز.

كما ترى في نموذج التعليمات البرمجية أعلاه، المستند هو HTML5 بسيط يتضمن ثلاثة أشياء أساسية:

• ملفات من jQuery Mobile CSS (jquery.mobile-1.4.5.min.css)
• ملفات من مستودع jQuery (jquery-1.11.1.min.js)
• ملفات من مستودع jQuery Mobile (jquery.mobile-1.4.5.min.js)

هذه الملفات مرتبطة مباشرة بشبكة توصيل المحتوى (CDN) الخاصة بـ jQuery. بديل آخر هو التوجه إلى صفحة التنزيل للحصول على هذه الملفات واستضافتها على خادم خاص.

الأهم من ذلك، أن تضمين علامة meta "viewport" أثناء تطوير jQuery Mobile يوجه الأجهزة بأن عرض الصفحة وعرض شاشة الجهاز متساويان (width=device-width). كما توجه العلامة المتصفح لتكبير العرض إلى 100 بالمائة (initial-scale=1). إذا تم تغيير المقياس إلى 2، على سبيل المثال، سيقوم المتصفح بتكبير صفحة الويب بنسبة 50 بالمائة.

يكشف الفحص الدقيق للتعليمات البرمجية عن بعض سمات "_data-" الغريبة المنتشرة في جميع أنحائها. هذه ميزة محسنة في HTML5 تمكن المطورين من تمرير بيانات منظمة عبر التطبيق – على سبيل المثال، تحدد السمة data-role="header" قسم الرأس لصفحة الويب.

المثال أعلاه يخدش سطح الأشياء التي يمكن للمطورين تحقيقها باستخدام jQuery Mobile. وثائق الإطار سهلة المتابعة وتصف العديد من ميزاته، بما في ذلك ربط الصفحات، ودمج انتقالات الصفحات المتحركة، وتصميم الأزرار.

الخلاصة التقنية

يُعد jQuery Mobile إطار عمل غني بالموارد، مبني على قدرات jQuery و HTML5 و CSS، لمعالجة مشكلات التوافقية عبر المنصات والأجهزة والمتصفحات بفعالية. على الرغم من ظهور أطر عمل حديثة أكثر تعقيداً، يظل jQuery Mobile خياراً ممتازاً للمطورين الذين يبحثون عن حل سريع وبسيط لبناء تطبيقات ويب للجوال تتميز بالاستجابة الكاملة وتجربة المستخدم السلسة، خاصة في مشاريع تتطلب سرعة الإنجاز والاعتماد على تقنيات الويب التقليدية. إنه يوفر فرصاً رائعة لإنشاء تطبيقات ويب قوية، متجاوبة بالكامل، وجاهزة للمستقبل.