google’s prpl web development pattern
Post on 15-Apr-2017
1.571 Views
Preview:
TRANSCRIPT
래블업lablup.com
Google I/O 2016 Extended Seoul
§§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
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.
§§
§
§
§§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§§
§
§
§§
§§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
<link rel="import" href=”name-card.html">
§
§
§
§
this.createShadowRoot().appendChild(new_element);
§
§
document.registerElement('name-card', {prototype: prototype
});var ncElement = document.createElement('name-card');
§
§
<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>
§
§
§
§
this.createShadowRoot().appendChild(new_element);
http://webcomponents.org
§
§
§
§
§
§
§
§
§
§
§
§
§
§ <script src=“webcomponents-lite.min.js"></script>
§
http://polymer-project.org
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
단점을너도알고나도알면
고쳐야지!그래서나온게오늘의주인공인
§
§ components critical for initial route
§ the initial route ASAP
§ components for remaining routes
§ and create next routes on-demand
§
§
§
§
§
§
§
§
§
*Image by zimbio.com
*Image by co.milesplit.com
3.나머지컴포넌트들을미리캐싱
3.나머지컴포넌트들을미리캐싱
딥링크 접근으로빠른 로딩
사용자 액션에빠른 반응
앱과 유사한사용자 경험
오프라인 /나쁜 네트워크에서안정적
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
§
wcReady = document.createEvent("HTMLEvents");wcReady.initEvent("WebComponentsReady", true, true);wcReady.eventName = "WebComponentsReady";window.dispatchEvent(wcReady);
§
§
§
§
§
§
§
§
§
§
§
§
§
top related