{"id":13601023,"url":"https://github.com/albrow/vdom","last_synced_at":"2025-04-11T01:30:41.379Z","repository":{"id":27852751,"uuid":"31343208","full_name":"albrow/vdom","owner":"albrow","description":"A virtual dom implementation written in go which is compatible with gopherjs","archived":true,"fork":false,"pushed_at":"2022-12-16T03:17:43.000Z","size":516,"stargazers_count":92,"open_issues_count":2,"forks_count":12,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-11-07T03:42:39.298Z","etag":null,"topics":["gopherjs"],"latest_commit_sha":null,"homepage":null,"language":"Go","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/albrow.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-02-26T00:34:20.000Z","updated_at":"2024-07-09T09:48:58.000Z","dependencies_parsed_at":"2023-01-14T07:37:08.473Z","dependency_job_id":null,"html_url":"https://github.com/albrow/vdom","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/albrow%2Fvdom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/albrow%2Fvdom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/albrow%2Fvdom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/albrow%2Fvdom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/albrow","download_url":"https://codeload.github.com/albrow/vdom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248324999,"owners_count":21084848,"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":["gopherjs"],"created_at":"2024-08-01T18:00:52.942Z","updated_at":"2025-04-11T01:30:40.873Z","avatar_url":"https://github.com/albrow.png","language":"Go","readme":"vdom\n====\n\n[![GoDoc](https://godoc.org/github.com/albrow/vdom?status.svg)](https://godoc.org/github.com/albrow/vdom)\n\nvdom is a virtual dom implementation written in go which is compatible with\n[gopherjs](http://www.gopherjs.org/) and inspired by\n[react.js](http://facebook.github.io/react/). The primary purpose of\nvdom is to improve the performance of view rendering in\n[humble](https://github.com/soroushjp/humble), a framework that lets you write\nfrontend web apps in pure go and compile them to js to be run in the browser.\nHowever, vdom is framework agnostic, and generally will work whenever you can\nrender html for your views as a slice of bytes.\n\n\nDevelopment Status\n------------------\n\nvdom is no longer actively maintained. Additionally, ad hoc testing suggests that it might currently\nbe slower than `setInnerHTML` in at least some cases.\n\nMost users today will likely want to use WebAssembly instead of GopherJS.\n\nStill, this repo might be a decent starting point for anyone wishing to create a virtual DOM implementation\nin Go.\n\nBrowser Compatibility\n---------------------\n\nvdom has been tested and works with IE9+ and the latest versions of Chrome, Safari, and Firefox.\n\nJavascript code generated with gopherjs uses typed arrays, so in order to work with IE9, you will\nneed a polyfill. There is one in karma/js/support/polyfill/typedarray.js which is used for the\nkarma tests.\n\n\nInstalling\n----------\n\nAssuming you have already installed go and set up your go workspace, you can install\nvdom like you would any other package:\n\n`go get github.com/albrow/vdom`\n\nImport in your go code:\n\n`import \"github.com/albrow/vdom\"`\n\nInstall the latest version of [gopherjs](https://github.com/gopherjs/gopherjs), which\ncompiles your go code to javascript:\n\n`go get -u github.com/gopherjs/gopherjs`\n\nWhen you are ready, compile your go code to javascript using the `gopherjs` command line\ntool. Then include the resulting js file in your application.\n\n\nQuickstart Guide\n----------------\n\nI'll update this section when all functionality is completed. For now, here's a preview\nof what usage will probably look like.\n\nAssuming you have a go html template called todo.tmpl:\n\n```html\n\u003cli class=\"todo-list-item {{ if .Completed }} completed {{ end }}\"\u003e\n\t\u003cinput class=\"toggle\" type=\"checkbox\" {{ if .Completed }} checked {{ end }}\u003e\n\t\u003clabel class=\"todo-label\"\u003e{{ .Title }}\u003c/label\u003e\n\t\u003cbutton class=\"destroy\"\u003e\u003c/button\u003e\n\t\u003cinput class=\"edit\" onfocus=\"this.value = this.value;\" value=\"{{ .Title }}\"\u003e\n\u003c/li\u003e\n```\n\nAnd a Todo view/model type that looks like this:\n\n```go\ntype Todo struct {\n\tTitle     string\n\tCompleted bool\n\tRoot    dom.Element\n\ttree      *vdom.Tree\n}\n```\n\nYou could do the following:\n\n```go\nvar todoTmpl = template.Must(template.ParseFiles(\"todo.tmpl\"))\n\nfunc (todo *Todo) Render() error {\n\t// Execute the template with the given todo and write to a buffer\n\tbuf := bytes.NewBuffer([]byte{})\n\tif err := tmpl.Execute(buf, todo); err != nil {\n\t\treturn err\n\t}\n\t// Parse the resulting html into a virtual tree\n\tnewTree, err := vdom.Parse(buf.Bytes())\n\tif err != nil {\n\t\treturn err\n\t}\n\t// Calculate the diff between this render and the last render\n\tpatches, err := vdom.Diff(todo.tree, newTree)\n\tif err != nil {\n\t\treturn err\n\t}\n\t// Effeciently apply changes to the actual DOM\n\tif err := patches.Patch(todo.Root); err != nil {\n\t\treturn err\n\t}\n\t// Remember the virtual DOM state for the next render to diff against\n\ttodo.tree = newTree\n}\n```\n\nTesting\n-------\n\nvdom uses three sets of tests. If you're on a unix system, you can run all the tests\nin one go with `scripts/test.sh`. The script also compiles the go files to javsacript each\ntime it runs. You will still need to install the dependencies for the script to work correctly.\n\n### Go Tests\n\nTraditional go tests can be run with `go test .`. These tests are for code which does not\ninteract with the DOM or depend on js-specific features.\n\n### Gopherjs Tests\n\nYou can run `gopherjs test github.com/albrow/vdom` to compile the same tests from above\nto javascript and tests them with node.js. This will also test some code which might depend\non js-specific features (but not the DOM) and can't be tested with pure go. You will need\nto install [node.js](http://nodejs.org/) to run these tests.\n\n### Karma Tests\n\nvdom uses karma and the jasmine test framework to test code that interacts with the DOM in\nreal browsers. You will need to install these dependencies:\n\n- [node.js](http://nodejs.org/)\n- [karma](http://karma-runner.github.io/0.12/index.html)\n- [karma-jasmine](https://github.com/karma-runner/karma-jasmine)\n\nDon't forget to also install the karma command line tools with `npm install -g karma-cli`.\n\nYou will also need to install a launcher for each browser you want to test with, as well as the\nbrowsers themselves. Typically you install a karma launcher with `npm install -g karma-chrome-launcher`.\nYou can edit the config files `karma/test-mac.conf.js` and `karma/test-windows.conf.js` if you want\nto change the browsers that are tested on. The Mac OS config specifies Chrome, Firefox, and Safari, and\nthe Windows config specifies IE9-11, Chrome, and Firefox. You only need to install IE11, since the \nolder versions can be tested via emulation.\n\nOnce you have installed all the dependencies, start karma with `karma start karma/test-mac.conf.js` or \n`karma start karma/test-windows.conf.js` depending on your operating system. If you are using a unix\nmachine, simply copy one of the config files and edit the browsers section as needed. Once karma is\nrunning, you can keep it running in between tests.\n\nNext you need to compile the test.go file to javascript so it can run in the browsers:\n\n```\ngopherjs build karma/go/test.go -o karma/js/test.js\n```\n\nFinally run the tests:\n\n```\nkarma run\n```\n\nBenchmarking\n------------\n\nvdom uses three sets of benchmarks. If you're on a unix system, you can run all the benchmarks\nin one go with `scripts/bench.sh`. The script also compiles the go files to javsacript each\ntime it runs. You will still need to install the dependencies for the script to work correctly.\n\n**NOTE:** There are some additional dependencies for benchmarking that are not needed for testing.\n\n### Go Benchmarks\n\nTraditional go benchmarks can be run with `go test -bench . -run none`. I don't expect you\nto be using vdom in a pure go context (but there's nothing stopping you from doing so!), so\nthese tests mainly serve as a comparison to the gopherjs benchmarks. It also helps with\ncatching obvious performance problems early.\n\n### Gopherjs Benchmarks\n\nTo compile the library to javascript and benchmark it with node.js, you can run\n`gopherjs test github.com/albrow/vdom --bench=. --run=none`. These benchmarks are only\nfor code that doesn't interact directly with the DOM. You will need to install\n[node.js](http://nodejs.org/) to run these benchmarks.\n\n### Karma Benchmarks\n\nvdom uses karma and benchmark.js to test code that interacts with the DOM in real browsers.\nYou will need to install these dependencies:\n\n- [node.js](http://nodejs.org/)\n- [karma](http://karma-runner.github.io/0.12/index.html)\n- [karma-benchmark](https://github.com/JamieMason/karma-benchmark)\n\nDon't forget to also install the karma command line tools with `npm install -g karma-cli`.\n\nJust like with the tests, you will need to install a launcher for each browser you want to test with.\n\nOnce you have installed all the dependencies, start karma with `karma start karma/bench-mac.conf.js` or \n`karma start karma/bench-windows.conf.js` depending on your operating system. We have to use\ndifferent config files because of a [limitation of karma-benchmark](https://github.com/JamieMason/karma-benchmark/issues/7).\nYou will probably want to kill karma and restart it if you were running it with the test configuration.\nIf you are using a unix machine, simply copy one of the config files and edit the browsers section as\nneeded. Once karma is running, you can keep it running in between benchmarks.\n\nNext you need to compile the bench.go file to javascript so it can run in the browsers:\n\n```\ngopherjs build karma/go/bench.go -o karma/js/bench.js\n```\n\nFinally run the benchmarks:\n\n```\nkarma run\n```\n","funding_links":[],"categories":["Go"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falbrow%2Fvdom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falbrow%2Fvdom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falbrow%2Fvdom/lists"}