All that JS

We have to admit: We got lazy with proper usage of JS. Frameworks, Boilerplates and such allure us with promises and let us forget how to properly dose something that imposes stress to the browser.

This talk will show you techniques to slim your JS and ramp up your page speed.

Transcript

1. ALL THAT JS @franatique - BERLIN.JS - 17.10.13
2. It‘s great woking on the web these days!
3. $
4. $( )
5. 57% OCT 2010 OCT 2013 71% 92% Usage Marketshare jQuery popularity since Flash dies w3techs.com (h p://bit.ly/18f8WGo) 25%
6. This also happened in july: „Twi er Bootstrap Now Powering 1% of The Web“ meanpath.com (h p://bit.ly/1935Yo6)
9. We have to admit THEY‘VE GROWN FAT
10. WHO TO BLAME ?
11. Nobody told us. THE OTHERS
12. Architecture demands THE SYSTEM
13. There was no concept THE PROJECT
14. We got lazy IT‘S US
15. So what, my machine and DSL are doing fine.
16. LATENCY 65-145 ms 200 - 350 ms +500 ms
17. LATENCY x REQUESTS = USERS WASTED LIFETIME
18. Our a ention span online. 5 seconds
19. A goldfish’s a ention span. 9 seconds
20. Mobile traffic exceeds desktop within next 5 years. 201X
21. So what, I‘m doing fine on the server side.
22. Each added JS library Security risks Performance risks Extra weight Extra dependency
23. So what, things will be ironed out when we optimize.
24. Premature optimization may be wasted. Post-optimization never happens in the same project.
25. How to plan for performance right from the start?
26. LEARN + USE PLAIN JS Knowing core JS gives you super powers.
27. jQuery 1.10 - 37.6 KB Plain JavaScript - 0KB
28. @benhowdle #FEL „With jQuery, I feel like I‘m always ,prototypig‘. “ „With JS, it feels more like writing so ware“
29. HTML5 NATIVE ELEMENTS Get away with zero overhead.
30. Bootstrap Datepicker–19KB HTML5 Native –0KB
31. DON‘T TAKE SWEETS FROM STRANGERS They may harm you!
32. + 7 Requests + 57 KB + 10 Requests + 180 KB + 12 Requests + 519 KB
33. THINK OUTSIDE THE BOX. CSS may solve lots of your problems using the GPU.
34. SHIFT THINGS BACK TO SERVER node helps you jumping forth and back.
35. PROGRESSIVE ENHANCEMENT Display your content as fast as possible. Load logic a er that.
36. TOOLS CAN COVER YOUR BACK Invest some time here pays out huge.
37. Testing Concatenate & minify Linting Templating Can live on your CI-System
38. PLANING FOR PERFORMANCE Think about using core JS instead Libs. Look at HTML 5 specs and new elements. Double check when using 3rd party stuff. Think outside the box. Use your servers superpowers. Enhance progressively. Use tools to save you from headaches.
39. RESPECT YOUR USERS TIME THEY‘LL LOVE YOU AND TELL THEIR FRIENDS.
40. THANK YOU Find me on the webs: @franatique
41. Thibault Geffroy, from The Noun Project Goldfish by Sean Hepburn Kyle Wya , from The Noun Project Dmitry Baranovskiy, from The Noun Project Edward Boatman, from The Noun Project Luboš Volkov, from The Noun Project Lois Maureen, from The Noun Project Patrick, from The Noun Project Edward Boatman, from The Noun Project Fonts by CREDITS