A P A T T E R N F O R P W A

PRPL

J U L Y 2 0 T H , 2 0 1 6 第 6 6回H T M L 5とか勉強会

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

MAIN IDEA FOR TODAY

SOURCE

PRPL?

AWESOME W/4 CUTTING EDGE WEB TECH.

CURRENT BEST PRACTICE FOR SPA

ISSUE FOR THIS PRACTICE

WHY BUNDLE? … DUE TO HTTP/1.1 RESTRICTION

HOW DOES NEW TECH ADDRESS?

1. CUSTOM ELEMENT

1. CUSTOM ELEMENT

2. HTML IMPORTS

2. HTML IMPORTS

2. HTML IMPORTSNote ::

Server can manage HTML

Imports Dependency

Graph.

3. HTTP/2

3. HTTP/2

3. HTTP/2

3. HTTP/2

3. HTTP/2

HTML ImportsDependency Graph

4. SERVICE WORKER

4. SERVICE WORKER

PRPL

PRPL :: PUSH

PRPL :: RENDER

PRPL :: PRE-CACHE

PRPL :: LAZY LOAD

PRPL :: SAMPLE APP

PRPL :: TOOL

https://www.polymer-project.org/1.0/toolbox/

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

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

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

THANKS!

@komasshu

/kensaku.komatsu

/in/kensaku-komatsu-6528333bSlideshare: /KensakuKOMATSU

/eastandwest