<commit_before># Terminology and dev tips

## Overview

This guide contains the definition of the terms widely used across different JS SDK areas, various development tips and description of the SDK concepts.

## Terms

### Manifest

The unified structure which describes a certain application, control or a plugin is called a *manifest*. Each component type has a special "manifest" function ([Echo.Control.manifest](#!/api/Echo.Control-static-method-manifest), [Echo.Plugin.manifest](#!/api/Echo.Plugin-static-method-manifest), [Echo.App.manifest](#!/api/Echo.App-static-method-manifest)) to generate an empty *manifest* skeleton which can be filled in with the business logic. In addition to the "manifest" function, there is a set of "create" functions to turn static definition into the JS classes ([Echo.Control.create](#!/api/Echo.Control-static-method-create), [Echo.Plugin.create](#!/api/Echo.Plugin-static-method-create) and [Echo.App.create](#!/api/Echo.App-static-method-create)). More information about the use of the *manifest* can be found in the [Contol](#!/guide/how_to_develop_control), [Plugin](#!/guide/how_to_develop_plugin) or [App](#!/guide/how_to_develop_app) development guides.

### Control

*Control* is a JavaScript class with the pre-defined structure (generated out of the control manifest) which represents a certain set of discrete funcitonality. Control examples: [Stream control](#!/api/Echo.StreamServer.Controls.Stream), [Submit control](#!/api/Echo.StreamServer.Controls.Submit), [Auth control](#!/api/Echo.IdentityServer.Controls.Auth), etc. More information about the Controls development can be found in [the hands-on guide](#!/guide/how_to_develop_control).

### Plugin

*Plugin* is a JavaScript class with the pre-defined structure (generated out of the plugin manifest) which extends a certain part of a Control or an App. Plugin examples: [Reply](#!/api/Echo.StreamServer.Controls.Stream.Item.Plugins.Reply), [Edit](#!/api/Echo.StreamServer.Controls.Stream.Item.Plugins.Edit), [Like](#!/api/Echo.StreamServer.Controls.Stream.Item.Plugins.Like). More information about the Plugins development can be found in [the hands-on guide](#!/guide/how_to_develop_plugin).

### Application (aka App)

*Application* (or *App*) is a JavaScript class with the pre-defined structure (generated out of the app manifest) which combines multiple controls and plugins into a package to achieve a certain functionality. More information about the Apps development can be found in [the hands-on guide](#!/guide/how_to_develop_app).

### Renderer

The appearance of an application can be considered as a composition of its visual components, which are in fact DOM elements with its own structure. Function which produces specific component or modifies it is called *Renderer* and is in fact the minimal entity in terms of Echo component visual design.

## Creating a JavaScript closure for the components

Any Echo JS SDK component should be placed to a separate JS closure to provide a unique namespace for the component and avoid code intersection.

	@example
	(function(jQuery) {
	"use strict";

	var $ = jQuery;

	// component code goes here

	})(Echo.jQuery);

Due to the fact that Echo JS SDK uses a separate jQuery instance (available as Echo.jQuery), we pass the Echo.jQuery reference as the anonymous function argument and accept is as jQuery variable. In addition to that we add the $ variable and link it to the same jQuery reference. So inside the JS closure both "jQuery" and "$" vars are available, like on a regular page with the jQuery lib included.

Also we add the directive to switch the JS code execution to the strict mode ("user strict"). It helps to avoid the mistakes (such as using the global vars in inappropriate places, etc) while developing the code + the code which works in the strict mode will be minified without any issues.

## Rendering engine

How the rendering works...<commit_msg>[docs] rendering engine draft<commit_after># Terminology and dev tips

## Overview

This guide contains the definition of the terms widely used across different JS SDK areas, various development tips and description of the SDK concepts.

## Terms

### Manifest

The unified structure which describes a certain application, control or a plugin is called a *manifest*. Each component type has a special "manifest" function ([Echo.Control.manifest](#!/api/Echo.Control-static-method-manifest), [Echo.Plugin.manifest](#!/api/Echo.Plugin-static-method-manifest), [Echo.App.manifest](#!/api/Echo.App-static-method-manifest)) to generate an empty *manifest* skeleton which can be filled in with the business logic. In addition to the "manifest" function, there is a set of "create" functions to turn static definition into the JS classes ([Echo.Control.create](#!/api/Echo.Control-static-method-create), [Echo.Plugin.create](#!/api/Echo.Plugin-static-method-create) and [Echo.App.create](#!/api/Echo.App-static-method-create)). More information about the use of the *manifest* can be found in the [Contol](#!/guide/how_to_develop_control), [Plugin](#!/guide/how_to_develop_plugin) or [App](#!/guide/how_to_develop_app) development guides.

### Control

*Control* is a JavaScript class with the pre-defined structure (generated out of the control manifest) which represents a certain set of discrete funcitonality. Control examples: [Stream control](#!/api/Echo.StreamServer.Controls.Stream), [Submit control](#!/api/Echo.StreamServer.Controls.Submit), [Auth control](#!/api/Echo.IdentityServer.Controls.Auth), etc. More information about the Controls development can be found in [the hands-on guide](#!/guide/how_to_develop_control).

### Plugin

*Plugin* is a JavaScript class with the pre-defined structure (generated out of the plugin manifest) which extends a certain part of a Control or an App. Plugin examples: [Reply](#!/api/Echo.StreamServer.Controls.Stream.Item.Plugins.Reply), [Edit](#!/api/Echo.StreamServer.Controls.Stream.Item.Plugins.Edit), [Like](#!/api/Echo.StreamServer.Controls.Stream.Item.Plugins.Like). More information about the Plugins development can be found in [the hands-on guide](#!/guide/how_to_develop_plugin).

### Application (aka App)

*Application* (or *App*) is a JavaScript class with the pre-defined structure (generated out of the app manifest) which combines multiple controls and plugins into a package to achieve a certain functionality. More information about the Apps development can be found in [the hands-on guide](#!/guide/how_to_develop_app).

### Renderer

The appearance of an application can be considered as a composition of its visual components, which are in fact DOM elements with its own structure. Function which produces specific component or modifies it is called *Renderer* and is in fact the minimal entity in terms of Echo component visual design.

## Creating a JavaScript closure for the components

Any Echo JS SDK component should be placed to a separate JS closure to provide a unique namespace for the component and avoid code intersection.

	@example
	(function(jQuery) {
	"use strict";

	var $ = jQuery;

	// component code goes here

	})(Echo.jQuery);

Due to the fact that Echo JS SDK uses a separate jQuery instance (available as Echo.jQuery), we pass the Echo.jQuery reference as the anonymous function argument and accept is as jQuery variable. In addition to that we add the $ variable and link it to the same jQuery reference. So inside the JS closure both "jQuery" and "$" vars are available, like on a regular page with the jQuery lib included.

Also we add the directive to switch the JS code execution to the strict mode ("user strict"). It helps to avoid the mistakes (such as using the global vars in inappropriate places, etc) while developing the code + the code which works in the strict mode will be minified without any issues.

## Rendering engine

Rendering is the process of transformation from declarative templates, css rules and renderer handlers to the complete DOM structures. Basically one has to create an Echo template (just a HTML structure with some meta placeholders actually), add a bunch of renderer functions and call the `render` method of Echo.View class.

### Echo HTML Templates

Echo HTML template is a HTML declarative structure with placeholders in curly brackets.

	@example
	var template =
		'<span class="{class:container}">' +
			'<span class="{class:avatar}">' +
				'<img src="{self:avatar}">'
			'</span>' +
			'<span class="{class:title}">{label:title} - {data:title}</span>' +
		'</span>';


There are several types of placeholders:

+ {class:KEY} - the placeholder will be replaced with the auto generated CSS class name + the KEY value
+ {label:KEY} - the placeholder to access the corresponding label text using the KEY as a key
+ {self:KEY}  - provides the ability to access the component field using the KEY as a key
+ {config:KEY} - the placeholder to access the config value using the KEY as a key
+ {data:KEY} - the placeholder to be replaced with a value from the object provided as an argument

### Echo CSS Templates

Echo CSS template is a CSS declarative structure with placeholders in curly brackets.

	@example
	var css = 
		'.{class:avatar} img { width: 16px; height: 16px; margin: 3px; }' +
		'.{class:container}, .{class:container} span { white-space: nowrap; }' +
		'.{class:title} { font-weight: bold; }';

### Echo Renderer functions

Echo renderer function is a javascript function with fixed interface which produces or modifies the particular DOM element.

	@example
	var renderer = function(element) {
		if (condition) {
			element.empty().append(title));
		} else {
			element.hide();
		}
		return element;
	};


{'fraction_non_alphanumeric': 0.09225054173975854, 'fraction_numerical': 0.0005159426271798576, 'mean_word_length': 4.8597339782345825, 'pattern_counts': {'":': 0, '<': 10, '<?xml version=': 0, '>': 10, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2210568', 'n_tokens_mistral': 2656, 'n_tokens_neox': 2435, 'n_words': 1179}