{"id":21417921,"url":"https://github.com/msg-systems/uica-stack","last_synced_at":"2025-07-14T05:30:33.255Z","repository":{"id":57154322,"uuid":"50118065","full_name":"msg-systems/uica-stack","owner":"msg-systems","description":"User interface component architecture (UICA) - Stack composition","archived":false,"fork":false,"pushed_at":"2018-04-13T12:11:21.000Z","size":2936,"stargazers_count":4,"open_issues_count":0,"forks_count":3,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-01T19:39:37.542Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/msg-systems.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-21T15:52:32.000Z","updated_at":"2018-11-26T13:54:05.000Z","dependencies_parsed_at":"2022-09-20T20:51:58.194Z","dependency_job_id":null,"html_url":"https://github.com/msg-systems/uica-stack","commit_stats":null,"previous_names":["msg-systems/msg-js-spa-framework"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msg-systems%2Fuica-stack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msg-systems%2Fuica-stack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msg-systems%2Fuica-stack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msg-systems%2Fuica-stack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/msg-systems","download_url":"https://codeload.github.com/msg-systems/uica-stack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225950757,"owners_count":17550318,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-22T19:18:09.145Z","updated_at":"2024-11-22T19:18:09.755Z","avatar_url":"https://github.com/msg-systems.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# uica-stack\n\nUser Interface Component Architecture (UICA) Stack is a stack that can be used for lightweight building HTML5/JavaScript Single Page Application.\n\n\n\u003cp/\u003e\n\u003cimg src=\"https://nodei.co/npm/uica-stack.png?downloads=true\u0026stars=true\" alt=\"\"/\u003e\n\n\u003cp/\u003e\n\u003cimg src=\"https://david-dm.org/msg-systems/uica-stack.png\" alt=\"\"/\u003e\n\n## Purpose\nThe `uica-stack` is the optional large HTML5 Rich-Client\nframework for providing common functionality to the applications, either\nby itself or through embedded third-party libraries and frameworks.\n\nMajor goals are:\n\n- Definition of a standard set of third-party libraries and frameworks used for SPA development\n- Using the `uica-stack` should therefor minimize the configuration time of the SPA library building in concrete SPA projects\n\n## Getting started\n\nTo build an SPA project based on `uica-stack` you have to install it via npm (shell or package.json):\n\n```shell\nnpm install uica-stack --save-dev\n```\n\nOnce it is installed, add a `delivery.yaml` to the SPA's root folder. `uica-stack` is based upon [delivery-packer](https://github.com/msg-systems/delivery-packer) which handles the library artifact creation. Based on `delivery.yaml` files the delivery artifact can be assembled.\n\nSo basically `uica-stack` only assembles the proper JavaScript frameworks to a delivery artifact. And due to the fact that [delivery-packer](https://github.com/msg-systems/delivery-packer) is modular - concrete SPA projects can take advantage of `uica-stack` by simply importing it into their `delivery.yaml`.\n\nTo shorten the ramp-up time you can fork [uica-skeleton](https://github.com/msg-systems/uica-skeleton) and start with a fresh SPA environment including some examples and documentation.\n\n```yaml\nimport:\n# use the uica-stack as base\n- uica-stack\n# you might add new delivery parts needed by the SPA project\n- {path_to_project_deliverables}/**/*.yaml\n\nbuild:\n# you might exclude deliverables from uica-stack if you want/have to (note they all start with uica.)\n- \"!uica.componentjs\"\n# and add proper replacements on your own - just ensure that those alias names are registered\n- {yournamespace}.angularjs\n```\n\nIf that `delivery.yaml` is fully configured - run the `delivery-packer` either with the grunt plugin or with the command line interface (see [delivery-packer](https://github.com/msg-systems/delivery-packer)).\n\nInclude the artifact output of the `delivery-packer` into your SPA HTML file.\n\n## Behind the scene\n\nCreating an UI Application typically considers all functional requirements and tries to map those to an technical - *developable* - view. \n\nTypical functional requirements and a possible layer concept as a technical view will be detailed further below. \n\n### Functional requirements\nSingle page applications face alot of functional requirements like:\n\n- DOM-Manipulation\n- HTML Markups\n- HTML Styling using CSS\n- Responsive Design\n- Browser navigation\n- Drag \u0026 Drop\n- Browser differences and incompatibilities\n- Internationalization / Localization\n\t- Dates\n\t- Numbers\n\t- Texts\n- Error handling\n- Keyboard control\n- Touch and gesture control\n- Symbols, icons and images\n- UI Widgets\n- and many more\n\n### 12 layers of an UI application\n\nComing from the users point of view and going thru the UI application until the backend takes over we face different layers of concern:\n\n1.  __Interaction Concept__:\u003cbr\u003e\n    e.g. Mouse, Keyboard, Touchscreen, Gesture, Dialog Flow\n\n2.  __Optical Theme__:\u003cbr\u003e\n    e.g. Shape, Color, Gradient, Shadow, Font, Icon\n\n3.  __Interface States__:\u003cbr\u003e\n    e.g. Rendered, Enabled, Visible, Focused, Animated, Warning, Error\n\n4.  __Interface Elements__:\u003cbr\u003e\n    e.g. Icon, Label, Text Paragraph, Image, Form, Text-Field, Text-Area, \n    Date Picker, Toggle, Radio Button, Checkbox, Select List, Slider, \n    Progress Bar, Hyperlink, Popup Menu, Dropdown Menu, Toolbar, Tab, \n    Pill, Breadcrumb, Pagination, Badge, Alert\n\n5.  __Interface Layouting__:\u003cbr\u003e\n    e.g. Responsive Design, Media Query, Panel, Modal, Frame, Grid, Table,\n    Padding, Border, Margin, Alignment, Force, Magnetism\n\n6.  __Mask Rendering__:\u003cbr\u003e\n    e.g. Markup Generation, Value Formatting, Virtual DOM\n\n7.  __Data Binding__:\u003cbr\u003e\n    e.g. Reactive, Observer, Value Converting, Unidirectional, \n    Bidirectional, Incremental\n\n8.  __Presentation Model__:\u003cbr\u003e\n    e.g. Parameter, Command, State, Data, Event\n\n9.  __Dialog Control__:\u003cbr\u003e\n    e.g. Service, Event, Model, Socket\n\n10. __Dialog Structure__:\u003cbr\u003e\n    e.g. Model, View, Controller, Hierarchical Composition\n\n11. __Business Model__:\u003cbr\u003e\n    e.g. Entity, Field, Relationship\n\n12. __Backend Communication__:\u003cbr\u003e\n    e.g. Request/Response, Synchronization, Push, Pull, Pulled-Push\n\nUsing a single framework like [AngularJS](https://angularjs.org/) or [ExtJS](https://www.sencha.com/products/extjs/#overview) often does not address all layers of the UI application and you end up in taking third party libraries into your application.\n\n## Standard set of frameworks \n\n`uica-stack` cherry picks the best frameworks to cover most of the layers. Some layers will not be handled by `uica-stack` since they are too application specific and should not be handled globally like 'Interface Elements' or 'Optical Theme'.\n\nEach concrete SPA must fill this layers with proper libraries or frameworks on its own. Take a look at [uica-widgets](https://github.com/msg-systems/uica-widgets) if you need assistance for layer 'Interface Elements' and 'Optical Theme'.\n\nThe following table lists all frameworks and libraries mapped to the 12 UI layers (technical view). Some libraries could not be mapped to a specific UI layer since they cover a global purpose needed by web applications like browser incompatibilities or JavaScript language basics.\n\n\u003ctable style=\"width:100%\"\u003e\n\u003ctbody\u003e\n  \u003ctr\u003e\n\t\u003cth width=\"50%\"\u003eFramework\u003c/th\u003e\n\t\u003cth width=\"10%\"\u003eVersion\u003c/th\u003e\n\t\u003cth width=\"10%\"\u003eRelevance\u003c/th\u003e\n\t\u003cth\u003eglobal purpose\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n\t\u003ctd\u003e\u003ca href='https://www.npmjs.com/package/console-polyfill'\u003e\u003cimg src=\"https://nodei.co/npm/console-polyfill.png?downloads=true\u0026stars=true\" alt=\"\"/\u003e\u003c/a\u003e\u003c/td\u003e\n\t\u003ctd\u003e0.3.0\u003c/td\u003e\n\t\u003ctd\u003eJS\u003c/td\u003e\t\n\t\u003ctd rowspan=\"5\"\u003eBrowser incompatibilities\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n\t\u003ctd\u003e\u003ca href='https://www.npmjs.com/package/es5-shim'\u003e\u003cimg src=\"https://nodei.co/npm/es5-shim.png?downloads=true\u0026stars=true\" alt=\"\"/\u003e\u003c/a\u003e\u003c/td\u003e\n\t\u003ctd\u003e4.5.10\u003c/td\u003e\n\t\u003ctd\u003eJS\u003c/td\u003e\t\n  \u003c/tr\u003e\n  \u003ctr\u003e\n\t\u003ctd\u003e\u003ca href='https://www.npmjs.com/package/json-js'\u003e\u003cimg src=\"https://nodei.co/npm/json-js.png?downloads=true\u0026stars=true\" alt=\"\"/\u003e\u003c/a\u003e\u003c/td\u003e\n\t\u003ctd\u003e1.1.2\u003c/td\u003e\n\t\u003ctd\u003eJS\u003c/td\u003e\t\n  \u003c/tr\u003e\n  \u003ctr\u003e\n\t\u003ctd\u003e\u003ca href='https://www.npmjs.com/package/Base64'\u003e\u003cimg src=\"https://nodei.co/npm/Base64.png?downloads=true\u0026stars=true\" alt=\"\"/\u003e\u003c/a\u003e\u003c/td\u003e\n\t\u003ctd\u003e1.0.1\u003c/td\u003e\n\t\u003ctd\u003eJS\u003c/td\u003e\t\n  \u003c/tr\u003e\n  \u003ctr\u003e\n\t\u003ctd\u003e\u003ca href='https://www.npmjs.com/package/normalize.css'\u003e\u003cimg src=\"https://nodei.co/npm/normalize.css.png?downloads=true\u0026stars=true\" alt=\"\"/\u003e\u003c/a\u003e\u003c/td\u003e\n\t\u003ctd\u003e7.0.0\u003c/td\u003e\n\t\u003ctd\u003eCSS\u003c/td\u003e\t\n  \u003c/tr\u003e\n  \u003ctr\u003e\n\t\u003ctd\u003e\u003ca href='https://www.npmjs.com/package/modernizr'\u003e\u003cimg src=\"https://nodei.co/npm/modernizr.png?downloads=true\u0026stars=true\" alt=\"\"/\u003e\u003c/a\u003e\u003c/td\u003e\n\t\u003ctd\u003e3.5.0\u003c/td\u003e\n\t\u003ctd\u003eJS\u003c/td\u003e\n\t\u003ctd\u003eBrowser feature detection\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n\t\u003ctd\u003e\u003ca href='https://www.npmjs.com/package/lodash'\u003e\u003cimg src=\"https://nodei.co/npm/lodash.png?downloads=true\u0026stars=true\" alt=\"\"/\u003e\u003c/a\u003e\u003c/td\u003e\n\t\u003ctd\u003e4.17.5\u003c/td\u003e\n\t\u003ctd\u003eJS\u003c/td\u003e\n\t\u003ctd\u003eArray handling\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n\t\u003ctd\u003e\u003ca href='https://www.npmjs.com/package/js-htmlencode'\u003e\u003cimg src=\"https://nodei.co/npm/js-htmlencode.png?downloads=true\u0026stars=true\" alt=\"\"/\u003e\u003c/a\u003e\u003c/td\u003e\n\t\u003ctd\u003e0.3.0\u003c/td\u003e\n\t\u003ctd\u003eJS\u003c/td\u003e\n\t\u003ctd\u003eHTML Encoding/Decoding\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n   \t\u003ctd\u003e\u003ca href='https://www.npmjs.com/package/bluebird'\u003e\u003cimg src=\"https://nodei.co/npm/bluebird.png?downloads=true\u0026stars=true\" alt=\"\"/\u003e\u003c/a\u003e\u003c/td\u003e\n   \t\u003ctd\u003e3.5.1\u003c/td\u003e\n   \t\u003ctd\u003eJS\u003c/td\u003e\n   \t\u003ctd\u003ePromises\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003ctable style=\"width:100%\"\u003e\n\u003ctbody\u003e\n  \u003ctr\u003e\n\t\u003cth width=\"50%\"\u003eFramework\u003c/th\u003e\n\t\u003cth width=\"10%\"\u003eVersion\u003c/th\u003e\n\t\u003cth width=\"10%\"\u003eRelevance\u003c/th\u003e\n\t\u003cth\u003eLayer\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n\t\u003ctd\u003e\u003ca href='https://www.npmjs.com/package/mousetrap'\u003e\u003cimg src=\"https://nodei.co/npm/mousetrap.png?downloads=true\u0026stars=true\" alt=\"\"/\u003e\u003c/a\u003e\u003c/td\u003e\n\t\u003ctd\u003e1.6.1\u003c/td\u003e\n\t\u003ctd\u003eJS\u003c/td\u003e\n\t\u003ctd\u003e1. Interaction Concept - Keyboard\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n\t\u003ctd\u003e\u003ca href='https://www.npmjs.com/package/hammerjs'\u003e\u003cimg src=\"https://nodei.co/npm/hammerjs.png?downloads=true\u0026stars=true\" alt=\"\"/\u003e\u003c/a\u003e\u003c/td\u003e\n\t\u003ctd\u003e2.0.8\u003c/td\u003e\n\t\u003ctd\u003eJS\u003c/td\u003e\n\t\u003ctd\u003e1. Interaction Concept - Touch, Gesture\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n\t\u003ctd\u003e\u003ca href='https://www.npmjs.com/package/animate.css'\u003e\u003cimg src=\"https://nodei.co/npm/animate.css.png?downloads=true\u0026stars=true\" alt=\"\"/\u003e\u003c/a\u003e\u003c/td\u003e\n\t\u003ctd\u003e3.5.2\u003c/td\u003e\n\t\u003ctd\u003eCSS\u003c/td\u003e\n\t\u003ctd\u003e3. Interface States\u003cbr\u003e6. Mask Rendering\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n\t\u003ctd\u003e\u003ca href='https://www.npmjs.com/package/jquery'\u003e\u003cimg src=\"https://nodei.co/npm/jquery.png?downloads=true\u0026stars=true\" alt=\"\"/\u003e\u003c/a\u003e\u003c/td\u003e\n\t\u003ctd\u003e2.2.4\u003c/td\u003e\n\t\u003ctd\u003eJS\u003c/td\u003e\n\t\u003ctd\u003e3. Interface States\u003cbr\u003e6. Mask Rendering\u003cbr\u003e7. Data Binding (manual)\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n\t\u003ctd\u003e\u003ca href='https://www.npmjs.com/package/jquery-markup'\u003e\u003cimg src=\"https://nodei.co/npm/jquery-markup.png?downloads=true\u0026stars=true\" alt=\"\"/\u003e\u003c/a\u003e\u003c/td\u003e\n\t\u003ctd\u003e1.0.38\u003c/td\u003e\n\t\u003ctd\u003eJS\u003c/td\u003e\n\t\u003ctd\u003e6. Mask Rendering\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n\t\u003ctd\u003e\u003ca href='https://www.npmjs.com/package/vue'\u003e\u003cimg src=\"https://nodei.co/npm/vue.png?downloads=true\u0026stars=true\" alt=\"\"/\u003e\u003c/a\u003e\u003c/td\u003e\n\t\u003ctd\u003e2.5.13\u003c/td\u003e\n\t\u003ctd\u003eJS\u003c/td\u003e\n\t\u003ctd\u003e6. Mask Rendering\u003cbr\u003e7. Data Binding (programmatic)\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n\t\u003ctd\u003e\u003ca href='https://www.npmjs.com/package/handlebars'\u003e\u003cimg src=\"https://nodei.co/npm/handlebars.png?downloads=true\u0026stars=true\" alt=\"\"/\u003e\u003c/a\u003e\u003c/td\u003e\n\t\u003ctd\u003e4.0.11\u003c/td\u003e\n\t\u003ctd\u003eJS\u003c/td\u003e\n\t\u003ctd\u003e6. Mask Rendering - Template engine\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n\t\u003ctd\u003e\u003ca href='https://www.npmjs.com/package/moment'\u003e\u003cimg src=\"https://nodei.co/npm/moment.png?downloads=true\u0026stars=true\" alt=\"\"/\u003e\u003c/a\u003e\u003c/td\u003e\n\t\u003ctd\u003e2.20.1\u003c/td\u003e\n\t\u003ctd\u003eJS - Date\u003c/td\u003e\n\t\u003ctd\u003e6. Mask Rendering - Internationalization / Localization\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n\t\u003ctd\u003e\u003ca href='https://www.npmjs.com/package/numeral'\u003e\u003cimg src=\"https://nodei.co/npm/numeral.png?downloads=true\u0026stars=true\" alt=\"\"/\u003e\u003c/a\u003e\u003c/td\u003e\n\t\u003ctd\u003e2.0.6\u003c/td\u003e\n\t\u003ctd\u003eJS - Number\u003c/td\u003e\n\t\u003ctd\u003e6. Mask Rendering - Internationalization / Localization\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n\t\u003ctd\u003e\u003ca href='https://www.npmjs.com/package/i18next'\u003e\u003cimg src=\"https://nodei.co/npm/i18next.png?downloads=true\u0026stars=true\" alt=\"\"/\u003e\u003c/a\u003e\u003c/td\u003e\n\t\u003ctd\u003e3.4.4\u003c/td\u003e\n\t\u003ctd\u003eJS - String\u003c/td\u003e\n\t\u003ctd\u003e6. Mask Rendering - Internationalization / Localization\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n\t\u003ctd\u003e\u003ca href='https://www.npmjs.com/package/i18next-xhr-backend'\u003e\u003cimg src=\"https://nodei.co/npm/i18next-xhr-backend.png?downloads=true\u0026stars=true\" alt=\"\"/\u003e\u003c/a\u003e\u003c/td\u003e\n\t\u003ctd\u003e1.2.0\u003c/td\u003e\n\t\u003ctd\u003eJS - String\u003c/td\u003e\n\t\u003ctd\u003e12. Backend Communication - Internationalization / Localization\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n\t\u003ctd\u003e\u003ca href='https://www.npmjs.com/package/jquery-i18next'\u003e\u003cimg src=\"https://nodei.co/npm/jquery-i18next.png?downloads=true\u0026stars=true\" alt=\"\"/\u003e\u003c/a\u003e\u003c/td\u003e\n\t\u003ctd\u003e1.1.0\u003c/td\u003e\n\t\u003ctd\u003eHTML DOM\u003c/td\u003e\n\t\u003ctd\u003e6. Mask Rendering - Internationalization / Localization\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n\t\u003ctd\u003e\u003ca href='https://www.npmjs.com/package/componentjs'\u003e\u003cimg src=\"https://nodei.co/npm/componentjs.png?downloads=true\u0026stars=true\" alt=\"\"/\u003e\u003c/a\u003e\u003cbr\u003e\n\tAdditionally abstract classes and traits for ComponentJS are provided.\u003cbr\u003e\n\tSee \u003ca href=\"#abstractClasses\"\u003eStandard set of abstract classes, traits and components\u003c/a\u003e for detailed information.\n\t\u003c/td\u003e\n\t\u003ctd\u003e1.6.1\u003c/td\u003e\n\t\u003ctd\u003eJS\u003c/td\u003e\n\t\u003ctd\u003e8. Presentation Model\u003cbr\u003e9. Dialog Control\u003cbr\u003e10. Dialog Structure\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n\t\u003ctd\u003e\u003ca href='https://www.npmjs.com/package/datamodeljs'\u003e\u003cimg src=\"https://nodei.co/npm/datamodeljs.png?downloads=true\u0026stars=true\" alt=\"\"/\u003e\u003c/a\u003e\u003c/td\u003e\n\t\u003ctd\u003e1.3.2\u003c/td\u003e\n\t\u003ctd\u003eJS\u003c/td\u003e\n\t\u003ctd\u003e11. Business Model\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n\t\u003ctd\u003e\u003ca href='https://www.npmjs.com/package/qwest'\u003e\u003cimg src=\"https://nodei.co/npm/qwest.png?downloads=true\u0026stars=true\" alt=\"\"/\u003e\u003c/a\u003e\u003c/td\u003e\n\t\u003ctd\u003e4.5.0\u003c/td\u003e\n\t\u003ctd\u003eJS\u003c/td\u003e\n\t\u003ctd\u003e12. Backend Communication - AJAX\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n\t\u003ctd\u003e\u003ca href='https://www.npmjs.com/package/socket.io-client'\u003e\u003cimg src=\"https://nodei.co/npm/socket.io-client.png?downloads=true\u0026stars=true\" alt=\"\"/\u003e\u003c/a\u003e\u003c/td\u003e\n\t\u003ctd\u003e1.5.1\u003c/td\u003e\n\t\u003ctd\u003eJS\u003c/td\u003e\n\t\u003ctd\u003e12. Backend Communication - WebSockets\u003c/td\u003e\n  \u003c/tr\u003e\u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003ch2 id=\"abstractClasses\"\u003eStandard set of abstract classes, traits and components\u003c/h2\u003e\n\nNext to the libraries and frameworks the `uica-stack` provides abstract classes, traits (mixins) and components.\n\n### abstract classes\n\nFor each part of a component (controller, model and view) a abstract class is provided. They represent an abstract layer to work with ComponentJS. Every component must extend from this abstract class.\n\n\u003cul\u003e\n\u003cli\u003econtroller: app.fw.abstract.ctrl\u003c/li\u003e\n\u003cli\u003emodel: app.fw.abstract.model\u003c/li\u003e\n\u003cli\u003eview: app.fw.abstract.view\u003c/li\u003e\n\u003c/ul\u003e\n\n\n### traits\nThe `uica-stack` provides some helpful traits. Some of them are already mixed in in the components of the `uica-stack`, some can be mixed in to your specific components, if needed.\n\n#### i18next\nThis trait handles the loading of the i18next-keys from the backend. By default this trait is included by the root-component.\n\nThe default value for the resourcePath is 'app/{{lng}}-translation.json', but can be overwritten from the specific root component of your application.\n\nThe specific root component must implement the function 'userLanguage' to return the current language of the application.\n\u003cul\u003e\n\u003cli\u003econtroller: app.fw.trait.root.i18next.ctrl\u003c/li\u003e\n\u003c/ul\u003e\n\n#### serviceError\nThe default error handling callback for service methods is available through mixing in this trait. It is already mixed in the abstract component. So of the error handling is taking care due extending from this component.\n\n\u003cul\u003e\n\u003cli\u003econtroller: app.fw.trait.abstract.serviceError.ctrl\u003c/li\u003e\n\u003c/ul\u003e\n\nWhen the result object is an error object, this method takes care of the error analysis and it creates the proper messages and throws it to the top level error handler with publish(\"fw:handleError\"). To react to the error, the event \"fw:handleError\" must be subscribed.\n\n\n#### registerAPI\nSometimes it is neccassary that the controller can asked its view about a markup. If that is needed, this trait must be mixed in, to the specific view.\nGenerally a Controller should only call a registered method of the view to get a views markup.\n\n\u003cul\u003e\n\u003cli\u003eview: app.fw.trait.abstract.registerAPI.view\u003c/li\u003e\n\u003c/ul\u003e\n\n\n### components\nEach application needs a service and a root component. The `uica-stack` provides a service and a root component with some basic functionalities that can be extended.\n\nThe service component only should recieve events fromt the root component. For this purpose it provides an wrapper function 'registerService'. For the communication between the service and the root component, the root component provides the counterpart of this wrapper function - 'subscribeDataService'.\n\n#### service\nThe service component, is the only component that is not devided into controller, model and view, because it does not need a own model and a user interface. \nIt is neccassary to extend from this service component to use its provided function.\n\n\n\u003cul\u003e\n\u003cli\u003eapp.fw.sv\u003c/li\u003e\n\u003c/ul\u003e\n\nIts major task is the communictaion with the backend. Therefore the method *registerService (methodName, serviceName, serviceFunction, callbackFunction[optional])* is provided. \n\n\t// EXAMPLE for calling registerService:\n\t// the variable self.serviceRoot was defined before\n\t\n\tself.registerService('GET', 'readClaimPositions', function (client, claimNumber, callback) {\n    \treturn {\n        \toptions: {{object: options}},\n            serviceURL: {{string: URL resolved with given parameters \"client\" and \"claimNumber\"}},\n            callback: callback\n        };\n    });\nThe available options you can find at the documentation from **[qwest](https://github.com/pyrsmk/qwest)**, as **[qwest](https://github.com/pyrsmk/qwest)** is used internal for the service-calls.\nFor default service options, the variable *defaultServiceOptions* is defined and set to *{dataType: 'json'}* by default. It is possible to overwrite this variable.\n\nFurthermore it provides functions to set and get the service-root-URL and to get the service-URL of a given service.\n\n\n#### root\nA specific root component is responsible for a lot of tasks.\n\nThis basic root component provides the handling of window resizing.\nIt provides a function for all components to read the service-URL from a specific service from the service component. Furthermore it includes the traits *app.fw.trait.root.i18next.ctrl* and *app.fw.trait.abstract.serviceError.ctrl*.\n\u003cul\u003e\n\u003cli\u003econtroller: app.fw.root.ctrl\u003c/li\u003e\n\u003cli\u003emodel: app.fw.root.model\u003c/li\u003e\n\u003cli\u003eview: app.fw.root.view\u003c/li\u003e\n\u003c/ul\u003e\n\n\n\u003ch2\u003eStyle Mixins\u003c/h2\u003e\nThe `uica-stack` includes some useful mixins for styling as well. This can be used through importing the file *uica.less* in your .less-files:\n\n\t\t@import \"../../../../node_modules/uica-stack/src/app/uica\";\n\n\n\u003ch2\u003eMockdata Registry\u003c/h2\u003e\nA mockdata registry is also delivered by the `uica-stack`. To use it, it needs to be required:\n\n\t\trequire('uica-stack/mockdata-registry')\n\n\u003ch2\u003eMigration guide to 1.0.0\u003c/h2\u003e\nMajor changes need to be done in your application if you used versions \u003c 1.0.0. Here is a list of steps that should help you migrating to \u003e=1.0.0:\n\n* delivery parts have been renamed from \u003ccode\u003espa-fw\u003c/code\u003e to \u003ccode\u003euica\u003c/code\u003e. If your delivery build fails take a look at the output list of available delivery parts.\n* delivery parts holding a polyfill library have earned the prefix \u003ccode\u003euica.polyfill\u003c/code\u003e (and maybe lost their old \u003ccode\u003e-polyfill\u003c/code\u003e suffix). If your delivery build fails take a look at the output list of available delivery parts.\n* Security leaks in jQuery 2.x forced an upgrade to 3.x. This might bring erros to jquery plugins and code in your application. Ensure that all your jQuery related code is working with jQuery \u003e3.0.0\n* library 'numeral' has changed its API. Instead of numeral.language() use numeral.locale() now.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmsg-systems%2Fuica-stack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmsg-systems%2Fuica-stack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmsg-systems%2Fuica-stack/lists"}