My Blog

Author: tayyaba

  • Understanding the Main and Renderer Processes in Electron

    —

    by

    tayyaba
    in

    Delve into the architecture of Electron applications by learning about the main and renderer processes. This post will explain their roles, how they interact, and best practices for managing communication between them using IPC (Inter-Process Communication). Perfect for those looking to understand Electron’s internal workings.

  • Setting Up Your First Electron Project: A Step-by-Step Tutorial

    —

    by

    tayyaba
    in

    Follow this detailed tutorial to create your first Electron application from scratch. We’ll walk you through installing Electron, setting up your project structure, and writing your first lines of code. By the end of this guide, you’ll have a simple, functioning Electron app and an understanding of how to start building more complex applications.

  • Building Cross-Platform Desktop Apps with Web Technologies

    —

    by

    tayyaba
    in

    Explore the basics of Electron, a framework that allows you to build desktop applications using web technologies like JavaScript, HTML, and CSS. This post will cover Electron’s architecture, its core components, and how it enables you to develop applications that work on Windows, macOS, and Linux with a single codebase. Ideal for beginners who are…

  • View

    —

    by

    tayyaba
    in

    Create and layout native views. Process: Main This module cannot be used until the ready event of the app module is emitted. Class: View​ A basic native view. Process: Main View is an EventEmitter. new View()​ Creates a new View. Instance Events​ Objects created with new View emit the following events: Event: ‘bounds-changed’​ Emitted when the view’s bounds have changed in response to being laid out.…

  • WebFrameMain

    —

    by

    tayyaba
    in

    Control web pages and iframes. Process: Main The webFrameMain module can be used to lookup frames across existing WebContents instances. Navigation events are the common use case. You can also access frames of existing pages by using the mainFrame property of WebContents. Methods​ These methods can be accessed from the webFrameMain module: webFrameMain.fromId(processId, routingId)​ Returns WebFrameMain | undefined – A frame with the given process and routing…

  • WebContentsView

    —

    by

    tayyaba
    in

    A View that displays a WebContents. Process: Main This module cannot be used until the ready event of the app module is emitted. Class: WebContentsView extends View​ A View that displays a WebContents. Process: Main WebContentsView inherits from View. WebContentsView is an EventEmitter. new WebContentsView([options])​ Creates a WebContentsView. Instance Properties​ Objects created with new WebContentsView have the following properties, in addition to those inherited from View: view.webContents Readonly​ A WebContents property containing…

  • WebContents

    —

    by

    tayyaba
    in

    Render and control web pages. Process: Main webContents is an EventEmitter. It is responsible for rendering and controlling a web page and is a property of the BrowserWindow object. An example of accessing the webContents object: Navigation Events​ Several events can be used to monitor navigations as they occur within a webContents. Document Navigations​ When a webContents navigates to another page (as opposed to an in-page…

  • UtilityProcess

    —

    by

    tayyaba
    in

    utilityProcess creates a child process with Node.js and Message ports enabled. It provides the equivalent of child_process.fork API from Node.js but instead uses Services API from Chromium to launch the child process. Process: Main Methods​ utilityProcess.fork(modulePath[, args][, options])​ Returns UtilityProcess Class: UtilityProcess​ Instances of the UtilityProcess represent the Chromium spawned child process with Node.js integration. UtilityProcess is an EventEmitter. Instance Methods​ child.postMessage(message, [transfer])​ Send a message…

  • Tray

    —

    by

    tayyaba
    in

    Class: Tray​ Add icons and context menus to the system’s notification area. Process: Main Tray is an EventEmitter. Platform Considerations Linux MacOS Windows new Tray(image, [guid])​ Creates a new tray icon associated with the image. Instance Events​ The Tray module emits the following events: Event: ‘click’​ Returns: Emitted when the tray icon is clicked. Note that on Linux this event is…

  • TouchBar

    —

    by

    tayyaba
    in

    Class: TouchBar​ Create TouchBar layouts for native macOS applications Process: Main new TouchBar(options)​ Creates a new touch bar with the specified items. Use BrowserWindow.setTouchBar to add the TouchBar to a window. Note: The TouchBar API is currently experimental and may change or be removed in future Electron releases. Tip: If you don’t have a MacBook with Touch Bar, you can use Touch Bar…