GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → developit → Preact Worker Demo

developit / Preact Worker Demo

Demo of preact rendering an entire app in a Web Worker.

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

webpackdemodompreactthreadvirtual-domworkersweb-worker

Projects that are alternatives of or similar to Preact Worker Demo

Via.js
Write JS code that runs in a different context. E.g. use the DOM in a Web Worker.
Stars: ✭ 412 (+101.96%)
Mutual labels:  workers, web-worker, dom
Redux React Starter
DEPRECATED use the new https://github.com/didierfranc/react-webpack-4
Stars: ✭ 137 (-32.84%)
Mutual labels:  webpack, virtual-dom, preact
Preact
⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
Stars: ✭ 30,527 (+14864.22%)
Mutual labels:  virtual-dom, dom, preact
Worker Plugin
👩‍🏭 Adds native Web Worker bundling support to Webpack.
Stars: ✭ 1,840 (+801.96%)
Mutual labels:  webpack, workers, web-worker
React Native Threads
Create new JS processes for CPU intensive work
Stars: ✭ 527 (+158.33%)
Mutual labels:  thread, workers, web-worker
Val
VirtualDOM abstraction layer - give yourself better integration and full control over the DOM with any virtual DOM library that uses a Hyperscript-like API such as React and Preact.
Stars: ✭ 181 (-11.27%)
Mutual labels:  virtual-dom, dom, preact
Webworkify Webpack
launch a web worker at runtime that can require() in the browser with webpack
Stars: ✭ 105 (-48.53%)
Mutual labels:  webpack, workers, web-worker
Goober
🥜 goober, a less than 1KB 🎉 css-in-js alternative with a familiar API
Stars: ✭ 2,317 (+1035.78%)
Mutual labels:  dom, preact
Workly
A really simple way to move a function or class to a web worker. 🏋️‍♀️→ 😄
Stars: ✭ 1,848 (+805.88%)
Mutual labels:  thread, web-worker
Preact Portal
📡 Render Preact components in (a) SPACE 🌌 🌠
Stars: ✭ 160 (-21.57%)
Mutual labels:  dom, preact
Preact Redux Example
🔁 Preact + Redux Example Project
Stars: ✭ 199 (-2.45%)
Mutual labels:  demo, preact
Blog
这是一个Blog， 如果喜欢可以订阅，是Watch, 不是 Star 哈。。。
Stars: ✭ 161 (-21.08%)
Mutual labels:  webpack, demo
Preact Markup
⚡️ Render HTML5 as VDOM, with Components as Custom Elements!
Stars: ✭ 167 (-18.14%)
Mutual labels:  dom, preact
Omil
📝Webpack loader for Omi.js React.js and Rax.js components 基于 Omi.js，React.js 和 Rax.js 单文件组件的webpack模块加载器
Stars: ✭ 140 (-31.37%)
Mutual labels:  webpack, preact
Omi
Front End Cross-Frameworks Framework - 前端跨框架跨平台框架
Stars: ✭ 12,153 (+5857.35%)
Mutual labels:  virtual-dom, preact
Virtual Dom
关于Vue，React，Preact和Omi等框架源码的解读
Stars: ✭ 139 (-31.86%)
Mutual labels:  virtual-dom, preact
Squark
Rust frontend framework, for web browser and more.
Stars: ✭ 162 (-20.59%)
Mutual labels:  virtual-dom, dom
Workerize Loader
🏗️ Automatically move a module into a Web Worker (Webpack loader)
Stars: ✭ 2,135 (+946.57%)
Mutual labels:  webpack, web-worker
Amplesdk
Ample SDK - JavaScript UI Framework
Stars: ✭ 169 (-17.16%)
Mutual labels:  virtual-dom, dom
Vue2 Demo
Vue 基于 Genesis + TS + Vuex 实现的 SSR demo
Stars: ✭ 2,072 (+915.69%)
Mutual labels:  webpack, demo
View All Similar Projects ➔

A full Preact app rendering in a Web Worker gitter

Have 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 that does just that! 🌈

⚡️ A complete Preact app running entirely within a Web Worker.

💁 For a high level overview of the approach, see How It Works.

🚀 This means your UI stays interactive at 60FPS, even if your application grinds to a halt in the background.

💥 View Demo 💥

How It Works

The implementation is split into renderer/dom.js and renderer/worker.js. These modules live outside and inside the Worker (respectively), and communicate with eachother asynchronously via postMessage().

The 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.

As 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.

Quick-Start Guide

Installation

1. Clone this repo:

git clone --depth 1 https://github.com/developit/preact-worker-demo.git
cd preact-worker-demo

2. Install the dependencies:

npm install

You're done installing! Now let's get started developing.

Development Workflow

3. Start a live-reload development server:

PORT=8080 npm run dev

4. Generate a production build in ./build:

npm run build

You can now deploy the contents of the build directory to production!

Surge.sh Example: surge ./build -d my-app.surge.sh

5. Start local production server with superstatic:

npm start

This is to simulate a production (CDN) server with gzip. It just serves up the contents of ./build.

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].