24
JQUERY IS NOT THE ANSWER Ed Kim @edwardjkim

Jquery is Not the Answer

Embed Size (px)

Citation preview

Page 1: Jquery is Not the Answer

JQUERYISNOTTHEANSWER

EdKim@edwardjkim

Page 2: Jquery is Not the Answer

JQUERYISEVERYWHERE(ALMOST)

56%ofallwebsites

92%ofjavascriptwebsites

Source:W3Tech

Page 3: Jquery is Not the Answer

ACOMMONPITFALL

Iwanttoshow/hidecontentwhenauserclicksonalink"Nicethatwasprettyeasy!"

Iwanttoshowdatadependingonwhattheuserinputs"Nottoobad"

NowIwanttoletusersmanipulatethedata"ThisisgettingharderbutI'llkeepgoingbecauseI'mreallygoodatjQuery."

Page 4: Jquery is Not the Answer

DATA-VIEW-LOGIC

Page 5: Jquery is Not the Answer

GETTINGDATAOUTOFTHEDOM

Ashumans,it'seasytoprocessdatainthisform

Butformachines,itactuallytakesalotofworktoextractthedataandstartcomputing

Page 6: Jquery is Not the Answer

ASIMPLEEXAMPLE

Sortthistablebythepriceofbeer

Page 7: Jquery is Not the Answer

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"...

Page 8: Jquery is Not the Answer

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

Page 9: Jquery is Not the Answer

MANIPULATINGTHEDOM

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

Page 10: Jquery is Not the Answer

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);});});});});})

Page 11: Jquery is Not the Answer

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);});

Page 12: Jquery is Not the Answer
Page 13: Jquery is Not the Answer

WHATABOUTCOMPLEXVIEWS?Barswithin2milesoftheCivicCenter

Page 14: Jquery is Not the Answer
Page 15: Jquery is Not the Answer

JQUERYISNOTAFRAMEWORK

Page 16: Jquery is Not the Answer

MV*TOTHERESCUE

Data-View-Logic

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

Page 17: Jquery is Not the Answer

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);

Page 18: Jquery is Not the Answer

WHENPERFORMANCEMATTERS

Page 19: Jquery is Not the Answer

REMEMBERTHIS?

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

HeavyDOMtraversaleatsuptime.

Let'scompareperformancetoaframeworklikeknockout.js

Page 20: Jquery is Not the Answer

TIMETRIALS

Page 21: Jquery is Not the Answer

FILESIZE

jQuery2.0.3-30kbgzipped

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

Page 22: Jquery is Not the Answer

JQUERYDOESHAVEGOODPARTS

BrowsercompatibilityAjaxHandlingEvents

Page 23: Jquery is Not the Answer

SOMEGOODUSECASES

SmallSelf-containedwidgets(jQueryUI)ScrapingWebsitesRapidPrototyping(arguably)

Page 24: Jquery is Not the Answer

INSUMMARY

jQueryisnotaframeworkjQuerycanbeslow

It'sagreattool.Justbecarefulhowyouuseit!