SlideShare une entreprise Scribd logo
1  sur  34
Dude, That’s Some StrangeUI Architecture Kyle Simpson @getify getify@gmail.com http://getify.me #strangeui
document.write()Must Die
		      — Agnieszka Gasparska
Every block of stone has a statue inside it and it is the task of the sculptor to discover it.  				— Michelangelo
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.  	  — Antoine de Saint-Exupery
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… the MIDDLE end
UI Architecture templating url routing data validation ajax data formatting caching cookies/headers
ui architecture 
MVC
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.
CVC clients views controllers
ui architecture 
Result Set Pagination
Atomic Operation Caching
Independent Tier Scaling
clients everything is a client of everything else decoupled, modular, scalable
templating, portable, DRY, platform agnostic, core web technology views
controllers small, independent, powerful
JavaScript (on the server)
BikechainJS V8 “engine” modules
HandlebarJS {  } templating engine  text/html templates  JSON data input
code demo
More info http://shortie.me/!strange http://spkr8.com/t/4821  please provide feedback!!!! http://github.com/getify/shortie.me http://MiddleEnd.com #strangeui Kyle Simpson @getify getify@gmail.com http://getify.me

Contenu connexe

Tendances

Summer escapade
Summer escapadeSummer escapade
Summer escapadebabybeves
 
Summer escapade
Summer escapadeSummer escapade
Summer escapadebabybeves
 
Artzigogoli spaventapiccioni
Artzigogoli spaventapiccioniArtzigogoli spaventapiccioni
Artzigogoli spaventapiccioniartzigogoli
 
Smith_Zachary_PCP-O_1509_4.4FinalPPPSlideshow
Smith_Zachary_PCP-O_1509_4.4FinalPPPSlideshowSmith_Zachary_PCP-O_1509_4.4FinalPPPSlideshow
Smith_Zachary_PCP-O_1509_4.4FinalPPPSlideshowZachSmith0215
 

Tendances (10)

Turiin bodlog ba turiin hunii nuutsiin management
Turiin bodlog ba turiin hunii nuutsiin managementTuriin bodlog ba turiin hunii nuutsiin management
Turiin bodlog ba turiin hunii nuutsiin management
 
Composición tipográfica
Composición tipográfica Composición tipográfica
Composición tipográfica
 
Aprender larimame
Aprender larimameAprender larimame
Aprender larimame
 
Place value flash
Place value flashPlace value flash
Place value flash
 
Summer escapade
Summer escapadeSummer escapade
Summer escapade
 
Summer escapade
Summer escapadeSummer escapade
Summer escapade
 
Artzigogoli spaventapiccioni
Artzigogoli spaventapiccioniArtzigogoli spaventapiccioni
Artzigogoli spaventapiccioni
 
Smith_Zachary_PCP-O_1509_4.4FinalPPPSlideshow
Smith_Zachary_PCP-O_1509_4.4FinalPPPSlideshowSmith_Zachary_PCP-O_1509_4.4FinalPPPSlideshow
Smith_Zachary_PCP-O_1509_4.4FinalPPPSlideshow
 
Requests
RequestsRequests
Requests
 
I
II
I
 

Plus de Kyle Simpson

HTML5 JavaScript On Crack
HTML5 JavaScript On CrackHTML5 JavaScript On Crack
HTML5 JavaScript On CrackKyle Simpson
 
The Once And Future Script Loader (v3)
The Once And Future Script Loader (v3)The Once And Future Script Loader (v3)
The Once And Future Script Loader (v3)Kyle Simpson
 
The Once And Future Script Loader (v2)
The Once And Future Script Loader (v2)The Once And Future Script Loader (v2)
The Once And Future Script Loader (v2)Kyle Simpson
 
The Once And Future Script Loader (v1)
The Once And Future Script Loader (v1)The Once And Future Script Loader (v1)
The Once And Future Script Loader (v1)Kyle Simpson
 
Server-side JavaScript for the rest of us
Server-side JavaScript for the rest of usServer-side JavaScript for the rest of us
Server-side JavaScript for the rest of usKyle Simpson
 
Rise of the Middle End
Rise of the Middle EndRise of the Middle End
Rise of the Middle EndKyle Simpson
 
No more script tag soup!
No more script tag soup!No more script tag soup!
No more script tag soup!Kyle Simpson
 
JavaScript Architecture: The Front and the Back of It
JavaScript Architecture: The Front and the Back of ItJavaScript Architecture: The Front and the Back of It
JavaScript Architecture: The Front and the Back of ItKyle Simpson
 
JavaScript UI Architecture: Be all that you can be
JavaScript UI Architecture: Be all that you can beJavaScript UI Architecture: Be all that you can be
JavaScript UI Architecture: Be all that you can beKyle Simpson
 
Loading JavaScript: Even a caveman can do it
Loading JavaScript: Even a caveman can do itLoading JavaScript: Even a caveman can do it
Loading JavaScript: Even a caveman can do itKyle Simpson
 
Extending Ajax Events for all mankind
Extending Ajax Events for all mankindExtending Ajax Events for all mankind
Extending Ajax Events for all mankindKyle Simpson
 

Plus de Kyle Simpson (11)

HTML5 JavaScript On Crack
HTML5 JavaScript On CrackHTML5 JavaScript On Crack
HTML5 JavaScript On Crack
 
The Once And Future Script Loader (v3)
The Once And Future Script Loader (v3)The Once And Future Script Loader (v3)
The Once And Future Script Loader (v3)
 
The Once And Future Script Loader (v2)
The Once And Future Script Loader (v2)The Once And Future Script Loader (v2)
The Once And Future Script Loader (v2)
 
The Once And Future Script Loader (v1)
The Once And Future Script Loader (v1)The Once And Future Script Loader (v1)
The Once And Future Script Loader (v1)
 
Server-side JavaScript for the rest of us
Server-side JavaScript for the rest of usServer-side JavaScript for the rest of us
Server-side JavaScript for the rest of us
 
Rise of the Middle End
Rise of the Middle EndRise of the Middle End
Rise of the Middle End
 
No more script tag soup!
No more script tag soup!No more script tag soup!
No more script tag soup!
 
JavaScript Architecture: The Front and the Back of It
JavaScript Architecture: The Front and the Back of ItJavaScript Architecture: The Front and the Back of It
JavaScript Architecture: The Front and the Back of It
 
JavaScript UI Architecture: Be all that you can be
JavaScript UI Architecture: Be all that you can beJavaScript UI Architecture: Be all that you can be
JavaScript UI Architecture: Be all that you can be
 
Loading JavaScript: Even a caveman can do it
Loading JavaScript: Even a caveman can do itLoading JavaScript: Even a caveman can do it
Loading JavaScript: Even a caveman can do it
 
Extending Ajax Events for all mankind
Extending Ajax Events for all mankindExtending Ajax Events for all mankind
Extending Ajax Events for all mankind
 

Dernier

Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfHyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfPrecisely
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 

Dernier (20)

Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfHyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 

Dude, That's Some Strange UI Architecture

  • 1. Dude, That’s Some StrangeUI Architecture Kyle Simpson @getify getify@gmail.com http://getify.me #strangeui
  • 3. — Agnieszka Gasparska
  • 4.
  • 5. Every block of stone has a statue inside it and it is the task of the sculptor to discover it. — Michelangelo
  • 6. Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away. — Antoine de Saint-Exupery
  • 7.
  • 8.
  • 9.
  • 10.
  • 11. UI Architecture how you process, package, deliver to, and communicate with the client/presentation layer
  • 12. UI Architecture in between the FRONT end and the BACK end is… the MIDDLE end
  • 13. UI Architecture templating url routing data validation ajax data formatting caching cookies/headers
  • 14.
  • 16. MVC
  • 17.
  • 20. 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.
  • 21. CVC clients views controllers
  • 22.
  • 27. clients everything is a client of everything else decoupled, modular, scalable
  • 28. templating, portable, DRY, platform agnostic, core web technology views
  • 32. HandlebarJS { } templating engine text/html templates JSON data input
  • 34. More info http://shortie.me/!strange http://spkr8.com/t/4821  please provide feedback!!!! http://github.com/getify/shortie.me http://MiddleEnd.com #strangeui Kyle Simpson @getify getify@gmail.com http://getify.me