jQuery Objects
- 1. jQuery DAP Objects Why? • Rich front-end functionality to improve user experience • Use appropriate languages for appropriate parts of the system • JavaScript for browser functionality • CSS for styling • Perl for server functionality • Avoid server-side work than can be done (quicker!) on the client • Avoid re-loading pages ‘in the middle of a task’, e.g.: • Validating input values • Changing configurations, values, etc. • Retrieving ‘choice-making’ information • Tailing logs, etc.
- 2. jQuery DAP Objects Why? Appropriate in JavaScript Inappropriate in JavaScript • Rich front-end functionality to • Check an input field has a value improve user experience • Rounding corners mathematically • Add a class to an element • Data storage • Show or hide elements • Use appropriate languages for appropriate parts of the system Inappropriate in Perl • JavaScript Appropriate in Perl for browser functionality Sorting a table where the data • • CSS to database • Read/write forastyling hasn't changed • Perl for • File handling server functionality • Re-loading a page with an error • Setting element colours directly Appropriate in CSS • Avoid server-side work than can Inappropriate in CSS on the client • Rounded corners using a background be done (quicker!) image • Sizing images • Avoid re-loading pages ‘in the middle of a task’, e.g.: • Class –based colours, etc. • Conditional statements • Validating input values • Changing configurations, values, etc. • Retrieving ‘choice-making’ information • Tailing logs, etc.
- 3. jQuery DAP Objects So?... We are no longer just We need to engineer adding a bit of JavaScript to do simple things via ‘onclick’ => front-end code the same as we do back- end code - OO functions, etc. JavaScript
- 4. jQuery DAP Objects What Benefit? Almost - No • Simple and effective code re-use inheritance • All the benefits of OO-code – encapsulation, name-spacing, simple interface, etc. • Remove the pain of writing JavaScript – concentrate on writing the functionality, not coding up visuals and behaviour • Respect styling and design
- 5. jQuery DAP Objects DapTable Auto-sort Auto-filter Auto-styled CSV/TSV downloadable
- 6. jQuery DAP Objects DapTable: Features • All styling defined 1. All done client side 2. Respects sorting and filter • striped • collapsable Currently: • By file size (KB, • tsv_downloadable, csv_downloadable MB, etc.) • By node (webd2.dd.com < webd12.db.com • tsv_downloadable_custom, csv_downloadable_custom • url_downloadable • Sorting, and custom sorting • Keys • Auto-highlighting of rows on rollover • Fix width
- 8. jQuery DAP Objects Popup: Features • Works on any element • Can use AJAX to populate • Optional offset from element • Custom close methods Suggestions: Features • Can use list on page, or get results by AJAX Expander: Features • Works on element Audit • Refreshes audit history
- 9. jQuery DAP Objects JavaScript Objects var Object = function() { this.function = function() { Looks less like JavaScript var self = this and more like an object in C++, Java, Perl? function code (Maybe…) } } var obj = new Object()
- 10. jQuery DAP Objects Generic DAP Objects var Object = function() { this.includedObject = new IncludedObject() this.init = function() { var self = this initialisation code self.includedObject.init() // if necessary ... } }
- 11. jQuery DAP Objects Example use: Cluster var Cluster = function() { Object variables this.dragged = 0 Included objects this.audit = new Audit() this.expander = new Expander() this.input = new Input() this.suggestions = new Suggestions() this.popup = new Popup() this.table = new DapTable() this.init = function() { Scope self var self = this Standard jQuery self.table.init($('#server_table')) Call object method $('#node_div').draggable({ stop: function() { self.dragged = 1 } }) $('#node_div_close').click( function() { self.deselect_node() })
- 12. jQuery DAP Objects DapTable: Usage In Template <link rel="stylesheet" type="text/css" href="/css/common.css" /> <link rel="stylesheet" type="text/css" href="/css/common/daptable.css" /> <script type="text/javascript" src="/javascript/jquery/jquery.js"></script> <script type="text/javascript" src="/javascript/table/table.js"></script> <script type="text/javascript" src="/javascript/common/DapTable.js"></script> <script type='text/javascript'> $(document).ready( function() { var cluster = new Cluster() cluster.init() Will ultimately be: } ) a) one compressed JS script, and </script> one compressed CSS file b) CSS at the top, JavaScript at the bottom <table class=‘dap_table table-autosort cvs_downloadable’> …
- 13. jQuery DAP Objects DapTable: Usage In Javascript var Cluster = function() { this.table = new DapTable() this.init = function() { var self = this self.table.init($('#server_table')) self.table.init('#server_table') … } }
- 14. jQuery DAP Objects TableKey In Javascript self.key = new TableKey('#toggle_key', 65, 17)
- 15. jQuery DAP Objects Generic jQuery Objects: Thickbox Just add a class ‘thickbox’ to a <a> tag
- 16. jQuery DAP Objects More Generic Objects: • Cookie • Format • Input • StringFuns • Url Future Suggestions: • Client-side Validation • Generic ‘COMET’
- 17. jQuery DAP Objects Client-side Validation function validate() { valid = 1 <div> $(‘.mandatory’).each( function() {id="rtsub" type="text" class="mandatory“ name="rtsub" value=“" /> <input if ($(this).val() == ‘’)) { </div> $(this).addClass(‘invalid’) <div> <input=id="rtenv" type="text“ name="rtenv" value=“" /> valid 0 </div> Note: Don’t do this! Do (e.g.): }) if (! valid) { $(‘#element .mandatory’) ... alert(‘Please complete all mandatory fields’) return 0 } return 1 }
- 18. jQuery DAP Objects “Rich front-end functionality to improve user experience”
- 19. jQuery 1.4.2 FYI: • “Wow, the performance improvements are overwhelming.” • “1.4.2 is blazing fast http://j.mp/9yUNZ9 ...” • “There has been a great increase in performance.” • “Great work, great performance increases.” http://blog.jquery.com/2010/02/19/jquery-142-released/
- 20. jQuery 1.4.2 My Own Tests: • N Elements, all same class • 3 handlers per element jQuery Bind Times 250000 for (var i = 0; i < 10000; i++) { $('body').append("<div class='a_div'></div>") 200000 } 150000 $('.a_div').click( function() { $(this).hide() }) 1.3.2 ms $('.a_div').mouseover( function() { $(this).hide() }) 100000 1.4.2 $('.a_div').mouseout( function() { $(this).hide() }) 50000 0 1000 3000 10000 30000