Skip to main content
100%

Hello World!

✓ Published0🌍 Public
ZZaitsev
Last edited Apr 18, 2024
Created on Apr 18, 2024

This example demonstrates a minimal Electron application that displays runtime versions for Node.js, Chromium, and Electron while also enabling worker-thread communication. It shows a button that triggers a streaming data exchange via the MessageChannel API, where a worker thread sends ten messages back to the renderer process. The main process uses `ipcMain.on` to handle requests and spawns a Node.js Worker, while the renderer relies on `ipcRenderer.postMessage` and `MessageChannel` ports for bidirectional messaging. The code uses Electron 28, Node.js worker threads, and plain HTML/CSS for the interface.

AI-generated description

Similar vizzes

Loading thumbnail…

Minimal WebWorker example

This example demonstrates a minimal use of the Web Worker API to exchange messages between a main thread and a background worker. It shows a round-trip communication where `main.js` creates a `Worker` from `worker.js`, posts the string "ping", and logs the worker's reply "pong" to the console, while the worker logs its received message. The code relies on the native `Worker`, `postMessage`, and `onmessage` APIs, with no external libraries, and uses a simple JavaScript file pair as the data source.

TThomasG77
68% match
Loading thumbnail…

Gist 164876

This example demonstrates a minimal two-way communication setup between a main HTML page and a background worker thread, using the `Worker` API to offload a request. The worker script `my_worker.js` uses `XMLHttpRequest` to fetch `http://www.google.com/` and posts the response text back to the main page via `postMessage`, which is displayed through an `alert`. The code shows the basic pattern of instantiating a `Worker`, assigning an `onmessage` handler, and triggering an asynchronous request, but it does not include any data visualization or rendering.

XXXX
65% match
Loading thumbnail…

Hello world

This example demonstrates the minimal setup for a VizHub V3 visualization, rendering a simple text message inside a container element using pure JavaScript. The code exports a `main` function that receives the container and options, displaying “Hello World” with the default styling. It highlights the runtime’s interactive widget support, where holding the Alt key and dragging a numeric value in the editor triggers continuous hot reloading. The example uses no external libraries, showcasing the streamlined entry point with `index.js` instead of an `index.html` file.

Llsq15916098304@qq.com
62% match
Loading thumbnail…

Hello World

This example demonstrates a simple interactive message display. It shows how to use ES6 modules and D3’s import system by loading D3 from UNKP, importing a local `myMessage.js` module, and updating HTML content via `document.getElementById().textContent`. The text is styled with CSS, centered and enlarged, while the JavaScript sets the message to “Hi” on load. The code highlights basic DOM manipulation and module imports in a minimal VizHub setup.

ZZihan (Lexie) Zhou
62% match
Loading thumbnail…

Gist eeac85f83bbc682a4f2d

This example demonstrates how to run a simple inline Web Worker that greets a user by name, with a fallback to executing the worker script on the main thread when the browser lacks necessary APIs. It uses a `<script type="javascript/worker">` block for the worker code and the `runWorkerJs` helper, which checks for `Blob`, `BlobBuilder`, `URL.createObjectURL`, and `Worker` support. If those are available, it creates a worker from the script’s text and posts a parameter object; otherwise, it evals the script in a proxy scope. The result updates the page body text.

PPhilippe Rivière
60% match
Loading thumbnail…

Hello World!

This example demonstrates the basic workflow of a VizHub project, showing how a single text message is rendered to the page using a module structure. It explicitly loads D3 via UNPKG and uses ES6 `import` statements in `index.js` to import the message from a local ES6 module (`main.js`). The code then writes the message to the DOM by accessing the `<pre id="message-element">` element’s `textContent` property, with the HTML file loading the compiled `bundle.js` script.

Aatheeralattar
60% match
Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders two distinct text messages on a single page. It shows a static “Hello World” message using direct DOM manipulation via `document.getElementById` and `textContent`, alongside a larger “Hello React!” message rendered with React and ReactDOM. The code uses React 16.10 and ReactDOM to mount a functional component into a root div, while an HTML pre-element is populated outside React’s component tree. A bundle.js file, referenced in the HTML, is expected to contain the compiled React code.

Sshelbiekim
60% match
Loading thumbnail…

5

This example demonstrates the VizHub V3 runtime environment’s core workflow by rendering a single, large “Hello World!” message centered on the page. It shows how a simple `main` function receives a container element and writes directly to its `innerHTML`, using an inline style with a fixed font size. The code highlights the minimal setup required: no `index.html` file is needed, as the runtime injects the container and calls the exported `main` function. The example serves as a blank-slate starting point, illustrating how state management works through the optional `state` and `setState` parameters, though this instance does not use them.

RRakesh Kumar Chekuri
60% match