a pattern for PWA, PRPL
Download as PPTX, PDF12 likes6,667 views
The document presents a talk by Kensaku Komatsu on the PRPL pattern for Progressive Web Apps (PWAs), highlighting current best practices and tools. It discusses issues with traditional bundling methods that increase load times and suggests newer web technologies such as custom elements and HTTP/2. The talk concludes with an emphasis on the need for improved tools to enhance web workflows.
a pattern for PWA, PRPL
- 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. 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. MAIN IDEA FOR TODAY
- 4. SOURCE
- 5. PRPL?
- 6. AWESOME W/ 4 CUTTING EDGE WEB TECH.
- 7. CURRENT BEST PRACTICE FOR SPA
- 8. ISSUE FOR THIS PRACTICE
- 9. WHY BUNDLE? … DUE TO HTTP/1.1 RESTRICTION
- 10. HOW DOES NEW TECH ADDRESS?
- 13. 2. HTML IMPORTS
- 14. 2. HTML IMPORTS
- 15. 2. HTML IMPORTS Note :: Server can manage HTML Imports Dependency Graph.
- 16. 3. HTTP/2
- 17. 3. HTTP/2
- 18. 3. HTTP/2
- 19. 3. HTTP/2
- 20. 3. HTTP/2 HTML Imports Dependency Graph
- 23. PRPL
- 24. PRPL :: PUSH
- 25. PRPL :: RENDER
- 27. PRPL :: LAZY LOAD
- 28. PRPL :: SAMPLE APP
- 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. 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. 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