SlideShare a Scribd company logo
1 of 62
Download to read offline
The jQuery Divide
               Rebecca Murphey • JSConf.eu • 25.09.2010
               @rmurphey • rebeccamurphey.com


Wednesday, September 29, 2010
Wednesday, September 29, 2010
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
We need you to
                                help us organize our
                                jQuery-based
                                application. It’s a
                                steaming pile of
                                unmaintainable
                                crap.




Wednesday, September 29, 2010
But we want to
                                keep using jQuery.
                                It’s just so easy!
                                And popular!




Wednesday, September 29, 2010
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
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
Plus that way our
                                database guy can
                                still help us out
                                with the front end.




Wednesday, September 29, 2010
*headdesk*




Wednesday, September 29, 2010
“... 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
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
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
           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
we could just write this ...




Wednesday, September 29, 2010
$.post(
              'ajax_test.php',
              { fname : 'Henry', lname : 'Ford' },
              function(resp) { $('#myDiv').html(resp); }
           );




Wednesday, September 29, 2010
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();
               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
... 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 version to the second without creating a
               whole lot of spaghetti code.




Wednesday, September 29, 2010
It turns out jQuery’s DOM-centric patterns
               are a fairly terrible way to think about
               applications.


Wednesday, September 29, 2010
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
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
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
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
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
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
               things with it.




Wednesday, September 29, 2010
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
               anyway.




Wednesday, September 29, 2010
Wednesday, September 29, 2010
Aaron Newton from Cloudera wrote a post a
               while back about how hard it is to nd “badass”
               JavaScript developers.




Wednesday, September 29, 2010
e productive reaction to a post like that isn’t
               to feel superior because you’re a badass
               JavaScript developer.




Wednesday, September 29, 2010
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: disparate pieces with few organizing
               principles; components that are fun but aren’t
               made to work together.


Wednesday, September 29, 2010
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 correcting those who are not.


                                          http://xpandapopx.deviantart.com/art/The-Prideful-Hypocrite-68848153


Wednesday, September 29, 2010
#2
                                choose tools, not APIs




Wednesday, September 29, 2010
// 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
$(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
(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
#3
                                    understanding the problem
                                is key to determining the solution




Wednesday, September 29, 2010
Decision-makers need help to make actual
               decisions ... and understand their consequences.

Wednesday, September 29, 2010
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
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
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
#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
               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
#5
                                sharing what we know
                                  is as important as
                                 making new things




Wednesday, September 29, 2010
Wednesday, September 29, 2010
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

More Related Content

What's hot

jQuery Fundamentals
jQuery FundamentalsjQuery Fundamentals
jQuery FundamentalsGil Fink
 
Learning jQuery in 30 minutes
Learning jQuery in 30 minutesLearning jQuery in 30 minutes
Learning jQuery in 30 minutesSimon Willison
 
Write Less Do More
Write Less Do MoreWrite Less Do More
Write Less Do MoreRemy Sharp
 
jQuery Data Manipulate API - A source code dissecting journey
jQuery Data Manipulate API - A source code dissecting journeyjQuery Data Manipulate API - A source code dissecting journey
jQuery Data Manipulate API - A source code dissecting journeyHuiyi Yan
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginningAnis Ahmad
 
Functionality Focused Code Organization
Functionality Focused Code OrganizationFunctionality Focused Code Organization
Functionality Focused Code OrganizationRebecca Murphey
 
Testing Web Applications with GEB
Testing Web Applications with GEBTesting Web Applications with GEB
Testing Web Applications with GEBHoward Lewis Ship
 
Drupal Best Practices
Drupal Best PracticesDrupal Best Practices
Drupal Best Practicesmanugoel2003
 
Doctrine MongoDB ODM (PDXPHP)
Doctrine MongoDB ODM (PDXPHP)Doctrine MongoDB ODM (PDXPHP)
Doctrine MongoDB ODM (PDXPHP)Kris Wallsmith
 
Keeping It Small with Slim
Keeping It Small with SlimKeeping It Small with Slim
Keeping It Small with SlimRaven Tools
 
Functional programming using underscorejs
Functional programming using underscorejsFunctional programming using underscorejs
Functional programming using underscorejs偉格 高
 
Jquery optimization-tips
Jquery optimization-tipsJquery optimization-tips
Jquery optimization-tipsanubavam-techkt
 
Rediscovering JavaScript: The Language Behind The Libraries
Rediscovering JavaScript: The Language Behind The LibrariesRediscovering JavaScript: The Language Behind The Libraries
Rediscovering JavaScript: The Language Behind The LibrariesSimon Willison
 
Javascript essential-pattern
Javascript essential-patternJavascript essential-pattern
Javascript essential-pattern偉格 高
 

What's hot (20)

jQuery
jQueryjQuery
jQuery
 
jQuery Fundamentals
jQuery FundamentalsjQuery Fundamentals
jQuery Fundamentals
 
Learning jQuery in 30 minutes
Learning jQuery in 30 minutesLearning jQuery in 30 minutes
Learning jQuery in 30 minutes
 
Write Less Do More
Write Less Do MoreWrite Less Do More
Write Less Do More
 
JQuery introduction
JQuery introductionJQuery introduction
JQuery introduction
 
jQuery Data Manipulate API - A source code dissecting journey
jQuery Data Manipulate API - A source code dissecting journeyjQuery Data Manipulate API - A source code dissecting journey
jQuery Data Manipulate API - A source code dissecting journey
 
Jquery
JqueryJquery
Jquery
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginning
 
Functionality Focused Code Organization
Functionality Focused Code OrganizationFunctionality Focused Code Organization
Functionality Focused Code Organization
 
Testing Web Applications with GEB
Testing Web Applications with GEBTesting Web Applications with GEB
Testing Web Applications with GEB
 
Drupal Best Practices
Drupal Best PracticesDrupal Best Practices
Drupal Best Practices
 
Doctrine MongoDB ODM (PDXPHP)
Doctrine MongoDB ODM (PDXPHP)Doctrine MongoDB ODM (PDXPHP)
Doctrine MongoDB ODM (PDXPHP)
 
Jquery introduction
Jquery introductionJquery introduction
Jquery introduction
 
Keeping It Small with Slim
Keeping It Small with SlimKeeping It Small with Slim
Keeping It Small with Slim
 
D3.js and SVG
D3.js and SVGD3.js and SVG
D3.js and SVG
 
Functional programming using underscorejs
Functional programming using underscorejsFunctional programming using underscorejs
Functional programming using underscorejs
 
Jquery optimization-tips
Jquery optimization-tipsJquery optimization-tips
Jquery optimization-tips
 
Rediscovering JavaScript: The Language Behind The Libraries
Rediscovering JavaScript: The Language Behind The LibrariesRediscovering JavaScript: The Language Behind The Libraries
Rediscovering JavaScript: The Language Behind The Libraries
 
Javascript essential-pattern
Javascript essential-patternJavascript essential-pattern
Javascript essential-pattern
 
this
thisthis
this
 

Viewers also liked

The World of Social Objects
The World of Social ObjectsThe World of Social Objects
The World of Social ObjectsJESS3
 
Mapping History on Open Street Map
Mapping History on Open Street MapMapping History on Open Street Map
Mapping History on Open Street Mapfrankieroberto
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and RenderingStoyan Stefanov
 
JavaScript is everywhere
JavaScript is everywhereJavaScript is everywhere
JavaScript is everywhereStoyan Stefanov
 
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS5 Mistakes of Massive CSS
5 Mistakes of Massive CSSNicole Sullivan
 
Automating your workflow with Gulp.js
Automating your workflow with Gulp.jsAutomating your workflow with Gulp.js
Automating your workflow with Gulp.jsBo-Yi Wu
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developersStoyan Stefanov
 
The Real Life Social Network v2
The Real Life Social Network v2The Real Life Social Network v2
The Real Life Social Network v2Paul Adams
 
Mobile gotcha
Mobile gotchaMobile gotcha
Mobile gotchaphegaro
 
jQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScriptjQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScriptGuy Royse
 
jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜
jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜
jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜Kazuyoshi Tsuchiya
 
jQuery Learning
jQuery LearningjQuery Learning
jQuery LearningUzair Ali
 
A Power User's Intro to jQuery Awesomeness in SharePoint
A Power User's Intro to jQuery Awesomeness in SharePointA Power User's Intro to jQuery Awesomeness in SharePoint
A Power User's Intro to jQuery Awesomeness in SharePointMark Rackley
 
HTML5 DevConf Oct 2012 Tech Talk
HTML5 DevConf Oct 2012 Tech TalkHTML5 DevConf Oct 2012 Tech Talk
HTML5 DevConf Oct 2012 Tech Talkbefamous
 
End of year review/preview
End of year review/previewEnd of year review/preview
End of year review/previewNigelG
 
Building jQuery Mobile Web Apps
Building jQuery Mobile Web AppsBuilding jQuery Mobile Web Apps
Building jQuery Mobile Web AppsOperation Mobile
 
jQuery Mobile Jump Start
jQuery Mobile Jump StartjQuery Mobile Jump Start
jQuery Mobile Jump StartTroy Miles
 

Viewers also liked (20)

Frameworks
FrameworksFrameworks
Frameworks
 
The World of Social Objects
The World of Social ObjectsThe World of Social Objects
The World of Social Objects
 
Mapping History on Open Street Map
Mapping History on Open Street MapMapping History on Open Street Map
Mapping History on Open Street Map
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and Rendering
 
JavaScript is everywhere
JavaScript is everywhereJavaScript is everywhere
JavaScript is everywhere
 
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS5 Mistakes of Massive CSS
5 Mistakes of Massive CSS
 
YSlow 2.0
YSlow 2.0YSlow 2.0
YSlow 2.0
 
Automating your workflow with Gulp.js
Automating your workflow with Gulp.jsAutomating your workflow with Gulp.js
Automating your workflow with Gulp.js
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developers
 
The Real Life Social Network v2
The Real Life Social Network v2The Real Life Social Network v2
The Real Life Social Network v2
 
Mobile gotcha
Mobile gotchaMobile gotcha
Mobile gotcha
 
jQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScriptjQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScript
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
 
jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜
jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜
jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜
 
jQuery Learning
jQuery LearningjQuery Learning
jQuery Learning
 
A Power User's Intro to jQuery Awesomeness in SharePoint
A Power User's Intro to jQuery Awesomeness in SharePointA Power User's Intro to jQuery Awesomeness in SharePoint
A Power User's Intro to jQuery Awesomeness in SharePoint
 
HTML5 DevConf Oct 2012 Tech Talk
HTML5 DevConf Oct 2012 Tech TalkHTML5 DevConf Oct 2012 Tech Talk
HTML5 DevConf Oct 2012 Tech Talk
 
End of year review/preview
End of year review/previewEnd of year review/preview
End of year review/preview
 
Building jQuery Mobile Web Apps
Building jQuery Mobile Web AppsBuilding jQuery Mobile Web Apps
Building jQuery Mobile Web Apps
 
jQuery Mobile Jump Start
jQuery Mobile Jump StartjQuery Mobile Jump Start
jQuery Mobile Jump Start
 

Similar to The jQuery Divide

Cleaner, Leaner, Meaner: Refactoring your jQuery
Cleaner, Leaner, Meaner: Refactoring your jQueryCleaner, Leaner, Meaner: Refactoring your jQuery
Cleaner, Leaner, Meaner: Refactoring your jQueryRebecca Murphey
 
Kick start with j query
Kick start with j queryKick start with j query
Kick start with j queryMd. Ziaul Haq
 
Jquery Best Practices
Jquery Best PracticesJquery Best Practices
Jquery Best Practicesbrinsknaps
 
Organizing Code with JavascriptMVC
Organizing Code with JavascriptMVCOrganizing Code with JavascriptMVC
Organizing Code with JavascriptMVCThomas Reynolds
 
An Introduction to Jquery
An Introduction to JqueryAn Introduction to Jquery
An Introduction to JqueryPhil Reither
 
international PHP2011_Bastian Feder_jQuery's Secrets
international PHP2011_Bastian Feder_jQuery's Secretsinternational PHP2011_Bastian Feder_jQuery's Secrets
international PHP2011_Bastian Feder_jQuery's Secretssmueller_sandsmedia
 
Writing Maintainable JavaScript
Writing Maintainable JavaScriptWriting Maintainable JavaScript
Writing Maintainable JavaScriptAndrew Dupont
 
jQuery - 10 Time-Savers You (Maybe) Don't Know
jQuery - 10 Time-Savers You (Maybe) Don't KnowjQuery - 10 Time-Savers You (Maybe) Don't Know
jQuery - 10 Time-Savers You (Maybe) Don't Knowgirish82
 
jQuery Anti-Patterns for Performance
jQuery Anti-Patterns for PerformancejQuery Anti-Patterns for Performance
jQuery Anti-Patterns for PerformanceAndrás Kovács
 
A Rich Web experience with jQuery, Ajax and .NET
A Rich Web experience with jQuery, Ajax and .NETA Rich Web experience with jQuery, Ajax and .NET
A Rich Web experience with jQuery, Ajax and .NETJames Johnson
 
Desenvolvendo Aplicativos Sociais com Rails 3
Desenvolvendo Aplicativos Sociais com Rails 3Desenvolvendo Aplicativos Sociais com Rails 3
Desenvolvendo Aplicativos Sociais com Rails 3Carlos Brando
 
Designers Guide To jQuery
Designers Guide To jQueryDesigners Guide To jQuery
Designers Guide To jQuerySteve Krueger
 
jQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & CompressionjQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & CompressionPaul Irish
 
Beyond the DOM: Sane Structure for JS Apps
Beyond the DOM: Sane Structure for JS AppsBeyond the DOM: Sane Structure for JS Apps
Beyond the DOM: Sane Structure for JS AppsRebecca Murphey
 

Similar to The jQuery Divide (20)

Cleaner, Leaner, Meaner: Refactoring your jQuery
Cleaner, Leaner, Meaner: Refactoring your jQueryCleaner, Leaner, Meaner: Refactoring your jQuery
Cleaner, Leaner, Meaner: Refactoring your jQuery
 
Kick start with j query
Kick start with j queryKick start with j query
Kick start with j query
 
Dojo Confessions
Dojo ConfessionsDojo Confessions
Dojo Confessions
 
Jquery Best Practices
Jquery Best PracticesJquery Best Practices
Jquery Best Practices
 
jQuery Way
jQuery WayjQuery Way
jQuery Way
 
Organizing Code with JavascriptMVC
Organizing Code with JavascriptMVCOrganizing Code with JavascriptMVC
Organizing Code with JavascriptMVC
 
An Introduction to Jquery
An Introduction to JqueryAn Introduction to Jquery
An Introduction to Jquery
 
jQuery secrets
jQuery secretsjQuery secrets
jQuery secrets
 
international PHP2011_Bastian Feder_jQuery's Secrets
international PHP2011_Bastian Feder_jQuery's Secretsinternational PHP2011_Bastian Feder_jQuery's Secrets
international PHP2011_Bastian Feder_jQuery's Secrets
 
Writing Maintainable JavaScript
Writing Maintainable JavaScriptWriting Maintainable JavaScript
Writing Maintainable JavaScript
 
jQuery - 10 Time-Savers You (Maybe) Don't Know
jQuery - 10 Time-Savers You (Maybe) Don't KnowjQuery - 10 Time-Savers You (Maybe) Don't Know
jQuery - 10 Time-Savers You (Maybe) Don't Know
 
jQuery Anti-Patterns for Performance
jQuery Anti-Patterns for PerformancejQuery Anti-Patterns for Performance
jQuery Anti-Patterns for Performance
 
A Rich Web experience with jQuery, Ajax and .NET
A Rich Web experience with jQuery, Ajax and .NETA Rich Web experience with jQuery, Ajax and .NET
A Rich Web experience with jQuery, Ajax and .NET
 
Desenvolvendo Aplicativos Sociais com Rails 3
Desenvolvendo Aplicativos Sociais com Rails 3Desenvolvendo Aplicativos Sociais com Rails 3
Desenvolvendo Aplicativos Sociais com Rails 3
 
Designers Guide To jQuery
Designers Guide To jQueryDesigners Guide To jQuery
Designers Guide To jQuery
 
jQuery
jQueryjQuery
jQuery
 
JQuery introduction
JQuery introductionJQuery introduction
JQuery introduction
 
JQuery Flot
JQuery FlotJQuery Flot
JQuery Flot
 
jQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & CompressionjQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & Compression
 
Beyond the DOM: Sane Structure for JS Apps
Beyond the DOM: Sane Structure for JS AppsBeyond the DOM: Sane Structure for JS Apps
Beyond the DOM: Sane Structure for JS Apps
 

More from Rebecca Murphey

A New Baseline for Front-End Devs
A New Baseline for Front-End DevsA New Baseline for Front-End Devs
A New Baseline for Front-End DevsRebecca Murphey
 
Getting Started with Mulberry
Getting Started with MulberryGetting Started with Mulberry
Getting Started with MulberryRebecca Murphey
 
Mulberry: A Mobile App Development Toolkit
Mulberry: A Mobile App Development ToolkitMulberry: A Mobile App Development Toolkit
Mulberry: A Mobile App Development ToolkitRebecca Murphey
 
DojoConf: Building Large Apps
DojoConf: Building Large AppsDojoConf: Building Large Apps
DojoConf: Building Large AppsRebecca Murphey
 
Lessons from-a-rewrite-gotham
Lessons from-a-rewrite-gothamLessons from-a-rewrite-gotham
Lessons from-a-rewrite-gothamRebecca Murphey
 
Building Large jQuery Applications
Building Large jQuery ApplicationsBuilding Large jQuery Applications
Building Large jQuery ApplicationsRebecca Murphey
 
Delivering a Responsive UI
Delivering a Responsive UIDelivering a Responsive UI
Delivering a Responsive UIRebecca Murphey
 
Using Objects to Organize your jQuery Code
Using Objects to Organize your jQuery CodeUsing Objects to Organize your jQuery Code
Using Objects to Organize your jQuery CodeRebecca Murphey
 

More from Rebecca Murphey (13)

A New Baseline for Front-End Devs
A New Baseline for Front-End DevsA New Baseline for Front-End Devs
A New Baseline for Front-End Devs
 
BVJS
BVJSBVJS
BVJS
 
Getting Started with Mulberry
Getting Started with MulberryGetting Started with Mulberry
Getting Started with Mulberry
 
Mulberry: A Mobile App Development Toolkit
Mulberry: A Mobile App Development ToolkitMulberry: A Mobile App Development Toolkit
Mulberry: A Mobile App Development Toolkit
 
Introducing Mulberry
Introducing MulberryIntroducing Mulberry
Introducing Mulberry
 
DojoConf: Building Large Apps
DojoConf: Building Large AppsDojoConf: Building Large Apps
DojoConf: Building Large Apps
 
Lessons from-a-rewrite-gotham
Lessons from-a-rewrite-gothamLessons from-a-rewrite-gotham
Lessons from-a-rewrite-gotham
 
Lessons from a Rewrite
Lessons from a RewriteLessons from a Rewrite
Lessons from a Rewrite
 
Modern JavaScript
Modern JavaScriptModern JavaScript
Modern JavaScript
 
Building Large jQuery Applications
Building Large jQuery ApplicationsBuilding Large jQuery Applications
Building Large jQuery Applications
 
Delivering a Responsive UI
Delivering a Responsive UIDelivering a Responsive UI
Delivering a Responsive UI
 
Using Objects to Organize your jQuery Code
Using Objects to Organize your jQuery CodeUsing Objects to Organize your jQuery Code
Using Objects to Organize your jQuery Code
 
Jquery Fundamentals
Jquery FundamentalsJquery Fundamentals
Jquery Fundamentals
 

Recently uploaded

Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2
Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2
Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2DianaGray10
 
Arti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdfArti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdfwill854175
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
Dynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationDynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationBuild Intuit
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentMahmoud Rabie
 
Introduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptxIntroduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptxmprakaash5
 
Software Security in the Real World w/Kelsey Hightower
Software Security in the Real World w/Kelsey HightowerSoftware Security in the Real World w/Kelsey Hightower
Software Security in the Real World w/Kelsey HightowerAnchore
 
Tecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for RotogravureTecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for RotogravureAntonio de Llamas
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxAna-Maria Mihalceanu
 
full stack practical assignment msc cs.pdf
full stack practical assignment msc cs.pdffull stack practical assignment msc cs.pdf
full stack practical assignment msc cs.pdfHulkTheDevil
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?Rustici Software
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024TopCSSGallery
 
Automation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementAutomation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementDianaGray10
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...amber724300
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFMichael Gough
 
Why Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionWhy Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionDEEPRAJ PATHAK
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...BookNet Canada
 

Recently uploaded (20)

Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2
Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2
Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2
 
Arti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdfArti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdf
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
Dynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationDynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientation
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career Development
 
Introduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptxIntroduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptx
 
Software Security in the Real World w/Kelsey Hightower
Software Security in the Real World w/Kelsey HightowerSoftware Security in the Real World w/Kelsey Hightower
Software Security in the Real World w/Kelsey Hightower
 
Tecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for RotogravureTecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for Rotogravure
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance Toolbox
 
full stack practical assignment msc cs.pdf
full stack practical assignment msc cs.pdffull stack practical assignment msc cs.pdf
full stack practical assignment msc cs.pdf
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
 
Automation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementAutomation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions management
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDF
 
Why Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionWhy Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile Evolution
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 

The jQuery Divide

  • 1. The jQuery Divide Rebecca Murphey • JSConf.eu • 25.09.2010 @rmurphey • rebeccamurphey.com Wednesday, September 29, 2010
  • 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. We need you to help us organize our jQuery-based application. It’s a steaming pile of unmaintainable crap. Wednesday, September 29, 2010
  • 5. But we want to keep using jQuery. It’s just so easy! And popular! Wednesday, September 29, 2010
  • 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. 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. Plus that way our database guy can still help us out with the front end. Wednesday, September 29, 2010
  • 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. 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. jQuery meant we didn’t have to understand this ... Wednesday, September 29, 2010
  • 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. we could just write this ... Wednesday, September 29, 2010
  • 15. $.post( 'ajax_test.php', { fname : 'Henry', lname : 'Ford' }, function(resp) { $('#myDiv').html(resp); } ); Wednesday, September 29, 2010
  • 16. jQuery offers a really clear answer when we need to build this ... Wednesday, September 29, 2010
  • 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. ... which is why we see this ... Wednesday, September 29, 2010
  • 22. But when it comes time to create this ... Wednesday, September 29, 2010
  • 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. It turns out jQuery’s DOM-centric patterns are a fairly terrible way to think about applications. Wednesday, September 29, 2010
  • 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. 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. 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. 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. 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. ey’re writing code whether we like it or not, and it’s not good code. Wednesday, September 29, 2010
  • 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. In a nutshell, this is what these developers need to learn: Wednesday, September 29, 2010
  • 34. JavaScript jQuery Wednesday, September 29, 2010
  • 35. Companies need developers, and if bad ones are all that’s available, they’ll hire them anyway. Wednesday, September 29, 2010
  • 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. 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. e productive reaction is to gure out how to x it. Wednesday, September 29, 2010
  • 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. We need to turn them into developers who think of applications like this. Wednesday, September 29, 2010
  • 42. five things to think about Wednesday, September 29, 2010
  • 43. #1 popularity contests are stupid Wednesday, September 29, 2010
  • 44. Making decisions based on this graph ... Wednesday, September 29, 2010
  • 46. ... makes as much sense as making decisions based on this graph ... Wednesday, September 29, 2010
  • 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. #2 choose tools, not APIs Wednesday, September 29, 2010
  • 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. $(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. (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. #3 understanding the problem is key to determining the solution Wednesday, September 29, 2010
  • 54. Decision-makers need help to make actual decisions ... and understand their consequences. Wednesday, September 29, 2010
  • 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. 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. 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. #4 RTFM can’t be our go-to answer Wednesday, September 29, 2010
  • 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. #5 sharing what we know is as important as making new things Wednesday, September 29, 2010
  • 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