{"id":17537730,"url":"https://github.com/bates64/oof","last_synced_at":"2025-10-31T00:32:39.664Z","repository":{"id":90641113,"uuid":"114466131","full_name":"bates64/oof","owner":"bates64","description":"😤 Tiny JS framework for creating frontend components","archived":false,"fork":false,"pushed_at":"2017-12-18T17:12:16.000Z","size":29,"stargazers_count":5,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-23T21:07:27.794Z","etag":null,"topics":["es6","framework","js","ui"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/bates64.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,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2017-12-16T14:18:46.000Z","updated_at":"2019-03-28T08:30:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"9de7d8eb-3a61-4f5f-83cf-f066a2eb97d5","html_url":"https://github.com/bates64/oof","commit_stats":null,"previous_names":["bates64/oof"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bates64%2Foof","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bates64%2Foof/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bates64%2Foof/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bates64%2Foof/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bates64","download_url":"https://codeload.github.com/bates64/oof/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250514784,"owners_count":21443209,"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":["es6","framework","js","ui"],"created_at":"2024-10-20T20:42:36.404Z","updated_at":"2025-10-31T00:32:34.609Z","avatar_url":"https://github.com/bates64.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align='center'\u003e 😤 oof \u003c/h1\u003e\n\n\u003cdiv align='center'\u003e\n  \u003cstrong\u003e Tiny framework for creating frontend components \u003c/strong\u003e\n\u003c/div\u003e\n\n\u003cdiv align='center'\u003e\n  \u003ch3\u003e\n    \u003ca href='#using-oof'\u003e Usage \u003c/a\u003e\n    \u003cspan\u003e | \u003c/span\u003e\n    \u003ca href='https://github.com/heyitsmeuralex/oof/wiki'\u003e Documentation \u003c/a\u003e\n  \u003c/h3\u003e\n\u003c/div\u003e\n\noof is a tiny, simple, reactive UI framework for JavaScript.\n\n### What does it look like?\n\n```js\nclass Countdown extends oof.El {\n  init() {\n    this.count = new oof.Value(10) // Observable value\n\n    const interval = setInterval(() =\u003e {\n      \n      // Every second, update the count\n      this.count.set(this.count.value - 1)\n\n      // Count down to 0\n      if (this.count.value === 0) {\n        this.count.set('Liftoff!')\n        clearInterval(interval)\n      }\n\n    }, 1000)\n\n    return [ this.count ]\n  }\n\n  render(count) {\n    const span = document.createElement('span')\n\n    span.appendChild(document.createTextNode(count)\n\n    return span\n  }\n\n  destroy() {\n    clearInterval(this.interval)\n  }\n}\n\n// 10, 9, 8, 7...\nnew Countdown('#my-countdown')\n```\n\n### Using oof\n\nSimply include [oof.js](oof.js) in your page. You may want to include more - see [tradeoffs](#tradeoffs).\n\n```html\n\u003cscript src='oof.js'\u003e\u003c/script\u003e\n```\n\nYou can find documentation [on the wiki](https://github.com/heyitsmeuralex/oof/wiki).\n\n### Tradeoffs\n\noof is small. This means it doesn't have features that you might want, so oof allows you to optionally include\nextra libraries in your page, and it will use them.\n\n#### morphdom\n\nIf you want to tradeoff **size for speed**, include [morphdom](https://raw.githubusercontent.com/patrick-steele-idem/morphdom/master/dist/morphdom-umd.min.js) in your page, too. oof will then smartly\nmorph elements rather than re-rendering the entire thing when state changes.\n\n**Beware: morphdom might eat your event listeners**.\nSee the [morphdom example](examples/morphdom.html).\n\n#### justel\n\nIt is recommended that you use something like [justel](https://github.com/heyitsmeuralex/justel) to write your component render functions.\n\n```js\nclass Component extends oof.El {\n  // ...\n\n  render(name) {\n    return el('div', `Hi, ${name}!`)\n  }\n}\n```\n\nIf you want to use something more JSX-like, check out [bel](https://www.npmjs.com/package/bel).\n\n### Why should I use oof?\n\nI don't know - it was quickly made for [Decent](https://github.com/towerofnix/decent) after we realised\nthat we should probably roll our own UI framework 😤\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbates64%2Foof","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbates64%2Foof","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbates64%2Foof/lists"}