Jquery is Not the Answer

JQUERYISNOTTHEANSWER

EdKim@edwardjkim

JQUERYISEVERYWHERE(ALMOST)

56%ofallwebsites

92%ofjavascriptwebsites

Source:W3Tech

ACOMMONPITFALL

Iwanttoshow/hidecontentwhenauserclicksonalink"Nicethatwasprettyeasy!"

Iwanttoshowdatadependingonwhattheuserinputs"Nottoobad"

NowIwanttoletusersmanipulatethedata"ThisisgettingharderbutI'llkeepgoingbecauseI'mreallygoodatjQuery."

DATA-VIEW-LOGIC

GETTINGDATAOUTOFTHEDOM

Ashumans,it'seasytoprocessdatainthisform

Butformachines,itactuallytakesalotofworktoextractthedataandstartcomputing

ASIMPLEEXAMPLE

Sortthistablebythepriceofbeer

THEHTML

WegetHTMLforeachtablerowfromtheserver.Eachtablerowhastheclass"bar".

<tableid="bar-table">...stuff...<tbody><trclass="bar"><tdclass="name">McGinty'sPublicHouse</td><tdclass="price">$4.00</td><tdclass="address">911EllsworthDrive</td></tr>...morerowswithclass"bar"...

SORTINGAIN'TEASY

sortByPrice=function(a,b){return$(a).children('.price').html()>$(b).children('.price').html()?1:-1;}

Nowyouhavetofindtheparent<tbody>elementandrearrangetherows.

varbars=$(‘.bar’)//barsisnowanarrayof<tr>elements

bars.sort(sortByPrice);//barsisnowasortedarrayof<tr>elements

MANIPULATINGTHEDOM

$.each(bars,function(index,bar){$('#bar-table').children('tbody').append(bar);});//VeryBad!!!

THEWHOLESOLUTION

Source:StackOverflow

$(document).ready(function(){$('table.sortable').each(function(){var$table=$(this);$('th',$table).each(function(column){var$header=$(this);$header.click(function(){varrows=$table.find('tbody>tr').get();rows.sort(function(a,b){varkeyA=$(a).children('td').eq(column).text().toUpperCase();varkeyB=$(b).children('td').eq(column).text().toUpperCase();if(keyA<keyB)return-1;if(keyA>keyB)return1;return0;});$.each(rows,function(index,row){$table.children('tbody').append(row);});});});});})

AGROWINGRIFTBETWEENVIEWANDLOGICHTMLJavascript

Notatallobvioushowtheseareconnected

<trclass="bar"><tdclass="name">TGIFriday's</td><tdclass="price">$4.00</td><tdclass="address">911EllsworthDrive</td></tr>...morerows...

bars=$('.bar');bars.sort(sortByPrice);

$.each(bars,function(index,bar){$('tbody').append(bar);});

WHATABOUTCOMPLEXVIEWS?Barswithin2milesoftheCivicCenter

JQUERYISNOTAFRAMEWORK

MV*TOTHERESCUE

Data-View-Logic

Model-View-Controller(MVC)Model-View-ViewModel(MVVM)

TABLESORTINGINKNOCKOUT<table>...stuff...<tbodydata-bind="foreach:bars"><trclass="bar"><tddata-bind="text:name"/><tddata-bind="text:price"/><tddata-bind="text:address"/></tr>

functionsortByPrice(a,b){returna.price>b.price?1:-1;}barData=[{name:"PiratzTavern",price:"3.50",...}];sortedBarData=barData.sort(sortByPrice);viewModel.sortedBars=ko.observableArray(sortedBarData);

WHENPERFORMANCEMATTERS

REMEMBERTHIS?

$.each(rows,function(index,row){$table.children('tbody').append(row);});

HeavyDOMtraversaleatsuptime.

Let'scompareperformancetoaframeworklikeknockout.js

TIMETRIALS

FILESIZE

jQuery2.0.3-30kbgzipped

Zepto.js-10kbgzippedknockout.js-16kbgzippedbackbone.js-7kbgzipped

JQUERYDOESHAVEGOODPARTS

BrowsercompatibilityAjaxHandlingEvents

SOMEGOODUSECASES

SmallSelf-containedwidgets(jQueryUI)ScrapingWebsitesRapidPrototyping(arguably)

INSUMMARY

jQueryisnotaframeworkjQuerycanbeslow

It'sagreattool.Justbecarefulhowyouuseit!