Wicket
  1. Wicket
  2. WICKET-4252 Ajax refactoring
  3. WICKET-4236

Use JQuery as a backing library for Wicket's JavaScript code

    Details

    • Type: Sub-task Sub-task
    • Status: Resolved
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 6.0.0-beta1
    • Fix Version/s: 6.0.0-beta1
    • Component/s: wicket, wicket-extensions
    • Labels:
      None

      Description

      wicket-ajax.js has accumulated a lot of custom written code to be able to serve the needs of Wicket Ajax behaviors and components.
      This custom javascript code can be greatly simplified by using any bigger JavaScript library that is specialized in handling browser differences.

        Issue Links

          Activity

          Hide
          Peter Ertl added a comment - - edited

          Ok, I asked Martin a few questions and would to share his answers here:

          Q: what the heck does

          (function(undefined)

          { ... }

          ()

          do?

          A: it's a neat trick to get a reference to 'undefined' which for sure is undefined

          Q: what does the string literal

          'use strict';

          in the first line of a function do?

          A: it disables a few quirks in javascript and forces you to be a better programmer. see: http://stackoverflow.com/questions/1335851/what-does-use-strict-do-in-javascript-and-what-is-the-reasoning-behind-it


          Q: what does the leading semicolon at the beginning of the js file mean?

          A: http://stackoverflow.com/questions/1873983/what-does-the-leading-semicolon-in-javascript-libraries-do

          Show
          Peter Ertl added a comment - - edited Ok, I asked Martin a few questions and would to share his answers here: Q: what the heck does (function(undefined) { ... } () do? A: it's a neat trick to get a reference to 'undefined' which for sure is undefined — Q: what does the string literal 'use strict'; in the first line of a function do? A: it disables a few quirks in javascript and forces you to be a better programmer. see: http://stackoverflow.com/questions/1335851/what-does-use-strict-do-in-javascript-and-what-is-the-reasoning-behind-it Q: what does the leading semicolon at the beginning of the js file mean? A: http://stackoverflow.com/questions/1873983/what-does-the-leading-semicolon-in-javascript-libraries-do
          Hide
          Anton Vodonosov added a comment -

          About slow performance in WICKET-1707.

          I am having the same problem (testing with IE8), and after reading this ticket decided to compare performance with jQuery: jQuery.replaceWith(), and also variations suggested in http://bugs.jquery.com/ticket/7898.

          Results: replacing my table 10 times take 4 seconds for Wicket.replaceOuterHtml, and 10 seconds for any variation of jQuery methods. Mine jQuery version is 1.6.1.

          Show
          Anton Vodonosov added a comment - About slow performance in WICKET-1707 . I am having the same problem (testing with IE8), and after reading this ticket decided to compare performance with jQuery: jQuery.replaceWith(), and also variations suggested in http://bugs.jquery.com/ticket/7898 . Results: replacing my table 10 times take 4 seconds for Wicket.replaceOuterHtml, and 10 seconds for any variation of jQuery methods. Mine jQuery version is 1.6.1.
          Hide
          Martin Grigorov added a comment -

          Thanks for this reference!

          Did you try with empty() ? You sound like it didn't help for you. If this is the case then maybe jQuery guys need to know about it.
          The idea of this ticket is to delegate such problems to more experienced JS developers.

          Show
          Martin Grigorov added a comment - Thanks for this reference! Did you try with empty() ? You sound like it didn't help for you. If this is the case then maybe jQuery guys need to know about it. The idea of this ticket is to delegate such problems to more experienced JS developers.
          Hide
          Anton Vodonosov added a comment -

          Yes, I tried with empty(), but it my case it changes nothing.

          I also tried with native DOM: function replaceChild - it works faster.

          var elem = document.getElementById('id6d')
          var parent = elem.parentNode;
          parent.replaceChild($(gText).get(0), elem)

          Repeating this 10 times takes 2 seconds on my system (comparing to 4 seconds for Wicket.replaceOuterHtml and 10 seconds for jQuery methods)

          Show
          Anton Vodonosov added a comment - Yes, I tried with empty(), but it my case it changes nothing. I also tried with native DOM: function replaceChild - it works faster. var elem = document.getElementById('id6d') var parent = elem.parentNode; parent.replaceChild($(gText).get(0), elem) Repeating this 10 times takes 2 seconds on my system (comparing to 4 seconds for Wicket.replaceOuterHtml and 10 seconds for jQuery methods)
          Hide
          Martin Grigorov added a comment -

          Please attach your tests to the ticket.
          And update jQuery's ticket if you want.

          Show
          Martin Grigorov added a comment - Please attach your tests to the ticket. And update jQuery's ticket if you want.
          Hide
          Anton Vodonosov added a comment -

          reported this to jQuery http://bugs.jquery.com/ticket/7898 too.

          Show
          Anton Vodonosov added a comment - reported this to jQuery http://bugs.jquery.com/ticket/7898 too.
          Hide
          Anton Vodonosov added a comment - - edited

          I have a piece of HTML stored in global variable gText.

          Here are several functions which replace an element with ID 'id6d' by this HTML 10 times and display the total time.

          IE8, jQuery 1.6.1, Wicket 1.4.19.

          <code>
          // this takes 4 seconds
          function test() {
          var start = new Date().getTime();
          for (var i = 0; i < 10; i++)

          { Wicket.replaceOuterHtml(document.getElementById('id6d'), gText) }

          var end = new Date().getTime();
          alert('total time: ' + (end - start));
          }

          // this takes 10 seconds
          function test2() {
          var start = new Date().getTime();
          for (var i = 0; i < 10; i++)

          { $('#id6d').empty().replaceWith(gText); }

          var end = new Date().getTime();
          alert('total time: ' + (end - start));
          }

          // this takes 10 seconds
          function test3() {
          var start = new Date().getTime();
          for (var i = 0; i < 10; i++)

          { var elem = $('#id6d'); var parent = elem.parent(); elem.remove(); parent.append(gText); }

          var end = new Date().getTime();
          alert('total time: ' + (end - start));
          }

          // this takes 2 seconds
          function test4() {
          var start = new Date().getTime();
          for (var i = 0; i < 10; i++)

          { var elem = document.getElementById('id6d') var parent = elem.parentNode; parent.replaceChild($(gText).get(0), elem) }

          var end = new Date().getTime();
          alert('total time: ' + (end - start));
          }
          </code>

          Show
          Anton Vodonosov added a comment - - edited I have a piece of HTML stored in global variable gText. Here are several functions which replace an element with ID 'id6d' by this HTML 10 times and display the total time. IE8, jQuery 1.6.1, Wicket 1.4.19. <code> // this takes 4 seconds function test() { var start = new Date().getTime(); for (var i = 0; i < 10; i++) { Wicket.replaceOuterHtml(document.getElementById('id6d'), gText) } var end = new Date().getTime(); alert('total time: ' + (end - start)); } // this takes 10 seconds function test2() { var start = new Date().getTime(); for (var i = 0; i < 10; i++) { $('#id6d').empty().replaceWith(gText); } var end = new Date().getTime(); alert('total time: ' + (end - start)); } // this takes 10 seconds function test3() { var start = new Date().getTime(); for (var i = 0; i < 10; i++) { var elem = $('#id6d'); var parent = elem.parent(); elem.remove(); parent.append(gText); } var end = new Date().getTime(); alert('total time: ' + (end - start)); } // this takes 2 seconds function test4() { var start = new Date().getTime(); for (var i = 0; i < 10; i++) { var elem = document.getElementById('id6d') var parent = elem.parentNode; parent.replaceChild($(gText).get(0), elem) } var end = new Date().getTime(); alert('total time: ' + (end - start)); } </code>

            People

            • Assignee:
              Martin Grigorov
              Reporter:
              Martin Grigorov
            • Votes:
              1 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Development