Efficient JavaScript - Speaker Deck

Slide 1

Slide 1 text

Efﬁcient 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

Slide 2

Slide 2 text

Code Quality Thursday, October 3, 13

Slide 3

Slide 3 text

Who Am I? Thursday, October 3, 13

Slide 4

Slide 4 text

Outline • Overview: Front-End Development Best Practices • Useful JavaScript Patterns & Practices • A ReIntroduction to JavaScript Memory Leaks • Proﬁling JavaScript Applications • Practice Time: Step by Step Optimizing a Sample Application • Q&A Thursday, October 3, 13

Slide 5

Slide 5 text

Best Practices Thursday, October 3, 13

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Best Practices (Speed & Memory) • Minimize DOM Size and Depth • Minimize DOM Repaints and Reﬂows (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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Thursday, October 3, 13

Slide 13

Slide 13 text

Common Patterns & Practices Thursday, October 3, 13

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Using Patterns… Because You Can Thursday, October 3, 13

Slide 17

Slide 17 text

Using Patterns… Without Knowing the Liabilities Thursday, October 3, 13

Slide 18

Slide 18 text

Think Simple • E = MC^2 • Simplicity is the Ultimate Sophistication • When in doubt, KISS. Thursday, October 3, 13

Slide 19

Slide 19 text

JavaScript Memory Leaks Thursday, October 3, 13

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Garbage Collection Thursday, October 3, 13

Slide 22

Slide 22 text

Garbage Collection Thursday, October 3, 13

Slide 23

Slide 23 text

Garbage Collection Thursday, October 3, 13

Slide 24

Slide 24 text

Garbage Collection Thursday, October 3, 13

Slide 25

Slide 25 text

Older Browsers (Event Handler Leak (IE < 8)) Thursday, October 3, 13

Slide 26

Slide 26 text

Older Browsers (XHR Leak (IE < 9)) Thursday, October 3, 13

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Structural Leaks (jQuery) Thursday, October 3, 13

Slide 29

Slide 29 text

Beware of the Console Leaks Thursday, October 3, 13

Slide 30

Slide 30 text

Garbage-Collector- Friendly Code • Use Variables With a Proper Scope • Unbind Events • Clear Timers • Invalidate Cache Thursday, October 3, 13

Slide 31

Slide 31 text

Proﬁling JavaScript Applications Thursday, October 3, 13

Slide 32

Slide 32 text

Proﬁling JavaScript Applications Thursday, October 3, 13

Slide 33

Slide 33 text

Demo Thursday, October 3, 13

Slide 34

Slide 34 text

Agenda • Creating a Logical Folder Structure • Conﬁguring the Builder, Linter, and Tests (grunt, jshint, jasmine, istanbul) • Proﬁling 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

Slide 35

Slide 35 text

Folder Structure Thursday, October 3, 13

Slide 36

Slide 36 text

Conﬁguring Grunt Thursday, October 3, 13

Slide 37

Slide 37 text

Conﬁguring JSHint Thursday, October 3, 13

Slide 38

Slide 38 text

Conﬁguring Jasmine Thursday, October 3, 13

Slide 39

Slide 39 text

Conﬁguring Istanbul Thursday, October 3, 13

Slide 40

Slide 40 text

Proﬁling Thursday, October 3, 13

Slide 41

Slide 41 text

Fixing Memory Leaks Thursday, October 3, 13

Slide 42

Slide 42 text

Localization Thursday, October 3, 13

Slide 43

Slide 43 text

PubSubHub Thursday, October 3, 13

Slide 44

Slide 44 text

Adding a Mediator Thursday, October 3, 13

Slide 45

Slide 45 text

DOM Event Delegation Thursday, October 3, 13

Slide 46

Slide 46 text

Improving Render Performance Thursday, October 3, 13

Slide 47

Slide 47 text

Code Coverage Analysis Thursday, October 3, 13

Slide 48

Slide 48 text

Unit Testing • Test State (NOT User Interface, NOT Interactions) • Assemble • Act • Assert Thursday, October 3, 13