AppSuite:UI Development Style Guide - Revision history

Khgras at 09:09, 15 May 2019

2019-05-15T09:09:02Z

← Older revision		Revision as of 09:09, 15 May 2019
Line 1:		Line 1:
	The content on this page has moved to https://documentation.open-xchange.com/~~latest~~/ui/~~00-getting-started/02-styleguide.html~~		The content on this page has moved to https://documentation.open-xchange.com/7.10.2/ui/

	Note: Open-Xchange is in the process of migrating all its technical documentation to a new and improved documentation system (documentation.open-xchange.com). Please note as the migration takes place more information will be available on the new system and less on this system. Thank you for your understanding during this period of transition.		Note: Open-Xchange is in the process of migrating all its technical documentation to a new and improved documentation system (documentation.open-xchange.com). Please note as the migration takes place more information will be available on the new system and less on this system. Thank you for your understanding during this period of transition.

Khgras: Replaced content with "The content on this page has moved to https://documentation.open-xchange.com/latest/ui/00-getting-started/02-styleguide.html Note: Open-Xchange is in the process of migra..."

2017-05-22T09:07:02Z

Replaced content with "The content on this page has moved to https://documentation.open-xchange.com/latest/ui/00-getting-started/02-styleguide.html Note: Open-Xchange is in the process of migra..."

Show changes

Frank.paczynski at 12:16, 9 February 2016

2016-02-09T12:16:54Z

← Older revision		Revision as of 12:16, 9 February 2016
Line 1:		Line 1:
			<!-- !!! -->
			<!-- PLEASE APPLY CHANGES ONLY TO THE NEW TECHNICAL DOCUMENTATION: wd/frontend/web/documentation -->
			<!-- !!! -->

	{{Stability-stable}}		{{Stability-stable}}

Tierlieb: New part for accessibility

2014-08-26T08:51:29Z

New part for accessibility

← Older revision		Revision as of 08:51, 26 August 2014
Line 143:		Line 143:
	Uppercase "Fixed", a colon, a space. For L3 bugs, please add a short explanation (1-2 sentences) to your bugzilla comment. Separate that using a complete newline (because several git tools send commit messages as e-mails, where the first line is the subject and the following empty line denotes the begin of the message body). This helps QA a lot.		Uppercase "Fixed", a colon, a space. For L3 bugs, please add a short explanation (1-2 sentences) to your bugzilla comment. Separate that using a complete newline (because several git tools send commit messages as e-mails, where the first line is the subject and the following empty line denotes the begin of the message body). This helps QA a lot.

			==Accessibility==
			Every plugin, module or package released for AppSuite should be accessible. Keep the following things in mind, please:

	[[Category:AppSuite]]		[[Category:AppSuite]]
	[[Category:UI]]		[[Category:UI]]
	[[Category:Development process]]		[[Category:Development process]]

Matthias.biggeleben: /* Basic rules */

2014-07-04T14:20:03Z

Basic rules

← Older revision		Revision as of 14:20, 4 July 2014
Line 26:		Line 26:
	** ''Hint: You can use "return $.when();" instead of "return $.Deferred().resolve();"''		** ''Hint: You can use "return $.when();" instead of "return $.Deferred().resolve();"''
	* '''Use options instead of long argument lists'''<br>Avoid creating functions like foo("1234", true, null, null, cb_success). Instead use: foo({ folder: "1234", cache: true }).done(….);		* '''Use options instead of long argument lists'''<br>Avoid creating functions like foo("1234", true, null, null, cb_success). Instead use: foo({ folder: "1234", cache: true }).done(….);
	*'''Don't use $('<div style="float: left">Hello</div>')'''<br> This is hard to read, hard to extend, doesn't allow i18n. Might become evil once 'Hello' is replaced by a variable (evil HTML injection). Just use $('<div>') plus proper helpers like css(), text() etc. In contrast: $('<div class="foo">') or $('<a href="#" tabindex="1">') is ok.		*'''Don't use $('<div style="float: left">Hello</div>')'''<br> This is hard to read, hard to extend, doesn't allow i18n. Might become evil once 'Hello' is replaced by a variable (evil HTML injection). Just use $('<div>') plus proper helpers like css(), text() etc. In contrast: $('<div class="foo">') or $('<a href="#" tabindex="1">') is fine.
	* '''Use $('<div>') instead of $('<div/>')'''<br>There's no need for XHTML.		* '''Use $('<div>') instead of $('<div/>')'''<br>There's no need for XHTML.
	* Prefer $('<input>', { type: 'radio' }); over $('<input>').attr('type', 'radio');<br>Actually there's a semantic difference (not just syntax) - IE will teach you this! Never please write $('<label ...></label>'), $('<div></div>') or even $('<input...></input>')		* Prefer $('<input>', { type: 'radio' }); over $('<input>').attr('type', 'radio');<br>Actually there's a semantic difference (not just syntax) - IE will teach you this! Never please write $('<label ...></label>'), $('<div></div>') or even $('<input...></input>')

Matthias.biggeleben: /* Basic rules */

2014-07-04T14:19:35Z

Basic rules

← Older revision		Revision as of 14:19, 4 July 2014
Line 26:		Line 26:
	** ''Hint: You can use "return $.when();" instead of "return $.Deferred().resolve();"''		** ''Hint: You can use "return $.when();" instead of "return $.Deferred().resolve();"''
	* '''Use options instead of long argument lists'''<br>Avoid creating functions like foo("1234", true, null, null, cb_success). Instead use: foo({ folder: "1234", cache: true }).done(….);		* '''Use options instead of long argument lists'''<br>Avoid creating functions like foo("1234", true, null, null, cb_success). Instead use: foo({ folder: "1234", cache: true }).done(….);
	*'''Don't use $('<div style="float: left">Hello</div>')'''<br> This is hard to read, hard to extend, doesn't allow i18n. Might become evil once 'Hello' is replaced by a variable (evil HTML injection). Just use $('<div>') plus proper helpers like css(), text() etc. In contrast: $('<div class="foo">') or $('<a href="#" tabindex="1">') is ok.		*'''Don't use $('<div style="float: left">Hello</div>')'''<br> This is hard to read, hard to extend, doesn't allow i18n. Might become evil once 'Hello' is replaced by a variable (evil HTML injection). Just use $('<div>') plus proper helpers like css(), text() etc. In contrast: $('<div class="foo">') or $('<a href="#" tabindex="1">') is ok.
	* '''Use $('<div>') instead of $('<div/>')'''<br>There's no need for XHTML.		* '''Use $('<div>') instead of $('<div/>')'''<br>There's no need for XHTML.
	* Prefer $('<input>', { type: 'radio' }); over $('<input>').attr('type', 'radio');<br>Actually there's a semantic difference (not just syntax) - IE will teach you this! Never please write $('<label ...></label>'), $('<div></div>') or even $('<input...></input>')		* Prefer $('<input>', { type: 'radio' }); over $('<input>').attr('type', 'radio');<br>Actually there's a semantic difference (not just syntax) - IE will teach you this! Never please write $('<label ...></label>'), $('<div></div>') or even $('<input...></input>')

Matthias.biggeleben: /* Basic rules */

2014-07-04T14:19:04Z

Basic rules

← Older revision		Revision as of 14:19, 4 July 2014
Line 26:		Line 26:
	** ''Hint: You can use "return $.when();" instead of "return $.Deferred().resolve();"''		** ''Hint: You can use "return $.when();" instead of "return $.Deferred().resolve();"''
	* '''Use options instead of long argument lists'''<br>Avoid creating functions like foo("1234", true, null, null, cb_success). Instead use: foo({ folder: "1234", cache: true }).done(….);		* '''Use options instead of long argument lists'''<br>Avoid creating functions like foo("1234", true, null, null, cb_success). Instead use: foo({ folder: "1234", cache: true }).done(….);
	*'''Don't use $('<div ~~class="foo"~~ style="float: left">Hello</div>')'''<br> This is hard to read, hard to extend, doesn't allow i18n. Might become evil once 'Hello' is replaced by a variable (evil HTML injection). Just use $('<div>') plus proper helpers like ~~addClass(),~~ css(), text() etc.		*'''Don't use $('<div style="float: left">Hello</div>')'''<br> This is hard to read, hard to extend, doesn't allow i18n. Might become evil once 'Hello' is replaced by a variable (evil HTML injection). Just use $('<div>') plus proper helpers like css(), text() etc. In contrast: $('<div class="foo">') or $('<a href="#" tabindex="1">') is ok.
	* '''Use $('<div>') instead of $('<div/>')'''<br>There's no need for XHTML.		* '''Use $('<div>') instead of $('<div/>')'''<br>There's no need for XHTML.
	* Prefer $('<input>', { type: 'radio' }); over $('<input>').attr('type', 'radio');<br>Actually there's a semantic difference (not just syntax) - IE will teach you this! Never please write $('<label ...></label>'), $('<div></div>') or even $('<input...></input>')		* Prefer $('<input>', { type: 'radio' }); over $('<input>').attr('type', 'radio');<br>Actually there's a semantic difference (not just syntax) - IE will teach you this! Never please write $('<label ...></label>'), $('<div></div>') or even $('<input...></input>')

Tierlieb: /* Basic rules */

2013-11-20T14:04:55Z

Basic rules

Tierlieb: /* Basic rules */

2013-11-20T14:03:04Z

Basic rules

← Older revision		Revision as of 14:03, 20 November 2013
Line 21:		Line 21:
	* '''Don't create global code'''<br>underscore.js is an exception. There some basic jQuery plugin that extend jQuery.fn (that's global as well). Even for rarely used jQuery plugins create AMDs (Asynchronous Module Definition) and load them via require().		* '''Don't create global code'''<br>underscore.js is an exception. There some basic jQuery plugin that extend jQuery.fn (that's global as well). Even for rarely used jQuery plugins create AMDs (Asynchronous Module Definition) and load them via require().
	* '''Naming'''<br>Use camelCase for variables (e.g. variableName). Use upper-case/underscores for constants (e.g. MAX_WIDTH). Use camel-case with upper-case first char for class names (e.g. ClassDefinition). Don't use special notations for jQuery-Objects: var node = $(…) is better than var $node = $(…);		* '''Naming'''<br>Use camelCase for variables (e.g. variableName). Use upper-case/underscores for constants (e.g. MAX_WIDTH). Use camel-case with upper-case first char for class names (e.g. ClassDefinition). Don't use special notations for jQuery-Objects: var node = $(…) is better than var $node = $(…);
	* '''Try to define all variables at the beginning of a function'''<br>And please just use one (!) "var" statement.		* '''Try to define all variables at the beginning of a function'''<br>And please just use one (!) "var" statement. Exceptions could be if you plan to break from the control flow beforehand.
	* '''Use $.Deferred() whenever possible'''<br>Instead of using simple callbacks. Remember that your functions might need an error callback as well.		* '''Use $.Deferred() whenever possible'''<br>Instead of using simple callbacks. Remember that your functions might need an error callback as well.
	* ''Hint: You can use "return $.when();" instead of "return $.Deferred().resolve();"''		* ''Hint: You can use "return $.when();" instead of "return $.Deferred().resolve();"''

Tierlieb: /* Javascript codig guidelines */

2013-08-13T14:53:45Z

Javascript codig guidelines

← Older revision		Revision as of 14:53, 13 August 2013
Line 9:		Line 9:
	''Eclipse seems to have a bug on MacOS that makes the editor really slow when showing white-spaces. However, as long as you configure Eclipse properly to use spaces instead of tabs and remove all trailing white-space on save (yep, there's a flag for that), you can leave that option turned off.''		''Eclipse seems to have a bug on MacOS that makes the editor really slow when showing white-spaces. However, as long as you configure Eclipse properly to use spaces instead of tabs and remove all trailing white-space on save (yep, there's a flag for that), you can leave that option turned off.''

	== Javascript ~~codig~~ guidelines ==		== Javascript coding guidelines ==

	===Basic rules===		===Basic rules===

← Older revision		Revision as of 14:04, 20 November 2013
Line 16:		Line 16:
	* '''Don't make functions within a loop'''<br>For most cases, JSHint will bug you. But when using .each(), for example, it won't. However, you might still create functions over and over again - so avoid that. And if there no good reason, try to avoid creating nested sub functions (bit slower; might leak memory).		* '''Don't make functions within a loop'''<br>For most cases, JSHint will bug you. But when using .each(), for example, it won't. However, you might still create functions over and over again - so avoid that. And if there no good reason, try to avoid creating nested sub functions (bit slower; might leak memory).
	* '''Require modules only when they're required!'''<br>Review your code if your module really needs all required modules upfront. Check if some dependencies can be resolved at runtime, e.g. event handlers or functions that are working asynchronously.		* '''Require modules only when they're required!'''<br>Review your code if your module really needs all required modules upfront. Check if some dependencies can be resolved at runtime, e.g. event handlers or functions that are working asynchronously.
	* ''Hint: We patched require.js, so require() returns a deferred object.''		** ''Hint: We patched require.js, so require() returns a deferred object.''
	* '''Use jQuery's .on() and .off() instead of .bind() .unbind() .delegate()'''<br>Because the new event system of jQuery 1.7 was completely redesigned and bind/unbind are now marked as deprecated.		* '''Use jQuery's .on() and .off() instead of .bind() .unbind() .delegate()'''<br>Because the new event system of jQuery 1.7 was completely redesigned and bind/unbind are now marked as deprecated.
	* '''Use delegated event handlers if possible'''<br>Instead of adding tons of click handlers for each element, use one (!) delegate on the parent element (VGrid uses that technique for example).		* '''Use delegated event handlers if possible'''<br>Instead of adding tons of click handlers for each element, use one (!) delegate on the parent element (VGrid uses that technique for example).
	* '''Don't create global code'''<br>underscore.js is an exception. There some basic jQuery plugin that extend jQuery.fn (that's global as well). Even for rarely used jQuery plugins create AMDs (Asynchronous Module Definition) and load them via require().		* '''Don't create global code'''<br>underscore.js is an exception. There some basic jQuery plugin that extend jQuery.fn (that's global as well). Even for rarely used jQuery plugins create AMDs (Asynchronous Module Definition) and load them via require().
	* '''Naming'''<br>Use camelCase for variables (e.g. variableName). Use upper-case/underscores for constants (e.g. MAX_WIDTH). Use camel-case with upper-case first char for class names (e.g. ClassDefinition). Don't use special notations for jQuery-Objects: var node = $(…) is better than var $node = $(…);		* '''Naming'''<br>Use camelCase for variables (e.g. variableName). Use upper-case/underscores for constants (e.g. MAX_WIDTH). Use camel-case with upper-case first char for class names (e.g. ClassDefinition). Don't use special notations for jQuery-Objects: var node = $(…) is better than var $node = $(…);
	* '''Try to define all variables at the beginning of a function'''<br>And please just use one (!) "var" statement. ~~Exceptions~~ could be if you plan to break from the control flow ~~beforehand~~.		* '''Try to define all variables at the beginning of a function'''<br>And please just use one (!) "var" statement.
			** An exception could be if you plan to break from the control flow before doing an expensive call in the variable definition.
	* '''Use $.Deferred() whenever possible'''<br>Instead of using simple callbacks. Remember that your functions might need an error callback as well.		* '''Use $.Deferred() whenever possible'''<br>Instead of using simple callbacks. Remember that your functions might need an error callback as well.
	* ''Hint: You can use "return $.when();" instead of "return $.Deferred().resolve();"''		** ''Hint: You can use "return $.when();" instead of "return $.Deferred().resolve();"''
	* '''Use options instead of long argument lists'''<br>Avoid creating functions like foo("1234", true, null, null, cb_success). Instead use: foo({ folder: "1234", cache: true }).done(….);		* '''Use options instead of long argument lists'''<br>Avoid creating functions like foo("1234", true, null, null, cb_success). Instead use: foo({ folder: "1234", cache: true }).done(….);
	*'''Don't use $('<div class="foo" style="float: left">Hello</div>')'''<br> This is hard to read, hard to extend, doesn't allow i18n. Might become evil once 'Hello' is replaced by a variable (evil HTML injection). Just use $('<div>') plus proper helpers like addClass(), css(), text() etc.		*'''Don't use $('<div class="foo" style="float: left">Hello</div>')'''<br> This is hard to read, hard to extend, doesn't allow i18n. Might become evil once 'Hello' is replaced by a variable (evil HTML injection). Just use $('<div>') plus proper helpers like addClass(), css(), text() etc.