Covers Google's client-centric web development strategy and PRPL web development pattern

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

2. §
§
§
§
§
§
§
§
§
§

4. §
§
§
§
§
§
§

5. §
§
§
§
§
§
§

6. 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.

7. §
§
§
§
§
§
§
§

8. §
§
§
§
§
§
§
§
§
§
§

9. §
§
§
§
§
§
§
§
§
§

10. §
§
§
§
§
§
§
§

11. §
§
§
§
§
§
§
§

12. §
§
§
§
§
§
§
§
§
§

13. §
§
§
§
§
§
§

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

23. §
§
§
§
this.createShadowRoot().appendChild(new_element);

24. §
§
document.registerElement('name-card', {
prototype: prototype
});
var ncElement = document.createElement('name-card');

25. §
§
<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>

27. §
§
§
§
this.createShadowRoot().appendChild(new_element);

28. http://webcomponents.org

29. §
§
§
§
§
§
§
§

30. §
§
§
§

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

32. http://polymer-project.org

33. §
§
§
§
§
§
§
§

34. §
§
§
§
§
§
§

35. §
§
§
§
§
§
§
§
§

36. §
§
§
§
§
§
§

37. 단점을 너도 알고 나도 알면
고쳐야지!
그래서 나온게 오늘의 주인공인

39. §
§ components critical for initial route
§ the initial route ASAP
§ components for remaining routes
§ and create next routes on-demand

40. §
§
§
§
§

41. §
§
§
§
*Image by zimbio.com

42. *Image by co.milesplit.com

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

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

144. 딥링크 접근으로 빠른 로딩
사용자 액션에 빠른 반응
앱과 유사한 사용자 경험
오프라인 /나쁜 네트워크에서 안정적

147. §
§
§
§

169. §
§
§
§
§
§
§
§
§
§

170. §
§
§
§
§
§
§
§

171. §
§
§
§
§
§
§
§

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

173. §
§
§
§
§
§
§
§
§

174. §
§
§
§