जावास्क्रिप्ट हर जगह: सभी प्लेटफार्मों के लिए एक साथ कोड कैसे लिखें

जावास्क्रिप्ट नया "write once, run anywhere" क्यों है?

डेवलपर्स का पुराना सपना याद है: एक बार कोड लिखा और वह हर जगह काम करता है? Java ने वर्चुअल मशीन के साथ इसका वादा किया था, लेकिन व्यवहार में यह सब ढोल-नगाड़ों पर निर्भर था। अब जावास्क्रिप्ट को देखें। वह भाषा जिसे कभी बटनों की एनिमेशन के लिए "खिलौना" माना जाता था, आज दुनिया पर कब्जा कर चुकी है। और जानते हैं क्या? यह वास्तव में उस वादे को पूरा करती है।

जावास्क्रिप्ट पर क्रॉस-प्लेटफ़ॉर्म डेवलपमेंट सिर्फ एक फैशनेबल ट्रेंड नहीं है। यह उत्पाद के लॉन्च के समय को कम करने, बजट बचाने और टीम में एक ही विशेषज्ञों को रखने का एक तरीका है। इस लेख में, हम देखेंगे कि कैसे एक भाषा ब्राउज़र, मोबाइल डिवाइस, डेस्कटॉप और सर्वर के लिए एप्लिकेशन बनाने की अनुमति देती है। और हाँ, कोड के वास्तविक उदाहरण होंगे।

आधुनिक क्रॉस-प्लेटफ़ॉर्म एप्लिकेशन की आर्किटेक्चर

कोड में कूदने से पहले, आइए समझें कि आधुनिक इकोसिस्टम कैसे काम करता है। मुख्य विचार एप्लिकेशन के तर्क को तीन परतों में विभाजित करना है:

\n
• बिज़नेस लॉजिक — डेटा प्रोसेसिंग, वैलिडेशन, API के साथ काम। यह कोर है जो प्लेटफ़ॉर्म पर निर्भर नहीं होना चाहिए।
\n
• UI परत — इंटरफ़ेस। यह वेब, मोबाइल और डेस्कटॉप के लिए अलग हो सकता है, लेकिन अक्सर सामान्य घटकों का उपयोग करता है।
\n
• स्टोरेज परत — स्थानीय डेटाबेस, कैश, फ़ाइल सिस्टम के साथ काम।
\n

यह जावास्क्रिप्ट ही है जो तीनों परतों को एक ही भाषा में लिखने की अनुमति देता है। आइए मुख्य टूल्स पर नज़र डालें।

सर्वर साइड: Node.js एक आधार के रूप में

कोई भी क्रॉस-प्लेटफ़ॉर्म सिस्टम बैकएंड से शुरू होता है। Node.js ब्राउज़र के बाहर जावास्क्रिप्ट का एक रनटाइम एनवायरनमेंट है, जो V8 इंजन पर बनाया गया है। यह REST API बनाने, WebSocket कनेक्शन को संभालने और डेटाबेस के साथ काम करने के लिए आदर्श है।

यहाँ Express पर एक सरल सर्वर का उदाहरण है, जो वेब और मोबाइल एप्लिकेशन दोनों को सेवा देगा:

const express = require('express');\nconst app = express();\nconst port = 3000;\n\n// JSON प्रोसेसिंग के लिए Middleware\napp.use(express.json());\n\n// उपयोगकर्ताओं की सूची प्राप्त करने के लिए एंडपॉइंट का उदाहरण\napp.get('/api/users', (req, res) => {\n  const users = [\n    { id: 1, name: 'अन्ना', email: 'anna@example.com' },\n    { id: 2, name: 'इवान', email: 'ivan@example.com' }\n  ];\n  res.json(users);\n});\n\n// नया उपयोगकर्ता बनाने के लिए POST अनुरोध\napp.post('/api/users', (req, res) => {\n  const newUser = req.body;\n  // यहाँ आमतौर पर डेटाबेस में सेव किया जाता है\n  console.log('नया उपयोगकर्ता:', newUser);\n  res.status(201).json({ message: 'उपयोगकर्ता बनाया गया', user: newUser });\n});\n\napp.listen(port, () => {\n  console.log(`सर्वर http://localhost:${port} पर चालू है`);\n});\n

यह कोड Windows, macOS और Linux पर समान रूप से काम करेगा। इसके अलावा, आप इसे Raspberry Pi या क्लाउड कंटेनर पर चला सकते हैं — किसी भी बदलाव की आवश्यकता नहीं होगी।

वेब इंटरफ़ेस: React एक सार्वभौमिक बिल्डिंग ब्लॉक के रूप में

जब क्रॉस-प्लेटफ़ॉर्म डेवलपमेंट की बात आती है, तो React पहला उम्मीदवार है। इसकी कम्पोनेंट-आधारित आर्किटेक्चर वेब और मोबाइल एप्लिकेशन के बीच 70% तक कोड का पुन: उपयोग करने की अनुमति देती है।

आइए उपयोगकर्ताओं की सूची प्रदर्शित करने के लिए एक सरल कम्पोनेंट बनाएं:

import React, { useState, useEffect } from 'react';\n\nfunction UserList() {\n  const [users, setUsers] = useState([]);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    fetch('/api/users')\n      .then(response => response.json())\n      .then(data => {\n        setUsers(data);\n        setLoading(false);\n      })\n      .catch(error => console.error('त्रुटि:', error));\n  }, []);\n\n  if (loading) {\n    return <div>लोड हो रहा है...</div>;\n  }\n\n  return (\n    <div>\n      <h2>उपयोगकर्ताओं की सूची</h2>\n      <ul>\n        {users.map(user => (\n          <li key={user.id}>\n            {user.name} — {user.email}\n          </li>\n