SlideShare a Scribd company logo
1 of 35
Rise of the Middle End Kyle Simpson @getify getify@gmail.com http://getify.me #middleend
document.write()Must Die
IEMust Fork http://IEmustFork.com
		      — 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 in between the FRONT end and the BACK end is… the MIDDLE end
UI Architecture how the back end packages for, delivers to, and communicates with the front end
UI Architecture templating, URL routing, data validation, data formatting, data transport, caching, cookies, headers, resource packaging
ui architecture 
MVC
motivate me
Performance Optimization
DRY
Code Organization
CVC clientsviewscontrollers
ui architecture 
Smart Resource Packaging
Multi-part Responses
Result Set Pagination
Atomic Operation Caching
Independent Tier Scaling
clients each piece is a client of every other piece
views templated, portable, reusable
controllers small, decoupled, extensible
Server-side JavaScript
Node.js… and?
BikechainJS V8 “engine” modules
HandlebarJS {  } templating engine JSON input text output
demo http://shortie.me code http://shortie.me/!code
Gimme More http://shortie.me/!front http://shortie.me/!rate  please provide feedback!!!! http://github.com/getify/shortie.me http://MiddleEnd.com Kyle Simpson @getify getify@gmail.com http://getify.me #middleend

More Related Content

Similar to Rise of the Middle End

WebUI - rapid UI development for EGS-CC
WebUI - rapid UI development for EGS-CCWebUI - rapid UI development for EGS-CC
WebUI - rapid UI development for EGS-CCDariusz Walczak
 
Wei ding(resume)
Wei ding(resume)Wei ding(resume)
Wei ding(resume)WEI DING
 
A High-Performance Solution to Microservice UI Composition @ XConf Hamburg
A High-Performance Solution to Microservice UI Composition @ XConf HamburgA High-Performance Solution to Microservice UI Composition @ XConf Hamburg
A High-Performance Solution to Microservice UI Composition @ XConf HamburgDr. Arif Wider
 
Farfalla: a step towards an Inclusive Web
Farfalla: a step towards an Inclusive WebFarfalla: a step towards an Inclusive Web
Farfalla: a step towards an Inclusive WebAndrea Mangiatordi
 
Query or Command - (short) introduction to CQRS
Query or Command - (short) introduction to CQRSQuery or Command - (short) introduction to CQRS
Query or Command - (short) introduction to CQRSZbyszko Papierski
 
Event-driven architecture
Event-driven architectureEvent-driven architecture
Event-driven architectureAndrew Easter
 
Micro service pitfalls voxxed days istanbul 2015
Micro service pitfalls voxxed days istanbul 2015Micro service pitfalls voxxed days istanbul 2015
Micro service pitfalls voxxed days istanbul 2015Mite Mitreski
 
Towards Clean Legacy Code
Towards Clean Legacy CodeTowards Clean Legacy Code
Towards Clean Legacy CodeLars Martin
 
Scala meetup Kyiv slides 20171215
Scala meetup Kyiv slides 20171215Scala meetup Kyiv slides 20171215
Scala meetup Kyiv slides 20171215Evaldas Miliauskas
 
Large-Scale Web Development with JavaScript
Large-Scale Web Development with JavaScriptLarge-Scale Web Development with JavaScript
Large-Scale Web Development with JavaScriptNavid Ahmadi
 
Web Performance Part 4 "Client-side performance"
Web Performance Part 4  "Client-side performance"Web Performance Part 4  "Client-side performance"
Web Performance Part 4 "Client-side performance"Binary Studio
 
Supercharge your IOT toolbox with MQTT and Node-RED
Supercharge your IOT toolbox with MQTT and Node-REDSupercharge your IOT toolbox with MQTT and Node-RED
Supercharge your IOT toolbox with MQTT and Node-REDSimen Sommerfeldt
 
How To Build Website
How To Build WebsiteHow To Build Website
How To Build WebsiteOliver Cai
 
Portable, secure, and lightweight: Wasm runtimes and their use-cases - Natali...
Portable, secure, and lightweight: Wasm runtimes and their use-cases - Natali...Portable, secure, and lightweight: Wasm runtimes and their use-cases - Natali...
Portable, secure, and lightweight: Wasm runtimes and their use-cases - Natali...Wey Wey Web
 
MICRO-FRONTEND - WEB COMPONENT APPROACH
MICRO-FRONTEND - WEB COMPONENT APPROACHMICRO-FRONTEND - WEB COMPONENT APPROACH
MICRO-FRONTEND - WEB COMPONENT APPROACHAndrea Campaci
 
How to migrate large project from Angular to React
How to migrate large project from Angular to ReactHow to migrate large project from Angular to React
How to migrate large project from Angular to ReactTomasz Bak
 
Google Cloud Platform and Kubernetes
Google Cloud Platform and KubernetesGoogle Cloud Platform and Kubernetes
Google Cloud Platform and KubernetesKasper Nissen
 
Frontend microservices: architectures and solutions
Frontend microservices: architectures and solutionsFrontend microservices: architectures and solutions
Frontend microservices: architectures and solutionsMikhail Kuznetcov
 

Similar to Rise of the Middle End (20)

WebUI - rapid UI development for EGS-CC
WebUI - rapid UI development for EGS-CCWebUI - rapid UI development for EGS-CC
WebUI - rapid UI development for EGS-CC
 
Wei ding(resume)
Wei ding(resume)Wei ding(resume)
Wei ding(resume)
 
A High-Performance Solution to Microservice UI Composition @ XConf Hamburg
A High-Performance Solution to Microservice UI Composition @ XConf HamburgA High-Performance Solution to Microservice UI Composition @ XConf Hamburg
A High-Performance Solution to Microservice UI Composition @ XConf Hamburg
 
Farfalla: a step towards an Inclusive Web
Farfalla: a step towards an Inclusive WebFarfalla: a step towards an Inclusive Web
Farfalla: a step towards an Inclusive Web
 
Query or Command - (short) introduction to CQRS
Query or Command - (short) introduction to CQRSQuery or Command - (short) introduction to CQRS
Query or Command - (short) introduction to CQRS
 
Event-driven architecture
Event-driven architectureEvent-driven architecture
Event-driven architecture
 
Micro service pitfalls voxxed days istanbul 2015
Micro service pitfalls voxxed days istanbul 2015Micro service pitfalls voxxed days istanbul 2015
Micro service pitfalls voxxed days istanbul 2015
 
cvBarisGomleksizoglu-eng
cvBarisGomleksizoglu-engcvBarisGomleksizoglu-eng
cvBarisGomleksizoglu-eng
 
Towards Clean Legacy Code
Towards Clean Legacy CodeTowards Clean Legacy Code
Towards Clean Legacy Code
 
Scala meetup Kyiv slides 20171215
Scala meetup Kyiv slides 20171215Scala meetup Kyiv slides 20171215
Scala meetup Kyiv slides 20171215
 
Large-Scale Web Development with JavaScript
Large-Scale Web Development with JavaScriptLarge-Scale Web Development with JavaScript
Large-Scale Web Development with JavaScript
 
Web Performance Part 4 "Client-side performance"
Web Performance Part 4  "Client-side performance"Web Performance Part 4  "Client-side performance"
Web Performance Part 4 "Client-side performance"
 
Supercharge your IOT toolbox with MQTT and Node-RED
Supercharge your IOT toolbox with MQTT and Node-REDSupercharge your IOT toolbox with MQTT and Node-RED
Supercharge your IOT toolbox with MQTT and Node-RED
 
How To Build Website
How To Build WebsiteHow To Build Website
How To Build Website
 
Portable, secure, and lightweight: Wasm runtimes and their use-cases - Natali...
Portable, secure, and lightweight: Wasm runtimes and their use-cases - Natali...Portable, secure, and lightweight: Wasm runtimes and their use-cases - Natali...
Portable, secure, and lightweight: Wasm runtimes and their use-cases - Natali...
 
MICRO-FRONTEND - WEB COMPONENT APPROACH
MICRO-FRONTEND - WEB COMPONENT APPROACHMICRO-FRONTEND - WEB COMPONENT APPROACH
MICRO-FRONTEND - WEB COMPONENT APPROACH
 
How to migrate large project from Angular to React
How to migrate large project from Angular to ReactHow to migrate large project from Angular to React
How to migrate large project from Angular to React
 
Google Cloud Platform and Kubernetes
Google Cloud Platform and KubernetesGoogle Cloud Platform and Kubernetes
Google Cloud Platform and Kubernetes
 
Abhinav Nigam
Abhinav NigamAbhinav Nigam
Abhinav Nigam
 
Frontend microservices: architectures and solutions
Frontend microservices: architectures and solutionsFrontend microservices: architectures and solutions
Frontend microservices: architectures and solutions
 

More from Kyle 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
 
Dude, That's Some Strange UI Architecture
Dude, That's Some Strange UI ArchitectureDude, That's Some Strange UI Architecture
Dude, That's Some Strange UI ArchitectureKyle Simpson
 
UI Architecture & Web Performance
UI Architecture & Web PerformanceUI Architecture & Web Performance
UI Architecture & Web PerformanceKyle Simpson
 
Dude, where's my UI architecture?
Dude, where's my UI architecture?Dude, where's my UI architecture?
Dude, where's my UI architecture?Kyle Simpson
 
No more script tag soup!
No more script tag soup!No more script tag soup!
No more script tag soup!Kyle 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)

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
 
Dude, That's Some Strange UI Architecture
Dude, That's Some Strange UI ArchitectureDude, That's Some Strange UI Architecture
Dude, That's Some Strange UI Architecture
 
UI Architecture & Web Performance
UI Architecture & Web PerformanceUI Architecture & Web Performance
UI Architecture & Web Performance
 
Dude, where's my UI architecture?
Dude, where's my UI architecture?Dude, where's my UI architecture?
Dude, where's my UI architecture?
 
No more script tag soup!
No more script tag soup!No more script tag soup!
No more script tag soup!
 
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

DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
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
 
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
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitecturePixlogix Infotech
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions
 
"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
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
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
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 

Recently uploaded (20)

DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
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
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
 
"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
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
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
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
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
 

Rise of the Middle End