Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building high-performance web applications with Preact

150 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Building high-performance web applications with Preact

  1. 1. Building high performance web applications with Preact Maurice de Beijer @mauricedb
  2. 2. Topics  Why performance?  Why Preact?  ProgressiveWeb Apps  The PRPL pattern © ABL - The Problem Solver 2
  3. 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. 4. Try it  https://bit.ly/dnz-preact © ABL - The Problem Solver 4
  5. 5. Why performance? © ABL - The Problem Solver 5
  6. 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. 7. What is fast? © ABL - The Problem Solver 7
  8. 8. It depends  © ABL - The Problem Solver 8
  9. 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. 10. DOMContent Loaded © ABL - The Problem Solver 10
  11. 11. First meaningful paint © ABL - The Problem Solver 11
  12. 12. Time to interactive © ABL - The Problem Solver 12
  13. 13. Right size framework © ABL - The Problem Solver 13
  14. 14. Why Preact? © ABL - The Problem Solver 14
  15. 15. Jason Miller @_developit © ABL - The Problem Solver 15
  16. 16. Preact = React + exercise © ABL - The Problem Solver 16
  17. 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. 18. Babel { "plugins": [ ["transform-react-jsx", { "pragma":"h" }] ] } © ABL - The Problem Solver 18
  19. 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. 20. “It's easier to make a fast app than to speed up a slow app” -- Me -- © ABL - The Problem Solver 20
  21. 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. 22. Use source- map-explorer © ABL - The Problem Solver 22
  23. 23. ProgressiveWebApps & the PRPL Pattern © ABL - The Problem Solver 23
  24. 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. 25. Push © ABL - The Problem Solver 25
  26. 26. HTTP/2 © ABL - The Problem Solver 26
  27. 27. Latency © ABL - The Problem Solver 27
  28. 28. Render initial route © ABL - The Problem Solver 28
  29. 29. Server side rendering © ABL - The Problem Solver 29
  30. 30. Prerendering © ABL - The Problem Solver 30
  31. 31. Inline critical CSS © ABL - The Problem Solver 31
  32. 32. Pre-cache remaining routes © ABL - The Problem Solver 32
  33. 33. Cache using ServiceWorker © ABL - The Problem Solver 33
  34. 34. Lazy-Loading © ABL - The Problem Solver 34
  35. 35. Code splitting © ABL - The Problem Solver 35
  36. 36. Only render above the fold © ABL - The Problem Solver 36
  37. 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. 38. Maurice de Beijer @mauricedb maurice.de.beijer @gmail.com © ABL - The Problem Solver 38

×