Electron - Jembatan Web ke Desktop Native

// main.js - Main process
const { app, BrowserWindow, Menu, ipcMain } = require('electron');
const path = require('path');
const isDev = require('electron-is-dev');

class ElectronApp {
    constructor() {
        this.mainWindow = null;
        this.setupEventHandlers();
    }
    
    setupEventHandlers() {
        // App event handlers
        app.whenReady().then(() => {
            this.createMainWindow();
            this.setupMenu();
            this.setupIPC();
        });
        
        app.on('window-all-closed', () => {
            if (process.platform !== 'darwin') {
                app.quit();
            }
        });
        
        app.on('activate', () => {
            if (BrowserWindow.getAllWindows().length === 0) {
                this.createMainWindow();
            }
        });
    }
    
    createMainWindow() {
        // Create browser window dengan native integration
        this.mainWindow = new BrowserWindow({
            width: 1200,
            height: 800,
            webPreferences: {
                nodeIntegration: false, // Security best practice
                contextIsolation: true, // Security best practice
                preload: path.join(__dirname, 'preload.js')
            },
            titleBarStyle: 'hiddenInset', // macOS native look
            show: false // Prevent flash of unstyled content
        });
        
        // Load application
        const startUrl = isDev 
            ? 'http://localhost:3000' 
            : `file://${path.join(__dirname, '../build/index.html')}`;
            
        this.mainWindow.loadURL(startUrl);
        
        // Show window when ready
        this.mainWindow.once('ready-to-show', () => {
            this.mainWindow.show();
            
            // Open DevTools in development
            if (isDev) {
                this.mainWindow.webContents.openDevTools();
            }
        });
    }
    
    setupMenu() {
        // Native menu setup
        const template = [
            {
                label: 'File',
                submenu: [
                    {
                        label: 'New',
                        accelerator: 'CmdOrCtrl+N',
                        click: () => this.createNewDocument()
                    },
                    {
                        label: 'Open',
                        accelerator: 'CmdOrCtrl+O',
                        click: () => this.openDocument()
                    },
                    { type: 'separator' },
                    {
                        label: 'Quit',
                        accelerator: process.platform === 'darwin' ? 'Cmd+Q' : 'Ctrl+Q',
                        click: () => app.quit()
                    }
                ]
            },
            {
                label: 'Edit',
                submenu: [
                    { role: 'undo' },
                    { role: 'redo' },
                    { type: 'separator' },
                    { role: 'cut' },
                    { role: 'copy' },
                    { role: 'paste' }
                ]
            }
        ];
        
        const menu = Menu.buildFromTemplate(template);
        Menu.setApplicationMenu(menu);
    }
    
    setupIPC() {
        // IPC handlers untuk communication dengan renderer
        ipcMain.handle('get-app-version', () => {
            return app.getVersion();
        });
        
        ipcMain.handle('show-save-dialog', async () => {
            const { dialog } = require('electron');
            const result = await dialog.showSaveDialog(this.mainWindow, {
                filters: [
                    { name: 'JSON Files', extensions: ['json'] },
                    { name: 'All Files', extensions: ['*'] }
                ]
            });
            return result;
        });
    }
}

// Initialize application
new ElectronApp();

// preload.js - Secure bridge antara main dan renderer
const { contextBridge, ipcRenderer } = require('electron');

// Expose safe APIs ke renderer process
contextBridge.exposeInMainWorld('electronAPI', {
    // App information
    getAppVersion: () => ipcRenderer.invoke('get-app-version'),
    
    // File operations
    showSaveDialog: () => ipcRenderer.invoke('show-save-dialog'),
    
    // Window operations
    minimizeWindow: () => ipcRenderer.invoke('minimize-window'),
    maximizeWindow: () => ipcRenderer.invoke('maximize-window'),
    closeWindow: () => ipcRenderer.invoke('close-window'),
    
    // Event listeners
    onWindowStateChange: (callback) => {
        ipcRenderer.on('window-state-changed', callback);
    },
    
    // Remove listeners
    removeAllListeners: (channel) => {
        ipcRenderer.removeAllListeners(channel);
    }
});

// React component dengan Electron integration
import React, { useState, useEffect } from 'react';

function ElectronReactApp() {
    const [appVersion, setAppVersion] = useState('');
    const [isElectron, setIsElectron] = useState(false);
    
    useEffect(() => {
        // Check if running dalam Electron
        setIsElectron(window.electronAPI !== undefined);
        
        if (window.electronAPI) {
            // Get app version dari main process
            window.electronAPI.getAppVersion()
                .then(version => setAppVersion(version));
        }
    }, []);
    
    const handleSaveFile = async () => {
        if (window.electronAPI) {
            const result = await window.electronAPI.showSaveDialog();
            if (!result.canceled) {
                console.log('Save to:', result.filePath);
                // Implement save logic
            }
        }
    };
    
    return (
        <div className="electron-app">
            <header className="app-header">
                <h1>Electron + React App</h1>
                {isElectron && (
                    <p>Running in Electron v{appVersion}</p>
                )}
            </header>
            
            <main className="app-content">
                <button onClick={handleSaveFile}>
                    Save File
                </button>
                
                {/* Native-like UI components */}
                <div className="native-controls">
                    <button onClick={() => window.electronAPI?.minimizeWindow()}>
                        Minimize
                    </button>
                    <button onClick={() => window.electronAPI?.maximizeWindow()}>
                        Maximize
                    </button>
                    <button onClick={() => window.electronAPI?.closeWindow()}>
                        Close
                    </button>
                </div>
            </main>
        </div>
    );
}

export default ElectronReactApp;

// Advanced native features
const { 
    app, 
    BrowserWindow, 
    Notification, 
    Tray, 
    Menu,
    globalShortcut,
    powerMonitor,
    shell
} = require('electron');
const path = require('path');

class AdvancedElectronFeatures {
    constructor() {
        this.tray = null;
        this.setupAdvancedFeatures();
    }
    
    setupAdvancedFeatures() {
        // System tray integration
        this.createTray();
        
        // Global shortcuts
        this.setupGlobalShortcuts();
        
        // System notifications
        this.setupNotifications();
        
        // Power management
        this.setupPowerManagement();
        
        // Protocol handling
        this.setupProtocolHandling();
    }
    
    createTray() {
        this.tray = new Tray(path.join(__dirname, 'assets/tray-icon.png'));
        
        const contextMenu = Menu.buildFromTemplate([
            {
                label: 'Show App',
                click: () => this.showMainWindow()
            },
            {
                label: 'Quit',
                click: () => app.quit()
            }
        ]);
        
        this.tray.setToolTip('My Electron App');
        this.tray.setContextMenu(contextMenu);
    }
    
    setupGlobalShortcuts() {
        // Register global shortcuts
        globalShortcut.register('CommandOrControl+Shift+K', () => {
            this.showMainWindow();
        });
        
        globalShortcut.register('CommandOrControl+Shift+H', () => {
            this.hideMainWindow();
        });
    }
    
    setupNotifications() {
        // System notifications
        if (Notification.isSupported()) {
            const notification = new Notification({
                title: 'Electron App',
                body: 'Application started successfully!',
                icon: path.join(__dirname, 'assets/notification-icon.png')
            });
            
            notification.show();
            
            notification.on('click', () => {
                this.showMainWindow();
            });
        }
    }
    
    setupPowerManagement() {
        // Power management events
        powerMonitor.on('suspend', () => {
            console.log('System is going to sleep');
            // Save application state
        });
        
        powerMonitor.on('resume', () => {
            console.log('System resumed from sleep');
            // Restore application state
        });
        
        powerMonitor.on('on-ac', () => {
            console.log('System plugged in');
        });
        
        powerMonitor.on('on-battery', () => {
            console.log('System on battery');
            // Enable power saving mode
        });
    }
    
    setupProtocolHandling() {
        // Custom protocol handling
        app.setAsDefaultProtocolClient('myelectronapp');
        
        // Handle protocol URLs
        app.on('open-url', (event, url) => {
            event.preventDefault();
            console.log('Protocol URL:', url);
            // Handle custom protocol
        });
    }
}

// File system operations dengan native dialogs
const { dialog, shell } = require('electron');
const fs = require('fs').promises;
const path = require('path');

class FileSystemManager {
    constructor(mainWindow) {
        this.mainWindow = mainWindow;
        this.setupFileHandlers();
    }
    
    setupFileHandlers() {
        // File operation handlers
        ipcMain.handle('open-file-dialog', this.openFileDialog.bind(this));
        ipcMain.handle('save-file-dialog', this.saveFileDialog.bind(this));
        ipcMain.handle('read-file', this.readFile.bind(this));
        ipcMain.handle('write-file', this.writeFile.bind(this));
        ipcMain.handle('show-in-folder', this.showInFolder.bind(this));
    }
    
    async openFileDialog() {
        const result = await dialog.showOpenDialog(this.mainWindow, {
            properties: ['openFile', 'multiSelections'],
            filters: [
                { name: 'Text Files', extensions: ['txt', 'md'] },
                { name: 'JSON Files', extensions: ['json'] },
                { name: 'All Files', extensions: ['*'] }
            ]
        });
        
        return result;
    }
    
    async saveFileDialog() {
        const result = await dialog.showSaveDialog(this.mainWindow, {
            defaultPath: 'untitled.txt',
            filters: [
                { name: 'Text Files', extensions: ['txt'] },
                { name: 'JSON Files', extensions: ['json'] }
            ]
        });
        
        return result;
    }
    
    async readFile(filePath) {
        try {
            const content = await fs.readFile(filePath, 'utf8');
            return { success: true, content };
        } catch (error) {
            return { success: false, error: error.message };
        }
    }
    
    async writeFile(filePath, content) {
        try {
            await fs.writeFile(filePath, content, 'utf8');
            return { success: true };
        } catch (error) {
            return { success: false, error: error.message };
        }
    }
    
    showInFolder(filePath) {
        shell.showItemInFolder(filePath);
    }
}

// Memory optimization strategies
class ElectronMemoryManager {
    constructor() {
        this.memoryThreshold = 500 * 1024 * 1024; // 500MB
        this.startMonitoring();
    }
    
    startMonitoring() {
        setInterval(() => {
            this.checkMemoryUsage();
        }, 30000); // Check every 30 seconds
    }
    
    checkMemoryUsage() {
        const memoryUsage = process.memoryUsage();
        
        if (memoryUsage.heapUsed > this.memoryThreshold) {
            console.warn('High memory usage detected:', {
                heapUsed: Math.round(memoryUsage.heapUsed / 1024 / 1024) + 'MB',
                heapTotal: Math.round(memoryUsage.heapTotal / 1024 / 1024) + 'MB'
            });
            
            // Trigger garbage collection
            if (global.gc) {
                global.gc();
            }
            
            // Notify renderer processes to cleanup
            BrowserWindow.getAllWindows().forEach(window => {
                window.webContents.send('memory-pressure');
            });
        }
    }
    
    // Optimize renderer process memory
    optimizeRenderer(webContents) {
        // Clear cache periodically
        webContents.session.clearCache();
        
        // Clear storage data
        webContents.session.clearStorageData({
            storages: ['cookies', 'filesystem', 'indexdb', 'localstorage', 'shadercache', 'websql']
        });
    }
}

// Webpack configuration untuk Electron
const path = require('path');

module.exports = {
    target: 'electron-renderer',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js'
    },
    optimization: {
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all'
                }
            }
        }
    },
    externals: {
        // Exclude Electron modules dari bundle
        'electron': 'require("electron")',
        'fs': 'require("fs")',
        'path': 'require("path")'
    }
};

// Security-focused Electron configuration
const secureElectronApp = {
    webPreferences: {
        // Disable Node.js integration dalam renderer
        nodeIntegration: false,
        
        // Enable context isolation
        contextIsolation: true,
        
        // Disable remote module
        enableRemoteModule: false,
        
        // Use preload script untuk safe API exposure
        preload: path.join(__dirname, 'preload.js'),
        
        // Disable web security (only untuk development)
        webSecurity: !isDev,
        
        // Disable experimental features
        experimentalFeatures: false,
        
        // Sandbox renderer process
        sandbox: true
    }
};

// Content Security Policy
const csp = `
    default-src 'self';
    script-src 'self' 'unsafe-inline';
    style-src 'self' 'unsafe-inline';
    img-src 'self' data: https:;
    connect-src 'self' https:;
`;

// Simplified code editor dengan Electron
class CodeEditor {
    constructor() {
        this.setupEditor();
        this.setupFileWatching();
        this.setupAutoSave();
    }
    
    setupEditor() {
        // Monaco Editor integration
        require.config({ paths: { 'vs': 'node_modules/monaco-editor/min/vs' }});
        require(['vs/editor/editor.main'], () => {
            this.editor = monaco.editor.create(document.getElementById('editor'), {
                value: '',
                language: 'javascript',
                theme: 'vs-dark'
            });
        });
    }
    
    setupFileWatching() {
        // Watch file changes dengan chokidar
        const chokidar = require('chokidar');
        this.watcher = chokidar.watch(this.currentFilePath);
        
        this.watcher.on('change', (path) => {
            // Reload file if changed externally
            this.reloadFile(path);
        });
    }
    
    setupAutoSave() {
        // Auto-save functionality
        setInterval(() => {
            if (this.hasUnsavedChanges) {
                this.saveFile();
            }
        }, 30000); // Auto-save every 30 seconds
    }
}