Presentation for the .NET Zuid user group about building high-performance web apps using Preact.

1. Building high
performance web
applications with Preact
Maurice de Beijer
@mauricedb

2. Topics
 Why performance?
 Why Preact?
 ProgressiveWeb Apps
 The PRPL pattern
© 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. Try it  https://bit.ly/dnz-preact
© ABL - The Problem Solver 4

5. Why performance?
© ABL - The Problem Solver 5

6. Why
performance?
 40% of the website 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 6

7. What is fast?
© ABL - The Problem Solver 7

8. It depends 
© ABL - The Problem Solver 8

9. “Performance is the art of
avoiding work, and
making any work you do
as efficient as possible”
-- Paul Lewis --
© ABL - The Problem Solver 9

10. DOMContent
Loaded
© ABL - The Problem Solver 10

11. First
meaningful
paint
© ABL - The Problem Solver 11

12. Time to
interactive
© ABL - The Problem Solver 12

13. Right size
framework
© ABL - The Problem Solver 13

14. Why Preact?
© ABL - The Problem Solver 14

15. Jason Miller
@_developit
© ABL - The Problem Solver 15

16. Preact
=
React +
exercise
© ABL - The Problem Solver 16

17. A Preact
component
import { h, render, Component } from 'preact’; // <= h() replaces React.createElement()
class Clock extends Component { // <= Always ES2015 classes
constructor() {
super();
this.state.now = new Date();
}
componentDidMount() {
this.timer = setInterval(() => this.setState({ now: new Date() }), 1000);
}
componentWillUnmount() {
clearInterval(this.timer);
}
render({}, {now}) { // <= props and state passed
return <span>{ now.toLocaleTimeString() }</span>;
}
}
render(<Clock />, document.body); // <= render() instead of ReactDOM.render()
© ABL - The Problem Solver 17

18. Babel
{
"plugins": [
["transform-react-jsx", { "pragma":"h" }]
]
}
© ABL - The Problem Solver 18

19. What is
missing?
 PropType validation.
 Part of preact-compat
 React.Children.
 Part of preact-compat
 Synthetic Events.
 Preact only targets the Browser
 Context is simplified.
© ABL - The Problem Solver 19

20. “It's easier to make a
fast app than to speed
up a slow app”
-- Me --
© 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. Use source-
map-explorer
© ABL - The Problem Solver 22

23. ProgressiveWebApps
& the PRPL Pattern
© ABL - The Problem Solver 23

24. PRPL
 Push critical resources for the initial URL route.
 Render initial route.
 Pre-cache remaining routes.
 Lazy-load and create remaining routes on demand.
© ABL - The Problem Solver 24

25. Push
© ABL - The Problem Solver 25

26. HTTP/2
© ABL - The Problem Solver 26

27. Latency
© ABL - The Problem Solver 27

28. Render initial route
© ABL - The Problem Solver 28

29. Server side
rendering
© ABL - The Problem Solver 29

30. Prerendering
© ABL - The Problem Solver 30

31. Inline
critical
CSS
© ABL - The Problem Solver 31

32. Pre-cache
remaining routes
© ABL - The Problem Solver 32

33. Cache using
ServiceWorker
© ABL - The Problem Solver 33

34. Lazy-Loading
© ABL - The Problem Solver 34

35. Code splitting
© ABL - The Problem Solver 35

36. Only render
above the fold
© ABL - The Problem Solver 36

37. Conclusion
 Everyone loves faster web apps.
 And they are good for business
 Do as few request as possible to display the first page.
 The fastest HTTP request is one not made
 Use the PRPL pattern
 Preact is small and fast.
 The CLI gives you most of the PRPL pattern out of the box
© ABL - The Problem Solver 37

38. Maurice de Beijer
@mauricedb
maurice.de.beijer
@gmail.com
© ABL - The Problem Solver 38