176
래블업 lablup.com Google I/O 2016 Extended Seoul

Google’s PRPL Web development pattern

Embed Size (px)

Citation preview

Page 1: Google’s PRPL Web development pattern

래블업lablup.com

Google I/O 2016 Extended Seoul

Page 2: Google’s PRPL Web development pattern

§§

§

§

§

§

§

§

§

§

Page 3: Google’s PRPL Web development pattern
Page 4: Google’s PRPL Web development pattern

§

§

§

§

§

§

§

Page 5: Google’s PRPL Web development pattern

§

§

§

§

§

§

§

Page 6: Google’s PRPL Web development pattern

More recently, the goals of the W3C and the WHATWG on the HTML front have diverged a bit as well. The WHATWG effort is focused on developing the canonical description of HTML and related technologies, meaning fixing bugs as we find them adding new features as they become necessary and viable,

and generally tracking implementations.

The W3C effort, meanwhile, is now focused on creating a snapshot developed according to the venerable W3C process. This led to the chairs of

the W3C HTML working group and myself deciding to split the work into two, with a different person responsible for editing the W3C HTML5, canvas, and

microdata specifications than is editing the WHATWG specification.

Page 7: Google’s PRPL Web development pattern

§§

§

§

§§

§

§

Page 8: Google’s PRPL Web development pattern

§

§

§

§

§

§

§

§

§

§

§

Page 9: Google’s PRPL Web development pattern

§

§

§

§

§

§

§

§

§

§

Page 10: Google’s PRPL Web development pattern

§§

§

§

§§

§§

Page 11: Google’s PRPL Web development pattern

§

§

§

§

§

§

§

§

Page 12: Google’s PRPL Web development pattern

§

§

§

§

§

§

§

§

§

§

Page 13: Google’s PRPL Web development pattern

§

§

§

§

§

§

§

Page 14: Google’s PRPL Web development pattern
Page 15: Google’s PRPL Web development pattern
Page 16: Google’s PRPL Web development pattern
Page 17: Google’s PRPL Web development pattern
Page 18: Google’s PRPL Web development pattern
Page 19: Google’s PRPL Web development pattern
Page 20: Google’s PRPL Web development pattern
Page 21: Google’s PRPL Web development pattern
Page 22: Google’s PRPL Web development pattern

§

§

<link rel="import" href=”name-card.html">

Page 23: Google’s PRPL Web development pattern

§

§

§

§

this.createShadowRoot().appendChild(new_element);

Page 24: Google’s PRPL Web development pattern

§

§

document.registerElement('name-card', {prototype: prototype

});var ncElement = document.createElement('name-card');

Page 25: Google’s PRPL Web development pattern

§

§

<style>.card {

width : 200px;height: 35px; border-radius: 3px;

}</style><template id="namecard-root">

<div class="card"><h2>Name : <span>{{ name }}</span></h2>

</div></template>

Page 26: Google’s PRPL Web development pattern
Page 27: Google’s PRPL Web development pattern

§

§

§

§

this.createShadowRoot().appendChild(new_element);

Page 28: Google’s PRPL Web development pattern

http://webcomponents.org

Page 29: Google’s PRPL Web development pattern

§

§

§

§

§

§

§

§

Page 30: Google’s PRPL Web development pattern

§

§

§

§

Page 31: Google’s PRPL Web development pattern

§

§ <script src=“webcomponents-lite.min.js"></script>

§

Page 32: Google’s PRPL Web development pattern

http://polymer-project.org

Page 33: Google’s PRPL Web development pattern

§

§

§

§

§

§

§

§

Page 34: Google’s PRPL Web development pattern

§

§

§

§

§

§

§

Page 35: Google’s PRPL Web development pattern

§

§

§

§

§

§

§

§

§

Page 36: Google’s PRPL Web development pattern

§

§

§

§

§

§

§

Page 37: Google’s PRPL Web development pattern

단점을너도알고나도알면

고쳐야지!그래서나온게오늘의주인공인

Page 38: Google’s PRPL Web development pattern
Page 39: Google’s PRPL Web development pattern

§

§ components critical for initial route

§ the initial route ASAP

§ components for remaining routes

§ and create next routes on-demand

Page 40: Google’s PRPL Web development pattern

§

§

§

§

§

Page 41: Google’s PRPL Web development pattern

§

§

§

§

*Image by zimbio.com

Page 42: Google’s PRPL Web development pattern

*Image by co.milesplit.com

Page 43: Google’s PRPL Web development pattern
Page 44: Google’s PRPL Web development pattern
Page 45: Google’s PRPL Web development pattern
Page 46: Google’s PRPL Web development pattern
Page 47: Google’s PRPL Web development pattern
Page 48: Google’s PRPL Web development pattern
Page 49: Google’s PRPL Web development pattern
Page 50: Google’s PRPL Web development pattern
Page 51: Google’s PRPL Web development pattern
Page 52: Google’s PRPL Web development pattern
Page 53: Google’s PRPL Web development pattern
Page 54: Google’s PRPL Web development pattern
Page 55: Google’s PRPL Web development pattern
Page 56: Google’s PRPL Web development pattern
Page 57: Google’s PRPL Web development pattern
Page 58: Google’s PRPL Web development pattern
Page 59: Google’s PRPL Web development pattern
Page 60: Google’s PRPL Web development pattern
Page 61: Google’s PRPL Web development pattern
Page 62: Google’s PRPL Web development pattern
Page 63: Google’s PRPL Web development pattern
Page 64: Google’s PRPL Web development pattern
Page 65: Google’s PRPL Web development pattern
Page 66: Google’s PRPL Web development pattern
Page 67: Google’s PRPL Web development pattern
Page 68: Google’s PRPL Web development pattern
Page 69: Google’s PRPL Web development pattern
Page 70: Google’s PRPL Web development pattern
Page 71: Google’s PRPL Web development pattern
Page 72: Google’s PRPL Web development pattern
Page 73: Google’s PRPL Web development pattern
Page 74: Google’s PRPL Web development pattern
Page 75: Google’s PRPL Web development pattern
Page 76: Google’s PRPL Web development pattern
Page 77: Google’s PRPL Web development pattern
Page 78: Google’s PRPL Web development pattern
Page 79: Google’s PRPL Web development pattern
Page 80: Google’s PRPL Web development pattern
Page 81: Google’s PRPL Web development pattern
Page 82: Google’s PRPL Web development pattern
Page 83: Google’s PRPL Web development pattern
Page 84: Google’s PRPL Web development pattern
Page 85: Google’s PRPL Web development pattern
Page 86: Google’s PRPL Web development pattern
Page 87: Google’s PRPL Web development pattern
Page 88: Google’s PRPL Web development pattern
Page 89: Google’s PRPL Web development pattern
Page 90: Google’s PRPL Web development pattern
Page 91: Google’s PRPL Web development pattern
Page 92: Google’s PRPL Web development pattern
Page 93: Google’s PRPL Web development pattern
Page 94: Google’s PRPL Web development pattern
Page 95: Google’s PRPL Web development pattern
Page 96: Google’s PRPL Web development pattern
Page 97: Google’s PRPL Web development pattern
Page 98: Google’s PRPL Web development pattern
Page 99: Google’s PRPL Web development pattern
Page 100: Google’s PRPL Web development pattern
Page 101: Google’s PRPL Web development pattern
Page 102: Google’s PRPL Web development pattern
Page 103: Google’s PRPL Web development pattern
Page 104: Google’s PRPL Web development pattern
Page 105: Google’s PRPL Web development pattern
Page 106: Google’s PRPL Web development pattern
Page 107: Google’s PRPL Web development pattern
Page 108: Google’s PRPL Web development pattern
Page 109: Google’s PRPL Web development pattern
Page 110: Google’s PRPL Web development pattern
Page 111: Google’s PRPL Web development pattern
Page 112: Google’s PRPL Web development pattern
Page 113: Google’s PRPL Web development pattern
Page 114: Google’s PRPL Web development pattern
Page 115: Google’s PRPL Web development pattern
Page 116: Google’s PRPL Web development pattern
Page 117: Google’s PRPL Web development pattern
Page 118: Google’s PRPL Web development pattern
Page 119: Google’s PRPL Web development pattern
Page 120: Google’s PRPL Web development pattern
Page 121: Google’s PRPL Web development pattern
Page 122: Google’s PRPL Web development pattern
Page 123: Google’s PRPL Web development pattern
Page 124: Google’s PRPL Web development pattern
Page 125: Google’s PRPL Web development pattern
Page 126: Google’s PRPL Web development pattern
Page 127: Google’s PRPL Web development pattern
Page 128: Google’s PRPL Web development pattern
Page 129: Google’s PRPL Web development pattern
Page 130: Google’s PRPL Web development pattern
Page 131: Google’s PRPL Web development pattern
Page 132: Google’s PRPL Web development pattern
Page 133: Google’s PRPL Web development pattern
Page 134: Google’s PRPL Web development pattern
Page 135: Google’s PRPL Web development pattern

3.나머지컴포넌트들을미리캐싱

Page 136: Google’s PRPL Web development pattern

3.나머지컴포넌트들을미리캐싱

Page 137: Google’s PRPL Web development pattern
Page 138: Google’s PRPL Web development pattern
Page 139: Google’s PRPL Web development pattern
Page 140: Google’s PRPL Web development pattern
Page 141: Google’s PRPL Web development pattern
Page 142: Google’s PRPL Web development pattern
Page 143: Google’s PRPL Web development pattern
Page 144: Google’s PRPL Web development pattern

딥링크 접근으로빠른 로딩

사용자 액션에빠른 반응

앱과 유사한사용자 경험

오프라인 /나쁜 네트워크에서안정적

Page 145: Google’s PRPL Web development pattern
Page 146: Google’s PRPL Web development pattern
Page 147: Google’s PRPL Web development pattern

§

§

§

§

Page 148: Google’s PRPL Web development pattern
Page 149: Google’s PRPL Web development pattern
Page 150: Google’s PRPL Web development pattern
Page 151: Google’s PRPL Web development pattern
Page 152: Google’s PRPL Web development pattern
Page 153: Google’s PRPL Web development pattern
Page 154: Google’s PRPL Web development pattern
Page 155: Google’s PRPL Web development pattern
Page 156: Google’s PRPL Web development pattern
Page 157: Google’s PRPL Web development pattern
Page 158: Google’s PRPL Web development pattern
Page 159: Google’s PRPL Web development pattern
Page 160: Google’s PRPL Web development pattern
Page 161: Google’s PRPL Web development pattern
Page 162: Google’s PRPL Web development pattern
Page 163: Google’s PRPL Web development pattern
Page 164: Google’s PRPL Web development pattern
Page 165: Google’s PRPL Web development pattern
Page 166: Google’s PRPL Web development pattern
Page 167: Google’s PRPL Web development pattern
Page 168: Google’s PRPL Web development pattern
Page 169: Google’s PRPL Web development pattern

§

§

§

§

§

§

§

§

§

§

Page 170: Google’s PRPL Web development pattern

§

§

§

§

§

§

§

§

Page 171: Google’s PRPL Web development pattern

§

§

§

§

§

§

§

§

Page 172: Google’s PRPL Web development pattern

§

§

§

wcReady = document.createEvent("HTMLEvents");wcReady.initEvent("WebComponentsReady", true, true);wcReady.eventName = "WebComponentsReady";window.dispatchEvent(wcReady);

Page 173: Google’s PRPL Web development pattern

§

§

§

§

§

§

§

§

§

Page 174: Google’s PRPL Web development pattern

§

§

§

§

Page 175: Google’s PRPL Web development pattern
Page 176: Google’s PRPL Web development pattern