Google Polymer in Action
•
0 j'aime•329 vues
2018년 2월 24일 KCD2018에서 Google Polymer에 대하여 발표한 내용입니다. 이 발표에서는 웹, 하이브리드 앱 및 프로그레시브 웹 앱 개발을 위한 구글의 웹컴포넌트 라이브러리인 폴리머를 쉽고 재미있게 다룹니다. 웹컴포넌트, 폴리머에 대한 소개와 함께 폴리머 2.0의 특징을 소개합니다. 또한 modulizer, TypeScript, yarn, webpack의 도입을 추진하고 있는 폴리머 3.0 알파 버전의 주요변화를 알아봅니다.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Google Polymer in Action
Similaire à Google Polymer in Action (20)
Plus de Jeongkyu Shin
Plus de Jeongkyu Shin (20)
Dernier
Dernier (20)
Google Polymer in Action
- 1. /
- 3. / C 3 :
- 5. • / A C • G 6/ A C 7766/ A C • 6 • 6 • G A • 6A • .6 C • A • 6 B • G 6A • 6 • 6 BB6 G • 6 6 CB • • /6AE 6 A 6A • 6 G 6 CB
- 8. • 5 ( 5,r 0/ j mfV 0/ ADCEG ü lb 0/p v C 10 ü 0/r dces S 10p v )H GCA A G ü c n a 10r C G L w ur V v AD G ü p V Wwt v EI 5CE E ü d k h M S o T si c n r O
- 9. ) ( • . - . . )() i M tn yN f w rf o • / Bya D I N c bC • . e l i uw h rf • (( ( / sW v U dS
- 10. • ) ) i EPv e O S • W GS t i . . 2 i s p e • . An m J I i e a i rc n L eyI bl
- 11. • > / < > - > v • - = / / qd r k h P s lJ / / • / > v I m l J c / / > < i > / h F H f n • - > > C<> / <> <> o uJ eMb t S aRp
- 12. • WD Ic R e • ( ) /) R da Bi MVb S T • / C S c / g
- 13. ,
- 15. !
- 18. • u . to i 6 : p • M S o i L p • ? : 3 3 3 Po i lL eu • C h ! s L . 6 : 6 ) ( ? : 3 3 . 6 : ) 0: 3 y ü En 5 : 3 m ü ( T 6 : Hr g g <link rel="import" href=”name-card.html">
- 19. ) ( • 77 w m 7 8 o S 77 V i • 1 t x gF oh a l h 2: 6 1 r 2: 6 G 6 TmR f n • )M e t V u M 7 2: 6 (M 2: 6 e t Voh , 78 D 0 e t V Q d O u this.createShadowRoot().appendChild(new_element);
- 20. • , ) D > T MO L a - -5 - < 5 5 H L a document.registerElement('name-card', { prototype: prototype }); var ncElement = document.createElement('name-card');
- 21. • • <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>
- 23. . // . / /. /. .
- 24. • H. , C T a SM P O W L • 1 C L M O D C C , AC / 5 , E , C C .A E C D C E C , D E C CAD C A C AA A
- 25. • - - :
- 27. .. / - - . -
- 28. • /.) fh b /. C D D D 2 5 H +0/ )J( ) • D M1 W d j ea D D • c OTi fh P +0/ DL S b • /. D 5 5 52 C
- 29. .
- 31. • - ) ( ) b • ( + e • ( ) + . c • f g T c ij T P • d a
- 32. • eoi n r cl • ( ) d t y p C W • . d j n l sf • u P rm nv ti -. n t b ! u d
- 33. • . : t :D ? ü : E s n ? M c zL l ü ? ? 12 v J C ? c 3.- s R :D ? o :D ? : s O l rt :D ? s • py S S m Te P ü c X iL Xuc a H V
- 34. • O x bw O 0(M WS 6 DD D 9 E V 0 .- 1 ü 2 6 ED D r O x e ü r w i d l L a m h • j yf X t ü ) P WS bw x S n t ü 6 - gs ü mp c oy O ~gs
- 36. • + AA: + ) (b cd W ti! 0 12e E 1 :6 P sMg la p • + +66 4 : 4 T o L S r l • 0 4 e k cr le n R
- 37. • • Push: 처음엔 엄청 중요한 컴포넌트들만 푸시하고 • Render: 최대한 빨리 첫 루트를 그려서 보여준 다음 • Pre-fetch: 나머지 루트들은 미리 캐싱하고 • Load: 요청에 따라 로딩하고 다음 루트를 만들어 보여준다
- 38. • - 2-2 지원 플랫폼 - - 지원 웹서버 - / - - 지원 웹 브라우저 *Image by zimbio.com
- 39. / ...
- 40. • L • H P / • 2 R 2 P •
- 41. <!doctype html> <html lang="en" itemscope itemtype="http://schema.org/SoftwareSourceCode"> <head> <meta charset="utf-8"> <title>Backend.AI: Make AI Accessible</title> <script src="polymer/webcomponentsjs/webcomponents-loader.js"></script> <link rel="import" href="index.imports.html"> <style> body { margin: 0; background-color: #2D323A; } </style> </head> <body unresolved> <backend-ai-page></backend-ai-page> </body> </html>
- 45. / 1 / 0/ 32 8
- 46. • k T ( P )s o~ • p d 8 H ü ( B > Xv 8 H z 2 T ü nm 2 dM ü 1 ( )e r r ü - 0 Sy lw J .5 52 t cX ü 1 >8 5 b ai dM ü , 5 > u dM L
- 48. / C 3 :
- 49. / , LCI : I:GH CB @: G: CBH H CBH H @ @I CA ! HH G KKK @ @I HH G KKK :B HH G @CI :B HH G KKK C :CBK: CA HH G H I CA @ @I . @I ,B :B , :B , @CI C : B : : : H I : CG HC L