• PRODUCT

    PRODUCT

  • PRICING
    PRICING

  • HELP
    HELP

  • BLOG
    BLOG

  • APPSTORE
    APPSTORE

  • COMPANY
    COMPANY

  • LEGAL
    LEGAL

  • LOGIN
    LOGIN

  • Workflow Automation

    Workflow Automation

  • AI Assisted Content Management System
    AI Assisted Content Management System

  • Analytics & Lead Generation
    Analytics & Lead Generation

  • Automation Projects
    Automation Projects

  • Browser Extension Apps
    Browser Extension Apps

  • Dashboard Theme Analysis: LN1
    Dashboard Theme Analysis: LN1

  • Data Exchange Automation Tools
    Data Exchange Automation Tools

  • Getting Started With Building Hybrid Apps
    Getting Started With Building Hybrid Apps

  • Izyware Hybrid UX Design Guidelines
    Izyware Hybrid UX Design Guidelines

  • Onboarding New Organizations Using Izyware
    Onboarding New Organizations Using Izyware

  • Quick Visualization and Monitoring
    Quick Visualization and Monitoring

  • Unified Metrics Stream Pipeline
    Unified Metrics Stream Pipeline

  • Legacy Features and Backward Compatibility
    Legacy Features and Backward Compatibility

  • How does the legacy frame architecture work
    How does the legacy frame architecture work

  • Izyware Legacy UI Circus Engine
    Izyware Legacy UI Circus Engine

  • Case Studies and Knowledge Center
    Case Studies and Knowledge Center

  • Angular and React Embedding Guide
    Angular and React Embedding Guide

  • Build and deploy a content distribution app in less than five minutes: Part II
    Build and deploy a content distribution app in less than five minutes: Part II

  • Comparison of CSS Preprocessors SASS vs LESS vs STYLUS
    Comparison of CSS Preprocessors SASS vs LESS vs STYLUS

  • Comparison of node.js test frameworks and utilities: lab, chai, sinon
    Comparison of node.js test frameworks and utilities: lab, chai, sinon

  • Manage and automate your day to day business tools using IzyCloud Tasks: Part I
    Manage and automate your day to day business tools using IzyCloud Tasks: Part I

  • MySql Performance Optimization
    MySql Performance Optimization

  • Onboarding Tutorial: Creating & publishing an app
    Onboarding Tutorial: Creating & publishing an app

  • Rebranding and Customizing Websites
    Rebranding and Customizing Websites

  • Using IzyCloud on Android: IzyCloud Query App
    Using IzyCloud on Android: IzyCloud Query App

  • Technical Resources
    Technical Resources

  • .NET SDKCore IzyWare
    .NET SDKCore IzyWare

  • av-stream README
    av-stream README

  • ElasticSearch IzyWare Data Console Feature
    ElasticSearch IzyWare Data Console Feature

  • End To End Testing
    End To End Testing

  • End To End Testing, Part II
    End To End Testing, Part II

  • frames and nav (ui/w/shell/navmulti) README
    frames and nav (ui/w/shell/navmulti) README

  • izy-circus README
    izy-circus README

  • izy-idman-tools README
    izy-idman-tools README

  • izy-pop3 README
    izy-pop3 README

  • izy-proxy README
    izy-proxy README

  • izy-sync README
    izy-sync README

  • IzyIDE README
    IzyIDE README

  • izymodtask readme
    izymodtask readme

  • IzyShell readme
    IzyShell readme

  • ReKey Feature Package README for IzyWare SQL Console
    ReKey Feature Package README for IzyWare SQL Console

  • Single Sign-On (SSO) README
    Single Sign-On (SSO) README

  • Tasks Migration : V5 guidelines
    Tasks Migration : V5 guidelines

  • Users & Groups README
    Users & Groups README

  • V5 Migration : apps/pulse guidelines README
    V5 Migration : apps/pulse guidelines README

  • Container Orchestration
    Container Orchestration

  • Izy Kubernetes Internal Networking Troubleshooting
    Izy Kubernetes Internal Networking Troubleshooting

  • Application Hosting
    Application Hosting

  • Content Publisher
    Content Publisher

  • Domain Registration
    Domain Registration

  • Email Hosting
    Email Hosting

  • Izyware Browser Extension
    Izyware Browser Extension

  • Izyware Deployment Engine
    Izyware Deployment Engine

  • Izyware Session Management
    Izyware Session Management

  • Messaging System APIs and functionality
    Messaging System APIs and functionality

  • Single SignOn
    Single SignOn

  • Integration APIs
    Integration APIs

  • iOS SDK
    iOS SDK

  • Azure and .NET
    Azure and .NET

  • izy-devops
    izy-devops

  • << Case Studies and Knowledge Center
    << Case Studies and Knowledge Center

  • Build and deploy a content distribution app in less than five minutes: Part II >>
    Build and deploy a content distribution app in less than five minutes: Part II >>

  • 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(''), ....