Skip to content

Async Dom - is cover repo, conataining list of different JS demos, where DOM is created inside web-worker and streamed to main browser thread

License

Notifications You must be signed in to change notification settings

lifeart/async-dom

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

95 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

async-dom

Async Dom



2 apps separately running in web-workers, using async dom https://lifeart.github.io/async-dom/

Supported WebWorker/NodeJs websockets DOM implementations

  • Pseudo Dom
  • JSDom
  • Simple Dom
  • Domino

Features

  • Scoped DOM (support multiple workers and applications rendering in single DOCUMENT at one time)
  • Support multiple DOM implementations
  • Ability to batch WW messages
  • Ability to skip some DOM changes
  • Ability to stream DOM updates from nodejs server
  • Render VM on main thread with custom rendering control (frames batching, ordering, etc)

How to run glimmer streaming from websockets?

  1. npm install
  2. npm run serve
  3. visit http://127.0.0.1:8080

Logic

  1. All DOM modifications collected in single pool
  2. For each requestAnimationFrame we create fittable modifications list (pool slice)
  3. If our modifications took more than 16ms, we put remaining modifications back to pool
  4. Repeat all operations for next frame
  • 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))
  • Optional DOM modifications (if the performance does not allow this modification, it is thrown out of the queue)
  • Modifications orioritization and batching (you can create an array of modifications that will always be executed within a single frame)

Description

This is a proof of concept of asynchronous DOM modification example with:

  • event binding
  • DOM modifications batching
  • 60 fps performance
  • optional DOM updates

Main thread (DOM EventLoop)

  • Only DOM update logic

WebWorker

  • Business logic
  • All DOM modifications came from WebWorker and applyed to Main thread DOM

RealLife usage?

  1. Share NDA UI's (user can't copy js logic) / for UI demos
  2. SmartTV -> execute complicated buisiness logic (math) on backend and stream smooth ui
  3. Marketing - > track user experience (websocket can broadcast ui changes for multiple users)
  4. Parallel editing demo -> catch events from 2+ users and apply to single app
  5. Internet of things -> execute app and stream result to any device
  6. DOM rendering time-traveling for JS frameworks debugging
  7. Rendering testing -> if snapshots/chunks are same - UI is good
  8. 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
  9. You can use async-dom to create bridge for react-native etc -> glimmer working with DOM -> 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 )
  10. Usage in Quizz/Exam/Education solutions / user can't cheat, because have no access to apis and source code

About

Async Dom - is cover repo, conataining list of different JS demos, where DOM is created inside web-worker and streamed to main browser thread

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published