Compare Ay-JSONC with Angular XML

The chapter compares the object declaration with the Angular XML application development

• Start new page
• Declare detail of object with tabs
  • Angular declaration of a tabs (tabview):
  • AyMINE JSON declaration for tabs
• Grid Layout compare
  • Grid in Angular/nativecode
  • Ay-JSON declaration
  • Code definition
  • Angular code definition
  • Message definition ind Ay-JSON
  • Dynamic loading
• Compare conclusion

In a nutshell both ideas are the same. The GUI is encapsulated into the declaration that is system-independent and could be reused in any working environment. However, the object definition as is described here, defines much more than Angular XML UI definition.

Licence note: Angular/native codes are used mostly from the original nativecode documentation.

Start new page

Angular requires piece of TS/JS code: frame.navigate("my-page");
Ay-JSONC uses the declarative command to do the same: form.<object-name>.detail.<frame-name>()

When programme creates a new view, Angular requires updating code and compilation new application. With Ay-JSON only a new declaration is published and automatically downloaded by application.

Declare detail of object with tabs

Angular declaration of a tabs (tabview):

<Page loaded="pageLoaded">
  <TabView id="tabView1">
    <TabView.items>
      <TabViewItem title="Tab 1">
        <TabViewItem.view>
          <Label text="This is Label in Tab 1" />
        </TabViewItem.view>
      </TabViewItem>
      <TabViewItem title="Tab 2">
        <TabViewItem.view>
          <Label text="This is Label in Tab 2" />
        </TabViewItem.view>
      </TabViewItem>
    </TabView.items>
  </TabView>
</Page>

AyMINE JSON declaration for tabs

Tabview described in Ay-JSONC declaration:

// Tab for detail
"tabs":{
   "InfTab":{ 
      "style":{ "className":"<specific style name>"}
      "boxes":["box name", "box name 2" ]},
   // Tab with details
   "BodyTab":{ "order":"BB", "icon":"document", 
      "visible":"=!attr.isReadonly || obj.body", 
      "dataLabel":"=obj.body?.length > 1 ? g.icon('confirm') : false ",
      "box":{ "attributes":{ "body":{"type":"mdText", "label":false}  }} },
},

More modern JSON is more simpler to read but the major difference is that Ay definition contains also information that Angular should define in the compiled code:

• JSONC = JSON with comments supports documentation of the code; Ay-JSONC is a commented code that allows better quality of the code
• Name of the tab is automatically translated – text of the label is never part of the declaration
• Optional name for css class supports better styling using CSS. Although not often necessary it allows defined specific visual style for some elements and style application better using the CSS. Nativecode does not support css styling at all and the visual is beyond control
• Attribute visible defines conditions when tab is visible or not
• Attributes dataLable supports marks on the tab –

Let's note the neither view declaration nor the code contains layout, colors and generally visual part of the view. Everything is defined by css (compiled from SCSS) and reused both for web application and native-transpilled applications

Let's be fair: the code that is part of the JSONC description has a counterpart in Angular: expression. It follow the Angular concept but integrates it with the object declaration.

Grid Layout compare

Grid in Angular/nativecode

The example of the grid definition

<Page>
  <GridLayout rows="*, auto" columns="250, *">
    <Label text="This is Label in row 0, col 0" />
    <Label text="This is Label in row 1, col 1" row="1" col="1" />
    <Label text="This is Label in row 0, col 0" rowSpan="2" colSpan="2" />
  </GridLayout>
</Page>

Ay-JSON declaration

Declaration of the grid view (generally called list view):

"complete": {  "extends":"ancestor",
   "attributes":{
      "attr1":{ 
         "type":"int", "icon":"<icon-name>", "hidden":true, 
         "eval":"=obj.subCount === 0 ? '' : obj.subCount" },
      "attr2":{ "hidden":true, "icon":"importance"},
      "dtLastModif":{ "label":"date" "hidden":true},
   },
   "defOperation":"openSelfDetail",
   "buttons":["moveIItems"],
   "operations":{
      // Move InfItems under another item
      "moveIItems":{
         "icon":"rearrange", "multi":true, "command":[
            "select.this.list(location=modal,hint=lang.moveIItems_step1,purpose=selectOne)",
            "server.this.moveIItems"
      ]  },
      // Remove object from tree and shift it as a root
      "removeSubItems":{ "icon":"hierarchy__remove", "multi":true, "confirm":true, "a":"server.this.removeSubItems" }
   }
},

Compare both notations:

• Views in the Ay-JSONC are object-defined with inheritance. "extends":"ancestor", says that most of the view definition is reused from another view ancestor. The view inheritance saves more the 70% of work because views are not written many times when similar view is some different field is required
• Definition contains more details:
  • "hidden":true, – column of the grid is hidden by default and user can display it, when necessary
  • "icon":"<icon-name>" – icon is used instead of names – used for columns that contains only simple and narrow information like an icon and number
  • "eval": – script processing object data from server to show the result of operation. Angular/nativecode requires programming code in application and rebuilding the whole application for that
• Definition of the grid is used by server REST-request processor to setup dynamical view and provide valid data for grid. The definition declare not only the view (UI) but it has link to the object persistence layer. That significantly reduces errors in the code because it does no require two but only single declaration

Code definition

Angular code definition

XML part

<!-- app/components/my-control.xml -->
<StackLayout class="p-20" loaded="onLoaded">
 . . . 
    <Label text="{{ message }}" class="h2 text-center" textWrap="true"/>
</StackLayout>

__Code part

export class HelloWorldModel extends Observable {
   set message(value: string) {
      if (this._message !== value) {
         this._message = value;
         this.notifyPropertyChange('message', value)
      }
   }
}

Message definition ind Ay-JSON

The code relates to the view definition – the clip:

"clip-part":{
   "enabled":"=obj.message !== value",
   "style":{ "className":"WrapLine" },
   "h2":"=obj.message"
}

• Single line defines when the message if displayed
• CSS style is used to format the line (applied at all platforms)
• Single line defined that it is displayed as a header message"

Dynamic loading

Dynamic loading is necessary for Angular application because it uses many modules.
AyMINE use almost only declaration that are locally stored and loaded only after the restart. However, Ay-JSONC support declaration of dynamically loaded module:

Angular requires TS code

import { Builder } from "@NativeScript/core";
let myComponentInstance = Builder.load({
        path: "~/components/my-control",
        name: "MyControl"
});

Ay-JSON user direct call

"<dynamically-loaded>":{ "a":"form.<component-name>" }

Both, Angular and JSON requires rebuilding application for iOS in this case because all dynamically-loaded modules should be a part of the application bundle.
Android is a little bit simpler in this case, AyMINE can change the dynamically loaded library because Android engine support dynamic loadin in the same ways as web page. Angular in this case has no advantage and the Android code should by rebuilt and re-published on the market in the same ways as is required by iOS.

Compare conclusion

Both Angular and AyMINE has the same idea that the external declaration is a good idea that makes application code simpler and allows mobile application and web-native application easy-to-define.

Nevertheless, there are improtant differences:

Attribute	Angular/Native Code	AyMINE
Framework purpose	Client-side	Both Client & Server side
Programming language	JS / TS	TS
Declarative langauge	XML	JSONC
Structure of the declaration	view-oriented	object-oritented
Support for orchestration
System rights control	Managed by code	Managed by declaration
Serer-rights management	Not managed	part of the declaration
Server-site declaration
Dynamic application updates (no recompile)	XML	JSONC
Framework licence	MIT v2	MIT or GPL