Merge pull request #100 from basemate/implementing_issue_58

Implementing issue 58 - Added Async Defer Feature

Author: jonasjabari

app/concepts/matestack/ui/core/async/async.js

@@ -18,8 +18,16 @@ const componentDef = {
   methods: {
     show: function(event_data){
       const self = this
+      if (this.showing === true){
+        return
+      }
       this.showing = true
       this.event.data = event_data
+      if(this.componentConfig["defer"] != undefined){
+        if(!isNaN(this.componentConfig["defer"])){
+          this.startDefer()
+        }
+      }
       if(this.componentConfig["hide_after"] != undefined){
         self.hide_after_timeout = setTimeout(function () {
           self.hide()
@@ -29,6 +37,12 @@ const componentDef = {
     hide: function(){
       this.showing = false
       this.event.data = {}
+    },
+    startDefer: function(){
+      const self = this
+      setTimeout(function () {
+        self.rerender()
+      }, parseInt(this.componentConfig["defer"]));
     }
   },
   created: function () {
@@ -39,8 +53,12 @@ const componentDef = {
     if(this.componentConfig["show_on"] != undefined){
       this.showing = false
     }
-    if(this.componentConfig["hide_on"] != undefined){
-      this.showing = true
+    if(this.componentConfig["defer"] != undefined){
+      if(!isNaN(this.componentConfig["defer"])){
+        if (this.componentConfig["show_on"] == undefined){
+          this.startDefer()
+        }
+      }
     }
   },
   beforeDestroy: function() {

app/concepts/matestack/ui/core/page/page.rb

@@ -48,7 +48,7 @@ def prepare
     end
 
     def components(&block)
-      @nodes = Matestack::Ui::Core::PageNode.build(self, nil, &block)
+      @nodes = Matestack::Ui::Core::PageNode.build(self, nil, context[:params], &block)
     end
 
     def nodes_to_cell
@@ -59,12 +59,10 @@ def nodes_to_cell
 
     def partial(&block)
       return block
-      # Matestack::Ui::Core::PageNode.build(self, included, &block)
     end
 
     def slot(&block)
-      # return block
-      Matestack::Ui::Core::PageNode.build(self, nil, &block)
+      Matestack::Ui::Core::PageNode.build(self, nil, context[:params], &block)
     end
 
 

app/lib/matestack/ui/core/page_node.rb

@@ -1,18 +1,19 @@
 module Matestack::Ui::Core
   class PageNode
 
-    def self.build(page_instance, included_config, &block)
-      node = PageNode.new(page_instance, included_config)
+    def self.build(page_instance, included_config, url_params, &block)
+      node = PageNode.new(page_instance, included_config, url_params)
       node.instance_eval(&block)
       node.hash
     end
 
     attr_reader :hash
 
-    def initialize(page_instance, included_config)
+    def initialize(page_instance, included_config, url_params)
       @hash = {}
       @node_start_id = 0
       @included_config = included_config
+      @url_params = url_params
       @page_instance = page_instance
       page_instance.instance_variables.each do |page_instance_var_key|
         self.instance_variable_set(page_instance_var_key, page_instance.instance_variable_get(page_instance_var_key))
@@ -45,7 +46,7 @@ def method_missing meth, *args, &block
         if meth == :partial
           partial_block = @page_instance.send(args.first, *args.drop(1))
           @hash[current_node]["components"] = PageNode.build(
-            @page_instance, included, &partial_block
+            @page_instance, included, @url_params, &partial_block
           )
         else
           if args.first.is_a?(Hash)
@@ -55,7 +56,15 @@ def method_missing meth, *args, &block
           end
 
           if block_given?
-            @hash[current_node]["components"] = PageNode.build(@page_instance, included, &block)
+            if args.first.is_a?(Hash) && args.first[:defer].present?
+              if @url_params.present? && @url_params[:component_key].present?
+                @hash[current_node]["components"] = PageNode.build(@page_instance, included, @url_params, &block)
+              else
+                return
+              end
+            else
+              @hash[current_node]["components"] = PageNode.build(@page_instance, included, @url_params, &block)
+            end
           end
         end
       end

docs/components/async.md

@@ -66,6 +66,73 @@ async hide_after: 1000 do
 end
 ```
 
+### Defer
+
+The `defer` option may be used in two ways:
+
+#### simple defer
+`defer: true` implies that the content of the `async` component gets requested within a separate GET request right after initial page load is done.
+```ruby
+async defer: true do
+  div id: 'my-div' do
+    plain 'I will be requested within a separate GET request right after initial page load is done'
+  end
+end
+```
+
+#### delayed defer
+`defer: 2000` means that the content of the `async` component gets requested within a separate GET request `2000ms` after initial page load is done.
+```ruby
+async defer: 2000 do
+  div id: 'my-div' do
+    plain 'I will be requested within a separate GET request 2000ms after initial page load is done'
+  end
+end
+```
+
+The content of an `async` component with activated `defer` behavior is not resolved within the first page load!
+
+```ruby
+#...
+async defer: 1000 do
+  some_database_data = SomeModel.some_heavy_query
+  div id: 'my-div' do
+    some_database_data.each do |some_instance|
+      plain some_instance.id
+    end
+  end
+end
+async defer: 2000 do
+  some_other_database_data = SomeModel.some_other_heavy_query
+  div id: 'my-div' do
+    some_other_database_data.each do |some_instance|
+      plain some_instance.id
+    end
+  end
+end
+#...
+```
+
+The `SomeModel.some_query` does not get executed within the first page load and only will be called within the deferred GET request. This helps us to render a complex UI with loads of heavy method calls step by step without slowing down the initial page load and rendering of simple content.
+
+#### defer used with show_on and hide_on
+You can trigger the deferred GET request base on a client-side event fired by an `onclick` component for example.
+
+```ruby
+onclick emit: "my_event" do
+  button text: "show"
+end
+onclick emit: "my_other_event" do
+  button text: "hide"
+end
+async defer: true, show_on: "my_event", hide_on: "my_other_event" do
+  div id: 'my-div' do
+    plain 'I will be requested within a separate GET request right after "my_event" is fired'
+  end
+end
+```
+Everytime the `async` section gets shown, the content of the `async` component gets freshly fetched from the server!
+
 ## Examples
 
 See some common use cases below:
@@ -185,3 +252,22 @@ page.execute_script('MatestackUiCore.matestackEventHub.$emit("my_event", { messa
 ```
 
 As a result, the event message gets shown _after_ our event was fired!
+
+### Example 6: Deferred loading
+
+On our example page, we wrap our async event around a placeholder for the event message.
+
+```ruby
+class ExamplePage < Matestack::Ui::Page
+
+  def response
+    components {
+      async defer: true do
+        div id: 'my-div' do
+          plain 'I will be requested within a separate GET request right after initial page load is done'
+        end
+      end
+    }
+  end
+
+end

spec/dummy/app/matestack/pages/my_app/my_first_page.rb

@@ -7,6 +7,21 @@ def response
       div id: "some-id", class: "some-class" do
         plain "hello from page 1"
       end
+      onclick emit: "test" do
+        button text: "rerender"
+      end
+      async defer: 3000 do
+        partial :my_deferred_scope
+      end
+    }
+  end
+
+  def my_deferred_scope
+    @count = DummyModel.all.count
+    partial {
+      div do
+        plain "#{@count}"
+      end
     }
   end