• PRODUCT

    PRODUCT

  • PRICING
    PRICING

  • HELP
    HELP

  • BLOG
    BLOG

  • APPSTORE
    APPSTORE

  • COMPANY
    COMPANY

  • LEGAL
    LEGAL

  • LOGIN
    LOGIN

  • Angular and React Embedding Guide


  • When you need to share data between Angular/React and Izy for example with the Izy app passing data down to the Angular module to trigger an action, and then some data being passed back. In addition to using WebComponents, this article explains the similarities and differences.


  • Interactive Build & Serve

    Newer angular versions offer the CLI. The project willbe declared and defined in angular.json file. As with Single Page Applications, the project would defined the following important components:

    index.html

    This is the main HTML that gets used to pull in the js script components that get generated using typescript.

    You would use

    ng build

    Which will generate the payload files inside the dist/ folder. Next step is

    ng serve --configuration=xxxx

    the serve command will watch the files and will recomplie the js files as it detects changes.

    Comparison of Template Engines and Interactions with Framework

    Both frameworks extend the standard HTML syntax with additional functionality. The HTML synctax gets extended using directives.

    The most common features that are needed a frontend framework are compared here:

    • Session Management/Http Interception

    * Angular: HttpClient and HttpInterceptor

    * Izy

    * the //service launch string will handle this automatically

    • Framework complexity/rampup

    * Angular: High

    * Izy: Low

    * Developers can spend more time writing modern JS and less time worrying about the framework-specific code.

    * The framework is simple to learn because of its hybrid component-based approach, use of plain JavaScript, HTML, css.
    • Serverside Rendering
    * Angular: Not verygood

    * Izy: Native supported

    * Robust for creating content-focused apps
    • Automatic Error Capture To Component UI
    * Angular: not supported

    * Izy

    * defiine div with "errorarea$izyid" and "errorAreaVisibility$izyid". Any chain action that fails will automatically be pasted into that area and "errorAreaVisibility$izyid" gets turned on. No try/catch needed.

    * critical for interactive development

    • mixed context api development

    * Angular:

    * not supported.

    * workaround: only for dev environment, create a proxy.conf.json and route a portion of traffic to a service.

    * Izy: supported

    * critical for interactive development

    • Routing

    * Angular:

    * matching: supports wildcards, full, partial, etc.

    404s: { path: '*', component: PageNotFoundComponent }

    * redirects: yes

    * nested/relative routes: yes, but the definitions are centralized in the AppRoutingModule which is a shortcoming.

    * title: yes

    * relative paths: supports ../

    * PathLocationStrategy/HashLocationStrategy: supports both

    * lazyloading, accessControl (guards)

    * html: use
    , define the target view by tag

    * js: define the (path, component) list and add to RouterModule, all route data with key, value pairs to component inputs.

    * content centric apps/backend: none

    * Izy:

    * js ['frameregister'], ['//inline/rel:api?schemaUriToKVS'], ['framesetschema', chain.get('outcome').data], ['framesetkey', { kv }], ['framegetkey', ['kvsValidated']], ['frame_navigate', {}], ['circus.addUriProperties'], see V5 Migration

    * api: ?schemaUriToKVS, ?queryGroups { kvsValidated, kvsSchema, parameters }

    * html:
    • Components
    * Angular

    * (html template, ts class, css style, css selector)

    * lifecycle: ui centered. ngOnxxx, resources (timers, etc.) managed in js.

    * style encapsulation: supports shadowDOM, Emulated, None. For the emulated mode, extra attributes are attached to HTML elements and the component css is post-processed so that each CSS selector is augmented with the appropriate nghost or ngcontent attribute selector (i.e. h3[_ngcontent-pmm-6]) and injected in the head section.

    * component data sharing: Parent -> Child

    * js:

    * child: use @Input decorator with child property

    * parent: declare a regular property

    * html: use property binding [item]="currentItem"

    * component data sharing: Child -> Parent

    * js:

    * child: declare property @Output decorator EventEmitter, create internal event handler, call .emit(value) from event handler.

    * html: use event binding (itemEvent)="parentMethod($event)"

    * Izy:

    * (html template, js class, api class, css style)

    * lifecycle: ui agnostic. resource managed in api.

    * style encapsulation: use $izyid variable.

    * component data sharing: Parent -> Child

    * js:

    * child: use htmlcomponent.getComponentParameters and pass in to api?queryGroups

    * parent: include the data in groupMember definition

    * component data sharing: Child -> Parent

    *js:

    * child: htmlcomponent.setComponentParameters

    * parent: htmlcomponent.getGroupsParameters
    • Module management/loading, dynamic modules
    * Angular:

    * Dependency Injection. use inject method to load

    * Izy:

    * modtask.ldmod(), etc.

    • Modifying existing css classes

    * Angular: not supported

    * Izy: supported using htmlcomponent.updateSelector
    • Adding and removing classes to html elements
    * Angular: NgClass directive (changes are applied on init and on changes), Class and style binding.

    * Izy: Not supported. Instead htmlcomponent.updateSelector is used to modify existing classes (i.e. errorAreaVisibility$izyid). Changes need to be applied explicitly.

    • Setting inline styles:

    * Angular: NgStyle

    * Izy: Not supported
    • Displaying and Updating Properties and Input Element Values:
    * Angular:

    * html: NgModel (when values changes, events involved). Interpolation using {{ }}, Property binding using [propery]="dynamic expression".

    * framework: kkk

    * changes could be automatic if [(ngModel)] syntax is used. they can be customized by using the expanded syntax and using property binding to set the property and event binding to respond to changes. [ngModel] and (ngModelChange).

    * Izy:

    * html: use izy-iteratie tag and $izyiteratefieldid variable in the html template. groupMember properties are string replaced in the html.

    * framework: updateGroupsMembers, setGroupsParameters. getGroupsParameters

    * changes are explicit. Event handlers can be attached if needed.

    • Adding/removing/iterating HTML elements

    * Angular:

    * html: Ng(If/For/Switch)

    *

    * Izy:

    * html: Same paradigm for displaying and updating properties. To hide/show map data to css classes.

    • Component View / Data Exchange

    * Angular:

    * html:

    * Izy:

    * html: izy-iterate="", modName="componentPath/view"

    * api: use componentPath with groupsmembers and groupsparameters,

    • props drilling: Props drilling is a term used in React to describe a situation where data is passed down through multiple levels of components in the component tree via props.

    * Angular: Dependency Injection / Service

    * React: React Context API, Redux (global store), etc.

    * Izy: storeLib, frame_xxx, chain.get(''), ....


  • Izyware Help Articles
    Izyware Help Articles