Mobile first! Wijmo 5 Architecture

??

Mobile first! The jquery UI component set wijmo's five-year maximum update has aroused great attention of developers.

This article describes the architecture of one of the developers' concerns.

Wijmo 5 is a set of JavaScript controls, but it should not be confused with widgets. Before wijmo was developed, we were able to build wijmo with frameworks like jquery UI and jquery mobile widget, while also saving time for us to build the Web framework wijmo.

However, when we want to build a more modern wijmo 5, we think it is time to review JavaScript UI components, especially syntax and API interfaces. After a lot of research and discussion, we use "True JavaScript controls (true JavaScript controls)", as you do in.. net uses similar properties, methods, events, and other APIs. Similarly, JavaScript UI components use almost identical methods.

At the same time, we chose ie9 as the benchmark version supported by wijmo 5 browser, because ie9 supports the ecmascript 5 syntax, which is critical to our wijmo 5 architecture, thus, a new wijmo 5 architecture was created.

Ecmascript 5 controls

Our wijmo 5 framework uses ecmascript 5 directly. Our source code uses typescript, which makes development very easy. For example, a base control class is created using this class. All controls are derived from this base class.

Javascript controls are case-sensitive like similar objects. They also provide constructors for initialization and attributes, methods, and events.

For example, the FlexGrid Control can be initialized using the following method:

// Initialize the FlexGrid instance object to a DOM element var myflexgrid = new wijmo. Grid. FlexGrid ('# flexgrid1 ');

 

Attribute

In our es 5 control, we useObject. defineproperty (). This method makes it as convenient as using the. Net Control in Js. This method allows us to define the getters and setters interfaces of attributes. Therefore, we can directly call attributes according to the logic of writing. Net code, which is very convenient.

It is very convenient to set the properties of the control. You can assign values directly without using function calls.

// Set FlexGrid to editable myflexgrid. isreadonly = false;

Similarly, you can assign values to events and check whether attributes have values. If the IDE only supports sensing (for example, vs 2013), you can assign values to control attributes through the automatic completion function of intelligent sensing. Smart sensing is very convenient for using controls and can improve work efficiency.

For convenience, enums is also provided)

// Set selection modemyflexgrid. selectionmode = wijmo. Grid. selectionmode. cellrange for FlexGrid;

Properties can also be obtained through standard JS objects. For example, you can obtain the get property interface of the control using the following methods:

// Check whether FlexGrid can edit var readonly = myflexgrid. isreadonly;

If you are familiar with. Net syntax programming, you will be very familiar with these attribute methods. If you are proficient in JS programming, you will also like this beautiful API interface.

The following is a syntax for assigning values to wijmo grid widgets:

// Wijmo's grid widget allows you to edit $ ('# wijmogrid1'). wijgrid ('option', 'allowediting ', true );

This syntax can be called "string type programming". It depends on the Case sensitivity of the string to set the attribute value. If an error is set, no error is reported. This is very troublesome for development and debugging.

Method

The methods in wijmo 5 are very convenient to use. You can directly call the corresponding methods of the control through the control, and debugging is more convenient.

// Refresh the FlexGrid Control to cause relayout and redrawmyflexgrid. Refresh ();

Compare the calling and refresh methods of JS Widgets

// Refresh wijmo grid widget $ ('# wijmogrid1'). wijgrid ('dorefresh ');

Similar to the preceding attributes, the method is called Based on string case sensitivity. debugging errors are very troublesome.

Event

The events in the wijmo 5 control can be used to subscribe to and unsubscribe to events through addhandler and removehandler, just like in the. NET control.

// FlexGrid cell editing completion event myflexgrid. celleditended. addhandler (function (sender, argS) {// do something });

Syntax of the corresponding JS widget subscription event:

// Subscribe to the wijmo cell editing completion event $ ('# wijmogrid1'). BIND ('wijgridaftercelledit ', function (E, argS) {// do something });

 

Controls vs. Widgets

In conclusion, the following table compares wijmo 5 control and JS widgets.

Wijmo 5 controls	JS Widgets
The typescript class provides class JavaScript Constructor	Functions interface, by setting JavaScript Object Attributes
Ecmascript 5: attributes include the getters and setters interfaces.	Use the "options" attribute to set sub-Parameters
Set attribute values directly	Assign values to attributes by calling Functions
Call method through the instance of the control	Call a method by passing the function name string
Subscribe by calling addhandler In the event	Subscribe to an event by using bind () and passing the widget name + even name as a string
Ides provides SMART awareness (dependent on IDE)	Non-strong type, no smart sensing
Design-time syntax Detection	No syntax Detection
Running error prompt	Few error messages during running

 

Architect interview: wijmo 5 CTO: from web to mobile, my 25-year programming career

Mobile first! Wijmo 5 Architecture