Top Banner

Click here to load reader

Refactoring to Unobtrusive Javascript

Nov 29, 2014



Talk i gave at JsCamp09 on September 25th 2009.
Slides revised, corrected and expanded.


Follow me on Twitter!

  • 1. Refactoring to Unobtrusive Javascript Federico Galassi [email protected]
  • 2. Separation of Concerns Keeping different aspects of an application separate
  • 3. Separation of Concerns So that everyone can focus on one thing at a time
  • 4. Unobtrusive Javascript Techniques to enforce separation of javascript from other web technologies
  • 5. Web Technologies Html Content Css Presentation Javascript Presentation Logic Server side Business Logic
  • 6. Rules of the Game 1 Javascript stays in its own les 2 Files are affected only by changes directly related to presentation logic
  • 7. Game Strategy How do we play? Code refactoring is improving quality of existing code without changing its functional behavior
  • 8. Game Strategy No refactoring without testing unit testing with jsTestDriver & friends minimal functional testing with selenium & friends mock the server by wrapping XMLHttpRequest
  • 9. 1 Round Html You see an
  • 10. 1 Bad Smell Html javascript in html
  • 11. 1 Refactoring: Externalize Inline Script Html Js
  • 12. 1 Refactoring: Externalize Inline Script Html Js // ... more code ...
  • 13. 2 Round Html You see an event handler registration Refresh by element attribute
  • 14. 2 Bad Smell Html Hey, its Refresh javascript in html
  • 15. 2 Refactoring: Attribute Event to Dom Event Html Js Refresh
  • 16. 2 Refactoring: Attribute Event to Dom Event Html Js var btnrefresh = document.getElementById( Refresh "btnRefresh" ); btnrefresh.addEventListener( "click", refreshView, false );