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.

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?

11. 1. CUSTOM ELEMENT

12. 1. CUSTOM ELEMENT

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

21. 4. SERVICE WORKER

22. 4. SERVICE WORKER

23. PRPL

24. PRPL :: PUSH

25. PRPL :: RENDER

26. PRPL :: PRE-CACHE

27. PRPL :: LAZY LOAD

28. PRPL :: SAMPLE APP

29. PRPL :: TOOL
https://www.polymer-project.org/1.0/toolbox/

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

33. THANKS!
@komasshu
/kensaku.komatsu
/in/kensaku-komatsu-6528333b
Slideshare: /KensakuKOMATSU
/eastandwest