All that JS - Speaker Deck

Slide 1

Slide 1 text

ALL THAT JS @franatique - BERLIN.JS - 17.10.13

Slide 2

Slide 2 text

It‘s great woking on the web these days!

Slide 3

Slide 3 text

Slide 4

Slide 4 text

$( )

Slide 5

Slide 5 text

57% OCT 2010 OCT 2013 71% 92% Usage Marketshare jQuery popularity since Flash dies w3techs.com (h p://bit.ly/18f8WGo) 25%

Slide 6

Slide 6 text

This also happened in july: „Twi er Bootstrap Now Powering 1% of The Web“ meanpath.com (h p://bit.ly/1935Yo6)

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

We have to admit THEY‘VE GROWN FAT

Slide 10

Slide 10 text

WHO TO BLAME ?

Slide 11

Slide 11 text

Nobody told us. THE OTHERS

Slide 12

Slide 12 text

Architecture demands THE SYSTEM

Slide 13

Slide 13 text

There was no concept THE PROJECT

Slide 14

Slide 14 text

We got lazy IT‘S US

Slide 15

Slide 15 text

So what, my machine and DSL are doing ﬁne.

Slide 16

Slide 16 text

LATENCY 65-145 ms 200 - 350 ms +500 ms

Slide 17

Slide 17 text

LATENCY x REQUESTS = USERS WASTED LIFETIME

Slide 18

Slide 18 text

Our a ention span online. 5 seconds

Slide 19

Slide 19 text

A goldﬁsh’s a ention span. 9 seconds

Slide 20

Slide 20 text

Mobile traﬃc exceeds desktop within next 5 years. 201X

Slide 21

Slide 21 text

So what, I‘m doing ﬁne on the server side.

Slide 22

Slide 22 text

Each added JS library Security risks Performance risks Extra weight Extra dependency

Slide 23

Slide 23 text

So what, things will be ironed out when we optimize.

Slide 24

Slide 24 text

Premature optimization may be wasted. Post-optimization never happens in the same project.

Slide 25

Slide 25 text

How to plan for performance right from the start?

Slide 26

Slide 26 text

LEARN + USE PLAIN JS Knowing core JS gives you super powers.

Slide 27

Slide 27 text

jQuery 1.10 - 37.6 KB Plain JavaScript - 0KB

Slide 28

Slide 28 text

@benhowdle #FEL „With jQuery, I feel like I‘m always ,prototypig‘. “ „With JS, it feels more like writing so ware“

Slide 29

Slide 29 text

HTML5 NATIVE ELEMENTS Get away with zero overhead.

Slide 30

Slide 30 text

Bootstrap Datepicker–19KB HTML5 Native –0KB

Slide 31

Slide 31 text

DON‘T TAKE SWEETS FROM STRANGERS They may harm you!

Slide 32

Slide 32 text

+ 7 Requests + 57 KB + 10 Requests + 180 KB + 12 Requests + 519 KB

Slide 33

Slide 33 text

THINK OUTSIDE THE BOX. CSS may solve lots of your problems using the GPU.

Slide 34

Slide 34 text

SHIFT THINGS BACK TO SERVER node helps you jumping forth and back.

Slide 35

Slide 35 text

PROGRESSIVE ENHANCEMENT Display your content as fast as possible. Load logic a er that.

Slide 36

Slide 36 text

TOOLS CAN COVER YOUR BACK Invest some time here pays out huge.

Slide 37

Slide 37 text

Testing Concatenate & minify Linting Templating Can live on your CI-System

Slide 38

Slide 38 text

PLANING FOR PERFORMANCE Think about using core JS instead Libs. Look at HTML 5 specs and new elements. Double check when using 3rd party stuﬀ. Think outside the box. Use your servers superpowers. Enhance progressively. Use tools to save you from headaches.

Slide 39

Slide 39 text

RESPECT YOUR USERS TIME THEY‘LL LOVE YOU AND TELL THEIR FRIENDS.

Slide 40

Slide 40 text

THANK YOU Find me on the webs: @franatique

Slide 41

Slide 41 text

Thibault Geﬀroy, from The Noun Project Goldﬁsh 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