ui architecture & web performance

UI Architecture & Web

PerformanceKyle Simpson

@getifygetify@gmail.co

mhttp://getify.me

#uiperf

— Agnieszka Gasparska

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

— Michelangelo

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

— unknown

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

— Antoine de Saint-Exupery

ytf am i putting these together… in one talk?

ui architecture + web performance

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

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

web performance optimization

dynamic loading

RequireJS

Dominoes

LABjs

Loading And Blocking JavaScript

the performance script loader

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.

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)

FF3 with <script> & <img> tags

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

LABjs in every browser

combiner(Nicholas Zakas)

Facebook

BigPipe, Haste, Pagelets

but how?

UI Architecture

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

UI Architecture

in between the FRONT end and the BACK end is…

UI Architecture

in between the FRONT end and the BACK end is…

the MIDDLE end

UI Architecture

url routing

data validation

data formatting

templating

ajax

cookies/headers

traditional web architecture

ui architecture

what’s my motivatio

n?

performance anxiety

optimization

spaghetti code

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.

CVCclients views controllers

ui architecture

clients

everything is a client of everything else

decoupled, modular, scalable

views

templating, portable, DRY, platform agnostic,

core web technology

controllers

small, independent, powerful

what i‘m NOT

suggesting

yet another framework

ditch whole architecture

mvc is wrong/weak

CVC is an alternate pattern for UI architecture

what i AM suggesting

it‘s ok to rethink!

JavaScript

(on the server)

BikechainJS

V8 “engine” modules

HandlebarJS{ }

templating engine text/html templates

JSON data input

LABjs on the server

37

Mincir

37

JavaScript compressor (in JavaScript)

CVC + JavaScript

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

engineers

=

More info

http://spkr8.com/t/3317

http://github.com/getify/BikechainJS

http://github.com/getify/HandlebarJS

please provide feedback!!!!

Kyle Simpson@getifygetify@gmail.comhttp://getify.me

#uiperf

http://txjs.getify.com