{"id":24070186,"url":"https://github.com/next2d/framework","last_synced_at":"2026-04-15T06:11:03.262Z","repository":{"id":42388439,"uuid":"364234247","full_name":"Next2D/framework","owner":"Next2D","description":"Next2D Framework is designed according to the principles of clean architecture, domain-driven development, test-driven development, and MVVM, with an emphasis on flexibility, scalability, and maintainability, and a design methodology that keeps each layer loosely coupled.","archived":false,"fork":false,"pushed_at":"2025-04-18T09:47:23.000Z","size":991,"stargazers_count":32,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"develop","last_synced_at":"2025-04-24T08:52:50.275Z","etag":null,"topics":["atomic-design","clean-architecture","domain-driven-development","mvvm-architecture","next2d","next2d-framework","single-page-app","typescript"],"latest_commit_sha":null,"homepage":"https://next2d.app","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/Next2D.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["Next2D"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2021-05-04T11:32:33.000Z","updated_at":"2025-04-18T09:36:18.000Z","dependencies_parsed_at":"2023-11-11T01:30:12.762Z","dependency_job_id":"1d872915-867c-4981-96c6-aac1e62a1ebb","html_url":"https://github.com/Next2D/framework","commit_stats":{"total_commits":135,"total_committers":2,"mean_commits":67.5,"dds":0.007407407407407418,"last_synced_commit":"5ca80213279332127fa37a04b8b2150e67b3f95b"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Next2D%2Fframework","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Next2D%2Fframework/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Next2D%2Fframework/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Next2D%2Fframework/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Next2D","download_url":"https://codeload.github.com/Next2D/framework/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250597706,"owners_count":21456423,"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":["atomic-design","clean-architecture","domain-driven-development","mvvm-architecture","next2d","next2d-framework","single-page-app","typescript"],"created_at":"2025-01-09T15:20:48.381Z","updated_at":"2026-04-03T00:05:23.570Z","avatar_url":"https://github.com/Next2D.png","language":"TypeScript","funding_links":["https://github.com/sponsors/Next2D"],"categories":[],"sub_categories":[],"readme":"Next2D Framework\n=============\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://next2d.app/assets/img/framework/logo.svg\" width=\"250\" alt=\"Next2D Framework\"\u003e\n\u003c/div\u003e\n\n[![UnitTest](https://github.com/Next2D/Framework/actions/workflows/integration.yml/badge.svg?branch=main)](https://github.com/Next2D/Framework/actions/workflows/integration.yml)\n[![CodeQL](https://github.com/Next2D/framework/actions/workflows/github-code-scanning/codeql/badge.svg?branch=main)](https://github.com/Next2D/framework/actions/workflows/github-code-scanning/codeql)\n[![Lint](https://github.com/Next2D/Framework/actions/workflows/lint.yml/badge.svg?branch=main)](https://github.com/Next2D/Framework/actions/workflows/lint.yml)\n\n[![release](https://img.shields.io/github/v/release/Next2D/Framework)](https://github.com/Next2D/Framework/releases)\n[![Github All Releases](https://img.shields.io/npm/dt/@next2d/framework)](https://github.com/Next2D/Framework/releases)\n[![Discord](https://badgen.net/badge/icon/discord?icon=discord\u0026label)](https://discord.gg/6c9rv5Uns5)\n[![Twitter](https://img.shields.io/twitter/follow/Next2D?style=social)](https://twitter.com/Next2D)\n\n[日本語]  \nNext2D Frameworkは、クリーンアーキテクチャー、ドメイン駆動開発、テスト駆動開発、MVVMの原則に従って設計されおり、柔軟性、拡張性、保守性に重点を置いたアーキテクチャーとデザイン手法で各レイヤーを疎結合に保つ事が可能です。  \n  \n従来のCanvasアプリケーションでは困難だったURLによるシーン管理（SPA）を可能にし、シーン毎のUI開発・画面確認が可能になりました。UI構築にはアトミックデザインを推奨しており、コンポーネントの細分化、再利用可能なモジュール設計など、効率的なUI構築と保守が可能となっています。  \n  \nまた、テスト駆動開発を重視しているため、ユニットテスト、統合テスト、UIテストなど、さまざまなレベルでテストを行いながら、高品質なコードの開発をサポートします。  \n  \n[English]  \nThe Next2D Framework is designed according to principles of clean architecture, domain-driven development, test-driven development, and MVVM. Its architecture and design methodology prioritize flexibility, scalability, and maintainability, enabling loose coupling between layers.  \n  \nIt enables scene management via URLs (SPA), which was difficult with traditional Canvas applications, allowing UI development and screen verification per scene. We recommend Atomic Design for UI construction, enabling efficient UI development and maintenance through component granularity and reusable module design.  \n  \nFurthermore, with a strong emphasis on test-driven development, it supports the creation of high-quality code by facilitating testing at various levels, including unit tests, integration tests, and UI tests.\n\n[简体中文]  \nNext2D框架是根据简洁架构、领域驱动开发、测试驱动开发和MVVM的原则设计的，其架构和设计方法注重灵活性、可扩展性和可维护性，使每一层都能保持松散耦合。  \n  \n它可以通过URL（SPA）实现场景管理，这在传统的Canvas应用程序中是很难实现的，并且可以为每个场景进行UI开发和屏幕检查。 该系统能够实现高效的UI构建和维护。  \n  \n此外，对测试驱动开发的强调支持高质量代码的开发，同时在各个层面进行测试，包括单元测试、集成测试和UI测试。  \n\n## Architecture\n\n```\nsrc/\n├── application/            # Application Layer\n│   ├── Application.ts      # Main application class\n│   ├── Context.ts          # View/ViewModel context management\n│   ├── content/            # Content classes (MovieClip, Shape, TextField, Video)\n│   ├── service/            # Application services (pure functions)\n│   │   ├── QueryStringParserService.ts\n│   │   └── RoutingRequestsParserService.ts\n│   ├── usecase/            # Application use cases (with side effects)\n│   │   ├── ApplicationGotoViewUseCase.ts\n│   │   ├── ApplicationInitializeUseCase.ts\n│   │   ├── ContextRunUseCase.ts\n│   │   └── ExecuteCallbackUseCase.ts\n│   └── variable/           # Application state (Config, Context, Cache, Packages, Query)\n├── domain/                 # Domain Layer\n│   ├── entity/             # Domain entities\n│   │   └── DefaultLoader.ts\n│   ├── service/            # Domain services\n│   │   ├── LoadingService.ts\n│   │   ├── ScreenOverlayService.ts\n│   │   └── ViewBinderService.ts\n│   └── variable/           # Domain state\n├── infrastructure/         # Infrastructure Layer\n│   ├── dto/                # Data Transfer Objects\n│   │   └── ResponseDTO.ts\n│   ├── repository/         # External data access\n│   │   ├── ContentRepository.ts\n│   │   ├── CustomRepository.ts\n│   │   └── JsonRepository.ts\n│   ├── service/            # Infrastructure services\n│   │   ├── RequestCacheCheckService.ts\n│   │   └── RequestResponseProcessService.ts\n│   ├── usecase/            # Infrastructure use cases\n│   │   ├── RequestUseCase.ts\n│   │   └── ResponseRemoveVariableUseCase.ts\n│   └── variable/           # Infrastructure state\n├── interface/              # TypeScript interfaces\n│   ├── IConfig.ts          # Configuration interface\n│   ├── IRequest.ts         # Request interface\n│   ├── IRouting.ts         # Routing interface\n│   └── ...\n├── shared/                 # Shared utilities\n│   └── util/               # Pure utility functions\n│       ├── NormalizeHttpMethod.ts\n│       ├── ParseQueryString.ts\n│       └── ToCamelCase.ts\n└── view/                   # View Layer\n    ├── View.ts             # Base View class (abstract)\n    └── ViewModel.ts        # Base ViewModel class (abstract)\n```\n\n## Support\n\n[日本語]  \n最新ニュースや技術情報は、Twitterの[@Next2D](https://twitter.com/Next2D)や公式の[Website](https://next2d.app/ja/)で発信していきますので、チェックしてみてください。  \nNext2Dがお役に立つようでしたら、プロジェクトをご支援いただければ幸いです。  \n  \n[English]  \nPlease check [@Next2D](https://twitter.com/Next2D) on Twitter and the [official website](https://next2d.app/en/) for the latest news and technical information.    \nIf Next2D is useful to you, we hope you will support our project.  \n  \n[简体中文]  \n请在Twitter上查看[@Next2D](https://twitter.com/Next2D)和[官方网站](https://next2d.app/cn/)，了解最新的新闻和技术信息。  \n如果Next2D对你有用，我们希望你能支持我们的项目。  \n  \n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/sponsors/Next2D\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/static/v1?label=Sponsor\u0026message=%E2%9D%A4\u0026logo=GitHub\u0026color=%23fe8e86\" width=180 alt=\"GitHub Sponsor\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n## Quick Start - JavaScript Development Environment\n\n```sh\nnpx create-next2d-app sample-app --template @next2d/framework-template\ncd app-name\nnpm start\n```\n\n## Quick Start - TypeScript Development Environment\n\n```sh\nnpx create-next2d-app sample-app --template @next2d/framework-typescript-template\ncd app-name\nnpm start\n```\n\n## API Reference\n\n### Application\n\n| Method | Description |\n|--------|-------------|\n| `gotoView(name?)` | Navigate to a View. If no argument, parses URL |\n| `getContext()` | Get the current Context |\n| `getResponse()` | Get the response data Map |\n| `getCache()` | Get the cache data Map |\n\n### View Lifecycle\n\n| Method | Description |\n|--------|-------------|\n| `initialize()` | Called after constructor |\n| `onEnter()` | Called when View is displayed |\n| `onExit()` | Called when View is hidden |\n\n### ViewModel Lifecycle\n\n| Method | Description |\n|--------|-------------|\n| `initialize()` | Called after constructor |\n\n### Context\n\n| Property/Method | Description |\n|-----------------|-------------|\n| `view` | Current View instance |\n| `viewModel` | Current ViewModel instance |\n| `root` | Root Sprite on Stage |\n\n### Exported Classes\n\n```typescript\nimport {\n    app,              // Application instance\n    View,             // Base View class\n    ViewModel,        // Base ViewModel class\n    MovieClipContent, // MovieClip content from Animation Tool\n    ShapeContent,     // Shape content from Animation Tool\n    TextFieldContent, // TextField content from Animation Tool\n    VideoContent      // Video content from Animation Tool\n} from \"@next2d/framework\";\n```\n\n## Configuration\n\n### IConfig\n\n```typescript\ninterface IConfig {\n    platform: string;        // \"web\" | \"app\"\n    spa: boolean;            // Enable SPA mode\n    defaultTop?: string;     // Default top page name (default: \"top\")\n    stage: {\n        width: number;       // Stage width\n        height: number;      // Stage height\n        fps: number;         // Frame rate\n        options?: {\n            base?: string;\n            fullScreen?: boolean;\n            tagId?: string;\n            bgColor?: string;\n        };\n    };\n    loading?: {\n        callback: string;    // Loading class name\n    };\n    gotoView?: {\n        callback: string | string[];  // Callback after view transition\n    };\n    routing?: {\n        [key: string]: {\n            private?: boolean;\n            redirect?: string;\n            requests?: IRequest[];\n        };\n    };\n}\n```\n\n### IRequest\n\n```typescript\ninterface IRequest {\n    type: \"json\" | \"content\" | \"custom\" | \"cluster\";\n    path?: string;           // URL path\n    name?: string;           // Response key name\n    cache?: boolean;         // Enable caching\n    callback?: string | string[];\n    // For custom type\n    class?: string;\n    access?: \"static\" | \"instance\";\n    method?: string;\n    // For HTTP requests\n    headers?: HeadersInit;\n    body?: any;\n}\n```\n\n## Flowchart\n\n```mermaid\ngraph TD\n    User([User]) --\u003e|Request| GotoView[gotoView Path]\n    \n    GotoView --\u003e LoadingCheck{use loading?\u003cbr/\u003eDefault: true}\n    \n    LoadingCheck --\u003e|YES| ScreenOverlay[Screen Overlay]\n    LoadingCheck --\u003e|NO| RemoveResponse\n    ScreenOverlay --\u003e LoadingStart[Start Loading]\n    LoadingStart --\u003e RemoveResponse\n    \n    RemoveResponse[Remove Previous Response Data] --\u003e ParseQuery[Parse Query String]\n    ParseQuery --\u003e UpdateHistory{SPA mode?}\n    \n    UpdateHistory --\u003e|YES| PushState[Push History State]\n    UpdateHistory --\u003e|NO| RequestType\n    PushState --\u003e RequestType\n    \n    RequestType[Request Type]\n    \n    RequestType --\u003e JSON[JSON: Get external JSON data]\n    RequestType --\u003e CONTENT[CONTENT: Get Animation Tool JSON]\n    RequestType --\u003e CUSTOM[CUSTOM: Request to external API]\n    \n    JSON --\u003e CacheCheck{use cache?\u003cbr/\u003eDefault: false}\n    CONTENT --\u003e CacheCheck\n    CUSTOM --\u003e CacheCheck\n    \n    CacheCheck --\u003e|YES| CacheData[(Cache)]\n    CacheCheck --\u003e|NO| GlobalData{{Global Network}}\n    \n    CacheData --\u003e Cached{Cached?}\n    \n    Cached --\u003e|NO| GlobalData\n    Cached --\u003e|YES| RegisterResponse\n    GlobalData --\u003e RegisterResponse\n    \n    RegisterResponse[Register Response Data] --\u003e RequestCallback{request callback?}\n    \n    RequestCallback --\u003e|YES| ExecRequestCallback[Execute Request Callback]\n    RequestCallback --\u003e|NO| UnbindView\n    ExecRequestCallback --\u003e UnbindView\n    \n    UnbindView[Previous View: onExit \u0026 Unbind] --\u003e BindView[New View/ViewModel: Bind]\n    BindView --\u003e ViewModelInit[ViewModel: initialize]\n    \n    ViewModelInit --\u003e ViewInit[View: initialize]\n    ViewInit --\u003e AddToStage[Add View to Stage]\n    AddToStage --\u003e GotoViewCallback{gotoView callback?}\n    \n    GotoViewCallback --\u003e|YES| ExecGotoViewCallback[Execute gotoView Callback]\n    GotoViewCallback --\u003e|NO| LoadingEndCheck\n    ExecGotoViewCallback --\u003e LoadingEndCheck\n    \n    LoadingEndCheck{use loading?\u003cbr/\u003eDefault: true}\n    \n    LoadingEndCheck --\u003e|YES| LoadingEnd[End Loading]\n    LoadingEndCheck --\u003e|NO| OnEnter\n    LoadingEnd --\u003e DisposeOverlay[Dispose Screen Overlay]\n    DisposeOverlay --\u003e OnEnter\n    \n    OnEnter[View: onEnter] --\u003e StartDrawing\n    \n    StartDrawing[Start Drawing] --\u003e|Response| User\n    \n    style User fill:#d5e8d4,stroke:#82b366\n    style StartDrawing fill:#dae8fc,stroke:#6c8ebf\n    style CacheData fill:#fff2cc,stroke:#d6b656\n    style GlobalData fill:#f5f5f5,stroke:#666666\n```\n\n## License\nThis project is licensed under the [MIT License](https://opensource.org/licenses/MIT) - see the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnext2d%2Fframework","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnext2d%2Fframework","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnext2d%2Fframework/lists"}