{"id":15648113,"url":"https://github.com/gaplo917/react-offload-ui-thread-research","last_synced_at":"2025-06-23T19:33:58.376Z","repository":{"id":77489601,"uuid":"296810128","full_name":"gaplo917/react-offload-ui-thread-research","owner":"gaplo917","description":"React offload UI Thread research","archived":false,"fork":false,"pushed_at":"2020-10-11T02:29:38.000Z","size":1869,"stargazers_count":41,"open_issues_count":0,"forks_count":2,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-30T16:46:31.760Z","etag":null,"topics":["comlink","react","research","webworker"],"latest_commit_sha":null,"homepage":"https://gaplo917.github.io/react-offload-ui-thread-research/?v=2","language":"TypeScript","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/gaplo917.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":"2020-09-19T07:22:36.000Z","updated_at":"2024-05-02T11:59:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"6ab0faec-b511-436c-90fd-80e01ddddcf9","html_url":"https://github.com/gaplo917/react-offload-ui-thread-research","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/gaplo917%2Freact-offload-ui-thread-research","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaplo917%2Freact-offload-ui-thread-research/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaplo917%2Freact-offload-ui-thread-research/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaplo917%2Freact-offload-ui-thread-research/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gaplo917","download_url":"https://codeload.github.com/gaplo917/react-offload-ui-thread-research/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251714941,"owners_count":21631806,"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":["comlink","react","research","webworker"],"created_at":"2024-10-03T12:23:36.464Z","updated_at":"2025-04-30T13:52:43.455Z","avatar_url":"https://github.com/gaplo917.png","language":"TypeScript","funding_links":["https://www.patreon.com/gaplotech"],"categories":[],"sub_categories":[],"readme":"# React Offload UI Thread Research\n\nWhen we develop a frontend application, we undoubtedly offload all kinds of I/O,\ncomputational tasks from UI thread to prevent UI thread is too busy and become\nunresponsive. **However, this rule doesn't apply to current web development**. The\ncurrent web developmennt **ONLY** offload the tasks to web worker when the application\nencounter performance issues but **NOT** by the tasks' nature.\n\n[Live Demo](https://gaplo917.github.io/react-offload-ui-thread-research/?v=2)\n\n### 120Hz is coming\n\n120Hz Web browsing is coming, the higher fps the shorter time for UI thread to process.\nConsider the 60Hz to 120Hz change, the \"smooth UI\" process cycle time changed from 16.67ms\nto 8.33ms, that halve the time we got from previous decade!\n\n\u003e An I/O call is non-blocking on UI thread doesn't mean that it doesn't use the UI thread\n\u003e CPU time.\n\nIn addition, the business requirements, validations, UI events also become more and more\ncomplex. If you need to build a hassle-free smooth 120Hz Web application, using web workers \nare unavoidable.\n\n### Painful and Time-consuming web worker development\n\nBecause of the learning curve of web workers, we are tempted to do everything\non UI thread like:\n\n- calling fragmented REST call and then **aggregate together**\n- calling a large GraphQL query and then apply **data transformation**\n- sorting, filtering and reduce differents kinds of data triggered by UI actions\n\nIt is because:\n\n- creating a web-worker and import existing npm modules into web worker is **painful**.\n- coding in a complete message driven style is **not intuitive, time-consuming, and repetitive**.\n- working in an **async UI pattern** requires more state to handle it.\n\n### Upcoming Possibility\n\nAs the [ComLink abstraction](https://github.com/GoogleChromeLabs/comlink)(turn a web\nworker to RPC-style function call) and\n[React Concurrent mode](https://reactjs.org/docs/concurrent-mode-intro.html) arise. I\nthink it is time to start thinking to adopt web worker **_in all cases_** - **completely\ndecouple a data accessing layer**, use browser's background thread for\n**ALL** I/O and data processing bu nature and then return to the UI thread for rendering.\n\nNothing is new, this was how we wrote a standard frontend application in other\nplatforms(iOS, Android, Windows, macOS, JVM) since multi-threaded CPU appeared.\n\nThis project is a\n[Comlink loader (Webpack)](https://github.com/GoogleChromeLabs/comlink-loader) decision\nresearch.\n\nTo access the complete research findings(WIP), you could access in\n[patreon](https://www.patreon.com/gaplotech).\n\n## Getting Started\n\n[![Edit gaplo917/react-offload-ui-thread-research](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/gaplo917/react-offload-ui-thread-research/tree/master/?fontsize=14\u0026hidenavigation=1)\n\nor try locally\n\n```\ngit clone https://github.com/gaplo917/react-offload-ui-thread-research.git\n\ncd react-offload-ui-thread-research\nyarn intall\n\n# start the demo\nyarn start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaplo917%2Freact-offload-ui-thread-research","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgaplo917%2Freact-offload-ui-thread-research","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaplo917%2Freact-offload-ui-thread-research/lists"}