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.

a pattern for PWA, PRPL

5,862 views

Published on

this slide is for meetup of japan web technical community. the report about PRPL which is one of the practical next developping and deploying pattern for PWA.

Published in: Technology

a pattern for PWA, PRPL

  1. 1. A PATTERN FOR PWA PRPL J U L Y 2 0 T H , 2 0 1 6 第 6 6 回 H T M L 5 と か 勉 強 会
  2. 2. INTRODUCE TO MYSELF • Name – Kensaku Komatsu – at NTT Communications in Palo Alto office. • Position – Technical manager of SkyWay – Web Application Evangelist of NTT communications • Social – Google Developer Expert (HTML5) – Chairman of WebRTC conference in Japan
  3. 3. MAIN IDEA FOR TODAY
  4. 4. SOURCE
  5. 5. PRPL?
  6. 6. AWESOME W/ 4 CUTTING EDGE WEB TECH.
  7. 7. CURRENT BEST PRACTICE FOR SPA
  8. 8. ISSUE FOR THIS PRACTICE
  9. 9. WHY BUNDLE? … DUE TO HTTP/1.1 RESTRICTION
  10. 10. HOW DOES NEW TECH ADDRESS?
  11. 11. 1. CUSTOM ELEMENT
  12. 12. 1. CUSTOM ELEMENT
  13. 13. 2. HTML IMPORTS
  14. 14. 2. HTML IMPORTS
  15. 15. 2. HTML IMPORTS Note :: Server can manage HTML Imports Dependency Graph.
  16. 16. 3. HTTP/2
  17. 17. 3. HTTP/2
  18. 18. 3. HTTP/2
  19. 19. 3. HTTP/2
  20. 20. 3. HTTP/2 HTML Imports Dependency Graph
  21. 21. 4. SERVICE WORKER
  22. 22. 4. SERVICE WORKER
  23. 23. PRPL
  24. 24. PRPL :: PUSH
  25. 25. PRPL :: RENDER
  26. 26. PRPL :: PRE-CACHE
  27. 27. PRPL :: LAZY LOAD
  28. 28. PRPL :: SAMPLE APP
  29. 29. PRPL :: TOOL https://www.polymer-project.org/1.0/toolbox/
  30. 30. NOW, READY FOR PPRL? • IMPO … No – Generic Web servers and XaaS does not support HTTP/2 push, yet – Using bower is bothersome than npm/webpack – HTTP2/ push disables the efficiency of cache
  31. 31. THE IDEA OF PRPL IS GOOD? • IMPS … Yes!! – Bundle is not BEST practice – Current practice and tool should apply the idea of PRPL – Need improvement of tools for web workflow
  32. 32. SUMMARY • Current Issue – The practice of bundle increases initial load time • Use awesome web technologies – Custom Element, HTML Imports, HTTP/2, Service Worker • PRPL – Push, Render, Pre-cache, Lazy-load • Expectation to PRPL and PWA – Need improvement of tools for web workflow
  33. 33. THANKS! @komasshu /kensaku.komatsu /in/kensaku-komatsu-6528333b Slideshare: /KensakuKOMATSU /eastandwest

×