Defensive, Cross-Browser Coding with Prototype
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Defensive, Cross-Browser Coding with Prototype

on

  • 4,940 views

Tired of writing code that breaks in IE? This session explores strategies that Prototype users can employ to write code that works in the real world.

Tired of writing code that breaks in IE? This session explores strategies that Prototype users can employ to write code that works in the real world.

Statistics

Views

Total Views
4,940
Views on SlideShare
4,172
Embed Views
768

Actions

Likes
4
Downloads
43
Comments
0

9 Embeds 768

http://andrewdupont.net 725
http://onwebdev.blogspot.com 21
http://www.slideshare.net 13
http://blog.siesqo.be 3
http://static.slideshare.net 2
http://www.andrewdupont.net 1
http://127.0.0.1:8795 1
http://onwebdev.blogspot.fi 1
http://blog.gabrieleromanato.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Defensive, Cross-Browser Coding with Prototype Presentation Transcript

  • 1. Defsi, cro-brows codg wh . prototype .
  • 2. ialm aly
  • 3. yr co MSIE
  • 4. T fi ag  JavaScript grief
  • 5. #1: “My co wks  Fifox, but fails eryw else…” (peciay  IE)
  • 6. Fifox s Fibug,  crse
  • 7. Safi s Web Inspecr & Drosa
  • 8. Opa s Dragfly hp://w.opa.com/products/dragfly/
  • 9. Inet Expl s… ★ Vual Stud ★ Microst Script Ed ★ Microst Script Debu
  • 10. Ty a... ★ Suck
  • 11. Debug regi  IE 6–7:
  • 12. a. Do “fmal” bug if ’s yr g
  • 13. b. Use a JavaScript s  get  tac prompt
  • 14. Jh hp://w.biyg.com/jh/
  • 15. c. Use MS Script Debu/ Ed  get ack trac
  • 16. d. Do old-fhn “a” bug
  • 17. #2: “OK, my co wks  IE now, but  slow  counicg by tegraph.”
  • 18. Plu: Use  Fibug prir
  • 19. Pr-m’s prilg: msu elaps me betwn y two co pots
  • 20. var Timer = Class.create({ initialize: function() { this.startTime = new Date().valueOf(); }, end: function() { var endTime = new Date().valueOf(); return (this.startTime - endTime).toString(); } });
  • 21. function doSomethingCostly() { var timer1 = new Timer(); // do something that takes forever... alert(timer1.end()); }
  • 22. Ce udy: zebra-ripg a tab
  • 23. Two tts: 1 rows  10 rows
  • 24. Revn 1 var TableStriper = Class.create({ initialize: function(element) { var timer = new Timer(); this.element = $(element); this.element.select(quot;tbody > tr:nth-child(even)quot;) .invoke(quot;addClassNamequot;, quot;row-evenquot;); this.element.select(quot;tbody > tr:nth-child(odd)quot;) .invoke(quot;addClassNamequot;, quot;row-oddquot;); alert(timer.end() + quot;msquot;); } });
  • 25. 1 Rows 10 Rows Safi 14ms 603ms Fifox 26ms 367ms IE 341ms 5268ms
  • 26. :-(
  • 27. Revn 2 var TableStriper = Class.create({ initialize: function(element) { var timer = new Timer(); this.element = $(element); // Why use two selectors? Use one and loop instead var trs = this.element.select(quot;tbody > trquot;); trs.each( function(tr, i) { tr.addClassName(i % 2 == 0 ? quot;row-oddquot; : quot;row-evenquot;); }); alert(timer.end() + quot;msquot;); } });
  • 28. 1 Rows 10 Rows Safi 12ms 123ms Fifox 14ms 130ms IE 160ms 3245ms
  • 29. :-(
  • 30. Revn 3 var TableStriper = Class.create({ initialize: function(element) { var timer = new Timer(); this.element = $(element); // Eschew CSS selector syntax altogether var tbodies = this.element.getElementsByTagName(quot;tbodyquot;); for (var i = 0, tbody, trs; i < tbodies.length; i++) { tbody = tbodies[i]; trs = tbody.getElementsByTagName(quot;trquot;); for (var j = 0, tr; j < trs.length; j++) { tr = trs[j]; // filter out anything that isn't a direct child of the TBODY if (tr.parentNode !== tbody) continue; $(tr).addClassName(j % 2 == 0 ? quot;row-oddquot; : quot;row-evenquot;); } } alert(timer.end() + quot;msquot;); } });
  • 31. 1 Rows 10 Rows Safi 5ms 53ms Fifox 13ms 143ms IE 160ms 31ms
  • 32. :-(
  • 33. Revn 4 var TableStriper = Class.create({ initialize: function(element) { var timer = new Timer(); this.element = $(element); var tbodies = this.element.getElementsByTagName(quot;tbodyquot;); for (var i = 0, tbody, trs; i < tbodies.length; i++) { tbody = tbodies[i]; trs = tbody.rows; // there's a pre-defined collection for this for (var j = 0, tr; j < trs.length; j++) { tr = trs[j]; // OK, we'll stop quot;extendingquot; elements now tr.className += j % 2 == 0 ? quot; row-oddquot; : quot; row-evenquot;; } } alert(timer.end() + quot;msquot;); } });
  • 34. 1 Rows 10 Rows Safi 1ms 8ms Fifox 6ms 64ms IE 20ms 141ms
  • 35. HOLY CRAP
  • 36. So wt did we n?
  • 37. Ls 1: Secr/$$ e opmiz, but wh gh nos   page, y’ brg   s kns
  • 38. Ls 2: “Extdg” emts  slow,  do not sca  lge no sult sets
  • 39. $  Emt.extd e  shrk-wrap f syacc sug
  • 40. In morn browss, Emt.extd do nog;  IE 6–7  s  copy ce meods muay
  • 41. A Protype DOM lps use Emt.extd tnay
  • 42. Wa —   sayg “D’t use Protype?”
  • 43. We, y: Rch tsi  yr abrac wn ’s o coly
  • 44. Ls #3: A lt b  opmizn go a lg way
  • 45. A few l  n- Protype co, wrt ce, c mn huge pfmce gas
  • 46. As always, opmizn si  lps pays f big
  • 47. Ls 4: Once  “fls” ft… op!
  • 48. #3: “Now ’s py ft  IE, but if I a my page op wn I go  lunch, IE’s froz by  me I get back.”
  • 49. Memy aks
  • 50. Not ju IE 6.0; IE 7.0 claims  fix m, but ’s a li
  • 51. Y c’t be su yr co  ak-fe uil y try    al wld
  • 52. Framewks c lp a lt, but ’s i yr probm  sol
  • 53. Drip hp://fnwe.com/ieak/
  • 54. Load yr page; wch memy usage ce (’s nmal)
  • 55. Now load  page; if memy usage c aga, ’s bad
  • 56. A y seg expo no prop  fce n-primis? ( “circul fce” ak)
  • 57. A y signg es tsi  Protype’s e APIs? (e.g., emt.click)
  • 58. (Protype’s e syem wi c up aft self, but if y d’t use , y’  yr own)
  • 59. A y cag Emt.place  Emt.upde  ctt wh tacd lts?
  • 60. If so, tach  lts fir
  • 61. foo.stopObserving(quot;clickquot;, respondToFoo); // (detaches the respondToFoo listener) foo.stopObserving(quot;clickquot;); // (detaches all click listeners on foo) foo.stopObserving(); // (detaches _all_ listeners on foo)
  • 62. Protype 1.6.[next] wi lp y t wh 
  • 63.  FAL TT: L IE rug ornight
  • 64. #4: “My a pfms wrfuy now, but my co lks like hum suffg.”
  • 65. In or wds: “How do I kp my co mataab if  s  a f a ese special c?”
  • 66. Wt if we cld kp a  ugly cks  e place?
  • 67. Func#wrap
  • 68. Origal func function getOffsetTop(element) { return element.offsetTop; }
  • 69. Modifi func getOffsetTop = getOffsetTop.wrap( function(proceed, element) { // IE will report incorrect values // unless we give the element quot;layoutquot; if (!element.currentStyle.hasLayout == -1) element.style.zoom = 1; return proceed(element); } );
  • 70. Only IE nds  s  modifi rsn
  • 71. Y c kp  “wra” funcs  e place
  • 72. <script src=quot;js/prototype.jsquot; type=quot;text/javascriptquot;></script> <script src=quot;js/main.jsquot; type=quot;text/javascriptquot;></script> <!--[if IE]> <script src=quot;js/ie-only.jsquot; type=quot;text/javascriptquot;></script> <![endif]-->
  • 73. BUT: L a lpful cot
  • 74. // NOTE: Redefined in ie-only.js function getOffsetTop(element) { return element.offsetTop; }
  • 75.  ALSO: Expla why y nd  wk
  • 76. getOffsetTop = getOffsetTop.wrap( function(proceed, element) { // IE will report incorrect values // unless we give the element quot;layoutquot; if (!element.currentStyle.hasLayout == -1) element.style.zoom = 1; return proceed(element); } );
  • 77. In or wds, co   d...
  • 78. …n wre co adapts/dgs  do  quid msagg
  • 79. #5: “G! My co lks  gd  I fl. How do I avoid er vg  do  aga?”
  • 80. EAT YR GETABS (wre un tts & funcal tts)
  • 81. “Oh, I’d lo , but I wk   UI lay,  y c’t ay un-tt  tface… , yway, we e way o rapidly  do tt-drin lopmt… but y’ right, I’ tay wre a ful  tts  sn  I get some me…”
  • 82. SPE ME YR EXCUS
  • 83. Wre un tts f eryg  c be aum
  • 84. Protype do ; script.aculo.us do ; y c do , o
  • 85. Wre funcal tts  make  si f hums  tt  
  • 86. QA wi buy y a py
  • 87. Wre “diy” tts (row curbas  yr co)
  • 88. Wt abt Senium? WIR? (cd  play hum put)
  • 89. meh.
  • 90. Qus? hp://wdupt.net hp://protypejs.g