Skip to content

Latest commit

 

History

History
204 lines (133 loc) · 10.4 KB

development.md

File metadata and controls

204 lines (133 loc) · 10.4 KB
Raw

Development Guide

This page includes technical documentation for developers who want to build the IDE locally and contribute to the project.

Architecture overview

The IDE consists of three major parts:

  • the Electron main process,
  • the backend, and
  • the frontend.

The Electron main process is responsible for:

  • creating the application,
  • managing the application lifecycle via listeners, and
  • creating and managing the web pages for the app.

In Electron, the process that runs the main entry JavaScript file is called the main process. The Electron main process can display a GUI by creating web pages. An Electron app always has exactly one main process.

By default, whenever the Electron main process creates a web page, it will instantiate a new BrowserWindow instance. Since Electron uses Chromium for displaying web pages, Chromium's multi-process architecture is also used. Each web page in Electron runs in its own process, which is called the renderer process. Each BrowserWindow instance runs the web page in its own renderer process. When a BrowserWindow instance is destroyed, the corresponding renderer process is also terminated. The main process manages all web pages and their corresponding renderer processes. Each renderer process is isolated and only cares about the web page running in it.[1]

In normal browsers, web pages usually run in a sandboxed environment, and accessing native resources are disallowed. However, Electron has the power to use Node.js APIs in the web pages allowing lower-level OS interactions. Due to security reasons, accessing native resources is an undesired behavior in the IDE. So nodeIntegration is disabled, and context isolation is enabled.

The backend process is responsible for:

  • providing access to the filesystem,
  • communicating with the Arduino CLI via gRPC,
  • running your terminal,
  • exposing additional RESTful APIs,
  • performing the Git commands in the local repositories,
  • hosting and running any VS Code extensions, or
  • executing VS Code tasks[2].

The Electron main process spawns the backend process. There is always exactly one backend process. However, due to performance considerations, the backend spawns several sub-processes for the filesystem watching, Git repository discovery, etc. The communication between the backend process and its sub-processes is established via IPC. Besides spawning sub-processes, the backend will start an HTTP server on a random available port, and serves the web application as static content. When the sub-processes are up and running, and the HTTP server is also listening, the backend process sends the HTTP server port to the Electron main process via IPC. The Electron main process will load the backend's endpoint in the BrowserWindow.

The frontend is running as an Electron renderer process and can invoke services implemented on the backend. The communication between the backend and the frontend is done via JSON-RPC over a websocket connection. This means, the services running in the frontend are all proxies, and will ask the corresponding service implementation on the backend.

Additional Components

This repository contains the main code, but two more repositories are included during the build process:

Prerequisites

Build from source

ⓘ If you only want to test an existing version of the project, automatically generated builds are available for download without building from source. See the instructions in the beta testing guide.

If you’re familiar with TypeScript, the Theia IDE, and if you want to contribute to the project, you should be able to build the Arduino IDE locally. Please refer to the Theia IDE prerequisites documentation for the setup instructions.

Once you have all the tools installed, you can build the editor following these steps

Run From Source

If you want to develop the application, do the following:

  1. Clone the project from Git and change directory to the arduino-ide folder:

    git clone https://github.com/arduino/arduino-ide.git
    cd arduino-ide

  2. Install the dependencies

    yarn

  3. Build the application in development mode

    yarn build:dev

  4. Open the project in VS Code

    code .

    ⓘ For more details on how to start VS Code from the command line, see here.

  5. Rebuild the native dependencies for electron

    • Ctrl/⌘+Shift+P to open the Command Palette.
    • Type Tasks: Run Task and press Enter.
    • Type Rebuild App and press Enter.
    • Wait for the "Rebuild App" task to finish, as indicated by a "✔ Rebuild Complete" message in the Terminal.

  6. Start the TypeScript compiler + webpack in watch mode

    • Ctrl/⌘+Shift+P.
    • Type Tasks: Run Task and press Enter.
    • Type Watch All and press Enter.
    • Select how you want to scan the task output. You can press Enter or Esc. Click here to learn more.

  7. Start the application in debug mode

    • Open the Run and Debug view with Ctrl/⌘+Shift+D,
    • Select App from the dropdown,
    • Start debugging with F5.

If you change the backend application, you must restart the electron app in debug mode to use the changes. If you change the frontend application, it's sufficient to reload the board window with Reload Window command from the Command Palette.

Bundle the Application

If you want to bundle the application, execute the following:

  1. Rebuild the native dependencies for electron

    yarn --cwd electron-app rebuild

  2. Bundle the frontend and backend applications with webpack

    yarn --cwd electron-app build

  3. Package the application

    yarn --cwd electron-app package

Notes for Windows contributors

Windows requires the Microsoft Visual C++ (MSVC) compiler toolset to be installed on your development machine.

In case it's not already present, it can be downloaded from the "Tools for Visual Studio 20XX" section of the Visual Studio downloads page via the "Build Tools for Visual Studio 20XX" (e.g., "Build Tools for Visual Studio 2022") download link.

Select "Desktop development with C++" from the "Workloads" tab during the installation procedure.

Running Checks

To run the tests, you must rebuild the native dependencies for the browser target. See this for the technical explanation.

  1. Rebuild the native dependencies for the browser

    yarn rebuild:browser

  2. To run the tests

    yarn test

  3. To run the slow tests

    yarn test:slow

If you want to debug an individual file, open the test module (*.test.ts or *.slow-test.ts), open the Run and Debug view, select the Run Test [current] and press F5.

CI

This project is built on GitHub Actions.

  • Snapshot builds run when changes are pushed to the main branch, or when a PR is created against the main branch. For the sake of the review and verification process, the build artifacts for each operating system can be downloaded from the GitHub Actions page.
  • Nightly builds run every day at 03:00 GMT from the main branch.
  • Release builds run when a new tag is pushed to the remote. The tag must follow the semver. For instance, 1.2.3 is a correct tag, but v2.3.4 won't work. Steps to trigger a new release build:
    • Create a local tag:
    git tag -a 1.2.3 -m "Creating a new tag for the `1.2.3` release."
    • Push it to the remote:
     git push origin 1.2.3

FAQ

  • Can I manually change the version of the arduino-cli used by the IDE?

    Yes. It is possible but not recommended. The CLI exposes a set of functionality via gRPC and the IDE uses this API to communicate with the CLI. Before we build a new version of IDE, we pin a specific version of CLI and use the corresponding proto files to generate TypeScript modules for gRPC. This means, a particular version of IDE is compliant only with the pinned version of CLI. Mismatching IDE and CLI versions might not be able to communicate with each other. This could cause unpredictable IDE behavior.

  • I have understood that not all versions of the CLI are compatible with my version of IDE but how can I manually update the arduino-cli inside the IDE?

    Get the desired version of arduino-cli for your platform and manually replace the one inside the IDE. The CLI can be found inside the IDE at:

    • Windows: C:\path\to\Arduino IDE\resources\app\lib\backend\resources\arduino-cli.exe,
    • macOS: /path/to/Arduino IDE.app/Contents/Resources/app/lib/backend/resources/arduino-cli, and
    • Linux: /path/to/Arduino IDE/resources/app/lib/backend/resources/arduino-cli.