{"id":13827770,"url":"https://github.com/developit/preact-worker-demo","last_synced_at":"2025-03-17T14:11:51.455Z","repository":{"id":66020074,"uuid":"77307450","full_name":"developit/preact-worker-demo","owner":"developit","description":"Demo of preact rendering an entire app in a Web Worker.","archived":false,"fork":false,"pushed_at":"2023-11-27T02:57:08.000Z","size":18,"stargazers_count":226,"open_issues_count":3,"forks_count":16,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-02-24T07:46:00.662Z","etag":null,"topics":["background-thread","demo","dom","preact","thread","virtual-dom","web-worker","webpack","workers"],"latest_commit_sha":null,"homepage":"https://preact-worker-demo.surge.sh","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/developit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2016-12-25T02:34:10.000Z","updated_at":"2024-10-04T14:09:00.000Z","dependencies_parsed_at":"2024-03-24T03:31:40.035Z","dependency_job_id":"3599159c-c3a1-4250-9428-6e10855a2e44","html_url":"https://github.com/developit/preact-worker-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developit%2Fpreact-worker-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developit%2Fpreact-worker-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developit%2Fpreact-worker-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developit%2Fpreact-worker-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/developit","download_url":"https://codeload.github.com/developit/preact-worker-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241960880,"owners_count":20049343,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["background-thread","demo","dom","preact","thread","virtual-dom","web-worker","webpack","workers"],"created_at":"2024-08-04T09:02:07.607Z","updated_at":"2025-03-05T04:14:14.636Z","avatar_url":"https://github.com/developit.png","language":"JavaScript","readme":"# A full [Preact] app rendering in a Web Worker [![gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/developit/preact)\n\n\u003ca href=\"https://preact-worker-demo.surge.sh\"\u003e\u003cimg src=\"http://i.imgur.com/7v881hw.gif\" width=\"204\" align=\"right\"\u003e\u003c/a\u003e\n\nHave you ever wondered if you could take advantage of Web Workers to render a Virtual DOM app in a background thread? This repo contains the source code of a [demo messaging app](https://preact-worker-demo.surge.sh) that does just that! 🌈\n\n\u003e ⚡️ A complete [Preact] app running _entirely_ within a Web Worker.\n\u003e\n\u003e 💁 For a high level overview of the approach, see [How It Works](#how-it-works).\n\u003e\n\u003e 🚀 This means your UI stays interactive at 60FPS, even if your application grinds to a halt in the background.\n\u003e\n\u003e ### **[💥 View Demo 💥](https://preact-worker-demo.surge.sh)**\n\n\n---\n\n\n# How It Works\n\nThe implementation is split into [renderer/dom.js](https://github.com/developit/preact-worker-demo/blob/master/src/renderer/dom.js) and [renderer/worker.js](https://github.com/developit/preact-worker-demo/blob/master/src/renderer/worker.js).  These modules live outside and inside the Worker (respectively), and communicate with eachother asynchronously via `postMessage()`.\n\nThe app's code, components, libraries and DOM are all isolated in a single Worker (background thread).  This means even [Preact]'s diff algorithm and component instantiation is done in the worker.  The main (UI) thread simply applies a stream of serialized DOM change descriptions ([MutationRecords]), and proxies events back to the Worker to be handled off the main thread.\n\nAs an optimization, when serializing DOM Elements to be published up to the UI thread, any previously-sent Elements are replaced with IDs. These are correlated through a mapping retained on both sides of the thread boundary.\n\n\n# Quick-Start Guide\n\n- [Installation](#installation)\n- [Development Workflow](#development-workflow)\n\n\n## Installation\n\n**1. Clone this repo:**\n\n```sh\ngit clone --depth 1 https://github.com/developit/preact-worker-demo.git\ncd preact-worker-demo\n```\n\n\n**2. Install the dependencies:**\n\n```sh\nnpm install\n```\n\n\u003e You're done installing! Now let's get started developing.\n\n\n\n## Development Workflow\n\n\n**3. Start a live-reload development server:**\n\n```sh\nPORT=8080 npm run dev\n```\n\n\n**4. Generate a production build in `./build`:**\n\n```sh\nnpm run build\n```\n\n\u003e You can now deploy the contents of the `build` directory to production!\n\u003e\n\u003e **[Surge.sh](https://surge.sh) Example:** `surge ./build -d my-app.surge.sh`\n\n\n**5. Start local production server with `superstatic`:**\n\n```sh\nnpm start\n```\n\n\u003e This is to simulate a production (CDN) server with gzip. It just serves up the contents of `./build`.\n\n\n---\n\n\n## License\n\nMIT\n\n\n[Preact]: https://developit.github.io/preact\n[MutationRecords]: https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevelopit%2Fpreact-worker-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevelopit%2Fpreact-worker-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevelopit%2Fpreact-worker-demo/lists"}