Deleting jQuery

These are the slides from a talk I gave on the 12th October 2012 at Points Brighton, a small evening conference for web developers and designers. They will be slightly out of context on their own so I've written a bit about what I spoke about to try and give them some.

http://fulljames.net/articles/deleting-jquery

Transcript

1. Deleting jQuery or, the DIY Javascript library
2. A disclaimer* * other Javascript libraries are available
3. Another disclaimer* * I’m not saying that what I do is the right way or what you do is the wrong way. I just want to tell a story and hopefully provoke some thought. Your statutory rights are not affected. Offer not available in the Channel Islands.
4. A thought experiment find . -name “jQuery” –exec rm –rf {} \;
6. A history lesson
7. A history lesson … of cheating at Javascript
9. 1995 FUCK ALL
10. <a href=”http://www.internets.com" onMouseOver="window.status='WEB DESIGN IS AWESOME'" onMouseOut="window.status=''">Click here!</a>!
11. <A HREF="http://www.internets.com" onMouseOver="window.status='WEB DESIGN IS AWESOME'" onMouseOut="window.status=''"><FONT SIZE="3" COLOR="#FF0000">Click here!</A></FONT>!
13. 1997 DHTML
14. <script type="text/javascript">! <!—! function MM_swapImgRestore() { //v3.0! var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;! }! function MM_preloadImages() { //v3.0! var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();! var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)! if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}! }! ! function MM_findObj(n, d) { //v4.01! var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {! d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}! if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];! for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);! if(!x && d.getElementById) x=d.getElementById(n); return x;! }! ! function MM_swapImage() { //v3.0! var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a }! //-->! </script>!
16. 1999 Leveling the playing field
18. 2006 Prototype + Script.aculo.us
21. function galleryClick(e) { // stop the thumbnail carousel gCarousel.stop(); var link = Event.findElement(e,'a').href; if(!$('gallery_display')) { thisGallery = Builder.node('div',{id: 'gallery_display', style: 'display: none'}, [ Builder.node('h2','CX-7 Interior'), Builder.node('ul',[ Builder.node('li',[ Builder.node('a',{href: '#', className: 'cta_left'},'previous') ]), Builder.node('li',[ Builder.node('a',{href: '#', className: 'cta_right'},'next') ]), Builder.node('li',[ Builder.node('a',{href: 'flat.html', className: 'cta_close'},'close') ]), ]), Builder.node('img',{src: link, width: '735', height: '464'}) ]); $('container').appendChild(thisGallery); $A($('gallery_display').getElementsByClassName('cta_close')).map(Element.extend).each(function(i) { Event.observe(i,'click',galleryClose, false); }); } else { $('gallery_display').getElementsBySelector('img')[0].src = link;
23. 2008 jQuery
26. 2013 ????
27. A statistics lesson
28. source: http://trends.builtwith.com/javascript/jQuery
31. A sanity check What do you actually want to do?
33. Another way? Or, learn some new stuff. Again.
34. Browsers are better now document.querySelector requestAnimationFrame New object methods etc etc
35. Some alternatives RequireJS microjs.com
37. Enter Ender http://ender.no.de NPM-style package management for the client
38. $ ender build domready qwery bean underscore knockoutify!
39. $ ender build domready qwery bean underscore knockoutify!
40. $(document).ready(function () {
 
 var viewmodel = new wtf.models.Page(data);
 ko.applyBindings(viewmodel);
 
 $('a.ext').click(function(e) {
 window.open(this.href);
 e.preventDefault();
 });
 
 $(window).resize(function(e) {
 viewmodel.h1w($('h1')[0].clientWidth);
 });
 });!
41. A homework assignment Always more to learn
44. A final disclaimer* * Typically, since first having the idea for this talk, jQuery announced it will use modular builds from v1.8 onwards.
45. Thank you
46. @fulljames http://fulljames.net http://whattheframework.com