Entendendo a Arquitetura do Electron
Crie um modelo mental claro de como o Electron combina Chromium e Node.js, e de como os processos principal e de renderização trabalham juntos antes de criar aplicativos maiores.
Entendendo a Arquitetura do Electron é uma aula grátis de Electron Desktop App Development no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Electron Desktop App Development, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Electron Desktop App Development inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
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.
Aprenda JavaScript com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 12
- Aulas
- 47
Perguntas Frequentes
A aula “Entendendo a Arquitetura do Electron” é grátis?
Sim — o texto completo de “Entendendo a Arquitetura do Electron” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Electron Desktop App Development, atualize para CoddyKit PRO. O curso de Electron Desktop App Development inclui 4 aulas no total.
O que vou aprender em “Entendendo a Arquitetura do Electron”?
Crie um modelo mental claro de como o Electron combina Chromium e Node.js, e de como os processos principal e de renderização trabalham juntos antes de criar aplicativos maiores. Você pratica Electron Desktop App Development com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Electron Desktop App Development?
Nenhuma experiência prévia é necessária. Electron Desktop App Development no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Entendendo a Arquitetura do Electron”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Electron Desktop App Development?
Sim. Cada aula de Electron Desktop App Development inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- O que é Electron
- Configuração do Ambiente de Desenvolvimento
- Sua Primeira Aplicação Electron
- Entendendo a Arquitetura do Electron