SlideShare a Scribd company logo
1 of 145
Download to read offline
Blending Performance
                  with

Front-End Architecture

       Chris Griego / boldpx.com
    Blake Elshire / marbleheadllc.com
Front-End Archiwhat?
A holistic view of
 best practices for
web user interfaces.

   Term Coined by Garrett Dimon
DOM
                              Flash
Usability
                                                Scripting

             Accessibility              IA


                                                 AJAX
Design                       Markup

                User
                                      Content
               Agents
Project
                              CSS               Back-End
Mgmt.




            http://v1.garrettdimon.com/fea/
Why performance?
Speed is a Killer Feature
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture
Blending Performance with Front-End Architecture

More Related Content

Viewers also liked

Wrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web ApplicationsWrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web Applications
Ryan Roemer
 
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
Prasid Pathak
 

Viewers also liked (20)

Front end Tips Tricks & Tools
Front end Tips Tricks & ToolsFront end Tips Tricks & Tools
Front end Tips Tricks & Tools
 
User eXperience & Front End Development
User eXperience & Front End DevelopmentUser eXperience & Front End Development
User eXperience & Front End Development
 
Front End Tooling and Performance - Codeaholics HK 2015
Front End Tooling and Performance - Codeaholics HK 2015Front End Tooling and Performance - Codeaholics HK 2015
Front End Tooling and Performance - Codeaholics HK 2015
 
Frontend automation and stability
Frontend automation and stabilityFrontend automation and stability
Frontend automation and stability
 
Frontend SPOF
Frontend SPOFFrontend SPOF
Frontend SPOF
 
Architecting your Frontend
Architecting your FrontendArchitecting your Frontend
Architecting your Frontend
 
Grunt js for the Enterprise Vol.1: Frontend Performance with Phantomas
Grunt js for the Enterprise Vol.1: Frontend Performance with PhantomasGrunt js for the Enterprise Vol.1: Frontend Performance with Phantomas
Grunt js for the Enterprise Vol.1: Frontend Performance with Phantomas
 
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)
 
Wrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web ApplicationsWrangling Large Scale Frontend Web Applications
Wrangling Large Scale Frontend Web Applications
 
A modern front end development workflow for Magnolia at Atlassian
A modern front end development workflow for Magnolia at AtlassianA modern front end development workflow for Magnolia at Atlassian
A modern front end development workflow for Magnolia at Atlassian
 
How to Build Front-End Web Apps that Scale - FutureJS
How to Build Front-End Web Apps that Scale - FutureJSHow to Build Front-End Web Apps that Scale - FutureJS
How to Build Front-End Web Apps that Scale - FutureJS
 
Frontend technologies
Frontend technologiesFrontend technologies
Frontend technologies
 
W3 conf hill-html5-security-realities
W3 conf hill-html5-security-realitiesW3 conf hill-html5-security-realities
W3 conf hill-html5-security-realities
 
Modern Frontend Technology
Modern Frontend TechnologyModern Frontend Technology
Modern Frontend Technology
 
Frontend at Scale - The Tumblr Story
Frontend at Scale - The Tumblr StoryFrontend at Scale - The Tumblr Story
Frontend at Scale - The Tumblr Story
 
TechTalk #85 : Latest Frontend Technologies
TechTalk #85 : Latest Frontend TechnologiesTechTalk #85 : Latest Frontend Technologies
TechTalk #85 : Latest Frontend Technologies
 
Front End Development Workflow Tools
Front End Development Workflow ToolsFront End Development Workflow Tools
Front End Development Workflow Tools
 
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
 
engage 2015 - Domino App Development - Where should I go now?
engage 2015 - Domino App Development - Where should I go now?engage 2015 - Domino App Development - Where should I go now?
engage 2015 - Domino App Development - Where should I go now?
 
Front End Development - Beyond Javascript (Robin Cannon)
Front End Development - Beyond Javascript (Robin Cannon)Front End Development - Beyond Javascript (Robin Cannon)
Front End Development - Beyond Javascript (Robin Cannon)
 

Similar to Blending Performance with Front-End Architecture

ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications
ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applicationsITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications
ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications
ITCamp
 
Browser and Cloud - The Future of IDEs?
Browser and Cloud - The Future of IDEs?Browser and Cloud - The Future of IDEs?
Browser and Cloud - The Future of IDEs?
martinlippert
 
HiUED 前端/web 發展和體驗
HiUED 前端/web 發展和體驗HiUED 前端/web 發展和體驗
HiUED 前端/web 發展和體驗
Bobby Chen
 
Building cross platform mobile web apps
Building cross platform mobile web appsBuilding cross platform mobile web apps
Building cross platform mobile web apps
James Pearce
 

Similar to Blending Performance with Front-End Architecture (20)

Why You Need a Front End Developer
Why You Need a Front End DeveloperWhy You Need a Front End Developer
Why You Need a Front End Developer
 
La qualità delle applicazioni Web
La qualità delle applicazioni WebLa qualità delle applicazioni Web
La qualità delle applicazioni Web
 
Building single page, modular html5 applications for PC and Mobile
Building single page, modular html5 applications for PC and MobileBuilding single page, modular html5 applications for PC and Mobile
Building single page, modular html5 applications for PC and Mobile
 
Developing the Next Generation Embedded HMIs
Developing the Next Generation Embedded HMIs Developing the Next Generation Embedded HMIs
Developing the Next Generation Embedded HMIs
 
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
 
ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications
ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applicationsITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications
ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications
 
Evaluation and prototyping of an HTML5 Client for iOS devices
Evaluation and prototyping of an HTML5 Client for iOS devicesEvaluation and prototyping of an HTML5 Client for iOS devices
Evaluation and prototyping of an HTML5 Client for iOS devices
 
HTML5, Silverlight & Kinect
HTML5, Silverlight & KinectHTML5, Silverlight & Kinect
HTML5, Silverlight & Kinect
 
Building Cloud-Based Cross-Platform Mobile Web Apps
Building Cloud-Based Cross-Platform Mobile Web AppsBuilding Cloud-Based Cross-Platform Mobile Web Apps
Building Cloud-Based Cross-Platform Mobile Web Apps
 
Browser and Cloud - The Future of IDEs?
Browser and Cloud - The Future of IDEs?Browser and Cloud - The Future of IDEs?
Browser and Cloud - The Future of IDEs?
 
RICH INTERNET APPLICATIONS - RIA Tools
RICH INTERNET APPLICATIONS - RIA ToolsRICH INTERNET APPLICATIONS - RIA Tools
RICH INTERNET APPLICATIONS - RIA Tools
 
RIA - Rich Internet Applications
RIA - Rich Internet ApplicationsRIA - Rich Internet Applications
RIA - Rich Internet Applications
 
Future of Library User Experience
Future of Library User ExperienceFuture of Library User Experience
Future of Library User Experience
 
Optimizing HTML5 Sites with CQ5/WEM
Optimizing HTML5 Sites with CQ5/WEMOptimizing HTML5 Sites with CQ5/WEM
Optimizing HTML5 Sites with CQ5/WEM
 
OreDev 2008: Software + Services
OreDev 2008: Software + ServicesOreDev 2008: Software + Services
OreDev 2008: Software + Services
 
HiUED 前端/web 發展和體驗
HiUED 前端/web 發展和體驗HiUED 前端/web 發展和體驗
HiUED 前端/web 發展和體驗
 
Building cross platform mobile web apps
Building cross platform mobile web appsBuilding cross platform mobile web apps
Building cross platform mobile web apps
 
Qooxdoo at B::IT
Qooxdoo at B::ITQooxdoo at B::IT
Qooxdoo at B::IT
 
Mozilla In Malaysia
Mozilla In MalaysiaMozilla In Malaysia
Mozilla In Malaysia
 
Evolving Mobile Architectures
Evolving Mobile ArchitecturesEvolving Mobile Architectures
Evolving Mobile Architectures
 

Recently uploaded

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 

Blending Performance with Front-End Architecture