فهم بنية Electron
كوّن تصورًا ذهنيًا واضحًا لكيفية دمج Electron بين Chromium وNode.js، وكيفية عمل العمليتين الرئيسية وعملية العرض معًا، قبل بناء تطبيقات أكبر.
فهم بنية Electron درس مجاني في Electron Desktop App Development على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Electron Desktop App Development، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Electron Desktop App Development 4 دروس في المجموع.
بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.
Two Worlds in One App
Electron fuses two runtimes: Chromium for the UI and Node.js for system access. Grasping how they coexist is the foundation of every app.
The Main Process
Each app has exactly one main process. It runs your entry file, controls the lifecycle, and creates BrowserWindow instances with full Node access.
const { app, BrowserWindow } = require('electron');
app.whenReady().then(() => {
new BrowserWindow({ width: 800, height: 600 });
});The Renderer Process
Each window runs its own renderer process — basically a Chromium tab rendering HTML, CSS, and JavaScript like any web page.
Why Separate Processes?
Separate processes buy you stability and security: one window crashing won't kill the app, and the UI can't freely poke the OS.
Chromium's Role
Chromium is the same engine as Chrome. It handles rendering, layout, and the DOM, keeping your app consistent across platforms.
Node.js's Role
Node.js brings the file system, networking, and npm packages into your app — the part that makes Electron more than just a browser.
const os = require('os');
console.log('Platform:', os.platform());
console.log('CPUs:', os.cpus().length);The Event Loop
The main process shares Node's event loop. Long synchronous work freezes the UI, so reach for async patterns instead.
setTimeout(() => console.log('runs later'), 0);
console.log('runs first');Process Communication Preview
Main and renderer are in separate memory spaces; they talk through IPC (inter-process communication). You will dive into it later.
The package.json Entry
Electron finds the main process file via the main field in package.json. The snippet below shows the minimal entry config.
{
"name": "my-app",
"main": "main.js",
"scripts": { "start": "electron ." }
}Cross-Platform Promise
Write once, run on Windows, macOS, and Linux. Electron bundles the runtime, so users never need a browser installed.
Putting It Together
It all loops together: the main process boots, makes a window, the renderer loads your page, and IPC links them — the heartbeat of every app.
Quick Check
Confirm your understanding of Electron processes.
Recap
You've got the architecture: one main process (Node.js) driving multiple renderer processes (Chromium), connected by IPC for safe desktop apps.
الأسئلة الشائعة
هل درس «فهم بنية Electron» مجاني؟
نعم — نص درس «فهم بنية Electron» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Electron Desktop App Development، انتقل إلى CoddyKit PRO. تتضمن دورة Electron Desktop App Development 4 دروس في المجموع.
ماذا ستتعلم في «فهم بنية Electron»؟
كوّن تصورًا ذهنيًا واضحًا لكيفية دمج Electron بين Chromium وNode.js، وكيفية عمل العمليتين الرئيسية وعملية العرض معًا، قبل بناء تطبيقات أكبر. تتمرن على Electron Desktop App Development مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Electron Desktop App Development؟
لا تُشترط خبرة سابقة. Electron Desktop App Development على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «فهم بنية Electron»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Electron Desktop App Development هذا؟
نعم. كل درس في Electron Desktop App Development يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- ما هو Electron؟
- إعداد بيئة التطوير
- أول تطبيق Electron لك
- فهم بنية Electron