{"raw":"Introducing a New Framework\n\n## Background\n\nTo understand why this new framework was created, it’s important to first understand the reason behind the creation of **zely**.  \nzely was originally developed during a personal side project when I only had frontend experience and needed an easy-to-use backend framework.\nHowever, the most popular option—Express—is a library, not a framework, which meant that using it with TypeScript required an additional compiler. Although this wasn’t particularly difficult, its structure was completely different from major frontend frameworks, leaving me unsatisfied.\nThat led me to wonder: _what if I built a framework that followed the structure of major web frameworks optimized for TypeScript—wouldn’t backend development become much faster?_\nThat question marked the beginning of zely.\n\n## Problems\n\nThrough zely’s development, I indeed found that it significantly sped up backend development for personal side projects.\n(Although, of course, the time spent fixing bugs and adding features in zely itself increased.)\nHowever, zely was never intended to gain wide adoption. In reality, its monthly downloads were typically under 100 (occasionally exceeding 500), so the user base was extremely small.\nAs I experimented with highly experimental features—most notably [$store](/docs/store)—I began to feel that I had strayed from zely’s original goal of being a _fast backend framework_.\n\nI believe that a truly fast framework must also have a simple structure.\nHowever, when I developed the [$store](/docs/store) feature, I created [serpack](/serpack/introduction) to overcome certain technical limitations. In the end, serpack failed to achieve its goals and only made the overall structure more complex.\nRolling back to the pre-serpack state is nearly impossible now, as many core systems (build, caching, etc.) have been redesigned around it.\n\n## Solution\n\nInstead of rewriting zely from scratch, I decided to build a new framework—drawing from the lessons learned while developing zely.\n\nThe new framework is called **dobs**. You can find the source code on [GitHub](https://github.com/zely-js/dobs/).\nIt’s not yet ready for practical use, but it already implements zely’s most essential features—**file-based routing** and **TypeScript support**—in just 200 lines of bundled code (about one-tenth the size of zely).\n\n## Plans\n\nThe goal of **dobs** is to rebuild and improve zely with the simplest possible structure and codebase.\n\nPlanned features include:\n\n- **Build system**\n- **Data caching**\n- **Plugin support**\n\n## Migration\n\n<Box type=\"info\">[see Migration guide](/docs/migration-to-dobs)</Box>\n\n## The Future of zely and dobs\n\nUpdates will now be focused around dobs rather than the zely and @zely-js/\\* packages.\nHowever, since dobs aims to reimplement zely in a simpler, more efficient way, it can be seen as the natural continuation of zely’s development.\n","target":{"title":"Introduce new framework","date":"25-10-30","description":"Introducing a new framework designed to simplify modern web development.","category":"Engineering"},"compiled":"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    a: \"a\",\n    br: \"br\",\n    em: \"em\",\n    h2: \"h2\",\n    li: \"li\",\n    p: \"p\",\n    strong: \"strong\",\n    ul: \"ul\",\n    ...props.components\n  }, {Box} = _components;\n  if (!Box) _missingMdxReference(\"Box\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Introducing a New Framework\"\n    }), \"\\n\", _jsx(_components.h2, {\n      children: \"Background\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"To understand why this new framework was created, it’s important to first understand the reason behind the creation of \", _jsx(_components.strong, {\n        children: \"zely\"\n      }), \".\", _jsx(_components.br, {}), \"\\n\", \"zely was originally developed during a personal side project when I only had frontend experience and needed an easy-to-use backend framework.\\nHowever, the most popular option—Express—is a library, not a framework, which meant that using it with TypeScript required an additional compiler. Although this wasn’t particularly difficult, its structure was completely different from major frontend frameworks, leaving me unsatisfied.\\nThat led me to wonder: \", _jsx(_components.em, {\n        children: \"what if I built a framework that followed the structure of major web frameworks optimized for TypeScript—wouldn’t backend development become much faster?\"\n      }), \"\\nThat question marked the beginning of zely.\"]\n    }), \"\\n\", _jsx(_components.h2, {\n      children: \"Problems\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Through zely’s development, I indeed found that it significantly sped up backend development for personal side projects.\\n(Although, of course, the time spent fixing bugs and adding features in zely itself increased.)\\nHowever, zely was never intended to gain wide adoption. In reality, its monthly downloads were typically under 100 (occasionally exceeding 500), so the user base was extremely small.\\nAs I experimented with highly experimental features—most notably \", _jsx(_components.a, {\n        href: \"/docs/store\",\n        children: \"$store\"\n      }), \"—I began to feel that I had strayed from zely’s original goal of being a \", _jsx(_components.em, {\n        children: \"fast backend framework\"\n      }), \".\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"I believe that a truly fast framework must also have a simple structure.\\nHowever, when I developed the \", _jsx(_components.a, {\n        href: \"/docs/store\",\n        children: \"$store\"\n      }), \" feature, I created \", _jsx(_components.a, {\n        href: \"/serpack/introduction\",\n        children: \"serpack\"\n      }), \" to overcome certain technical limitations. In the end, serpack failed to achieve its goals and only made the overall structure more complex.\\nRolling back to the pre-serpack state is nearly impossible now, as many core systems (build, caching, etc.) have been redesigned around it.\"]\n    }), \"\\n\", _jsx(_components.h2, {\n      children: \"Solution\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Instead of rewriting zely from scratch, I decided to build a new framework—drawing from the lessons learned while developing zely.\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"The new framework is called \", _jsx(_components.strong, {\n        children: \"dobs\"\n      }), \". You can find the source code on \", _jsx(_components.a, {\n        href: \"https://github.com/zely-js/dobs/\",\n        children: \"GitHub\"\n      }), \".\\nIt’s not yet ready for practical use, but it already implements zely’s most essential features—\", _jsx(_components.strong, {\n        children: \"file-based routing\"\n      }), \" and \", _jsx(_components.strong, {\n        children: \"TypeScript support\"\n      }), \"—in just 200 lines of bundled code (about one-tenth the size of zely).\"]\n    }), \"\\n\", _jsx(_components.h2, {\n      children: \"Plans\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"The goal of \", _jsx(_components.strong, {\n        children: \"dobs\"\n      }), \" is to rebuild and improve zely with the simplest possible structure and codebase.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Planned features include:\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: _jsx(_components.strong, {\n          children: \"Build system\"\n        })\n      }), \"\\n\", _jsx(_components.li, {\n        children: _jsx(_components.strong, {\n          children: \"Data caching\"\n        })\n      }), \"\\n\", _jsx(_components.li, {\n        children: _jsx(_components.strong, {\n          children: \"Plugin support\"\n        })\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.h2, {\n      children: \"Migration\"\n    }), \"\\n\", _jsx(Box, {\n      type: \"info\",\n      children: _jsx(_components.a, {\n        href: \"/docs/migration-to-dobs\",\n        children: \"see Migration guide\"\n      })\n    }), \"\\n\", _jsx(_components.h2, {\n      children: \"The Future of zely and dobs\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Updates will now be focused around dobs rather than the zely and @zely-js/* packages.\\nHowever, since dobs aims to reimplement zely in a simpler, more efficient way, it can be seen as the natural continuation of zely’s development.\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = props.components || ({});\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","previousPost":null,"nextPost":{"title":"Why file-based routing?","date":"25-09-15","description":"Exploring the benefits of file-based routing and how it improves developer experience.","category":"Architecture"}}