SlideShare a Scribd company logo
1 of 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

More Related Content

What's hot

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
 

What's hot (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
 

More from 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
 

More from 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
 

Recently uploaded

WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piececharlottematthew16
 
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
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfSeasiaInfotech2
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 
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
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embeddingZilliz
 
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
 
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
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 

Recently uploaded (20)

WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
 
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)
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdf
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 
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
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
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
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embedding
 
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
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 

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