Submit Search
Upload
Building high performance web applications
•
Download as PPTX, PDF
•
0 likes
•
266 views
Maurice De Beijer [MVP]
Follow
Slides from building high performance web applications at NextBuild 2017 in Eindhoven
Read less
Read more
Technology
Report
Share
Report
Share
1 of 32
Download now
Recommended
Building high performance web applications
Building high performance web applications
Maurice De Beijer [MVP]
Building high performance web applications
Building high performance web applications
Maurice De Beijer [MVP]
C# Async on iOS and Android - Craig Dunn, Developer Evangelist at Xamarin
C# Async on iOS and Android - Craig Dunn, Developer Evangelist at Xamarin
Xamarin
Unity global cs presentation
Unity global cs presentation
Kollar Bruno
Get your mobile app in production in 3 months: Backend
Get your mobile app in production in 3 months: Backend
Ackee
Building high-performance web applications with Preact
Building high-performance web applications with Preact
Maurice De Beijer [MVP]
Better React state management with Redux
Better React state management with Redux
Maurice De Beijer [MVP]
The new React
The new React
Maurice De Beijer [MVP]
Recommended
Building high performance web applications
Building high performance web applications
Maurice De Beijer [MVP]
Building high performance web applications
Building high performance web applications
Maurice De Beijer [MVP]
C# Async on iOS and Android - Craig Dunn, Developer Evangelist at Xamarin
C# Async on iOS and Android - Craig Dunn, Developer Evangelist at Xamarin
Xamarin
Unity global cs presentation
Unity global cs presentation
Kollar Bruno
Get your mobile app in production in 3 months: Backend
Get your mobile app in production in 3 months: Backend
Ackee
Building high-performance web applications with Preact
Building high-performance web applications with Preact
Maurice De Beijer [MVP]
Better React state management with Redux
Better React state management with Redux
Maurice De Beijer [MVP]
The new React
The new React
Maurice De Beijer [MVP]
Vuejs
Vuejs
Mario Alexandro Santini
Machine Learning on IBM Watson Studio
Machine Learning on IBM Watson Studio
Upkar Lidder
Getting start Java EE Action-Based MVC with Thymeleaf
Getting start Java EE Action-Based MVC with Thymeleaf
Masatoshi Tada
Compiler tricks
Compiler tricks
John Lluch-Zorrilla
XebiCon'18 - Passage à l'échelle de mes applications Kafka-Streams
XebiCon'18 - Passage à l'échelle de mes applications Kafka-Streams
Publicis Sapient Engineering
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
Maurice De Beijer [MVP]
Building reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and Azure
Maurice De Beijer [MVP]
AWS Summit DC 2021: Improve the developer experience with AWS CDK
AWS Summit DC 2021: Improve the developer experience with AWS CDK
Casey Lee
Building large and scalable mission critical applications with React
Building large and scalable mission critical applications with React
Maurice De Beijer [MVP]
Inexpensive Datamasking for MySQL with ProxySQL - data anonymization for deve...
Inexpensive Datamasking for MySQL with ProxySQL - data anonymization for deve...
Frederic Descamps
Best Practices & Lessons Learned from the field on EMC Documentum xCP 2.0
Best Practices & Lessons Learned from the field on EMC Documentum xCP 2.0
Haytham Ghandour
How to avoid hanging yourself with Rails
How to avoid hanging yourself with Rails
Rowan Hick
Cameo Workbench
Cameo Workbench
sodius7789
William Impey CV
William Impey CV
Will Impey
Architecture for scalable Angular applications
Architecture for scalable Angular applications
Paweł Żurowski
Unit Testing 101
Unit Testing 101
Dave Bouwman
The productive developer guide to React
The productive developer guide to React
Maurice De Beijer [MVP]
Mechatronics engineer
Mechatronics engineer
Samuel Narcisse
Vue micro frontend implementation patterns
Vue micro frontend implementation patterns
Albert Brand
AWS DevDay Vienna - Automating building blocks choices you will face with con...
AWS DevDay Vienna - Automating building blocks choices you will face with con...
Cobus Bernard
Practice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components App
Maurice De Beijer [MVP]
A foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software Project
Maurice De Beijer [MVP]
More Related Content
Similar to Building high performance web applications
Vuejs
Vuejs
Mario Alexandro Santini
Machine Learning on IBM Watson Studio
Machine Learning on IBM Watson Studio
Upkar Lidder
Getting start Java EE Action-Based MVC with Thymeleaf
Getting start Java EE Action-Based MVC with Thymeleaf
Masatoshi Tada
Compiler tricks
Compiler tricks
John Lluch-Zorrilla
XebiCon'18 - Passage à l'échelle de mes applications Kafka-Streams
XebiCon'18 - Passage à l'échelle de mes applications Kafka-Streams
Publicis Sapient Engineering
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
Maurice De Beijer [MVP]
Building reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and Azure
Maurice De Beijer [MVP]
AWS Summit DC 2021: Improve the developer experience with AWS CDK
AWS Summit DC 2021: Improve the developer experience with AWS CDK
Casey Lee
Building large and scalable mission critical applications with React
Building large and scalable mission critical applications with React
Maurice De Beijer [MVP]
Inexpensive Datamasking for MySQL with ProxySQL - data anonymization for deve...
Inexpensive Datamasking for MySQL with ProxySQL - data anonymization for deve...
Frederic Descamps
Best Practices & Lessons Learned from the field on EMC Documentum xCP 2.0
Best Practices & Lessons Learned from the field on EMC Documentum xCP 2.0
Haytham Ghandour
How to avoid hanging yourself with Rails
How to avoid hanging yourself with Rails
Rowan Hick
Cameo Workbench
Cameo Workbench
sodius7789
William Impey CV
William Impey CV
Will Impey
Architecture for scalable Angular applications
Architecture for scalable Angular applications
Paweł Żurowski
Unit Testing 101
Unit Testing 101
Dave Bouwman
The productive developer guide to React
The productive developer guide to React
Maurice De Beijer [MVP]
Mechatronics engineer
Mechatronics engineer
Samuel Narcisse
Vue micro frontend implementation patterns
Vue micro frontend implementation patterns
Albert Brand
AWS DevDay Vienna - Automating building blocks choices you will face with con...
AWS DevDay Vienna - Automating building blocks choices you will face with con...
Cobus Bernard
Similar to Building high performance web applications
(20)
Vuejs
Vuejs
Machine Learning on IBM Watson Studio
Machine Learning on IBM Watson Studio
Getting start Java EE Action-Based MVC with Thymeleaf
Getting start Java EE Action-Based MVC with Thymeleaf
Compiler tricks
Compiler tricks
XebiCon'18 - Passage à l'échelle de mes applications Kafka-Streams
XebiCon'18 - Passage à l'échelle de mes applications Kafka-Streams
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
Building reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and Azure
AWS Summit DC 2021: Improve the developer experience with AWS CDK
AWS Summit DC 2021: Improve the developer experience with AWS CDK
Building large and scalable mission critical applications with React
Building large and scalable mission critical applications with React
Inexpensive Datamasking for MySQL with ProxySQL - data anonymization for deve...
Inexpensive Datamasking for MySQL with ProxySQL - data anonymization for deve...
Best Practices & Lessons Learned from the field on EMC Documentum xCP 2.0
Best Practices & Lessons Learned from the field on EMC Documentum xCP 2.0
How to avoid hanging yourself with Rails
How to avoid hanging yourself with Rails
Cameo Workbench
Cameo Workbench
William Impey CV
William Impey CV
Architecture for scalable Angular applications
Architecture for scalable Angular applications
Unit Testing 101
Unit Testing 101
The productive developer guide to React
The productive developer guide to React
Mechatronics engineer
Mechatronics engineer
Vue micro frontend implementation patterns
Vue micro frontend implementation patterns
AWS DevDay Vienna - Automating building blocks choices you will face with con...
AWS DevDay Vienna - Automating building blocks choices you will face with con...
More from Maurice De Beijer [MVP]
Practice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components App
Maurice De Beijer [MVP]
A foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software Project
Maurice De Beijer [MVP]
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Maurice De Beijer [MVP]
Build reliable Svelte applications using Cypress
Build reliable Svelte applications using Cypress
Maurice De Beijer [MVP]
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
Maurice De Beijer [MVP]
Concurrent Rendering Adventures in React 18
Concurrent Rendering Adventures in React 18
Maurice De Beijer [MVP]
Why I am hooked on the future of React
Why I am hooked on the future of React
Maurice De Beijer [MVP]
Building reliable web applications using Cypress
Building reliable web applications using Cypress
Maurice De Beijer [MVP]
Getting started with React Suspense and concurrent rendering
Getting started with React Suspense and concurrent rendering
Maurice De Beijer [MVP]
React suspense, not just for Alfred Hitchcock
React suspense, not just for Alfred Hitchcock
Maurice De Beijer [MVP]
From zero to hero with the Reactive extensions for JavaScript
From zero to hero with the Reactive extensions for JavaScript
Maurice De Beijer [MVP]
Why I am hooked on the future of React
Why I am hooked on the future of React
Maurice De Beijer [MVP]
From zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScript
Maurice De Beijer [MVP]
Why I am hooked on the future of React
Why I am hooked on the future of React
Maurice De Beijer [MVP]
I am hooked on React
I am hooked on React
Maurice De Beijer [MVP]
Create flexible React applications using GraphQL apis
Create flexible React applications using GraphQL apis
Maurice De Beijer [MVP]
Create flexible react applications using GraphQL API's
Create flexible react applications using GraphQL API's
Maurice De Beijer [MVP]
Docker for a .NET web developer
Docker for a .NET web developer
Maurice De Beijer [MVP]
From zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScript
Maurice De Beijer [MVP]
Docker containers on Windows
Docker containers on Windows
Maurice De Beijer [MVP]
More from Maurice De Beijer [MVP]
(20)
Practice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components App
A foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software Project
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Build reliable Svelte applications using Cypress
Build reliable Svelte applications using Cypress
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
Concurrent Rendering Adventures in React 18
Concurrent Rendering Adventures in React 18
Why I am hooked on the future of React
Why I am hooked on the future of React
Building reliable web applications using Cypress
Building reliable web applications using Cypress
Getting started with React Suspense and concurrent rendering
Getting started with React Suspense and concurrent rendering
React suspense, not just for Alfred Hitchcock
React suspense, not just for Alfred Hitchcock
From zero to hero with the Reactive extensions for JavaScript
From zero to hero with the Reactive extensions for JavaScript
Why I am hooked on the future of React
Why I am hooked on the future of React
From zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScript
Why I am hooked on the future of React
Why I am hooked on the future of React
I am hooked on React
I am hooked on React
Create flexible React applications using GraphQL apis
Create flexible React applications using GraphQL apis
Create flexible react applications using GraphQL API's
Create flexible react applications using GraphQL API's
Docker for a .NET web developer
Docker for a .NET web developer
From zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScript
Docker containers on Windows
Docker containers on Windows
Recently uploaded
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
Khem
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Miguel Araújo
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Gabriella Davis
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
debabhi2
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
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
naman860154
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
The Digital Insurer
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
UK Journal
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
apidays
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
wesley chun
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
Enterprise Knowledge
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Delhi Call girls
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Safe Software
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
Malak Abu Hammad
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
The Digital Insurer
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
Delhi Call girls
Recently uploaded
(20)
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
Building high performance web applications
1.
Building high performance web applications Maurice
de Beijer @mauricedb NEXTBUILD 2017
2.
Topics What is
fast? Tooling Code splitting Server side rendering Only render above the fold © ABL - The Problem Solver 2
3.
Maurice de
Beijer The Problem Solver MicrosoftAzure MVP Freelance developer/instructor Twitter: @mauricedb, @NG_Tutorial and @React_Tutorial Web: http://www.TheProblemSolver.nl E-mail: maurice.de.beijer@gmail.com 3
4.
Why? 40% of
the web traffic is from mobile devices. Bol.com in July 2016 Adding 100 ms of latency costs 1% of sales Amazon.com © ABL - The Problem Solver 4
5.
What is fast? ©
ABL - The Problem Solver 5
6.
It depends ©
ABL - The Problem Solver 6
7.
“Performance is the
art of avoiding work, and making any work you do as efficient as possible” -- Paul Lewis -- © ABL - The Problem Solver 7
8.
DOMContent Loaded © ABL -
The Problem Solver 8
9.
First meaningful paint © ABL -
The Problem Solver 9
10.
Time to interactive © ABL
- The Problem Solver 10
11.
But there is more ©
ABL - The Problem Solver 11
12.
Tooling © ABL -
The Problem Solver 12
13.
Chrome Timeline © ABL -
The Problem Solver 13
14.
Chrome Audits © ABL -
The Problem Solver 14
15.
YSlow © ABL -
The Problem Solver 15
16.
WebPageTest © ABL -
The Problem Solver 16
17.
WebPageTest select the device © ABL
- The Problem Solver 17
18.
WebPageTest select the bandwidth © ABL
- The Problem Solver 18
19.
WebPageTest iPhone 6 © ABL
- The Problem Solver 19
20.
Lighthouse © ABL -
The Problem Solver 20
21.
ECMAScript imports import _ from
'lodash'; _.forEach(data, e => console.log(e)); © ABL - The Problem Solver 21 import { forEach } from 'lodash/forEach'; forEach(data, e => console.log(e));
22.
import rxjs from
'rxjs'; rxjs.Observable.from(data) .map(e => 2 * e) .subscribe(e => console.log(e)); ECMAScript imports import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/from'; import 'rxjs/add/operator/map'; Observable.from(data) .map(e => 2 * e) .subscribe(e => console.log(e)); © ABL - The Problem Solver 22
23.
Code splitting © ABL
- The Problem Solver 23
24.
Use source- map-explorer © ABL
- The Problem Solver 24
25.
Right size framework © ABL
- The Problem Solver 25
26.
Server side rendering © ABL
- The Problem Solver 26
27.
Inline critical CSS © ABL -
The Problem Solver 27
28.
Only render above the
fold © ABL - The Problem Solver 28
29.
HTTP & Latency © ABL -
The Problem Solver 29
30.
Try it
http://bit.ly/fast-apps © ABL - The Problem Solver 30
31.
Conclusion Everyone loves
faster web apps. And they are good for business Avoid or delay as much as possible. What you don’t do can’t slow you down Do as few request as possible to display the first page. The fastest HTTP request is one not made Use the browsers capabilities as much as possible. © ABL - The Problem Solver 31
32.
Maurice de Beijer @mauricedb maurice.de.beijer @gmail.com ©
ABL - The Problem Solver 32
Editor's Notes
https://pixabay.com/nl/supersonische-vechter-vliegtuigen-63211/
https://pixabay.com/nl/boord-blackboard-lettertype-1805318/
https://www.pexels.com/photo/train-on-railroad-tracks-against-sky-258367/
https://unsplash.com/photos/EXcDH29WLbg
https://pixabay.com/nl/dolfijn-kind-kinderen-spelen-1548448/
https://pixabay.com/nl/batterij-aa-energie-huidige-1109088/
https://www.pexels.com/photo/grey-metal-hammer-34520/
https://unsplash.com/search/splitting?photo=Xxd33FUBQeA
https://pixabay.com/nl/marokko-truck-vrachtwagen-hooi-842660/
https://pixabay.com/en/technology-servers-server-1587673/
https://jonassebastianohlsson.com/criticalpathcssgenerator/
https://pixabay.com/nl/sprinkhaan-viridissima-groene-193721
Download now