Merge branch '229940-schedule' into 'master'

EASY.schedule + EASY.render

See merge request !9

JS/README.md

@@ -37,7 +37,7 @@ var $myImage = $("#my_image");
  - PREFER use 2 spaces as a 1 indentation step
  - PREFER use 4 spaces for continuation of previous line (if it is too long)
 
-# Blocks
+## Blocks
  To prevent appearance of the pyramid of hell, this rules are given:
  - DO use at most 4 level of indentation.
     You can use control statements to flatten the structure 
@@ -113,14 +113,51 @@ end
  - CONSIDER specifying javascript include tag in `:body_bottom` part of layout 
  - AVOID calling any functions in .js files, especially `$(document).ready()`.
      Exception is closure function `(function(){})();` for separation of local variables from global scope.
- - PREFER to call `$(document).ready` or other functions in-lined in HTML 
+ - PREFER to call init functions being in-lined in HTML 
  
  Recommended way, how to organize Javascript code is to define functions in .js file as a part of `window.EASY.{name_of_plugin}` namespace 
- and in HTML include \<script\> tag with `$(document).ready` calling previously defined functions.
+ and in HTML include \<script\> tag with `EASY.schedule.main` or `EASY.schedule.late` calling previously defined functions.
  
- - CONSIDER registering an init function not to `$(document).ready` but to `EASY.schedule.main` or `EASY.schedule.late`.
-   Both functions accepts priority as a second parameter.
-   `EASY.schedule.require` accepts function as a second parameter, which has to be fulfilled before the execution of the init function.
+## Code execution
+ Due to performance optimization, `jQuery` was removed from header and is now loaded as deferred script. So any `jQuery` calls
+ in inlined \<script\> will fail. Usage of `EASY.schedule` functions is recommended.
+ - PREFER register an init function to any of `EASY.schedule.main`, `EASY.schedule.late` or `EASY.schedule.require` function.
+ 
+ `EASY.schedule.main` and `EASY.schedule.late` accepts priority as a second parameter. Lower the priority, later will be function executed.
+ `EASY.schedule.require` accepts function as a second parameter, which has to be fulfilled before the execution of the init function.
+ ```javascript
+/** EASY.schedule.late - For functions, which should be executed after several loops after "DOMContentLoaded" event */
+EASY.schedule.late(function() {
+  // executed after EASY.sidebar.init();
+  EASY.sidebar.loadData();
+}, -5);
+/** EASY.schedule.main - for functions, which should be executed right after "DOMContentLoaded" event. */
+EASY.schedule.main(function() {
+  EASY.sidebar.init();
+});
+ ```
+ ```javascript
+/** EASY.schedule.require - For functions, which should wait for [prerequisite] fulfillment */
+EASY.schedule.require(function(sidebar) {
+  sidebar.init();
+},function() {
+  return window.EASY.sidebar;
+});
+/** Advanced usage */
+EASY.schedule.require(function(counter, $) {
+  $("body").on("click", counter);
+}, 'Counter', 'jQuery');
+EASY.schedule.define('Counter', function () {
+  var count = 0;
+  return function () {
+    console.log("Count: " + count++);
+  }
+});
+ ```
+ Also in Ruby:
+ ```ruby
+late_javascript_tag("showFlashMessage('error', '#{@error.html_safe}');", priority: 5)
+ ```
 
 ## Performance issues
  To make the page perform fast, these rules have been set:
@@ -136,6 +173,32 @@ $(".my-image").height($(".my-image").width());
 var $myImage = $(".my-image");
 $myImage.height($myImage.width());
  ```
+ - AVOID layout thrashing
+
+ ```javascript
+// BAD
+$table.find("td.first_column").each(function() {
+  var $this = $(this);
+  $this.next().width($this.width());
+});
+// GOOD
+var widths=[];
+$table.find("td.first_column")
+.each(function() {
+  widths.push($(this).width());
+})
+.each(function(index) {
+  $(this).next().width(widths[index]);
+});
+// GOOD 
+$table.find("td.first_column").each(function() {
+  EasyGem.readAndRender(function() {
+    return this.width();
+  }, function(width) {
+    this.next().width(width);
+  }, $(this));
+});
+ ```
 
 ## Architecture
 #### Namespacing in easy_extensions