Jquery is Not the Answer
-
Upload
social-tables -
Category
Technology
-
view
558 -
download
1
Transcript of Jquery is Not the Answer
![Page 1: Jquery is Not the Answer](https://reader031.fdocuments.net/reader031/viewer/2022022415/5a6cf4a77f8b9ac2418b4975/html5/thumbnails/1.jpg)
JQUERYISNOTTHEANSWER
EdKim@edwardjkim
![Page 2: Jquery is Not the Answer](https://reader031.fdocuments.net/reader031/viewer/2022022415/5a6cf4a77f8b9ac2418b4975/html5/thumbnails/2.jpg)
JQUERYISEVERYWHERE(ALMOST)
56%ofallwebsites
92%ofjavascriptwebsites
Source:W3Tech
![Page 3: Jquery is Not the Answer](https://reader031.fdocuments.net/reader031/viewer/2022022415/5a6cf4a77f8b9ac2418b4975/html5/thumbnails/3.jpg)
ACOMMONPITFALL
Iwanttoshow/hidecontentwhenauserclicksonalink"Nicethatwasprettyeasy!"
Iwanttoshowdatadependingonwhattheuserinputs"Nottoobad"
NowIwanttoletusersmanipulatethedata"ThisisgettingharderbutI'llkeepgoingbecauseI'mreallygoodatjQuery."
![Page 4: Jquery is Not the Answer](https://reader031.fdocuments.net/reader031/viewer/2022022415/5a6cf4a77f8b9ac2418b4975/html5/thumbnails/4.jpg)
DATA-VIEW-LOGIC
![Page 5: Jquery is Not the Answer](https://reader031.fdocuments.net/reader031/viewer/2022022415/5a6cf4a77f8b9ac2418b4975/html5/thumbnails/5.jpg)
GETTINGDATAOUTOFTHEDOM
Ashumans,it'seasytoprocessdatainthisform
Butformachines,itactuallytakesalotofworktoextractthedataandstartcomputing
![Page 6: Jquery is Not the Answer](https://reader031.fdocuments.net/reader031/viewer/2022022415/5a6cf4a77f8b9ac2418b4975/html5/thumbnails/6.jpg)
ASIMPLEEXAMPLE
Sortthistablebythepriceofbeer
![Page 7: Jquery is Not the Answer](https://reader031.fdocuments.net/reader031/viewer/2022022415/5a6cf4a77f8b9ac2418b4975/html5/thumbnails/7.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022415/5a6cf4a77f8b9ac2418b4975/html5/thumbnails/8.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022415/5a6cf4a77f8b9ac2418b4975/html5/thumbnails/9.jpg)
MANIPULATINGTHEDOM
$.each(bars,function(index,bar){$('#bar-table').children('tbody').append(bar);});//VeryBad!!!
![Page 10: Jquery is Not the Answer](https://reader031.fdocuments.net/reader031/viewer/2022022415/5a6cf4a77f8b9ac2418b4975/html5/thumbnails/10.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022415/5a6cf4a77f8b9ac2418b4975/html5/thumbnails/11.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022415/5a6cf4a77f8b9ac2418b4975/html5/thumbnails/12.jpg)
![Page 13: Jquery is Not the Answer](https://reader031.fdocuments.net/reader031/viewer/2022022415/5a6cf4a77f8b9ac2418b4975/html5/thumbnails/13.jpg)
WHATABOUTCOMPLEXVIEWS?Barswithin2milesoftheCivicCenter
![Page 14: Jquery is Not the Answer](https://reader031.fdocuments.net/reader031/viewer/2022022415/5a6cf4a77f8b9ac2418b4975/html5/thumbnails/14.jpg)
![Page 15: Jquery is Not the Answer](https://reader031.fdocuments.net/reader031/viewer/2022022415/5a6cf4a77f8b9ac2418b4975/html5/thumbnails/15.jpg)
JQUERYISNOTAFRAMEWORK
![Page 16: Jquery is Not the Answer](https://reader031.fdocuments.net/reader031/viewer/2022022415/5a6cf4a77f8b9ac2418b4975/html5/thumbnails/16.jpg)
MV*TOTHERESCUE
Data-View-Logic
Model-View-Controller(MVC)Model-View-ViewModel(MVVM)
![Page 17: Jquery is Not the Answer](https://reader031.fdocuments.net/reader031/viewer/2022022415/5a6cf4a77f8b9ac2418b4975/html5/thumbnails/17.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022415/5a6cf4a77f8b9ac2418b4975/html5/thumbnails/18.jpg)
WHENPERFORMANCEMATTERS
![Page 19: Jquery is Not the Answer](https://reader031.fdocuments.net/reader031/viewer/2022022415/5a6cf4a77f8b9ac2418b4975/html5/thumbnails/19.jpg)
REMEMBERTHIS?
$.each(rows,function(index,row){$table.children('tbody').append(row);});
HeavyDOMtraversaleatsuptime.
Let'scompareperformancetoaframeworklikeknockout.js
![Page 20: Jquery is Not the Answer](https://reader031.fdocuments.net/reader031/viewer/2022022415/5a6cf4a77f8b9ac2418b4975/html5/thumbnails/20.jpg)
TIMETRIALS
![Page 21: Jquery is Not the Answer](https://reader031.fdocuments.net/reader031/viewer/2022022415/5a6cf4a77f8b9ac2418b4975/html5/thumbnails/21.jpg)
FILESIZE
jQuery2.0.3-30kbgzipped
Zepto.js-10kbgzippedknockout.js-16kbgzippedbackbone.js-7kbgzipped
![Page 22: Jquery is Not the Answer](https://reader031.fdocuments.net/reader031/viewer/2022022415/5a6cf4a77f8b9ac2418b4975/html5/thumbnails/22.jpg)
JQUERYDOESHAVEGOODPARTS
BrowsercompatibilityAjaxHandlingEvents
![Page 23: Jquery is Not the Answer](https://reader031.fdocuments.net/reader031/viewer/2022022415/5a6cf4a77f8b9ac2418b4975/html5/thumbnails/23.jpg)
SOMEGOODUSECASES
SmallSelf-containedwidgets(jQueryUI)ScrapingWebsitesRapidPrototyping(arguably)
![Page 24: Jquery is Not the Answer](https://reader031.fdocuments.net/reader031/viewer/2022022415/5a6cf4a77f8b9ac2418b4975/html5/thumbnails/24.jpg)
INSUMMARY
jQueryisnotaframeworkjQuerycanbeslow
It'sagreattool.Justbecarefulhowyouuseit!