Reax
Framework

Framework for implicit and explicit typed JS model classes, for introspection, replication, automated, reactive multilingual UI generation, validation, en-/decoding.

Including JS primitives each class component can get typed, without wrapping objects into big memory chunks, using implicit skeletons and fields. This for instance allows to handle different kind of primitives like Double, Char, Byte, Long while JS only supports integer and floats, this can be used for a bunch different cases like typed arrays external interfaces, and porting / transpiling to different languages.


Automated reactive UI

Views can be declared directly inside the class by extending the default model class, and by default rendered as editable and read-only form. All rendered views are connected to the original model and changed automatically when modified, including relations. Labels, description, validation rules and all field specific attributes are directly defined inside the class. Callback events on fields will trigger on updates and give control for special cases and any non-standard behaviour.

Drag&Drop operations are supported and will by default validate by compatibility / relation attributes.
 


Multi-database Replication

Automated replication for models, relations, single properties and RPCs (remote procedure calls) are supported.
 

Automate the exisitng

Typecast can extend existing JS objects, this allows to turn exisitng libraries and applications into a full introspection IDE without specific requirements or modifications.
 

Meta classes

All base types from primitives to relations and models are implemented using the same schema, but by implementing different methods which allows to extend and define deep features of a class, for instance "extend" or "declared" is called when another class extends from it, or when the class itself is declared (the type is instanced).

For example, the Model standard class supports inheriting fields, displays and views, from all classes it extends, by default all models support basic displays and collections basic views.
 

Explicit Class

Class('User', 'Model', {

    label: 'User',
    plural: 'Users',
    indexed: true,
    key: 'id',

    construct: function User(object) {

        /*
             Constructor not required by default, "created" will be called too if implemented, while
             function User() will ensure the instance constructor to be User instead Model
         */

        this.TYPE.cast(this, object);

    },

    struct: [
        {
            label: 'ID',
            name: 'id',
            type: 'int',
            private: true
        },
        {
            label: 'Username',
            placeholder: 'Your nickname',
            name: 'username',
            type: 'string',
            min: 3,
            max: 32
        },
        {
            label: 'Password',
            name: 'password',
            type: 'password',
            min: 6,
            max: 512
        },
        {
            label: 'Auto-login',
            name: 'autologin',
            type: 'bool',
            default: false
        },
        {
            label: 'Reputation',
            name: 'reputation',
            type: 'float',
            default: 0.0,
            min: 0.0,
            max: 1.0
        }
    ],

    public: {

        login: function() {}

    },

    static: {

        find: function() {}

    }

});

Implicit Class

// This or ES6 class syntax

function User() {}

User.find = function() {};

Object.assign(User.prototype, {

    reputation: 0.0,

    login: function() {}

});


Class('User', 'Model', {

    label: 'User',
    plural: 'Users',
    indexed: true,
    key: 'id',

    target: User,

    struct: [
        {
            label: 'ID',
            name: 'id',
            type: 'int',
            private: true
        },
        {
            label: 'Username',
            placeholder: 'Your nickname',
            name: 'username',
            type: 'string',
            min: 3,
            max: 32
        },
        {
            label: 'Password',
            name: 'password',
            type: 'password',
            min: 6,
            max: 512
        },
        {
            label: 'Reputation',
            name: 'reputation',
            type: 'float',
            default: 0.0,
            min: 0.0,
            max: 1.0
        }
    ]

});

 

Custom displays example

Class('User', 'Model', {

    label: 'User',
    plural: 'Users',
    indexed: true,
    key: 'id',

    construct: function User(object) {

        this.TYPE.cast(this, object);

    },

    struct: [
        {
            label: 'ID',
            name: 'id',
            type: 'int',
            private: true
        },
        {
            label: 'Username',
            placeholder: 'Your nickname',
            name: 'username',
            type: 'string',
            min: 3,
            max: 32
        },
        {
            label: 'Password',
            name: 'password',
            type: 'password',
            min: 6,
            max: 512
        },
        {
            label: 'Auto-login',
            name: 'autologin',
            type: 'bool',
            default: false
        },
        {
            label: 'Reputation',
            name: 'reputation',
            type: 'float',
            default: 0.0,
            min: 0.0,
            max: 1.0
        }
    ],

    displays: {

        preview: {

            template: '
' + '' + '' + '
' }, icon: { template: '
', set: function(entity, options, field, elements) { elements.picture.attr('src', 'http://mydomain.com/pictures/' + entity.id + '.jpg'); } } } });

Copyright © 2024 Mevedia. All rights reserved.