Next2D Framework

[日本語]
Next2D Frameworkは、クリーンアーキテクチャー、ドメイン駆動開発、テスト駆動開発、MVVMの原則に従って設計されおり、柔軟性、拡張性、保守性に重点を置いたアーキテクチャーとデザイン手法で各レイヤーを疎結合に保つ事が可能です。

従来のCanvasアプリケーションでは困難だったURLによるシーン管理（SPA）を可能にし、シーン毎のUI開発・画面確認が可能になりました。UI構築にはアトミックデザインを推奨しており、コンポーネントの細分化、再利用可能なモジュール設計など、効率的なUI構築と保守が可能となっています。

また、テスト駆動開発を重視しているため、ユニットテスト、統合テスト、UIテストなど、さまざまなレベルでテストを行いながら、高品質なコードの開発をサポートします。

[English]
The 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.

It 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.

Furthermore, 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.

[简体中文]
Next2D框架是根据简洁架构、领域驱动开发、测试驱动开发和MVVM的原则设计的，其架构和设计方法注重灵活性、可扩展性和可维护性，使每一层都能保持松散耦合。

它可以通过URL（SPA）实现场景管理，这在传统的Canvas应用程序中是很难实现的，并且可以为每个场景进行UI开发和屏幕检查。 该系统能够实现高效的UI构建和维护。

此外，对测试驱动开发的强调支持高质量代码的开发，同时在各个层面进行测试，包括单元测试、集成测试和UI测试。

Architecture

src/
├── application/            # Application Layer
│   ├── Application.ts      # Main application class
│   ├── Context.ts          # View/ViewModel context management
│   ├── content/            # Content classes (MovieClip, Shape, TextField, Video)
│   ├── service/            # Application services (pure functions)
│   │   ├── QueryStringParserService.ts
│   │   └── RoutingRequestsParserService.ts
│   ├── usecase/            # Application use cases (with side effects)
│   │   ├── ApplicationGotoViewUseCase.ts
│   │   ├── ApplicationInitializeUseCase.ts
│   │   ├── ContextRunUseCase.ts
│   │   └── ExecuteCallbackUseCase.ts
│   └── variable/           # Application state (Config, Context, Cache, Packages, Query)
├── domain/                 # Domain Layer
│   ├── entity/             # Domain entities
│   │   └── DefaultLoader.ts
│   ├── service/            # Domain services
│   │   ├── LoadingService.ts
│   │   ├── ScreenOverlayService.ts
│   │   └── ViewBinderService.ts
│   └── variable/           # Domain state
├── infrastructure/         # Infrastructure Layer
│   ├── dto/                # Data Transfer Objects
│   │   └── ResponseDTO.ts
│   ├── repository/         # External data access
│   │   ├── ContentRepository.ts
│   │   ├── CustomRepository.ts
│   │   └── JsonRepository.ts
│   ├── service/            # Infrastructure services
│   │   ├── RequestCacheCheckService.ts
│   │   └── RequestResponseProcessService.ts
│   ├── usecase/            # Infrastructure use cases
│   │   ├── RequestUseCase.ts
│   │   └── ResponseRemoveVariableUseCase.ts
│   └── variable/           # Infrastructure state
├── interface/              # TypeScript interfaces
│   ├── IConfig.ts          # Configuration interface
│   ├── IRequest.ts         # Request interface
│   ├── IRouting.ts         # Routing interface
│   └── ...
├── shared/                 # Shared utilities
│   └── util/               # Pure utility functions
│       ├── NormalizeHttpMethod.ts
│       ├── ParseQueryString.ts
│       └── ToCamelCase.ts
└── view/                   # View Layer
    ├── View.ts             # Base View class (abstract)
    └── ViewModel.ts        # Base ViewModel class (abstract)

Support

[日本語]
最新ニュースや技術情報は、Twitterの@Next2Dや公式のWebsiteで発信していきますので、チェックしてみてください。
Next2Dがお役に立つようでしたら、プロジェクトをご支援いただければ幸いです。

[English]
Please check @Next2D on Twitter and the official website for the latest news and technical information.
If Next2D is useful to you, we hope you will support our project.

[简体中文]
请在Twitter上查看@Next2D和官方网站，了解最新的新闻和技术信息。
如果Next2D对你有用，我们希望你能支持我们的项目。

Quick Start - JavaScript Development Environment

npx create-next2d-app sample-app --template @next2d/framework-template
cd app-name
npm start

Quick Start - TypeScript Development Environment

npx create-next2d-app sample-app --template @next2d/framework-typescript-template
cd app-name
npm start

API Reference

Application

Method	Description
gotoView(name?)	Navigate to a View. If no argument, parses URL
getContext()	Get the current Context
getResponse()	Get the response data Map
getCache()	Get the cache data Map

View Lifecycle

Method	Description
initialize()	Called after constructor
onEnter()	Called when View is displayed
onExit()	Called when View is hidden

ViewModel Lifecycle

Method	Description
initialize()	Called after constructor

Context

Property/Method	Description
view	Current View instance
viewModel	Current ViewModel instance
root	Root Sprite on Stage

Exported Classes

import {
    app,              // Application instance
    View,             // Base View class
    ViewModel,        // Base ViewModel class
    MovieClipContent, // MovieClip content from Animation Tool
    ShapeContent,     // Shape content from Animation Tool
    TextFieldContent, // TextField content from Animation Tool
    VideoContent      // Video content from Animation Tool
} from "@next2d/framework";

Configuration

IConfig

interface IConfig {
    platform: string;        // "web" | "app"
    spa: boolean;            // Enable SPA mode
    defaultTop?: string;     // Default top page name (default: "top")
    stage: {
        width: number;       // Stage width
        height: number;      // Stage height
        fps: number;         // Frame rate
        options?: {
            base?: string;
            fullScreen?: boolean;
            tagId?: string;
            bgColor?: string;
        };
    };
    loading?: {
        callback: string;    // Loading class name
    };
    gotoView?: {
        callback: string | string[];  // Callback after view transition
    };
    routing?: {
        [key: string]: {
            private?: boolean;
            redirect?: string;
            requests?: IRequest[];
        };
    };
}

IRequest

interface IRequest {
    type: "json" | "content" | "custom" | "cluster";
    path?: string;           // URL path
    name?: string;           // Response key name
    cache?: boolean;         // Enable caching
    callback?: string | string[];
    // For custom type
    class?: string;
    access?: "static" | "instance";
    method?: string;
    // For HTTP requests
    headers?: HeadersInit;
    body?: any;
}

Flowchart

graph TD
    User([User]) -->|Request| GotoView[gotoView Path]
    
    GotoView --> LoadingCheck{use loading?<br/>Default: true}
    
    LoadingCheck -->|YES| ScreenOverlay[Screen Overlay]
    LoadingCheck -->|NO| RemoveResponse
    ScreenOverlay --> LoadingStart[Start Loading]
    LoadingStart --> RemoveResponse
    
    RemoveResponse[Remove Previous Response Data] --> ParseQuery[Parse Query String]
    ParseQuery --> UpdateHistory{SPA mode?}
    
    UpdateHistory -->|YES| PushState[Push History State]
    UpdateHistory -->|NO| RequestType
    PushState --> RequestType
    
    RequestType[Request Type]
    
    RequestType --> JSON[JSON: Get external JSON data]
    RequestType --> CONTENT[CONTENT: Get Animation Tool JSON]
    RequestType --> CUSTOM[CUSTOM: Request to external API]
    
    JSON --> CacheCheck{use cache?<br/>Default: false}
    CONTENT --> CacheCheck
    CUSTOM --> CacheCheck
    
    CacheCheck -->|YES| CacheData[(Cache)]
    CacheCheck -->|NO| GlobalData{{Global Network}}
    
    CacheData --> Cached{Cached?}
    
    Cached -->|NO| GlobalData
    Cached -->|YES| RegisterResponse
    GlobalData --> RegisterResponse
    
    RegisterResponse[Register Response Data] --> RequestCallback{request callback?}
    
    RequestCallback -->|YES| ExecRequestCallback[Execute Request Callback]
    RequestCallback -->|NO| UnbindView
    ExecRequestCallback --> UnbindView
    
    UnbindView[Previous View: onExit & Unbind] --> BindView[New View/ViewModel: Bind]
    BindView --> ViewModelInit[ViewModel: initialize]
    
    ViewModelInit --> ViewInit[View: initialize]
    ViewInit --> AddToStage[Add View to Stage]
    AddToStage --> GotoViewCallback{gotoView callback?}
    
    GotoViewCallback -->|YES| ExecGotoViewCallback[Execute gotoView Callback]
    GotoViewCallback -->|NO| LoadingEndCheck
    ExecGotoViewCallback --> LoadingEndCheck
    
    LoadingEndCheck{use loading?<br/>Default: true}
    
    LoadingEndCheck -->|YES| LoadingEnd[End Loading]
    LoadingEndCheck -->|NO| OnEnter
    LoadingEnd --> DisposeOverlay[Dispose Screen Overlay]
    DisposeOverlay --> OnEnter
    
    OnEnter[View: onEnter] --> StartDrawing
    
    StartDrawing[Start Drawing] -->|Response| User
    
    style User fill:#d5e8d4,stroke:#82b366
    style StartDrawing fill:#dae8fc,stroke:#6c8ebf
    style CacheData fill:#fff2cc,stroke:#d6b656
    style GlobalData fill:#f5f5f5,stroke:#666666

Loading

License

This project is licensed under the MIT License - see the LICENSE file for details.