{"id":13800200,"url":"https://github.com/paf31/purescript-sdom","last_synced_at":"2025-10-22T19:36:08.546Z","repository":{"id":47814645,"uuid":"116535329","full_name":"paf31/purescript-sdom","owner":"paf31","description":"An experiment in replacing the virtual DOM and avoiding diffing","archived":true,"fork":false,"pushed_at":"2018-06-24T03:34:25.000Z","size":78,"stargazers_count":162,"open_issues_count":7,"forks_count":13,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-05-02T12:06:11.355Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PureScript","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/paf31.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}},"created_at":"2018-01-07T03:50:43.000Z","updated_at":"2024-12-02T09:40:46.000Z","dependencies_parsed_at":"2022-09-02T16:26:58.716Z","dependency_job_id":null,"html_url":"https://github.com/paf31/purescript-sdom","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paf31%2Fpurescript-sdom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paf31%2Fpurescript-sdom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paf31%2Fpurescript-sdom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paf31%2Fpurescript-sdom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/paf31","download_url":"https://codeload.github.com/paf31/purescript-sdom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253913071,"owners_count":21983249,"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":[],"created_at":"2024-08-04T00:01:10.404Z","updated_at":"2025-10-22T19:36:08.212Z","avatar_url":"https://github.com/paf31.png","language":"PureScript","readme":"# purescript-sdom\n\nAn experiment in replacing the virtual DOM and avoiding diffing.\n\n- [Module Documentation](generated-docs/)\n- Examples\n  - [Counter](examples/counter)\n  - [Select](examples/select)\n  - [Task List](examples/todo)\n  - [Async](examples/async)\n  - [Tree](examples/tree) (higher-order component)\n  - [Canvas](examples/canvas) (third-party component)\n\n## Motivation\n\nThe virtual DOM (VDOM) has become a very popular approach to developing applications\nin the browser, popularized by libraries like React. A simplified VDOM approach can be\nsummarized briefly as follows:\n\n- Choose a type `state` of _application states_.\n- Write a function `state -\u003e VDOM` from application states to a virtual DOM\n  representation of the UI.\n- Each time we reach a new state, use a function `diff :: VDOM -\u003e VDOM -\u003e Patch` to\n  compute the changes to the rendered virtual DOM.\n- Use a function `Patch -\u003e Eff (dom :: DOM) Unit` to _apply_ those changes to\n  the real DOM.\n\nThe VDOM approach has many benefits. However, many web apps which use a\nVDOM don't actually require one.\n\nConsider something like a web form which might contain text inputs and validation\nmessages. If you didn't have a virtual DOM, you would just lay out the form statically,\nset the initial attributes and text values, and add event handlers to update them.\nThe elements themselves would never change.\n\nA VDOM approach in this case might be considered overkill - why should I have to\ndiff two trees of components in order to update a simple label, when I can always\neasily figure out which label to update.\n\nA key benefit of the VDOM is that it hides the complexity of the DOM API behind\na simpler API with a clean denotation: an application is a function from states\nto a conceptual representation of the UI. However, operationally it is very heavy.\nThe potential problem is that the `diff` function above might be quite expensive\nto compute. With well-chosen keys on every node, it might be possible to tune this\ncomputation, but there are other options available.\n\nThis library introduces the SDOM, or \"static DOM\". The idea is that by restricting\ncomponents so that the \"shape\" of the UI becomes static, we can keep the clean\ndenotation of the VDOM approach, but simplify the operational side dramatically.\nThe SDOM consists of a static tree of components, with only the leaves (text nodes and\nattributes) changing over time. The SDOM approach also allows for limited forms of dynamic\nbehavior, such as a component which renders a (uniform) array of subcomponents.\n\nIn practice, this is not so much of a restriction, and the limited form of dynamic behavior\nis enough to emulate most common UI patterns. Indeed, working with the SDOM is quite\nreminiscent of template-based approaches to UI development, but keeping the \"one\nway binding\" approach which is commonly associated with the VDOM.\n\n### More\nFor a more extensive motivation of the SDOM approach, an explanation of the \nunderlying approach and how it was developed, you may want to check out this \n[blog post](http://blog.functorial.com/posts/2018-03-12-You-Might-Not-Need-The-Virtual-DOM.html).\n","funding_links":[],"categories":["UI Libraries"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaf31%2Fpurescript-sdom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpaf31%2Fpurescript-sdom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaf31%2Fpurescript-sdom/lists"}