isabella232 / angular-metaui

Framework for building angular applications declaratively using rules. For more information: https://sap.github.io/angular-metaui/html

Important Notice

This public repository is read-only and no longer maintained.

MetaUI for Angular - the declarative UI

Table of Contents

• Description
• Requirements
• Installation
• Limitations
• How to obtain support
• License

Description

Based on our Ariba's past effort and its framework called AribaWeb we are bringing over one of its core library called MetaUI into Angular world based fully on typescripts along with some necessary UI components to make declarative UI possible.

Credit: Based on original work: MetaUI: Craig Federighi (Ariba 2008)

Packages are organized into 3 main areas:

• Core UI framework providing reusable API which gives you additional layer on top of angular:
  • App Configuration & bootstraping
  • Wrappers and services to work with restful API
  • Convenient utility API for collections, language based operations
  • Unified Error management and Handling
• UI Components providing set of services and reusable components
  • Layouts
  • Widgets
  • Offers basic set of widgets which extending existing 3th-party libraries http://www.primefaces.org/primeng/ to match our custom usecases.
  • Error handling
  • Formatters
  • Dom Utilities
• Meta UI is framework for generating UI on the fly.

MetaUI is now in its own github repository @ngx-meta/rules to make sure it gets the attentions and mainly to be able to take it to the next level to support even more features such as JIT support and much more without breaking this existing project.

Both repositories will stay identical (compatible) for some time with a plan to slowly transition @ngx-meta/rules to be pure metaui module without any dependencies to any specific UI component library. Any improvements and features made in new git repo will be propagated back to this repo.

Therefore this library should be seen as a full stack framework where as MetaUI is only rule processing.

What is MetaUI

MetaUI is set of API and components which uses your model (in this case model is your domain object and meta data describing this object - called Meta Rules) to dynamically assemble User Interface for you on the fly without templates. Rather than letting you layout your fields for every usecase.

Motivation

Most of the UI code written in traditional frameworks is a mechanical application of 
(unstated) rules rooted in the domain object data model.
  						            
  						            -- Craig Federighi 	

The main motivation behind all this reusability and to minimize duplicate code as developers has tendency to build for every domain object and every situation extra user interface.

What is our Goal

Is to provide solution for generating fully functional UI application all only based rules declarativelly using new @ngx-meta/rules.

What do we mean fully by functional UI application ?

• Rules should not only generate single page forms but whole application with top level navigation followed by dashboards and different kinds of content
• Integrated angular's routing so we can dynamically transition between different pages without letting user to specify routes manually in the code.
• Each application should have full support to read/write data from/to REST API - all this needs to be integrated as part of rule framework

Project status

Angular-metaui is still under active development, where we need to support full set of widgets and layouts.

• We have basic set of widgets and layouts to build fully functional forms
• Meta Rules supports (on oss level) advanced layout (still need to implement the actual angular based components)
• We do support Modules concept, where we have Application.oss.

UI derived from Rules

MetaUI is heavily motivated by CSS and to better understand how our Meta Rules work let's review this picture bellow in order to find some similarities.

• On the left side we have HTML code which is just a div with class=box
• In the middle we have simple CSS rule and when this is executed inside your desktop browser the box class is matched and blue rectangle is rendered.
• If we run the same code on mobile device, the other rule is matched and at this time it will draw red circle. Extending common rule.

Using CSS is great way to influence and change the way how your HTML code is rendered.

MetaUI is similar

• In example before the environment along with the context was created by browser for us but in case of MetaUI we are creating it.
• On the picture above we have on the left side a HTML code - in this case its special component tag m-context that actually creates a context for us
• In this middle we have our rules just like we had css rule in previous example
• When we run this code a fully functional UI is assembled for us.
  • We are just changing the way our UI is generated just by modifying our rules.
  • In this case we are creating a context for object carRequest for operation View and later on for Edit and layout Inspect
  • By specifying just these 3 properties we are creating newContext and Meta Rules engine is tries to find the best match to figure out what UI to derive from it.

Requirements

Project have dependencies that require Node 8.9 or higher, together with NPM 5.5.1 or higher.

Installation

Install npm packages:

    npm install --no-audit

Build for first time:

    npm run build.packages

• This command assembles and copies necessary libraries to the dist directory. Once you run it then you can use regular ng build playground

Run development web server:

    ng serve playground

Now access http://localhost:4200/play

Or you can run other demo application, the one you can see in the demo:

    ng serve metaui-evolution

MetaUI Hacking

To start playing with the oss rules please checkout the lib/meta-ui-parser.md to know how.

Limitations

Current implementation is based on PrimeNG widget library and we are working to make MetaUI widget library independent.

How to obtain support

Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on StackOverflow where the questions should be tagged with tag sap-ariba in the description you should mention metaui.

On the other side if you find some problem or have suggestion please do not hesitate to open up new issue and properly marking if this is a bug or feature suggestion.

License

Copyright (c) 2017-2018 SAP Ariba or an SAP affiliate company. All rights reserved. This file is licensed under the Apache Software License, v. 2 except as noted otherwise in the LICENSE file.