Architektura Electron
Zbudują Państwo jasny model mentalny pokazujący, jak Electron łączy Chromium i Node.js oraz jak współpracują procesy główny i renderer, zanim zaczną Państwo tworzyć większe aplikacje.
Architektura Electron to bezpłatna lekcja Electron Desktop App Development na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Electron Desktop App Development, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Electron Desktop App Development zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
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.
Ucz się JavaScript dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 12
- Lekcje
- 47
Często zadawane pytania
Czy lekcja „Architektura Electron” jest bezpłatna?
Tak — pełny tekst „Architektura Electron” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Electron Desktop App Development, przejdź na CoddyKit PRO. Kurs Electron Desktop App Development zawiera 4 lekcji w sumie.
Co nauczysz się w „Architektura Electron”?
Zbudują Państwo jasny model mentalny pokazujący, jak Electron łączy Chromium i Node.js oraz jak współpracują procesy główny i renderer, zanim zaczną Państwo tworzyć większe aplikacje. Ćwiczysz Electron Desktop App Development z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Electron Desktop App Development?
Nie wymagamy żadnego doświadczenia. Electron Desktop App Development w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Architektura Electron”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Electron Desktop App Development?
Tak. Każda lekcja Electron Desktop App Development zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Czym jest Electron
- Konfiguracja środowiska programistycznego
- Pierwsza aplikacja Electron
- Architektura Electron