Git Product home page Git Product logo

next's Introduction

JSWorks

MVC-фреймворк для фронтенд-разработки + шаблонизатор + VirtualDOM.

Как это выглядит?

Component

Компонент — это основная единица приложения. Компонент связывает представление и контроллер.

@JSWorks.%{CLASS}%({ view: '%{NAME}%View', controller: '%{NAME}%Controller' })
export class %{NAME}%%{CLASS}% {
    @JSWorks.ComponentProperty()
    public testA: string;


    @JSWorks.ComponentProperty({ onChange: 'onTestBChange' })
    public testB: string = 'default';


    @JSWorks.ComponentProperty({ mapping: '#h2@innerHTML' })
    public testC: string;
}

View

View -- это шаблон на основе HTML. Шаблон компилируется в VirtualDOM при изменении свойств компонента, VirtualDOM потом вырендеривается в страницу.

<app-view id="%{NAME}%View" %{EXTENDS}%>

    <h2>This is %{NAME}%View.</h2>

    <view-yield></view-yield>

</app-view>

Controller

@JSWorks.Controller
export class LoginController extends AbstractController {
    public view: View;
    public component: LoginPage;
    public form: FormForElement;
  
    public onCreate(): void {

    }
  
    public onNavigate(args: object): void {

  
        super.onNavigate(args);
  
        CurrentUserHelper.currentUser.then((user: UserModel) => {
            if (user.loggedIn()) {
                user.logout();
            }
        });
    }
}

Model

interface %{NAME}%ModelFields {
    id: number;
    name: string;
    age: number;
    important?: boolean;
}
  

@JSWorks.Model
class %{NAME}%Model implements %{NAME}%ModelFields {
  
    @JSWorks.ModelField
    @JSWorks.ModelPrimaryKey
    public id: number;
  
    @JSWorks.ModelField
    public name: string;
  
    @JSWorks.ModelField
    public age: number;
  
    @JSWorks.ModelField
    public important: boolean;
  

    @JSWorks.ModelQueryMethod
    public query(params?: object): Promise<%{NAME}%Model[]> {
        params = params || {};
        const sort = String(params['sort'] || 'ASC');
  
        return new Promise<%{NAME}%Model[]>((resolve, reject) => {
            this.jsonParser.parseURLAsync(`/persons/all?sort=${sort}`, JSWorks.HTTPMethod.POST).then((data) => {
                const models: %{NAME}%Model[] = [];
  
                data.forEach((item: %{NAME}%ModelFields) => {
                    models.push(this.from(item));
                });
  
                resolve(models);
            });
        });
    }
  

    @JSWorks.ModelCreateMethod
    public create(): Promise<%{NAME}%Model> {
        return new Promise<%{NAME}%Model>((resolve, reject) => {
            this.jsonParser.parseURLAsync('/persons/create', JSWorks.HTTPMethod.POST,
                    JSON.stringify(this.gist())).then((data) => {
                resolve(this.from(data));
            });
        });
    }
  

    @JSWorks.ModelUpdateMethod
    public update(): Promise<%{NAME}%Model> {
        return new Promise<%{NAME}%Model>((resolve, reject) => {
            this.jsonParser.parseURLAsync('/persons/update', JSWorks.HTTPMethod.POST,
                    JSON.stringify(this.gist())).then((data) => {
                this.apply(data);
                this.setDirty(false);
  
                resolve(this);
            });
        });
    }

  
    @JSWorks.ModelDeleteMethod
    public delete(): Promise<%{NAME}%Model> {
        return new Promise<%{NAME}%Model>((resolve, reject) => {
            this.jsonParser.parseURLAsync('/persons/delete', JSWorks.HTTPMethod.POST,
                        JSON.stringify({ id: this.id })
                    ).then((data) => {
                resolve(this);
            });
        });
    }
}

next's People

Contributors

8coon avatar vileven avatar kopte3 avatar

Stargazers

Anatoly Ostapenko avatar  avatar

Watchers

James Cloos avatar  avatar  avatar

Forkers

ostapenko-me

next's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.