JavaScript: أساسيات اللغة، React Native وتطوير الأجهزة المحمولة

ما هي JavaScript؟

JavaScript (JS) هي لغة برمجة عالية المستوى مع كتابة ديناميكية، وراثة نموذجية ودوال ككائنات من الدرجة الأولى. أنشأها Brendan Eich في عام 1995 في 10 أيام. وهي واحدة من اللغات الثلاث الأساسية لتقنيات الويب (HTML، CSS، JS) وأساس منصة Node.js من جانب الخادم (2009)، التي سمحت لـ JS بالخروج من المتصفح.

في تطوير الأجهزة المحمولة، تُستخدم JavaScript في ثلاثة نماذج: الترجمة الأصلية (React Native مع Hermes/JSC)، حاويات WebView (Ionic، Cordova) و JS من جانب الخادم (Node.js + Express للخلفية). React Native هي التقنية المهيمنة: وفقاً لـ Statista (2025)، 38% من المشاريع عبر المنصات تستخدم React Native، تليها Flutter (46%).

السمة الرئيسية لـ JavaScript هي نموذج التنفيذ أحادي الخيط مع إدخال/إخراج غير محظور. يسمح event loop بمعالجة آلاف العمليات غير المتزامنة في خيط واحد دون إنشاء خيوط نظام التشغيل. هذا يجعل JS فعالاً للتطبيقات المكثفة في الإدخال/الإخراج (طلبات الشبكة، عمليات قاعدة البيانات)، لكنه يتطلب الحذر مع الحسابات المكثفة للمعالج.

معايير JavaScript: ES5، ES6، ES2025

معيار ECMAScript (ES) يحدد مواصفات JavaScript. ES6 (2015) قدم let/const، دوال السهم، الفئات، الوحدات، Promise. ES2020 — Optional Chaining (?.)، Nullish Coalescing (??). ES2023 — Array findLast، Hashbang Grammar. المحركات الحديثة Hermes (React Native) و V8 (Node.js) تدعم ES2022+. React Native Hermes يدعم ES2020+ مع بعض القيود على Proxy و Symbol.

قواعد JavaScript: الأنواع، الدوال والنماذج الأولية

قواعد JavaScript تشبه لغة C، ذات كتابة ديناميكية. يتم تحديد نوع المتغير حسب القيمة ويمكن أن يتغير أثناء التشغيل. let و const (ES6) حلت محل var للنطاق الكتلي. الأنواع البدائية: string، number، boolean، null، undefined، symbol، bigint. كل شيء آخر هو كائن (object، array، function، date، regexp).

الدوال ككائنات من الدرجة الأولى

JavaScript هي لغة ذات دوال ذات ترتيب أعلى. يمكن تعيين الدوال للمتغيرات، تمريرها كوسائط، إرجاعها من دوال أخرى. دوال السهم (=>) ليس لها this خاص بها — ترث this من السياق الخارجي. الإغلاق (closure) هو دالة تتذكر المتغيرات من النطاق الذي أنشئت فيه.

// أنواع البيانات والدوال في JavaScript
// الأنواع البدائية
const name = 'React Native';
let version = 0.71;
var isActive = true; // var مهمل

// الكائنات والمصفوفات
const app = {
  platform: 'iOS',
  version: 15,
  getInfo() {
    return `${this.platform} ${this.version}`;
  }
};

const items = ['Dart', 'Kotlin', 'Swift'];

// دالة من الدرجة الأعلى
function filterByVersion(apps, minVersion) {
  return apps.filter(app => app.version >= minVersion);
}

// الإغلاق (closure)
function createCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

// عامل الانتشار لنسخ الكائنات
const newApp = { ...app, version: 16 };

عامل الانتشار ... ينشئ نسخة سطحية من كائن. التدمير (const { platform, version } = app) يستخرج الحقول إلى متغيرات. دالة السهم في filterByVersion أقصر من تعبير function ولا تنشئ this خاص بها — هذا أمر بالغ الأهمية في مكونات React Native حيث يشير this إلى فئة المكون.

الوراثة النموذجية

JavaScript تستخدم الوراثة النموذجية، وليس الوراثة الطبقية مثل Java أو C#. الفئات (ES6) هي سكر نحوي فوق النماذج الأولية. كل كائن لديه مرجع داخلي [[Prototype]] لكائن آخر. عند الوصول إلى خاصية غير موجودة في الكائن، يبحث عنها JS في سلسلة النماذج. بناء جملة الفئات (extends، super) يجعل الكود أكثر قابلية للقراءة، لكن تحت الغطاء تبقى النماذج.

// الفئات في JavaScript — سكر نحوي
class PlatformService {
  // حقل خاص (ES2022)
  #apiKey;

  constructor(name, apiKey) {
    this.name = name;
    this.#apiKey = apiKey;
  }

  // طريقة ثابتة
  static getPlatforms() {
    return ['iOS', 'Android'];
  }

  // محصل (Getter)
  get info() {
    return `${this.name} SDK`;
  }

  // طريقة غير متزامنة
  async initialize() {
    return await this.#validateKey();
  }

  #validateKey() {
    return this.#apiKey.length > 10;
  }
}

// الوراثة
class AndroidService extends PlatformService {
  constructor(apiKey) {
    super('Android', apiKey);
  }
}

الحقول الخاصة #apiKey (ES2022) توفر تغليفاً حقيقياً، غير متاح مع اتفاقيات _ الشرطة السفلية. الطريقة الثابتة getPlatforms تنتمي للفئة، وليس للكيان. المحصل info يُحسب عند الوصول. async/await يجعل الكود غير المتزامن خطياً. React Native Hermes يدعم الحقول الخاصة منذ الإصدار 0.71.

غير المتزامن في JavaScript: Event Loop و Promise

غير المتزامن في JavaScript يعتمد على event loop — حلقة لا نهائية تتحقق من مكدس الاستدعاءات وقوائم المهام. مكدس الاستدعاءات يعالج الكود المتزامن، microtask queue يعالج Promise.then/catch/finally، macrotask queue يعالج setTimeout، setInterval، الإدخال/الإخراج. يأخذ event loop المهام من microtask أولاً، ثم من macrotask. حظر مكدس الاستدعاءات (حلقة لا نهائية) يوقف واجهة المستخدم بأكملها.

Promise هو كائن يمثل قيمة مستقبلية. يمكن أن يكون الوعد pending (معلق)، fulfilled (مُنجز)، rejected (مرفوض). سلسلة .then().catch().finally() تعالج النتيجة غير المتزامنة. async/await (ES8) هو سكر نحوي: دالة async تُرجع Promise، await يوقف التنفيذ حتى يتم حل الوعد دون حظر الخيط.

// تحميل البيانات غير المتزامن في React Native
import React, { useState, useEffect } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;

    async function fetchUser() {
      try {
        const response = await fetch(
          `https://api.example.com/users/${userId}`
        );

        if (!response.ok) {
          throw new Error('Network error');
        }

        const data = await response.json();

        if (!cancelled) {
          setUser(data);
          setLoading(false);
        }
      } catch (error) {
        if (!cancelled) {
          console.error('فشل الجلب:', error);
          setLoading(false);
        }
      }
    }

    fetchUser();

    return () => { cancelled = true; };
  }, [userId]);

  if (loading) return <ActivityIndicator />;

  return (
    <View>
      <Text>{user?.name ?? 'Unknown'}</Text>
    </View>
  );
}

الخطاف useEffect مع دالة async fetchUser يقوم بطلب HTTP عند تركيب المكون. العلم cancelled يمنع setState بعد إلغاء التركيب — مشكلة شائعة في React Native. Optional Chaining user?.name و Nullish Coalescing ?? يعالجان undefined دون أخطاء. ActivityIndicator يظهر أثناء التحميل — نمط غير متزامن مألوف لكل مطور JS.

React Native: JavaScript على المنصات المحمولة

React Native هو إطار من Meta (Facebook) لإنشاء تطبيقات محمولة أصلية بلغة JavaScript. على عكس نهج WebView، يقوم React Native بعرض مكونات أصلية حقيقية (UIView لنظام iOS، ViewGroup لنظام Android). يتم تنفيذ كود JS في خيط منفصل (Hermes أو JSC) ويتواصل مع خيط واجهة المستخدم الأصلي عبر Bridge (معمارية قديمة) أو JSI (معمارية Fabric الجديدة).

معمارية React Native

React Native يتكون من خيط JS (الكود الخاص بك)، خيط أصلي (واجهة المستخدم) و Bridge/JSI للتفاعل بينهما. في المعمارية القديمة (Bridge)، يتم تسلسل رسائل JSON ونقلها بشكل غير متزامن — مما يخلق تأخيرات أثناء الرسوم المتحركة السريعة. المعمارية الجديدة Fabric (React Native 0.68+) تستخدم JSI (JavaScript Interface) — تفاعل مباشر لـ JS مع كائنات C++ بدون تسلسل.

// مكون React Native مع API أصلي
import React, { useState, useEffect } from 'react';
import {
  View, Text, TouchableOpacity, Platform,
  PermissionsAndroid, Alert
} from 'react-native';
import Geolocation from '@react-native-community/geolocation';

function LocationTracker() {
  const [location, setLocation] = useState(null);

  useEffect(() => {
    requestLocationPermission();
  }, []);

  async function requestLocationPermission() {
    if (Platform.OS === 'android') {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
      );
      if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
        Alert.alert('Permission denied');
        return;
      }
    }
    getCurrentPosition();
  }

  function getCurrentPosition() {
    Geolocation.getCurrentPosition(
      pos => setLocation({
        lat: pos.coords.latitude,
        lng: pos.coords.longitude
      }),
      error => Alert.alert('Error', error.message),
      { enableHighAccuracy: true, timeout: 15000 }
    );
  }

  return (
    <View>
      <Text>Lat: {location?.lat ?? 'N/A'}</Text>
      <Text>Lng: {location?.lng ?? 'N/A'}</Text>
      <TouchableOpacity onPress={getCurrentPosition}>
        <Text>Update Location</Text>
      </TouchableOpacity>
    </View>
  );
}

المكون LocationTracker يوضح العمل مع API الموقع الأصلي. Platform.OS يميز بين Android و iOS. PermissionsAndroid.request هو حوار الأذونات الأصلي لنظام Android. Geolocation.getCurrentPosition — وحدة من @react-native-community/geolocation، مثبتة عبر npm. يوفر React Native واجهات JS للكاميرا والبلوتوث ومقياس التسارع وأجهزة استشعار أخرى.

Ionic و Cordova: حاويات WebView

Ionic هو إطار للتطبيقات المحمولة الهجينة يستخدم WebView لعرض HTML/CSS/JS. على عكس React Native، لا ينشئ Ionic مكونات أصلية — يعمل التطبيق داخل حاوية ويب (WebView) على iOS (WKWebView) و Android (Android WebView). يوفر هذا إعادة استخدام بنسبة 100% لكود الويب ولكن يحد من أداء الرسوم المتحركة المعقدة.

Apache Cordova هو أساس Ionic، يوفر الوصول إلى واجهات برمجة التطبيقات الأصلية عبر إضافات JavaScript. الكاميرا، GPS، جهات الاتصال، نظام الملفات — كل شيء متاح عبر cordova-plugin-*. Ionic 7+ يستخدم Capacitor — خليفة Cordova بأداء أفضل، دعم ESM ووصول مباشر إلى iOS/Android SDK عبر Swift و Kotlin.

أدوات مطور JavaScript

أدوات مطوري JS للتطبيقات المحمولة تشمل Node.js، npm/yarn، Expo، React Native CLI و Metro bundler. Node.js هي بيئة تشغيل JS خارج المتصفح، أساس النظام البيئي. npm (Node Package Manager) هو مدير حزم مع أكثر من 2 مليون مكتبة. npx هي أداة لتشغيل حزم npm بدون تثبيت.

النظام البيئي للأدوات

Expo هي طبقة فوق React Native تبسط التطوير: لا تتطلب Xcode/Android Studio للبدء، توفر Managed Workflow مع مكتبات مثبتة مسبقاً. Expo Application Services (EAS) — بناء ونشر في السحابة. Metro هو باندلر React Native الذي يجمع كود JS والتبعيات في ملف واحد. Hermes هو محرك JS من Meta محسّن للأجهزة المحمولة مع ترجمة AOT.

// package.json — تكوين مشروع React Native
{
  "name": "MyMobileApp",
  "version": "1.0.0",
  "scripts": {
    "start": "npx react-native start",
    "android": "npx react-native run-android",
    "ios": "npx react-native run-ios",
    "test": "jest",
    "lint": "eslint . --ext .ts,.tsx"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-native": "^0.73.0",
    "@react-navigation/native": "^6.1.0",
    "@react-native-community/geolocation": "^3.2.0"
  },
  "devDependencies": {
    "jest": "^29.7.0",
    "eslint": "^8.56.0",
    "metro-react-native-babel-preset": "^0.77.0"
  }
}

ملف package.json هو أساس أي مشروع JS. البرامج النصية start، android، ios تشغل باندلر Metro والبناء. تنقسم التبعيات إلى dependencies (وقت التشغيل) و devDependencies (اختبارات، أدوات تحليل). React Navigation هو الموجه القياسي. Jest هو إطار اختبار. ESLint هو محلل ثابت يتحقق من نمط الكود والأخطاء المحتملة.