جافا سكريبت في كل مكان: كيفية كتابة كود لجميع المنصات دفعة واحدة

لماذا جافا سكريبت هي الجديدة "اكتب مرة واحدة، شغّل في أي مكان"؟

هل تتذكر الحلم القديم للمطورين: كتابة الكود مرة واحدة ليعمل في كل مكان؟ وعدت جافا بذلك باستخدام الآلة الافتراضية، لكن عملياً واجهت الكثير من العقبات. والآن انظر إلى جافا سكريبت. اللغة التي كانت تُعتبر في السابق "لعبة" لتحريك الأزرار، سيطرت اليوم على العالم. وهل تعلم؟ إنها تحقق هذا الوعد حقاً.

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

هندسة التطبيق الحديث عبر المنصات

قبل الاندفاع نحو الكود، دعنا نفهم كيف يعمل النظام البيئي الحديث. الفكرة الأساسية هي تقسيم منطق التطبيق إلى ثلاث طبقات:

• منطق الأعمال — معالجة البيانات، التحقق، العمل مع API. هذا هو النواة التي يجب ألا تعتمد على المنصة.
• طبقة واجهة المستخدم — الواجهة. يمكن أن تكون مختلفة للويب، التطبيقات المحمولة وسطح المكتب، لكنها غالباً تستخدم مكونات مشتركة.
• طبقة التخزين — قواعد البيانات المحلية، التخزين المؤقت، العمل مع نظام الملفات.

جافا سكريبت هي التي تسمح بكتابة جميع الطبقات الثلاث بلغة واحدة. دعنا نستعرض الأدوات الرئيسية.

الجزء الخادمي: Node.js كأساس

أي نظام عبر المنصات يبدأ من الخلفية (backend). Node.js هي بيئة تشغيل جافا سكريبت خارج المتصفح، مبنية على محرك V8. إنها مثالية لإنشاء REST API، معالجة اتصالات WebSocket، والعمل مع قواعد البيانات.

إليك مثال بسيط لخادم باستخدام Express، سيخدم كلاً من تطبيق الويب والموبايل:

const express = require('express');const app = express();const port = 3000;

// Middleware لمعالجة JSONapp.use(express.json());

// مثال على نقطة نهاية لجلب قائمة المستخدمينapp.get('/api/users', (req, res) => {  const users = [    { id: 1, name: 'آنا', email: 'anna@example.com' },    { id: 2, name: 'إيفان', email: 'ivan@example.com' }  ];  res.json(users);});

// طلب POST لإنشاء مستخدم جديدapp.post('/api/users', (req, res) => {  const newUser = req.body;  // هنا عادة يتم الحفظ في قاعدة البيانات  console.log('مستخدم جديد:', newUser);  res.status(201).json({ message: 'تم إنشاء المستخدم', user: newUser });});

app.listen(port, () => {  console.log(`الخادم يعمل على http://localhost:${port}`);});

هذا الكود سيعمل بنفس الطريقة على Windows و macOS و Linux. بل أكثر من ذلك، يمكنك تشغيله على Raspberry Pi أو في حاوية سحابية — دون الحاجة لأي تغييرات.

واجهة الويب: React ككتلة بناء عالمية

عندما يتعلق الأمر بالتطوير عبر المنصات باستخدام جافا سكريبت، فإن React هو المرشح الأول. هندسته القائمة على المكونات تسمح بإعادة استخدام ما يصل إلى 70% من الكود بين الويب والتطبيقات المحمولة.

لننشئ مكوناً بسيطاً لعرض قائمة المستخدمين:

import React, { useState, useEffect } from 'react';

function UserList() {  const [users, setUsers] = useState([]);  const [loading, setLoading] = useState(true);

  useEffect(() => {    fetch('/api/users')      .then(response => response.json())      .then(data => {        setUsers(data);        setLoading(false);      })      .catch(error => console.error('خطأ:', error));  }, []);

  if (loading) {    return <div>جارٍ التحميل...</div>;  }

  return (    <div>      <h2>قائمة المستخدمين</h2>      <ul>        {users.map(user => (          <li key={user.id}>            {user.name} — {user.email}          </li>