Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Once you go PRPL: SeattleJS

Avatar for Houssein Djirdeh Houssein Djirdeh
August 11, 2017
200
0

Once you go PRPL: SeattleJS

Avatar for Houssein Djirdeh

Houssein Djirdeh

August 11, 2017

More Decks by Houssein Djirdeh

See All by Houssein Djirdeh
Performance Empathy
Avatar for Houssein Djirdeh housseindjirdeh
0
210
The Art of Lazy Loading
Avatar for Houssein Djirdeh housseindjirdeh
0
570
GitPoint - Lunch and Learn
Avatar for Houssein Djirdeh housseindjirdeh
0
130
Progressive Web Apps - fullStackTO/FITC Web Unleashed
Avatar for Houssein Djirdeh housseindjirdeh
0
230
Once you go PRPL - FullStackFest
Avatar for Houssein Djirdeh housseindjirdeh
0
45

Featured

See All Featured
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
580
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
180
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.1k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
230
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
27k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
240
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
55k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
410
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.1k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.3k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k

Transcript

  1. XKCD/Installing

  2. Once you go PRPL… @hdjirdeh

  3. None
  4. None
  5. None

  6. CSS JS PNG

  7. <link rel="preload" as="script" href="script.js"> <link rel="preload" as="script" href="script.js"> <html lang="en">

    <head> <link rel="stylesheet" href="styles.css"> </head> <body> <!--(>'-')> <('-'<)--> <script src="script.js"></script> </body> </html>

  8. <link rel="preload" as="script" href="script.js">

  9. JS JS

  10. <link rel="preload" as="script" href="script.js"> as="script" <link rel="preload" as="style" href="styles.css"> as="style"

    as="font" as="audio" as="image" as="video"

  11. as="script" as="style"

  12. as="script" as="style" as="font" as="audio" as="image" as="video"

  13. <link rel="prefetch">

  14. preload-webpack-plugin <link rel="preload" href="chunk.cf7bd8260d685f704bd0.js" as="script"> <link rel="prefetch" href="chunk.cf7bd8260d685f704bd0.js">

  15. CAN I HAZ? Partial Support

  16. HTTP/2 Server Push

  17. None

  18. Link: </app/style.css>; rel=preload; as=style Link: </app/script.js>; rel=preload; as=script

  19. None

  20. Link: </app/style.css>; rel=preload; as=style; nopush Link: </app/script.js>; rel=preload; as=script

  21. A Comprehensive Guide To HTTP/2 Server Push - Jeremy Wagner

    https://rebrand.ly/http2

  22. Pushing too much Pushing unused assets Cache?

  23. PUSH critical resources

  24. None

  25. Service workers

  26. A service worker is a script that runs in the

    background of your browser when you view a webpage.

  27. ADDING A SERVICE WORKER 1. Create the file and write

    the logic yourself 2. Use a library
  28. None

  29. npm install workbox-cli --global workbox-cli generate:sw

  30. None

  31. <script> if ('serviceWorker' in navigator) { window.addEventListener('load', function () {

    navigator.serviceWorker.register('/service-worker.js').then(function(){ // Registration was successful console.log('ServiceWorker registration successful!'); }).catch(function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); }); } </script> if ('serviceWorker' in navigator) { window.addEventListener('load', function () { navigator.serviceWorker.register('/service-worker.js') <script> if ('serviceWorker' in navigator) { window.addEventListener('load', function () { navigator.serviceWorker.register('/service-worker.js').then(function(){ // Registration was successful console.log('ServiceWorker registration successful!'); }).catch(function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); }); } </script> <script> if ('serviceWorker' in navigator) { window.addEventListener('load', function () { navigator.serviceWorker.register('/service-worker.js').then(function(){ // Registration was successful console.log('ServiceWorker registration successful!'); }).catch(function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); }); } </script>
  32. None

  33. APPLICATION SHELL

  34. APPLICATION SHELL CONTENT

  35. module.exports = { globDirectory: 'dist/', globPatterns: ['**/*.{js,png,svg,html,json}'], swDest: 'dist/service-worker.js', navigateFallback:

    '/index.html' }; module.exports = { globDirectory: 'dist/', globPatterns: ['**/*.{js,png,svg,html,json}'], swDest: 'dist/service-worker.js', navigateFallback: '/index.html', }; module.exports = { globDirectory: 'dist/', globPatterns: ['**/*.{js,png,svg,html,json}'], swDest: 'dist/service-worker.js', navigateFallback: '/index.html' }; globDirectory: 'dist/' globPatterns: ['**/*.{js,png,svg,html,json}'] swDest: 'dist/service-worker.js' navigateFallback: '/index.html'

  36. BUILD PROCESS

  37. npm install workbox-cli --save-dev // package.json "scripts": { //... "build":

    "{build} && workbox-cli generate:sw" }

  38. workbox-webpack-plugin

  39. DYNAMIC CONTENT

  40. module.exports = { globDirectory: 'dist/', globPatterns: ['**/*.{js,png,svg,html,json}'], swDest: 'dist/service-worker.js', navigateFallback:

    '/index.html', runtimeCaching: [ { urlPattern: /^https:\/\/your.api.com\/.*/, handler: 'networkFirst' } ] }; module.exports = { globDirectory: 'dist/', globPatterns: ['**/*.{js,png,svg,html,json}'], swDest: 'dist/service-worker.js', navigateFallback: '/index.html', runtimeCaching: [ { urlPattern: /^https:\/\/your.api.com\/.*/, handler: 'networkFirst' } ] }; runtimeCaching: [ { urlPattern: /^https:\/\/your.api.com\/.*/, handler: 'networkFirst' } ] runtimeCaching: [ { urlPattern: /^https:\/\/your.api.com\/.*/, handler: 'networkFirst' } ] networkFirst

  41. runtimeCaching: [ { urlPattern: /^https:\/\/your.api.com\/.*/, handler: 'networkFirst' } ] module.exports

    = { globDirectory: 'dist/', globPatterns: ['**/*.{js,png,svg,html,json}'], swDest: 'dist/service-worker.js', navigateFallback: '/index.html', runtimeCaching: [ { urlPattern: /^https:\/\/your.api.com\/.*/, handler: 'networkFirst' } ] }; runtimeCaching: [ { urlPattern: /^https:\/\/your.api.com\/.*/, handler: 'networkFirst' } ] networkFirst

  42. networkFirst

  43. networkFirst cacheFirst fastest cacheOnly networkOnly

  44. APP SHELL + DYNAMIC CACHING

  45. OFFLINE SUPPORT + FASTER REPEAT VISITS

  46. CAN I HAZ? Under development

  47. Service Worker H2 Push

  48. PRE-CACHE resources

  49. BUNDLES

  50. 4KB - 145KB Size of JS frameworks, gzipped Restuta/framework-sizes.md GIST

  51. CODE SPLITTING

  52. export const routes: Routes = [ { path: '', redirectTo:

    'main', pathMatch: 'full' }, { path: 'main', component: MainComponent }, { path: 'details', loadChildren: 'details/details.module#DetailsModule' } ]; export const routes: Routes = [ { path: '', redirectTo: 'main', pathMatch: 'full' }, { path: 'main', component: MainComponent }, { path: 'details', loadChildren: 'details/details.module#DetailsModule' } ]; loadChildren: 'details/details.module#DetailsModule'

  53. import Loadable from 'react-loadable'; import Loading from './loading.component'; const LoadableComponent

    = Loadable({ loader: () => import('./details.component'), loading: Loading, });
  54. None

  55. WEBPACK BUNDLE ANALYZER

  56. bundlesize

  57. LAZY LOAD remaining routes

  58. PRPL PUSH critical resources RENDER initial route PRE-CACHE resources LAZY

    LOAD remaining routes

  59. Native Progressive Web

  60. TIME TO INTERACTIVE

  61. None

  62. ADDITIONAL developers.google.com/web/tools/lighthouse Lighthouse webpagetest.org/easy WebPageTest ebidel/lighthouse-ci hnpwa.com HNPWA

  63. @hdjirdeh