Download - UI Architecture & Web Performance

Transcript
Page 1: UI Architecture & Web Performance

UI Architecture & Web

PerformanceKyle Simpson

@[email protected]

mhttp://getify.me

#uiperf

Page 2: UI Architecture & Web Performance

— Agnieszka Gasparska

Page 3: UI Architecture & Web Performance

Every block of stone has a statue inside it and it is the task of the sculptor to discover it.

— Michelangelo

Page 4: UI Architecture & Web Performance
Page 5: UI Architecture & Web Performance

…just chip away everything that doesn’t look like a horse.

— unknown

Page 6: UI Architecture & Web Performance
Page 7: UI Architecture & Web Performance

Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.

— Antoine de Saint-Exupery

Page 8: UI Architecture & Web Performance
Page 9: UI Architecture & Web Performance
Page 10: UI Architecture & Web Performance
Page 11: UI Architecture & Web Performance
Page 12: UI Architecture & Web Performance

ytf am i putting these together… in one talk?

ui architecture + web performance

Page 13: UI Architecture & Web Performance

FACT:web performance optimization is 100% about improving the front-end

Page 14: UI Architecture & Web Performance

FACT:87.3019354% of web performance optimization is not actually happening in the front-end

Page 15: UI Architecture & Web Performance

web performance optimization

Page 16: UI Architecture & Web Performance
Page 17: UI Architecture & Web Performance
Page 18: UI Architecture & Web Performance
Page 19: UI Architecture & Web Performance

dynamic loading

Page 20: UI Architecture & Web Performance

RequireJS

Page 21: UI Architecture & Web Performance

Dominoes

Page 22: UI Architecture & Web Performance

LABjs

Loading And Blocking JavaScript

the performance script loader

Page 23: UI Architecture & Web Performance

When NOT to use LABjs

1. If your script uses document.write

2. If your script ITSELF does unsafe DOM-ready detection – does not apply to scripts that use the results of such detection.

Page 24: UI Architecture & Web Performance

When TO use LABjs

1. Everywhere else(actually, wherever you load scripts over-the-wire, and you care about performance, and don’t have a suitable loader already)

Page 25: UI Architecture & Web Performance

FF3 with <script> & <img> tags

FF3.5 with <script> & <img> tags

LABjs in every browser

Page 26: UI Architecture & Web Performance
Page 27: UI Architecture & Web Performance
Page 28: UI Architecture & Web Performance

combiner(Nicholas Zakas)

Page 29: UI Architecture & Web Performance

Facebook

BigPipe, Haste, Pagelets

Page 30: UI Architecture & Web Performance

but how?

Page 31: UI Architecture & Web Performance

UI Architecture

how you process, package, deliver to, and communicate with the client/presentation layer

Page 32: UI Architecture & Web Performance

UI Architecture

in between the FRONT end and the BACK end is…

Page 33: UI Architecture & Web Performance

UI Architecture

in between the FRONT end and the BACK end is…

the MIDDLE end

Page 34: UI Architecture & Web Performance

UI Architecture

url routing

data validation

data formatting

templating

ajax

cookies/headers

Page 35: UI Architecture & Web Performance

traditional web architecture

Page 36: UI Architecture & Web Performance
Page 37: UI Architecture & Web Performance

ui architecture

Page 38: UI Architecture & Web Performance

what’s my motivatio

n?

Page 39: UI Architecture & Web Performance

performance anxiety

optimization

Page 40: UI Architecture & Web Performance

spaghetti code

Page 41: UI Architecture & Web Performance

i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY.

Page 42: UI Architecture & Web Performance

CVCclients views controllers

Page 43: UI Architecture & Web Performance
Page 44: UI Architecture & Web Performance

ui architecture

Page 45: UI Architecture & Web Performance

clients

everything is a client of everything else

decoupled, modular, scalable

Page 46: UI Architecture & Web Performance

views

templating, portable, DRY, platform agnostic,

core web technology

Page 47: UI Architecture & Web Performance

controllers

small, independent, powerful

Page 48: UI Architecture & Web Performance

what i‘m NOT

suggesting

yet another framework

ditch whole architecture

mvc is wrong/weak

Page 49: UI Architecture & Web Performance

CVC is an alternate pattern for UI architecture

what i AM suggesting

it‘s ok to rethink!

Page 50: UI Architecture & Web Performance

JavaScript

(on the server)

Page 51: UI Architecture & Web Performance

BikechainJS

V8 “engine” modules

Page 52: UI Architecture & Web Performance

HandlebarJS{ }

templating engine text/html templates

JSON data input

Page 53: UI Architecture & Web Performance

LABjs on the server

37

Page 54: UI Architecture & Web Performance

Mincir

37

JavaScript compressor (in JavaScript)

Page 55: UI Architecture & Web Performance

CVC + JavaScript

the power of UI architecture in the hands of front-end

engineers

=

Page 56: UI Architecture & Web Performance

More info

http://spkr8.com/t/3317

http://github.com/getify/BikechainJS

http://github.com/getify/HandlebarJS

please provide feedback!!!!

Kyle Simpson@[email protected]://getify.me

#uiperf

http://txjs.getify.com