ui architecture & web performance
DESCRIPTION
We all know that web performance optimization is becoming critical to the success of web sites and applications. The problem is, we often don’t have the control over the UI Architecture (“middle-end”) that we need to really make things better.We’ll talk about how to use JavaScript (client- and server-side) to revamp the middle-end so we can throttle web performance (and code maintainability) to the next level.TRANSCRIPT
— 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)
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@[email protected]://getify.me
#uiperf
http://txjs.getify.com