Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Google Polymer in Action

221 views

Published on

2018년 2월 24일 KCD2018에서 Google Polymer에 대하여 발표한 내용입니다. 이 발표에서는 웹, 하이브리드 앱 및 프로그레시브 웹 앱 개발을 위한 구글의 웹컴포넌트 라이브러리인 폴리머를 쉽고 재미있게 다룹니다. 웹컴포넌트, 폴리머에 대한 소개와 함께 폴리머 2.0의 특징을 소개합니다. 또한 modulizer, TypeScript, yarn, webpack의 도입을 추진하고 있는 폴리머 3.0 알파 버전의 주요변화를 알아봅니다.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Google Polymer in Action

  1. 1. /
  2. 2. / C 3 :
  3. 3. • / 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
  4. 4. • 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
  5. 5. ) ( • . - . . )() i M tn yN f w rf o • / Bya D I N c bC • . e l i uw h rf • (( ( / sW v U dS
  6. 6. • ) ) 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
  7. 7. • > / < > - > 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
  8. 8. • WD Ic R e • ( ) /) R da Bi MVb S T • / C S c / g
  9. 9. ,
  10. 10. !
  11. 11. • 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">
  12. 12. ) ( • 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);
  13. 13. • , ) D > T MO L a - -5 - < 5 5 H L a document.registerElement('name-card', { prototype: prototype }); var ncElement = document.createElement('name-card');
  14. 14. • • <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>
  15. 15. . // . / /. /. .
  16. 16. • 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
  17. 17. • - - :
  18. 18. .. / - - . -
  19. 19. • /.) 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
  20. 20. .
  21. 21. • - ) ( ) b • ( + e • ( ) + . c • f g T c ij T P • d a
  22. 22. • 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
  23. 23. • . : 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
  24. 24. • 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
  25. 25. • + 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
  26. 26. • • Push: 처음엔 엄청 중요한 컴포넌트들만 푸시하고 • Render: 최대한 빨리 첫 루트를 그려서 보여준 다음 • Pre-fetch: 나머지 루트들은 미리 캐싱하고 • Load: 요청에 따라 로딩하고 다음 루트를 만들어 보여준다
  27. 27. • - 2-2 지원 플랫폼 - - 지원 웹서버 - / - - 지원 웹 브라우저 *Image by zimbio.com
  28. 28. / ...
  29. 29. • L • H P / • 2 R 2 P •
  30. 30. <!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>
  31. 31. <body unresolved> <backend-ai-page></backend-ai-page> </body>
  32. 32. / 1 / 0/ 32 8
  33. 33. • 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
  34. 34. / C 3 :
  35. 35. / , 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

×