Efficient JavaScript

This was a 3-hour workshop that I gave at udemy.com headquarters, about JavaScript application development best practices.

Transcript

1. Efficient JavaScript Volkan Özçelik 2013-03-30 read the source: https://github.com/v0lkan/efficient-javascript web version: http://o2js.com/udemy/presentation Thursday, October 3, 13
2. Code Quality Thursday, October 3, 13
3. Who Am I? Thursday, October 3, 13
4. Outline • Overview: Front-End Development Best Practices • Useful JavaScript Patterns & Practices • A ReIntroduction to JavaScript Memory Leaks • Profiling JavaScript Applications • Practice Time: Step by Step Optimizing a Sample Application • Q&A Thursday, October 3, 13
5. Best Practices Thursday, October 3, 13
6. Best Practices (micro) • eval is evil • Avoid try/catch • Avoid with • Avoid $.each and for/in loops • Use String Builders • Primitive operations are faster than function calls Thursday, October 3, 13
7. Best Practices (Speed & Memory) • Minimize DOM Size and Depth • Minimize DOM Repaints and Reflows (cache DOM calculations) • Keep Your Markup Clean (avoid inline & embedded code) • Purge Anything that is not Visible (from DOM AND from Memory) • Async Load Third-Party Widgets • Smoothness/Speed Tradeoff Thursday, October 3, 13
8. Best Practices (Perceived Speed) • Load Lazily; Execute Lazily • Do Not Wait for Server Feedback • Styles to the Top, Scripts to the Bottom Thursday, October 3, 13
9. Best Practices (Transfer Speed) • Far Future Expires Header • Minify Your Assets • Combine Multiple Assets • CSS Sprites, Image Data URIs, Image Optimization • Cache (client-side and server-side) & Gzip Thursday, October 3, 13
10. Best Practices (Macro) • Make JavaScript and CSS External • Make AJAX Cacheable • Use a Strict REST Architecture • Reduce Cookie Size • Use Cookie-Free Domains for Components • Make favicon.ico Small and Cacheable Thursday, October 3, 13
11. Best Practices (Development) • Utilize Diagnostic Tools (YSlow, Chrome Dev Tools) •Know Thy Frameworks • Live in TDD (jasmine, jshint, istanbul) • One Click Publish, Automation, and CI (git pre-commit hooks, grunt, jenkins) Thursday, October 3, 13
12. Thursday, October 3, 13
13. Common Patterns & Practices Thursday, October 3, 13
14. Patterns & Practices (Building Blocks) • Prototypal Inheritance • Model-View-Whatever (MVC, MVP, MVVM…) • Module — / AMD • Continuation Passing Style • Mixin / Decorator / Dependency Injection • Façade / PubSub — / Mediator • Flow Control / Deferreds / Promises — Thursday, October 3, 13
15. Patterns & Practices (More) • Chaining • Factory • Composite • Strategy • Command / Chain of Responsibility • Bridge • Flyweight • Iterator • Null Object • Singleton • and the list goes on… Thursday, October 3, 13
16. Using Patterns… Because You Can Thursday, October 3, 13
17. Using Patterns… Without Knowing the Liabilities Thursday, October 3, 13
18. Think Simple • E = MC^2 • Simplicity is the Ultimate Sophistication • When in doubt, KISS. Thursday, October 3, 13
19. JavaScript Memory Leaks Thursday, October 3, 13
20. Memory Leaks (Overview) • How JavaScript Garbage Collector Works • Memory Leaks in Older Browsers (read: Internet Explorer) • Memory Leaks Related to Timers • Memory Leaks Related to Debug Console • Size Does Matter • Structural Leaks Thursday, October 3, 13
21. Garbage Collection Thursday, October 3, 13
22. Garbage Collection Thursday, October 3, 13
23. Garbage Collection Thursday, October 3, 13
24. Garbage Collection Thursday, October 3, 13
25. Older Browsers (Event Handler Leak (IE < 8)) Thursday, October 3, 13
26. Older Browsers (XHR Leak (IE < 9)) Thursday, October 3, 13
27. Structural Leaks • These Are NOT Because of the Browser Bugs • They Are the Most Common Leaks • Handlers, Registries, Controllers, Managers, Mediators,Observables Are Leaker Candidates • Leaks are in the Nature of Event-Based Architectures • Closures and Modules Are Controlled Memory Leaks • Good kids clean their mess! Thursday, October 3, 13
28. Structural Leaks (jQuery) Thursday, October 3, 13
29. Beware of the Console Leaks Thursday, October 3, 13
30. Garbage-Collector- Friendly Code • Use Variables With a Proper Scope • Unbind Events • Clear Timers • Invalidate Cache Thursday, October 3, 13
31. Profiling JavaScript Applications Thursday, October 3, 13
32. Profiling JavaScript Applications Thursday, October 3, 13
33. Demo Thursday, October 3, 13
34. Agenda • Creating a Logical Folder Structure • Configuring the Builder, Linter, and Tests (grunt, jshint, jasmine, istanbul) • Profiling the Application & Fixing Leaks • Localizing the Application • Decoupling Modules Using Custom Events (PubSubHub) • Adding a Mediator (PubSub and Hub) • Implementing DOM Event Delegation • Improving Render Performance • Code Coverage Analysis • You Need Testing Thursday, October 3, 13
35. Folder Structure Thursday, October 3, 13
36. Configuring Grunt Thursday, October 3, 13
37. Configuring JSHint Thursday, October 3, 13
38. Configuring Jasmine Thursday, October 3, 13
39. Configuring Istanbul Thursday, October 3, 13
40. Profiling Thursday, October 3, 13
41. Fixing Memory Leaks Thursday, October 3, 13
42. Localization Thursday, October 3, 13
43. PubSubHub Thursday, October 3, 13
44. Adding a Mediator Thursday, October 3, 13
45. DOM Event Delegation Thursday, October 3, 13
46. Improving Render Performance Thursday, October 3, 13
47. Code Coverage Analysis Thursday, October 3, 13
48. Unit Testing • Test State (NOT User Interface, NOT Interactions) • Assemble • Act • Assert Thursday, October 3, 13
49. Deployment Thursday, October 3, 13
50. That’s All Folks Thursday, October 3, 13