Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/lifeart/async-dom

Async Dom - is cover repo, conataining list of different JS demos, where DOM is created inside web-worker and streamed to main browser thread
https://github.com/lifeart/async-dom

60fps animations async-dom dom dom-modifications javascript stream web-worker websocket

Last synced: 3 months ago
JSON representation

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

Awesome Lists containing this project

README 

        
# async-dom

Async Dom



------------------------------------------

# Demos in https://github.com/lifeart/demo-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