The jQuery Divide
               Rebecca Murphey • JSConf.eu • 25.09.2010
               @rmurphey • rebeccamurphey.com


...
Wednesday, September 29, 2010
what this presentation covers
               how jQuery’s popularity means newcomers
               learn bad things
     ...
We need you to
                                help us organize our
                                jQuery-based
         ...
But we want to
                                keep using jQuery.
                                It’s just so easy!
     ...
It’s almost guaranteed that the client will point
               to jQuery’s popularity as a reason to keep using
        ...
var toggleHistItems = function (selTabId) {
              console.log('Selected Tab ID: ' + selTabId);
              var c...
Plus that way our
                                database guy can
                                still help us out
     ...
*headdesk*




Wednesday, September 29, 2010
“... it turns out that if you have absolutely
               no idea what you’re doing in the language
               you ...
the morals of the story
               perceived popularity & perceived ease of use
               factor into library cho...
jQuery meant we didn’t have to understand
               this ...




Wednesday, September 29, 2010
var xmlhttp;

           if (window.XMLHttpRequest) {
           // code for IE7+, Firefox, Chrome, Opera, Safari
        ...
we could just write this ...




Wednesday, September 29, 2010
$.post(
              'ajax_test.php',
              { fname : 'Henry', lname : 'Ford' },
              function(resp) { $...
jQuery offers a really clear answer when we
               need to build this ...




Wednesday, September 29, 2010
Wednesday, September 29, 2010
$(document).ready(function() {
             $('#searchForm').submit(function(e) {
               e.preventDefault();
     ...
... which is why we see this ...




Wednesday, September 29, 2010
Wednesday, September 29, 2010
Wednesday, September 29, 2010
But when it comes time to create this ...




Wednesday, September 29, 2010
Wednesday, September 29, 2010
... it can be hard for the average jQuery
               developer to see how they might get from the
                 rst...
It turns out jQuery’s DOM-centric patterns
               are a fairly terrible way to think about
               applicat...
Applications require thinking in terms
               of loosely coupled, DRYed out units of
               functionality,...
require.def('views/Results', [], function() {
             return Class.extend({
               itemTemplate : '<li><h2>%t...
require.def('views/Results', [], function() {
             return Class.extend({
               itemTemplate : '<li><h2>%t...
We shouldn’t scold; cartoon client man — and
               the developers lured to JavaScript by jQuery —
               ...
Some people i’ve talked to think we or the
               market should discourage these people from
               writin...
ey’re writing code whether we like it or not,
               and it’s not good code.




Wednesday, September 29, 2010
is has actual effects on the perception of
               JavaScript, and on our ability to do interesting
               ...
In a nutshell, this is what these developers
               need to learn:




Wednesday, September 29, 2010
JavaScript



                                             jQuery

Wednesday, September 29, 2010
Companies need developers, and if bad ones
               are all that’s available, they’ll hire them
               anywa...
Wednesday, September 29, 2010
Aaron Newton from Cloudera wrote a post a
               while back about how hard it is to nd “badass”
               Jav...
e productive reaction to a post like that isn’t
               to feel superior because you’re a badass
               Ja...
e productive reaction is to gure out how to
                x it.




Wednesday, September 29, 2010
jQuery’s ease has brought us legions of
               developers who think of an application like
               this: di...
We need to turn them into developers who think
               of applications like this.
Wednesday, September 29, 2010
five things
                                to think about



Wednesday, September 29, 2010
#1
                                popularity contests are stupid




Wednesday, September 29, 2010
Making decisions based on this graph ...




Wednesday, September 29, 2010
Wednesday, September 29, 2010
... makes as much sense as making decisions
               based on this graph ...




Wednesday, September 29, 2010
Wednesday, September 29, 2010
We have to be intellectually honest when we
               discuss library pros & cons — and vigorous
               in co...
#2
                                choose tools, not APIs




Wednesday, September 29, 2010
// YUI3
           var parent = Y.Node.create('<div/>'),
               child = Y.Node.create('<p>foo</p>');

           c...
$(document).ready(function() {
             $('#searchForm').submit(function(e) {
               e.preventDefault();
     ...
(function(d, $) {
           d.ready(function() {
             d.connect('searchForm', 'submit', function(e) {
           ...
#3
                                    understanding the problem
                                is key to determining the...
Decision-makers need help to make actual
               decisions ... and understand their consequences.

Wednesday, Septe...
understand the project
               application vs. website?
               team skills: dedicated F2E?
               t...
assess the application’s needs
               code & le organization?
               dependency management & build tools?
...
then and only then, choose your tools
               features that address the application’s needs?
               active ...
#4
                                RTFM can’t be our go-to answer




Wednesday, September 29, 2010
“[It’s] a difficult time to learn to be a JavaScript
               ninja, or even a JavaScript street beggar. Good
        ...
#5
                                sharing what we know
                                  is as important as
             ...
Wednesday, September 29, 2010
rebeccamurphey.com • blog.rebeccamurphey.com • @rmurphey




               anks, in guilt-free alphabetical order, to: T...
Upcoming SlideShare
Loading in...5
×

The jQuery Divide

90,166

Published on

jQuery is drawing newcomers to JavaSCript in droves. As a community, we have an obligation -- and it is in our interest -- to help these newcomers understand where jQuery ends and JavaScript begins.

Published in: Technology
10 Comments
131 Likes
Statistics
Notes
  • Very nice. I really do think that jQuery encourages questionable design / development practices.

    'Don't know what they don't know' reminds me of this by the way: http://en.wikipedia.org/wiki/There_are_known_knowns
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • This presentation lacks focus. It's premise is that jQuery causes unmaintainable solutions. Then goes on to complain about bad hiring practices, people who use the wrong decision process when selecting tools etc. etc. Typical Straw man argumentation.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Javascript frameworks have to teach you good Patterns you can adopt and use, and not only used for shortcuts.

    Philip Arad - Web Architect at SolarEdge
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Is there a set of design patterns for building these apps documented somewhere? It would be great not to have to re-invent the wheel.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • great article.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
90,166
On Slideshare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
945
Comments
10
Likes
131
Embeds 0
No embeds

No notes for slide

The jQuery Divide

  1. 1. The jQuery Divide Rebecca Murphey • JSConf.eu • 25.09.2010 @rmurphey • rebeccamurphey.com Wednesday, September 29, 2010
  2. 2. Wednesday, September 29, 2010
  3. 3. what this presentation covers how jQuery’s popularity means newcomers learn bad things why I think this is worth talking about at JSConf what I think the larger JavaScript community needs to do about it Wednesday, September 29, 2010
  4. 4. We need you to help us organize our jQuery-based application. It’s a steaming pile of unmaintainable crap. Wednesday, September 29, 2010
  5. 5. But we want to keep using jQuery. It’s just so easy! And popular! Wednesday, September 29, 2010
  6. 6. It’s almost guaranteed that the client will point to jQuery’s popularity as a reason to keep using it. It’s also a pretty fair bet what their code will look like. Wednesday, September 29, 2010
  7. 7. var toggleHistItems = function (selTabId) { console.log('Selected Tab ID: ' + selTabId); var curEl = $('#' + selTabId); var bSLTabSelected = $('#slhis').is('[class=left selected]'); $('#divNoRecordMsg').hide(); switch (selTabId) { case 'slhis': $('tr[class^=fk]').show(); $('.cPriceRent').html('Foo/Bar'); rentalRateIsVisible(true); $('#historySortButton').show(); //curEl.addClass('left'); if ($('#historySort1').is(':visible')) { if ($('#fooLeaseHistory > tbody > tr[class^=fk]').length === 0) { if (!$('#divAction1').is(':visible') && !$('#divRSAction1').is(':visible')) { $('#divNoRecordMsg').html('There is no history at this time').show(); } $('#historySortButton').hide(); $('#fooLeaseHistory').slideUp(); } else { $('#fooLeaseHistory').slideDown(); } } else { if ($('#listingDisplay > tbody > tr[class^=fk]').length === 0) { if (!$('#divAction1').is(':visible') && !$('#divRSAction1').is(':visible')) { $('#divNoRecordMsg').html('There is no history at this time').show(); } $('#historySortButton').hide(); $('#listingDisplay').slideUp(); } else { $('#listingDisplay').slideDown(); } } break; case 'shis': rentalRateIsVisible(false); $('#historySortButton').show(); Wednesday, September 29, 2010
  8. 8. Plus that way our database guy can still help us out with the front end. Wednesday, September 29, 2010
  9. 9. *headdesk* Wednesday, September 29, 2010
  10. 10. “... it turns out that if you have absolutely no idea what you’re doing in the language you can still generally make things work.” Douglas Crockford, Yahoo! http://developer.yahoo.com/yui/theater/video.php?v=crockonjs-2 Wednesday, September 29, 2010
  11. 11. the morals of the story perceived popularity & perceived ease of use factor into library choice (duh) people who don’t know JS write non-trivial JS apps whether we like it or not there’s a demand for answers to app org questions the people seeking these answers aren’t necessarily dumb, just untrained in JS Wednesday, September 29, 2010
  12. 12. jQuery meant we didn’t have to understand this ... Wednesday, September 29, 2010
  13. 13. var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("POST","ajax_test.asp",true); xmlhttp.setRequestHeader("Content-type","application/x-www- form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford"); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("myDiv").innerHTML = xmlhttp.responseText; } }; Wednesday, September 29, 2010
  14. 14. we could just write this ... Wednesday, September 29, 2010
  15. 15. $.post( 'ajax_test.php', { fname : 'Henry', lname : 'Ford' }, function(resp) { $('#myDiv').html(resp); } ); Wednesday, September 29, 2010
  16. 16. jQuery offers a really clear answer when we need to build this ... Wednesday, September 29, 2010
  17. 17. Wednesday, September 29, 2010
  18. 18. $(document).ready(function() { $('#searchForm').submit(function(e) { e.preventDefault(); var myVal = $(this).find('input:first').val(); $.ajax({ url : 'search.php', data : { term : myVal }, dataType : 'json', success : function(resp) { var tpl = '<li><h2>%title</h2><p>%desc</p></li>'; $('#results').html( $.map(resp.results, function(r) { return tpl.replace('%title', r.title).replace('%desc', r.desc); }).join(''); ); } }); }); }); Wednesday, September 29, 2010
  19. 19. ... which is why we see this ... Wednesday, September 29, 2010
  20. 20. Wednesday, September 29, 2010
  21. 21. Wednesday, September 29, 2010
  22. 22. But when it comes time to create this ... Wednesday, September 29, 2010
  23. 23. Wednesday, September 29, 2010
  24. 24. ... it can be hard for the average jQuery developer to see how they might get from the rst version to the second without creating a whole lot of spaghetti code. Wednesday, September 29, 2010
  25. 25. It turns out jQuery’s DOM-centric patterns are a fairly terrible way to think about applications. Wednesday, September 29, 2010
  26. 26. Applications require thinking in terms of loosely coupled, DRYed out units of functionality, designed to work with each other without depending on each other. Wednesday, September 29, 2010
  27. 27. require.def('views/Results', [], function() { return Class.extend({ itemTemplate : '<li><h2>%title</h2><p>%desc</p></li>', init : function(el) { this.el = el; $.subscribe('/search/results', $.proxy(this, '_showResults')); }, _showResults : function(results) { var tpl = this.itemTemplate, html = $.map(results, function(r) { return tpl .replace('%title', r.title) .replace('%desc', r.desc); }).join(''); this.el.append(html); } }); }); Wednesday, September 29, 2010
  28. 28. require.def('views/Results', [], function() { return Class.extend({ itemTemplate : '<li><h2>%title</h2><p>%desc</p></li>', init : function(el) { this.el = el; $.subscribe('/search/results', $.proxy(this, '_showResults')); }, _showResults : function(results) { var tpl = this.itemTemplate, html = $.map(results, function(r) { return tpl .replace('%title', r.title) .replace('%desc', r.desc); omg wtf is this??? }).join(''); this.el.append(html); } }); }); Wednesday, September 29, 2010
  29. 29. We shouldn’t scold; cartoon client man — and the developers lured to JavaScript by jQuery — don’t know what they don’t know. Wednesday, September 29, 2010
  30. 30. Some people i’ve talked to think we or the market should discourage these people from writing code, but that ship has already sailed. Wednesday, September 29, 2010
  31. 31. ey’re writing code whether we like it or not, and it’s not good code. Wednesday, September 29, 2010
  32. 32. is has actual effects on the perception of JavaScript, and on our ability to do interesting things with it. Wednesday, September 29, 2010
  33. 33. In a nutshell, this is what these developers need to learn: Wednesday, September 29, 2010
  34. 34. JavaScript jQuery Wednesday, September 29, 2010
  35. 35. Companies need developers, and if bad ones are all that’s available, they’ll hire them anyway. Wednesday, September 29, 2010
  36. 36. Wednesday, September 29, 2010
  37. 37. Aaron Newton from Cloudera wrote a post a while back about how hard it is to nd “badass” JavaScript developers. Wednesday, September 29, 2010
  38. 38. e productive reaction to a post like that isn’t to feel superior because you’re a badass JavaScript developer. Wednesday, September 29, 2010
  39. 39. e productive reaction is to gure out how to x it. Wednesday, September 29, 2010
  40. 40. jQuery’s ease has brought us legions of developers who think of an application like this: disparate pieces with few organizing principles; components that are fun but aren’t made to work together. Wednesday, September 29, 2010
  41. 41. We need to turn them into developers who think of applications like this. Wednesday, September 29, 2010
  42. 42. five things to think about Wednesday, September 29, 2010
  43. 43. #1 popularity contests are stupid Wednesday, September 29, 2010
  44. 44. Making decisions based on this graph ... Wednesday, September 29, 2010
  45. 45. Wednesday, September 29, 2010
  46. 46. ... makes as much sense as making decisions based on this graph ... Wednesday, September 29, 2010
  47. 47. Wednesday, September 29, 2010
  48. 48. We have to be intellectually honest when we discuss library pros & cons — and vigorous in correcting those who are not. http://xpandapopx.deviantart.com/art/The-Prideful-Hypocrite-68848153 Wednesday, September 29, 2010
  49. 49. #2 choose tools, not APIs Wednesday, September 29, 2010
  50. 50. // YUI3 var parent = Y.Node.create('<div/>'), child = Y.Node.create('<p>foo</p>'); child.on('click', fn); parent.appendChild(child); // Dojo var parent = dojo.create('div'), child = dojo.create('p', { innerHTML : 'foo' }); dojo.connect(child, 'click', fn); dojo.place(child, parent); // jQuery var parent = $('<div/>'); $('<p>foo</p>') .click(fn) .appendTo(parent); Wednesday, September 29, 2010
  51. 51. $(document).ready(function() { $('#searchForm').submit(function(e) { e.preventDefault(); var myVal = $(this).find('input:first').val(); $.ajax({ url : 'search.php', data : { term : myVal }, dataType : 'json', success : function(resp) { var tpl = '<li><h2>%title</h2><p>%desc</p></li>'; $('#results').html( $.map(resp.results, function(r) { return tpl.replace('%title', r.title).replace('%desc', r.desc); }).join(''); ); } }); }); }); Wednesday, September 29, 2010
  52. 52. (function(d, $) { d.ready(function() { d.connect('searchForm', 'submit', function(e) { e.preventDefault(); var myVal = $('input', this)[0].value; d.xhrGet({ url : 'search.php', content : { term : myVal }, handleAs : 'json', load : function(resp) { var tpl = '<li><h2>%title</h2><p>%desc</p></li>'; d.byId('results').innerHTML = d.map(resp.results, function(r) { return tpl.replace('%title', r.title).replace('%desc', r.desc); }).join(''); } }) }); }); })(dojo, dojo.query); Wednesday, September 29, 2010
  53. 53. #3 understanding the problem is key to determining the solution Wednesday, September 29, 2010
  54. 54. Decision-makers need help to make actual decisions ... and understand their consequences. Wednesday, September 29, 2010
  55. 55. understand the project application vs. website? team skills: dedicated F2E? team size & turnover? project lifecycle: long-term, evolving product? service-oriented back-end? Wednesday, September 29, 2010
  56. 56. assess the application’s needs code & le organization? dependency management & build tools? templating & templated widgets? data abstractions & binding? a11y, i18n & l10n? Wednesday, September 29, 2010
  57. 57. then and only then, choose your tools features that address the application’s needs? active development? active community? documentation & resources? institutional backing? Wednesday, September 29, 2010
  58. 58. #4 RTFM can’t be our go-to answer Wednesday, September 29, 2010
  59. 59. “[It’s] a difficult time to learn to be a JavaScript ninja, or even a JavaScript street beggar. Good resources for getting beyond the very basics are hard to nd, documentation is sparse or wrong, and a snippet of code that may have been viable last year is now an anti- pattern.” http://www.clientcide.com/deep-thoughts/why-its-a-good-idea-to-be-a-javascript-developer-and-what-it-takes-to-be-one/#comment-32703 Wednesday, September 29, 2010
  60. 60. #5 sharing what we know is as important as making new things Wednesday, September 29, 2010
  61. 61. Wednesday, September 29, 2010
  62. 62. rebeccamurphey.com • blog.rebeccamurphey.com • @rmurphey anks, in guilt-free alphabetical order, to: Tim Caswell, John Hann, Peter Higgins, Tom Hughes- Croucher, Paul Irish, Brian LeRoux, Roger Raymond, Alex Sexton, Colin Snover, Adam Sontag, Chris Williams, and to everyone who listened to me formulate my thoughts. Wednesday, September 29, 2010
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×