{"id":15542101,"url":"https://github.com/lifeart/async-dom","last_synced_at":"2025-04-23T17:11:54.494Z","repository":{"id":144803689,"uuid":"115360186","full_name":"lifeart/async-dom","owner":"lifeart","description":"Async Dom - is cover repo, conataining list of different JS demos, where DOM is created inside web-worker and streamed to main browser thread","archived":false,"fork":false,"pushed_at":"2024-04-23T06:18:59.000Z","size":1853,"stargazers_count":35,"open_issues_count":2,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-23T17:11:47.571Z","etag":null,"topics":["60fps","animations","async-dom","dom","dom-modifications","javascript","stream","web-worker","websocket"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lifeart.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"publiccode":null,"codemeta":null}},"created_at":"2017-12-25T19:54:36.000Z","updated_at":"2024-04-23T06:18:56.000Z","dependencies_parsed_at":"2024-04-23T07:58:44.545Z","dependency_job_id":"23244f5a-e4c3-4567-a7e5-f549242f6947","html_url":"https://github.com/lifeart/async-dom","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/lifeart%2Fasync-dom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifeart%2Fasync-dom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifeart%2Fasync-dom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifeart%2Fasync-dom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lifeart","download_url":"https://codeload.github.com/lifeart/async-dom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250477810,"owners_count":21437049,"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":["60fps","animations","async-dom","dom","dom-modifications","javascript","stream","web-worker","websocket"],"created_at":"2024-10-02T12:20:41.151Z","updated_at":"2025-04-23T17:11:54.450Z","avatar_url":"https://github.com/lifeart.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# async-dom\nAsync Dom\n\n------------------------------------------\n# Demos in https://github.com/lifeart/demo-async-dom/\n------------------------------------------\n\n2 apps separately running in web-workers, using async dom https://lifeart.github.io/async-dom/\n\n# Supported WebWorker/NodeJs websockets DOM implementations\n* Pseudo Dom\n* JSDom\n* Simple Dom\n* Domino\n\n# Features\n\n* Scoped DOM (support multiple workers and applications rendering in single DOCUMENT at one time)\n* Support multiple DOM implementations\n* Ability to batch WW messages\n* Ability to skip some DOM changes\n* Ability to stream DOM updates from nodejs server\n* Render VM on main thread with custom rendering control (frames batching, ordering, etc)\n\n\n# How to run glimmer streaming from websockets?\n\n1. `npm install`\n2. `npm run serve`\n3. `visit http://127.0.0.1:8080`\n\n# Logic\n\n1. All DOM modifications collected in single pool\n2. For each `requestAnimationFrame` we create fittable modifications list (pool slice)\n3. If our modifications took more than 16ms, we put remaining modifications back to pool\n4. Repeat all operations for next frame\n\n* DOM modifications are sorted for optimal \"rolling changes\" (first create an element, add styles, and then add to DOM (not create an element, add to DOM, add styles))\n* Optional DOM modifications (if the performance does not allow this modification, it is thrown out of the queue)\n* Modifications orioritization and batching (you can create an array of modifications that will always be executed within a single frame)\n\n# Description\nThis is a proof of concept of asynchronous DOM modification example with:\n* event binding\n* DOM modifications batching\n* 60 fps performance\n* optional DOM updates\n\n# Main thread (DOM EventLoop)\n* Only DOM update logic\n\n# WebWorker \n* Business logic\n* All DOM modifications came from WebWorker and applyed to Main thread DOM\n\n\n# RealLife usage?\n\n1. Share NDA UI's (user can't copy js logic) / for UI demos\n2. SmartTV -\u003e execute complicated buisiness logic (math) on backend and stream smooth ui\n3. Marketing - \u003e track user experience (websocket can broadcast ui changes for multiple users)\n4. Parallel editing demo -\u003e catch events from 2+ users and apply to single app\n5. Internet of things -\u003e execute app and stream result to any device\n6. DOM rendering time-traveling for JS frameworks debugging\n7. Rendering testing -\u003e if snapshots/chunks are same - UI is good\n8. You can run zoo of frameworks/(different versions of framework) on one page in web workers and use all of them, without iframes and side effects\n9. You can use async-dom to create bridge for `react-native` etc -\u003e glimmer working with DOM -\u003e `DOM` modifications converted to `react-native` events using async-dom, you don't need to use custom(platform) dom implementation, all you need - write dom converter, but i'm not sure )\n10. Usage in Quizz/Exam/Education solutions / user can't cheat, because have no access to apis and source code\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flifeart%2Fasync-dom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flifeart%2Fasync-dom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flifeart%2Fasync-dom/lists"}