Deft JS: Low-coupling MVC through dependency Injection

Original article: deft JS: loosely coupled MVC through dependency Injection

Is the application just deployed? As experienced software developers, you know that it is not long before you make major user interface modifications. No matter how careful you think about it, you can avoid having to change the design by agreeing with the customer through requirement analysis and design. A truly effective software is a software that can adapt to changing user needs at least the cost.

So ...... How can we quickly implement user interface changes through software architecture without disrupting the underlying basic business logic?

Model View Controller (MVC)

In the initial phase of the application architecture in code, the focus is to divide the application into different management units, each of which is responsible for one application transaction. To this end, most applications adopt the Model-View-Controller Architecture mode. There are multiple ways to implement this mode. Software Development Expert Martin collects and sorts these implementation modes and stores them here.

Generally, an MVC Architecture includes:

• Model: describes and manages the behavior and status of application data, and responds or modifies the status according to the request.

• View: displays model data to users, accepts user input, and monitors user behavior, such as clicking or selecting an operation.

• Controller: an intermediary between a model and a view. It listens to user behavior and performs operations on the model accordingly. Then, it refreshes the view to reflect changes in the model.

By observing the user interface components and layout (View) separated by business logic, the Controller then triggers the business logic to update application data, so that the application can better adapt to the changing business needs.

Deft JS MVC

Deft JS is the added sencha MVC Framework, mainly including:

• The model uses common (faceless) business logic components, such as Ext. Data. Store and Ext. Data. model.

• The view can use ext JS, a rich development kit, or containers and components in sencha touch.

• The Controller is implemented by creating a specific view control inherited from the deft. mV. viewcontroller object.

Deft JS View Controller

Generally, a view is a container composed of multiple components. A View control is a lightweight yield controller that manages the status of a specified view and its sub-components, listens to events of the view and its sub-components, and responds to user operations, and delegate work to inject business models and services (such as Ext. data. stores, ext. data. models ).

In deft JS, a view is usually a subclass of an ext JS class filled with child components. View definitions must be mixed into the deft. Mixin. Controllable object, and the related View Controller class name must be declared. Each view must create a corresponding View Controller class extended from deft. MVC. viewcontroller. This specific view control needs to be set to reference the relevant view components, and register the View Controller Method to handle view component events.

The main functions of the deft JS View Controller and the mixed controllable are:

• Provides class declaration drivers for key views and view controllers.

• Define the role of the controller class, that is, control the specified view.

• Multiple independent instances of a specified view are supported. Each view has its own unique view controller instance.

• The View Controller and Its Related views are automatically created and destroyed to reduce memory.

• Provides simple configuration for referencing view components and registering listener events for View Controller methods.

• Run the remove or destroy View Controller operation within the life cycle of the integrated view.

• Automatically delete views, view component references, and event listening to simplify cleaning.

Deft JS dependency Injection

Many models, views, and controller objects are not independent (self-contained ). They reference or delegate some work to other objects. These referenced objects become dependencies. Generally, you can explicitly create these dependent instances or manually request them from the service positioner.

Low coupling is encouraged between application components. deft JS contains a lightweight Reverse Control (IOC) for dependency injection ). When an IOC subject is executed, You can manually create or obtain the dependent class by using the class declaration list. When classes require delayed instantiation, the IOC container is responsible for processing the correct object instances required for these dependencies and injecting them into the class at runtime.

With IOC, you do not need to create dependency classes in the class, or define these dependency classes explicitly. In addition, it no longer needs to bind the specific implementation of the dependent class. By providing the expected API, you can configure an IOC container to inject a completely different implementation.

Therefore, you can easily simulate any dependent class version by configuring the IOC container to test your class. You can also create multiple different applications and use different dependency classes for configuration in the IOC container of each application, such as store and proxy. For example, you can configure a simulated store and proxy driven by a static JSON file, or use the store and proxy of the production service through jsonp.

The main functions of the deft js ioc container and its injectable include:

• Provides class interpretation to drive dependency Injection

• Ing dependencies with user-defined identifiers

• Solves the dependency between class instances, factory models, or values.

• Supports single-piece mode, decomposition of class instance prototype, and dependency of factory Mode

• Instance dependency for delayed Rendering

• Inject dependencies into configuration items and attributes before executing the ext JS class Constructor

Example

Suppose that the view of a contact management application contains the yield contact grid:

Ext.define( 'ContactsApp.view.ContactGridView',    extend: 'Ext.container.Container',    mixins: [ 'Deft.mixin.Controllable', 'Deft.mixin.Injectable' ],    inject: [ 'contactStore' ],    controller: 'ContactsApp.controller.ContactGridViewController',     config: {        contactStore: null    },    ...    initComponent: function() {        this.items = [{            itemId: 'contactsGrid',            xtype: 'gridpanel',            store: this.getContactStore(),            ...,            bbar: Ext.create( 'Ext.PagingToolbar', {                store: this.getContactStore(),                ...            })        },        ...        {            xtype: 'container',            ...            items: [{                itemId: 'editButton',                xtype: 'button',                text: 'Edit'            }],            ...        }];    });

The View class definition is provided with the injection function by mixing deft. Mixin. injectable and its dependencies with the "inject" declaration.

When a view is instantiated through Ext. Create () or ext. widget (), the IOC container processes the dependencies of "contactstore" and injects related values to the configuration of "contactstore. The generated getcontactstore () method returns the injection value.

In addition, the View class can be controlled by mixing deft. Mixin. controllable and using "controller" to declare and control.

When a view is instantiated, the specified view controller is created and configured to reference the view. When a view is destroyed, the view controller is also destroyed.

Ext.define( 'ContactsApp.controller.ContactGridViewController',    extend: 'Deft.mvc.ViewController',    mixins: [ 'Deft.mixin.Injectable' ],    inject: [ 'contactStore' ],     config: {        contactStore: null    },     control: {        contactsGrid: {            click: 'onContactsGridClick'        }        editButton: {            click: 'onEditButtonClick'        }    },    ...    destroy: function() {       if (this.hasUnsavedChanges) {           // cancel destruction           return false;       }       // allow destruction       return this.callParent( arguments );    },    ...    onEditButtonClick: function () {        this.getEditButton.setDisabled( false );    },     onContactsGridClick: function () {        // add a ContactEditorView to the TabPanel for the selected item        ...    },);

View Controller extends the self-abstract base class deft. MVC. viewcontroller, which provides a "control" configuration item to simplify the creation of access devices for view components and bind events to them.

In this example, gird and buttons can be referenced by Itemid (custom selector is also supported). Their clicking event handles are defined as View Controller methods. Two accessors are automatically created: getcontactsgrid () and geteditbutton (). When a view is destroyed, the View Controller's destroy method is called to prevent the view from being destroyed. If this method returns true, the view will be destroyed, and all reference and listener events created by the View Controller through "control" will be automatically deleted.

The IOC container is usually defined in Ext. onready () in the Javascript file of the main application and calls the deft. injector. Configure () method.

Ext.onReady( function () {    Deft.Injector.configure({        contactStore: 'ContactsApp.store.ContactStore'        // contactStore: 'ContactsApp.store.MockContactStore'    });});

In the example, the deft js ioc container has configured the single-piece mode instance "contactstore" that executes the request contactsapp. Store. contactstore ". The comment line shows how to replace it with a specified simulation class.

About deft JS

Deft JS is an open-source framework that uses the MIT protocol and extends from ext JS and sencha touch API. It provides:

• Low coupling and dependency injection are achieved through IOC containers.

• Flexible component-oriented architecture by replacing model view Controllers

• Elegant asynchronous operation chain and Data Processing Using promises and deferreds.

Created by a team of software developers ts working at the innovative Digital Solutions agency universal mind, deft JS leverages best practices and proven patterns refined over years of delivering cutting edge solutions between ss a wide range of platforms and devices.

Author:John yanarella
John yanarella is a principal effecect at Universal Mind, an innovative Digital Solutions agency that fuses the design capabilities of an interactive firm with the technical expertise of a systems integrator. he is passionate about breaking complex problems down into simple reusable solutions; he created deft JS and has been a principal author and contributor to several other cial and open-source frameworks. follow John on Twitter @ johnyanarella.

Deft JS: http://deftjs.org/

It is indeed easier to use deft JS than to use ext JS's own control class and is worth using.