1. Ajax Programming Problems and Solutions 2005-12-06 / Kang, Kyuyoung Daum Communications - R&D Center

2. Ajax Programming - Problems and Solutions2 I’m Going To Talk About… 1. Testing and Debugging 2. Performance 3. Usability 4. Working with Designers 5. Working with Server Programmers 6. Coding Practices 7. Test Driven Development with Javascript

3. Ajax Programming - Problems and Solutions3 0. Prelude 0.1. Definition 0.2. What’s in a name? 0.3. Alternatives 0.4. So, why Ajax?

4. Ajax Programming - Problems and Solutions4 0. Prelude 0.1. Definition - Do we really need it? I don’t think so. ;) - Just see! (0.1 + Demo) 0.2. What’s in a name? 0.3. Alternatives 0.4. So, why Ajax?

5. Ajax Programming - Problems and Solutions5 0. Prelude 0.1. Definition 0.2. What’s in a name? - Asynchronous Javascript with XML? - Ajax? AJAX? 아약스 ? 에이젝스 ? - … - I don’t care. 0.3. Alternatives 0.4. So, why Ajax?

6. Ajax Programming - Problems and Solutions6 0. Prelude 0.1. Definition 0.2. What’s in a name? 0.3. Alternatives - Java Applet, Web Start - ActiveX - Macromedia Flash/Flex - … 0.4. So, why Ajax?

7. Ajax Programming - Problems and Solutions7 0. Prelude 0.1. Definition 0.2. What’s in a name? 0.3. Alternatives 0.4. So, why Ajax? - Ajax? No reason. - This presentation is not about Ajax.

8. Ajax Programming - Problems and Solutions8 1. Testing and Debugging 1.1. Tools for Testing and Debugging 1.2. Browser Compatibility Issue 1.3. IE Memory Leak

9. Ajax Programming - Problems and Solutions9 1. Testing and Debugging 1.1. Tools for Testing and Debugging - Interactive Shell (1.1 + Demo) - Favelet Suite (1.2 + Demo) - MS Script Debugger or Visual Studio (1.3) - Venkman Javascript Debugger (1.4) 1.2. Browser Compatibility Issue 1.3. IE Memory Leak

10. Ajax Programming - Problems and Solutions10 1. Testing and Debugging 1.1. Tools for Testing and Debugging 1.2. Browser Compatibility Issue - Javascript Core (1.5) - Standalone Internet Explorer (1.6 + Demo) - Cheat sheet – Standard Supports (1.7 + Demo) 1.3. IE Memory Leak

11. Ajax Programming - Problems and Solutions11 1. Testing and Debugging 1.1. Tools for Testing and Debugging 1.2. Browser Compatibility Issue 1.3. IE Memory Leak - IE Leak Patterns (1.8)

12. Ajax Programming - Problems and Solutions12 2. Performance 2.1. Fast Rendering 2.2. Asynchronous Rendering 2.3. Lazy Rendering

13. Ajax Programming - Problems and Solutions13 2. Performance 2.1. Fast Rendering - Javascript Core is Fast Enough - DOM: Dynamic Table Rendering Example (2.1 + Demo) - StringBuffer (2.2) 2.2. Asynchronous Rendering 2.3. Lazy Rendering

14. Ajax Programming - Problems and Solutions14 2. Performance 2.1. Fast Rendering 2.2. Asynchronous Rendering - Performance == Subjective Experience (G.W Elevator) - Improve Responsiveness by Async Rendering (2.3) 2.3. Lazy Rendering

15. Ajax Programming - Problems and Solutions15 2. Performance 2.1. Fast Rendering 2.2. Asynchronous Rendering 2.3. Lazy Rendering - How to Render the Earth at Once? (2.4 + Demo) - Render Visible Parts Only - Lazy Rendering (2.5 + Demo)

16. Ajax Programming - Problems and Solutions16 3. Usability 3.1. Help! Where’s the Save Button? 3.2. Bring Back my Back Button!

17. Ajax Programming - Problems and Solutions17 3. Usability 3.1. Help! Where’s the Save Button? - Fun and Cool is not Enough! (3.1) - Name Card Example (3.2 + Demo) 3.2. Bring Back my Back Button!

18. Ajax Programming - Problems and Solutions18 3. Usability 3.1. Help! Where’s the Save Button? 3.2. Bring Back my Back Button! - Problems: Back Button, Links and Bookmarks (3.3 + demo) - Another Problem: Search Engines (3.4)

19. Ajax Programming - Problems and Solutions19 4. Working with Designers 4.1. Separate Model from View 4.2. CSS is Not Enough!

20. Ajax Programming - Problems and Solutions20 4. Working with Designers 4.1. Separate Model from View - Use CSS. No More Tables! (4.1) - Find Good Place for Scripts (4.2) - Separate Logics (4.3 + Demo) 4.2. CSS is Not Enough!

21. Ajax Programming - Problems and Solutions21 4. Working with Designers 4.1. Separate Model from View 4.2. CSS is Not Enough! - UI Prototype (4.4 + Demo)

22. Ajax Programming - Problems and Solutions22 5. Working with Server Programmers 5.1. Stub and Mock Objects

23. Ajax Programming - Problems and Solutions23 5. Working with Server Programmers 5.1. Stub and Mock Objects - Stub Objects - Mock Objects (5.1) Javascript Client ServerStub Server

24. Ajax Programming - Problems and Solutions24 6. Coding Practices 6.1. Do OOP! 6.2. Don’t Do OOP!

25. Ajax Programming - Problems and Solutions25 6. Coding Practices 6.1. Do OOP! - Prototype Based OOP (6.1 + Demo) - Turn Conditionals into Polymorphism (6.2) 6.2. Don’t Do OOP!

26. Ajax Programming - Problems and Solutions26 6. Coding Practices 6.1. Do OOP! 6.2. Don’t Do OOP! - Javascript != Java - Function Objects (6.3 + Demo)

27. Ajax Programming - Problems and Solutions27 7. Test Driven Development 7.1. I sense your fear… 7.2. Step Towards TDD 7.3. Red, Green, Refactor

28. Ajax Programming - Problems and Solutions28 7. Test Driven Development 7.1. I sense your fear… - Dynamic Languages and Fear - Fear is the Path to the Dark-side (7.1) - Turn Fears into Broken Tests! 7.2. Step Towards TDD 7.3. Red, Green, Refactor

29. Ajax Programming - Problems and Solutions29 7. Test Driven Development 7.1. I sense your fear… 7.2. Step Towards TDD - Goal: Clean Code That Works! (7.2) - Divide and Conquer, Stepwise Refinement (7.3) 7.3. Red, Green, Refactor

30. Ajax Programming - Problems and Solutions30 7. Test Driven Development 7.1. I sense your fear… 7.2. Step Towards TDD 7.3. Red, Green, Refactor - Test Driven Development (7.4) - Write New Code Only If an Automated Test has Failed - The Mantra: Red, Green, Refactor, Red, Green, Refactor, red, green, … - Sample: Multi-Selection (7.5)

31. Ajax Programming - Problems and Solutions31 7. Test Driven Development Luke Skywalker: Is the dark-side stronger? Master Yoda: No.. no.. no. Quicker, easier, more seductive.

32. Ajax Programming - Problems and Solutions32 Meta Reference ;) 1. http://jania.pe.kr/wiki/jwiki/moin.cgi/2005AjaxSeminarReferencehttp://jania.pe.kr/wiki/jwiki/moin.cgi/2005AjaxSeminarReference

33. Ajax Programming - Problems and Solutions33 Brief Summary 1. Testing and Debugging 2. Performance 3. Usability 4. Working with Designers 5. Working with Server Programmers 6. Coding Practices 7. Test Driven Development with Javascript

34. Ajax Programming - Problems and Solutions34 Thank You!