{"id":13681505,"url":"https://github.com/tvler/experimental-react-like-framework","last_synced_at":"2025-04-30T03:31:39.434Z","repository":{"id":46506077,"uuid":"275061580","full_name":"tvler/experimental-react-like-framework","owner":"tvler","description":"A frontend for React inspired by SwiftUI","archived":true,"fork":false,"pushed_at":"2021-10-06T19:39:01.000Z","size":2389,"stargazers_count":309,"open_issues_count":11,"forks_count":3,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-11-12T00:36:44.361Z","etag":null,"topics":["dsl","front-end","frontend","javascript","react","reactjs","swiftui","typescript"],"latest_commit_sha":null,"homepage":"","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/tvler.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":"2020-06-26T02:59:03.000Z","updated_at":"2024-08-23T13:45:29.000Z","dependencies_parsed_at":"2022-07-19T21:58:51.348Z","dependency_job_id":null,"html_url":"https://github.com/tvler/experimental-react-like-framework","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/tvler%2Fexperimental-react-like-framework","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tvler%2Fexperimental-react-like-framework/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tvler%2Fexperimental-react-like-framework/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tvler%2Fexperimental-react-like-framework/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tvler","download_url":"https://codeload.github.com/tvler/experimental-react-like-framework/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251635342,"owners_count":21619206,"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":["dsl","front-end","frontend","javascript","react","reactjs","swiftui","typescript"],"created_at":"2024-08-02T13:01:31.637Z","updated_at":"2025-04-30T03:31:39.154Z","avatar_url":"https://github.com/tvler.png","language":"TypeScript","readme":"# experimental-react-like-framework\n\nA new, experimental frontend for React inspired by SwiftUI. In development.\n\nBased off of two questions:\n\n① What would React look like if execution-order-based code wasn't used only for hooks, but for everything?\n\n② What would React look like if JSX never existed?\n\nHello World app:\n\n```ts\nconst App = () =\u003e {\n  h1(\"Hello world!\");\n};\n```\n\nThe framework is hosted on React itself. Designed to be incrementally adopted inside of a React subtree without interfering with any existing code, with the benefit of all of React's features and ecosystem.\n\n```tsx\nimport { NewFramework } from \"./NewFramework\";\nimport { NewFrameworkApp } from \"./NewFrameworkApp\";\n\nconst App = () =\u003e (\n  \u003cYourExistingReactApp\u003e\n    \u003cYourExistingReactComponent /\u003e\n\n    {/* 🆕 */}\n    \u003cNewFramework root={NewFrameworkApp} /\u003e\n  \u003c/YourReactApp\u003e\n);\n```\n\n## Table of contents\n\n- [Framework write-up](#framework-write-up)\n- [What I've built so far](#what-ive-built-so-far)\n- [What needs to be built](#what-needs-to-be-built)\n- [Further reading](#further-reading)\n\n## Framework write-up\n\n### Bet: JSX is bad\n\nJSX immediately requires a complex build environment. Differences between HTML is small but painful for beginners. Sebastian Markbåge (a lead react maintainer) tweeted that JSX is a bug.\n\n\u003cimg width=\"426\" src=\"https://user-images.githubusercontent.com/4934193/85815984-d5ace080-b71e-11ea-9231-8ee97584096b.png\"\u003e ([twitter.com/sebmarkbage/status/1255886278437945344](https://twitter.com/sebmarkbage/status/1255886278437945344))\n\n### Bet: React.createElement is bad\n\nUsing React without JSX forces you to use the React.createElement API. Building a complex template with React.createElement ends up as a deeply-nested function call with no breakpoints at the very bottom of your component code. JSX is an attempt to make this format more presentable, but it doesn't solve the underlying issue that your template is inside of a function call, with no access to if-statements, for-loops, etc.\n\n### Bet: Code based off of execution-order is good\n\nFacebook built hooks around execution-order and received major backlash by the engineering community, but resulted in few actual real-world problems.\n\n### Result\n\nAn exploration of what react would look like if execution-order-based code wasn’t considered an antipattern, and if JSX never existed.\n\n```tsx\n/*\n * New syntax\n */\nconst App = () =\u003e {\n  const [counter, setCounter] = useState(0);\n  const handleClick = () =\u003e {\n    setCounter(counter + 1);\n  };\n\n  h1(\"Hello world!\");\n\n  // A button with an onClick prop\n  button({ onClick: handleClick }, counter);\n\n  // An ordered list counting up from 0 to 9\n  ol(() =\u003e {\n    for (let i = 0; i \u003c 10; i++) {\n      li({ key: i }, i);\n    }\n  });\n\n  // Conditionally rendering a span if counter is odd\n  if (counter % 2) {\n    span(\"counter is an odd number.\");\n  }\n};\n\n/*\n * Old JSX syntax\n */\nconst JSXApp = () =\u003e {\n  const [counter, setCounter] = useState(0);\n  const handleClick = () =\u003e {\n    setCounter(counter + 1);\n  };\n\n  return (\n    \u003c\u003e\n      \u003ch1\u003eHello world!\u003c/h1\u003e\n\n      {/* A button with an onClick prop */}\n      \u003cbutton onClick={handleClick}\u003e{counter}\u003c/button\u003e\n\n      {/* An ordered list counting up from 0 to 9 */}\n      \u003col\u003e\n        {Array.from({ length: 10 }, (_, i) =\u003e (\n          \u003cli key={i}\u003e{i}\u003c/li\u003e\n        ))}\n      \u003c/ol\u003e\n\n      {/* Conditionally rendering a span if counter is odd */}\n      {counter % 2 \u0026\u0026 \u003cspan\u003ecounter is an odd number.\u003c/span\u003e}\n    \u003c/\u003e\n  );\n};\n```\n\n### Benefits\n\nSimpler code for loops and conditional rendering\n\nZero distinction between functions and components\n\nDon’t have to learn JSX\n\nNo return statement\n\nNo need for closing tags\n\nNo need for fragments\n\nEasier to comment elements out\n\n### How it works\n\nEach primitive HTML element function pings a global store when called. The order of the pings determines the order in which the actual HTML elements are rendered to the dom. This is the exact same architecture that Facebook has proven successful with react hooks.\n\nThis has the potential to work directly within React itself, turning into a series of React.createElement calls on execution. Making this an experimental new frontend for React, with the added benefits of gradual adoption and an already-existing suite of developer tools to build off of.\n\n## What I've built so far\n\n### ✅ Working prototype\n\n```\ncd example-create-react-app\nyarn\nyarn start\n```\n\n### ✅ Everything except state\n\n[example-create-react-app/src/app.ts](example-create-react-app/src/app.ts)\n\n```ts\nimport { button, h1, ol, li } from \"./Framework\";\n\nconst app = () =\u003e {\n  h1(\"Hello world!\");\n\n  // A button with an onClick prop\n  button(\n    {\n      onClick: () =\u003e {\n        alert(\"clicked!\");\n      },\n    },\n    \"Click\"\n  );\n\n  // An ordered list counting up from 0 to 9\n  ol(() =\u003e {\n    for (let i = 0; i \u003c 10; i++) {\n      li(i);\n    }\n  });\n};\n\nexport default app;\n```\n\n### ✅ Building on top of React\n\n[example-create-react-app/src/index.ts](example-create-react-app/src/index.ts)\n\n```ts\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Framework } from \"./Framework\";\nimport app from \"./app\";\n\nReactDOM.render(\n  React.createElement(Framework, { root: app }),\n  document.getElementById(\"root\")\n);\n```\n\n## What needs to be built\n\n- [ ] State\n- [ ] A cool project name ;) https://github.com/tvler/experimental-react-like-framework/issues/4\n\n## Further reading\n\n[Function builders (draft proposal)](https://github.com/apple/swift-evolution/blob/9992cf3c11c2d5e0ea20bee98657d93902d5b174/proposals/XXXX-function-builders.md) by [John McCall](https://github.com/rjmccall) and [Doug Gregor](http://github.com/DougGregor)\n\n[js-dsl](https://venkatperi.github.io/js-dsl/) by [Venkat Peri](https://github.com/venkatperi)\n\n[incremental-dom](http://google.github.io/incremental-dom/) by Google\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftvler%2Fexperimental-react-like-framework","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftvler%2Fexperimental-react-like-framework","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftvler%2Fexperimental-react-like-framework/lists"}