SlideShare a Scribd company logo
1 of 23
Download to read offline
Simpler
Web Architectures Now!
Gustaf Nilsson Kotte @gustaf_nk
Elevator pitch
Show client-side techniques that
make server-side rendering a
feasible option for your web
applications.
client-side web benefits
simpler deploys and operations (PaaS and server-less architectures too)
partial updates
fine-grained content caching (ajax)
cross-team components
enables richer interactions (...that are not even possible in classical web)
client-side web challenges
rate of change
device diversity (especially on mobile)
https://meta.discourse.org/t/the-state-of-javascript-on-android-in-2015-is-poor/33889/8
time-to-first-interaction (mobile, latency/bandwidth + CPU)
AMP + Progressive Web Apps: Start fast, stay engaged - Google I/O 2016
interoperability and evolvability (single runtime, isolation vs small bundle size)
techniques
techniques
pjax → partial updates (HTML views over ajax)
client-side includes (caching and reusable content)
server-side driven updates (update state, application logic kept server-side)
pjax
pjax
jquery-pjax (GitHub 2011)
https://github.com/defunkt/jquery-pjax
pushState ajax
~500 LOC (not counting comments)
jquery-pjax
$(document).pjax('css-selector-for-links', '#css-selector-for-container')
demo: web shop
team A: products, static site (variations, related information)
team B: shopping cart and check-out
separate teams → separate systems (Conway’s Law)
demo
client-side
includes
client-side includes
hinclude.js
https://github.com/mnot/hinclude/
2005 by Mark Nottingham (@mnot)
https://en.wikipedia.org/wiki/Mark_Nottingham
~150 LOC (not counting comments)
hinclude.js
<hx:include src="/path/to/include">
Fallback content here
</hx:include>
<hx:include src="/path/to/include" id="foo-include">
Refresh like this: hinclude.refresh("foo-include")
</hx:include>
h-include.js
custom element version of hinclude.js
https://github.com/gustafnk/h-include
custom element polyfill: 3KB
https://github.com/WebReflection/document-register-element
<h-include src="/path/to/include">
Fallback content here
</h-include>
includes in includes, etc etc
fix for flashy fallback content
<script>
<!-- https://gist.github.com/egeorjon/6755681 -->
document.documentElement.className = document.documentElement.className.replace( /(?:^|s)no-script(?!S)/g , '' )
</script>
<style>
h-include:not(.included) {
display: none;
}
.no-script h-include, h-include.included {
display: block;
}
</style>
server-side driven updates
domain events
<h-include src="/path/to/include">
<-- after inclusion -->
<div data-refresh-on="shopping-cart-item-added">
<p>Shopping cart: 0</p>
</div>
</h-include>
server: if(xhr): return domain event(s)
client: for each event:
for each subscribing element:
trigger refresh on parent h-include
demo
client code
summary
server-side web (with pjax and client-side includes)
✓ partials updates (pjax + client-side includes + server-side driven updates)
✓ better caching (client-side includes)
✓ cross-team components (client-side includes + server-side driven updates)
✗ enables richer interactions (do you really need them in all scenarios?)
thank you! thank you! thank you! thank you!
thank you! thank you! thank you! thank you!
thank you! thank you! thank you! thank you!
thank you! thank you! thank you! thank you!
thank you! thank you! thank you! thank you!
thank you! thank you! thank you! thank you!
thank you! thank you! thank you! thank you!
thank you! thank you! thank you! (@gustaf_nk)
https://github.com/gustafnk/static-web-shop-example
http://static-web-shop-example.netlify.com/
https://github.com/gustafnk/h-include
question: what about isomorphic web apps?
high language lock-in effect (probably javascript)
iso web apps != progressive enhancement
blocking vs non-blocking data flow (hard!)
time-to-meaningful-interaction (“Uncanny Valley”)
1KB JS == 1ms UI thread stall on mobile
your best devs busy not producing value
https://www.jayway.com/2016/05/23/6-reasons-isomorphic-web-apps-not-silver-bullet-youre-looking/

More Related Content

What's hot

Building solutions with the SharePoint Framework - deep-dive
Building solutions with the SharePoint Framework - deep-diveBuilding solutions with the SharePoint Framework - deep-dive
Building solutions with the SharePoint Framework - deep-diveWaldek Mastykarz
 
Building solutions with the SharePoint Framework - introduction
Building solutions with the SharePoint Framework - introductionBuilding solutions with the SharePoint Framework - introduction
Building solutions with the SharePoint Framework - introductionWaldek Mastykarz
 
Single page application
Single page applicationSingle page application
Single page applicationArthur Fung
 
Building SPAs with AngularJS
Building SPAs with AngularJSBuilding SPAs with AngularJS
Building SPAs with AngularJSCezar Carneiro
 
JAMstack WTJ
JAMstack WTJJAMstack WTJ
JAMstack WTJzonathen
 
Rise and Fall of the Frontend Developer
Rise and Fall of the Frontend DeveloperRise and Fall of the Frontend Developer
Rise and Fall of the Frontend DeveloperRafael Casuso Romate
 
WebAssembly
WebAssemblyWebAssembly
WebAssemblyJawahar
 
Making Single Page Applications (SPA) faster
Making Single Page Applications (SPA) faster Making Single Page Applications (SPA) faster
Making Single Page Applications (SPA) faster Boris Livshutz
 
Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSSingle Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSM R Rony
 
Pros and Cons of developing a Thick Clientside App
Pros and Cons of developing a Thick Clientside AppPros and Cons of developing a Thick Clientside App
Pros and Cons of developing a Thick Clientside AppRavi Teja
 
Progressive web applications
Progressive web applicationsProgressive web applications
Progressive web applicationsTom Martin
 
Modern SharePoint Development using Visual Studio Code
Modern SharePoint Development using Visual Studio CodeModern SharePoint Development using Visual Studio Code
Modern SharePoint Development using Visual Studio CodeJared Matfess
 
Asp.net introduction
Asp.net introductionAsp.net introduction
Asp.net introductionKshitij Wagle
 
Server rendering-talk
Server rendering-talkServer rendering-talk
Server rendering-talkDaiwei Lu
 
Refactoring to a Single Page Application
Refactoring to a Single Page ApplicationRefactoring to a Single Page Application
Refactoring to a Single Page ApplicationCodemotion
 

What's hot (20)

Building solutions with the SharePoint Framework - deep-dive
Building solutions with the SharePoint Framework - deep-diveBuilding solutions with the SharePoint Framework - deep-dive
Building solutions with the SharePoint Framework - deep-dive
 
JAMstack
JAMstackJAMstack
JAMstack
 
Building solutions with the SharePoint Framework - introduction
Building solutions with the SharePoint Framework - introductionBuilding solutions with the SharePoint Framework - introduction
Building solutions with the SharePoint Framework - introduction
 
Single page application
Single page applicationSingle page application
Single page application
 
Building SPAs with AngularJS
Building SPAs with AngularJSBuilding SPAs with AngularJS
Building SPAs with AngularJS
 
JAMstack WTJ
JAMstack WTJJAMstack WTJ
JAMstack WTJ
 
Rise and Fall of the Frontend Developer
Rise and Fall of the Frontend DeveloperRise and Fall of the Frontend Developer
Rise and Fall of the Frontend Developer
 
WebAssembly
WebAssemblyWebAssembly
WebAssembly
 
Making Single Page Applications (SPA) faster
Making Single Page Applications (SPA) faster Making Single Page Applications (SPA) faster
Making Single Page Applications (SPA) faster
 
Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSSingle Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJS
 
WordPress: React Way
WordPress: React WayWordPress: React Way
WordPress: React Way
 
Blazor
BlazorBlazor
Blazor
 
Pros and Cons of developing a Thick Clientside App
Pros and Cons of developing a Thick Clientside AppPros and Cons of developing a Thick Clientside App
Pros and Cons of developing a Thick Clientside App
 
Progressive web applications
Progressive web applicationsProgressive web applications
Progressive web applications
 
Modern SharePoint Development using Visual Studio Code
Modern SharePoint Development using Visual Studio CodeModern SharePoint Development using Visual Studio Code
Modern SharePoint Development using Visual Studio Code
 
Asp.net introduction
Asp.net introductionAsp.net introduction
Asp.net introduction
 
Server rendering-talk
Server rendering-talkServer rendering-talk
Server rendering-talk
 
Codegen2021 blazor mobile
Codegen2021 blazor mobileCodegen2021 blazor mobile
Codegen2021 blazor mobile
 
Refactoring to a Single Page Application
Refactoring to a Single Page ApplicationRefactoring to a Single Page Application
Refactoring to a Single Page Application
 
ITT Flisol 2013
ITT Flisol 2013ITT Flisol 2013
ITT Flisol 2013
 

Similar to Simpler Web Architectures Now! (At The Frontend 2016)

Bringing JAMStack to the Enterprise
Bringing JAMStack to the EnterpriseBringing JAMStack to the Enterprise
Bringing JAMStack to the EnterpriseC4Media
 
Microservice Websites – Micro CPH
Microservice Websites – Micro CPHMicroservice Websites – Micro CPH
Microservice Websites – Micro CPHGustaf Nilsson Kotte
 
ASP.NET AJAX with Visual Studio 2008
ASP.NET AJAX with Visual Studio 2008ASP.NET AJAX with Visual Studio 2008
ASP.NET AJAX with Visual Studio 2008Caleb Jenkins
 
Note of CGI and ASP
Note of CGI and ASPNote of CGI and ASP
Note of CGI and ASPWilliam Lee
 
James Turner (Caplin) - Enterprise HTML5 Patterns
James Turner (Caplin) - Enterprise HTML5 PatternsJames Turner (Caplin) - Enterprise HTML5 Patterns
James Turner (Caplin) - Enterprise HTML5 Patternsakqaanoraks
 
Web-Technologies 26.06.2003
Web-Technologies 26.06.2003Web-Technologies 26.06.2003
Web-Technologies 26.06.2003Wolfgang Wiese
 
Building a website without a webserver on Azure
Building a website without a webserver on AzureBuilding a website without a webserver on Azure
Building a website without a webserver on AzureTodd Whitehead
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentTilak Joshi
 
Bringing the JAMstack to the Enterprise
Bringing the JAMstack to the EnterpriseBringing the JAMstack to the Enterprise
Bringing the JAMstack to the EnterpriseJamund Ferguson
 
Microservice Websites (microXchg 2017)
Microservice Websites (microXchg 2017)Microservice Websites (microXchg 2017)
Microservice Websites (microXchg 2017)Gustaf Nilsson Kotte
 
Vue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speech
Vue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speechVue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speech
Vue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speechDivante
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web appsFastly
 
Java Web Programming on Google Cloud Platform [1/3] : Google App Engine
Java Web Programming on Google Cloud Platform [1/3] : Google App EngineJava Web Programming on Google Cloud Platform [1/3] : Google App Engine
Java Web Programming on Google Cloud Platform [1/3] : Google App EngineIMC Institute
 
JS Fest 2019/Autumn. Александр Товмач. JAMstack
JS Fest 2019/Autumn. Александр Товмач. JAMstackJS Fest 2019/Autumn. Александр Товмач. JAMstack
JS Fest 2019/Autumn. Александр Товмач. JAMstackJSFestUA
 
Usability AJAX and other ASP.NET Features
Usability AJAX and other ASP.NET FeaturesUsability AJAX and other ASP.NET Features
Usability AJAX and other ASP.NET FeaturesPeter Gfader
 

Similar to Simpler Web Architectures Now! (At The Frontend 2016) (20)

Bringing JAMStack to the Enterprise
Bringing JAMStack to the EnterpriseBringing JAMStack to the Enterprise
Bringing JAMStack to the Enterprise
 
Microservice Websites – Micro CPH
Microservice Websites – Micro CPHMicroservice Websites – Micro CPH
Microservice Websites – Micro CPH
 
ASP.NET AJAX with Visual Studio 2008
ASP.NET AJAX with Visual Studio 2008ASP.NET AJAX with Visual Studio 2008
ASP.NET AJAX with Visual Studio 2008
 
Note of CGI and ASP
Note of CGI and ASPNote of CGI and ASP
Note of CGI and ASP
 
Html5
Html5Html5
Html5
 
James Turner (Caplin) - Enterprise HTML5 Patterns
James Turner (Caplin) - Enterprise HTML5 PatternsJames Turner (Caplin) - Enterprise HTML5 Patterns
James Turner (Caplin) - Enterprise HTML5 Patterns
 
Web-Technologies 26.06.2003
Web-Technologies 26.06.2003Web-Technologies 26.06.2003
Web-Technologies 26.06.2003
 
Building a website without a webserver on Azure
Building a website without a webserver on AzureBuilding a website without a webserver on Azure
Building a website without a webserver on Azure
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
 
Bringing the JAMstack to the Enterprise
Bringing the JAMstack to the EnterpriseBringing the JAMstack to the Enterprise
Bringing the JAMstack to the Enterprise
 
Microservice Websites (microXchg 2017)
Microservice Websites (microXchg 2017)Microservice Websites (microXchg 2017)
Microservice Websites (microXchg 2017)
 
Vue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speech
Vue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speechVue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speech
Vue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speech
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
HTML5 Refresher
HTML5 RefresherHTML5 Refresher
HTML5 Refresher
 
SynapseIndia asp.net2.0 ajax Development
SynapseIndia asp.net2.0 ajax DevelopmentSynapseIndia asp.net2.0 ajax Development
SynapseIndia asp.net2.0 ajax Development
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 
Java Web Programming on Google Cloud Platform [1/3] : Google App Engine
Java Web Programming on Google Cloud Platform [1/3] : Google App EngineJava Web Programming on Google Cloud Platform [1/3] : Google App Engine
Java Web Programming on Google Cloud Platform [1/3] : Google App Engine
 
JS Fest 2019/Autumn. Александр Товмач. JAMstack
JS Fest 2019/Autumn. Александр Товмач. JAMstackJS Fest 2019/Autumn. Александр Товмач. JAMstack
JS Fest 2019/Autumn. Александр Товмач. JAMstack
 
Usability AJAX and other ASP.NET Features
Usability AJAX and other ASP.NET FeaturesUsability AJAX and other ASP.NET Features
Usability AJAX and other ASP.NET Features
 

Recently uploaded

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 FresherRemote DBA Services
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native ApplicationsWSO2
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
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 REVIEWERMadyBayot
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
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 - DevoxxUKJago de Vreede
 
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 challengesrafiqahmad00786416
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024The Digital Insurer
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Victor Rentea
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024The Digital Insurer
 
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 FMESafe Software
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 
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 AmsterdamUiPathCommunity
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Orbitshub
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
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 businesspanagenda
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Jeffrey Haguewood
 
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 TerraformAndrey Devyatkin
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Victor Rentea
 

Recently uploaded (20)

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
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
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
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
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
 
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
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
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
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
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
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
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
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
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
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 

Simpler Web Architectures Now! (At The Frontend 2016)

  • 1. Simpler Web Architectures Now! Gustaf Nilsson Kotte @gustaf_nk
  • 2. Elevator pitch Show client-side techniques that make server-side rendering a feasible option for your web applications.
  • 3. client-side web benefits simpler deploys and operations (PaaS and server-less architectures too) partial updates fine-grained content caching (ajax) cross-team components enables richer interactions (...that are not even possible in classical web)
  • 4. client-side web challenges rate of change device diversity (especially on mobile) https://meta.discourse.org/t/the-state-of-javascript-on-android-in-2015-is-poor/33889/8 time-to-first-interaction (mobile, latency/bandwidth + CPU) AMP + Progressive Web Apps: Start fast, stay engaged - Google I/O 2016 interoperability and evolvability (single runtime, isolation vs small bundle size)
  • 6. techniques pjax → partial updates (HTML views over ajax) client-side includes (caching and reusable content) server-side driven updates (update state, application logic kept server-side)
  • 10. demo: web shop team A: products, static site (variations, related information) team B: shopping cart and check-out separate teams → separate systems (Conway’s Law)
  • 11. demo
  • 13. client-side includes hinclude.js https://github.com/mnot/hinclude/ 2005 by Mark Nottingham (@mnot) https://en.wikipedia.org/wiki/Mark_Nottingham ~150 LOC (not counting comments)
  • 14. hinclude.js <hx:include src="/path/to/include"> Fallback content here </hx:include> <hx:include src="/path/to/include" id="foo-include"> Refresh like this: hinclude.refresh("foo-include") </hx:include>
  • 15. h-include.js custom element version of hinclude.js https://github.com/gustafnk/h-include custom element polyfill: 3KB https://github.com/WebReflection/document-register-element <h-include src="/path/to/include"> Fallback content here </h-include> includes in includes, etc etc
  • 16. fix for flashy fallback content <script> <!-- https://gist.github.com/egeorjon/6755681 --> document.documentElement.className = document.documentElement.className.replace( /(?:^|s)no-script(?!S)/g , '' ) </script> <style> h-include:not(.included) { display: none; } .no-script h-include, h-include.included { display: block; } </style>
  • 17. server-side driven updates domain events <h-include src="/path/to/include"> <-- after inclusion --> <div data-refresh-on="shopping-cart-item-added"> <p>Shopping cart: 0</p> </div> </h-include> server: if(xhr): return domain event(s) client: for each event: for each subscribing element: trigger refresh on parent h-include
  • 18. demo
  • 21. server-side web (with pjax and client-side includes) ✓ partials updates (pjax + client-side includes + server-side driven updates) ✓ better caching (client-side includes) ✓ cross-team components (client-side includes + server-side driven updates) ✗ enables richer interactions (do you really need them in all scenarios?)
  • 22. thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! (@gustaf_nk) https://github.com/gustafnk/static-web-shop-example http://static-web-shop-example.netlify.com/ https://github.com/gustafnk/h-include
  • 23. question: what about isomorphic web apps? high language lock-in effect (probably javascript) iso web apps != progressive enhancement blocking vs non-blocking data flow (hard!) time-to-meaningful-interaction (“Uncanny Valley”) 1KB JS == 1ms UI thread stall on mobile your best devs busy not producing value https://www.jayway.com/2016/05/23/6-reasons-isomorphic-web-apps-not-silver-bullet-youre-looking/