pnolymer
liL§&'>'C0) Polymer
~Polymer‘
Web Componentso’C‘IiI ? ~
a*s15@GDGfi%r£
Self-introduction
-GDG? ?T%BX5l“J7
(2!-<¥l2iciJi%‘%j: 'C°$5I, EiL, 'C$? ‘)
- GWT75“!13‘§’ (Java Script75§D/ fit‘)
-Twitte...
Why Polymer?
'97‘ "7I7“%%%75“
—%$t£7:twruiLVr7:; L¥£1$i
Why Polymer?
V
FumiYamazaki
~ . 5? V 11 ix " SCI‘-ixiiff-$3 M014
' (Cc: "C A’ (1 Pol mert Webcom onents£C'DL'C A7635...
Technical problems
of Traditional Web Development
? iE5|E:
JavaScript +CSS0)F‘nElLEF'E
-2‘E*! §5IX: I—7°7ffi? ¥?£ L,7f; ...
What is Web Components? (1 )
a Custom Elements
HTML nee 0)5¢’7“EiE7Jnt~= é_%
a HTML Templates &Shadow DOM
DOM“J'J—0)3J...
What is Web Components? (2)
HTML0)7—’77‘y7°7ffi‘7vyfiF'J‘d’<79
L1’)V»| >%>1J7°-til/ ll:75“fii<7o
fi$| lH%'| ‘$75‘T%7L
$| J...
Shadow DOM
mDOM“J')—0)%l$: 'L 7'J7°‘b)l/ ll:
var shadow = document. querySe| ector('#name'). createShadowRoot();
var t...
Custom Elements
~Define New Tag Name~
<JavaScript>
var myTag = document. registerElement(‘hello-tag‘)3
<HTML>
<e1ement...
Custom Elements
~ Inherit Existing Tag~
var XFooExtended = document. registerE| ement('x-foo-extended‘, {
prototype: X...
HTML Import
HTMLO)E%. «7+iA5'+
<Iink>'3¢’7“€tIJFfi
- re| E'| ‘$0)l‘lL? §'E(import)
- HTMLEE; *L5’+i7_$1;*%>l‘3r“fi’= H5’+*&...
Process of Web Components
1. 5s‘fi7‘:72CE| ement('3¢7“)€'lfiE‘Z
Shadow DOM&HTML Templatesérlfilafi
(C0) '= |="C‘CSSt HTML, ...
Polymer’s Element
<po1ymer-element name= "he11o-tag">
<temp1ate>
<div> Hello </ div>
</ temp1ate>
< sc ript > %t§>€‘Jv...
Polymer’s Shadow DOM
<temp| ate>0) Eli‘ Eli
ShadowDOM c‘: L,’Cl‘£’z1’>1’L%>
(this. createShadowRoot();7ZiE0)EEiE75§7F¥)
...
What is Polymer?
aJavaScript U|7l/ —1.'7—7
mWeb Components*&= E5l“‘/7‘5"7*i“l>, l’2“’l~'C~‘°E»
*| lFH'C‘%Z9clZ5lZl,7": P...
Polymer > Web Components
$7?+‘%aWeb components%l“e%'C‘l2l:72,tL
OHTML Template UDTIUE
OData Binding(Observers)
OGesture ...
Architecture Polymer
Applications Pica
Polymer Ul
Elements
Elements
_ Polymer
:1) Elements
E
Z‘ .
C9 po| ymer. Js
p| at...
Polyfill compatibility with Browser
Polyflll
Chrome . . Mobile
Android Chrome Canary Firefox IE 10~ Salari 6* safari
Te...
How to install Polymer (1)
9": i.—l*'J7)lx0)
STARTER PROJECTO)’5‘°"7‘JE| —l‘°7fl)‘7.l'XX)‘
U‘, polymer
V) tttttttttt...
How to install Polymer (2)
7:‘; ‘£li3'J
mBower€—lE5
/ <v’7—~)7?~—~‘/ “=v—<Twitterl<i§%>
Maven‘ gem‘ cpan 0)J: ’37Z£°b0)o
...
Polymer files
/ component5'°»rl/7 l"}7fl)1 '3
%0) '= l3'§'75“Po| ymer0)$fi'3
8 core-component-page
I NodeBind
8 observe...
Need Web server
JavaScript UI 7|/ —_/ .'7—7
—> 75’f7‘/ l~*J"(l~“7‘: °l‘l"C‘§}J< ?
F7174)“-/ ‘75“tlZ§
Web*7“~/ i‘—l:7v7...
How to call Polymer
<link re| ="import" href= "components/ polymer/ polymer. htm| ">
up/2/st/2“arim l, tPoiyero)5«r7‘5U ...
Compare with Bootstrap
< Bootstrap0)i= %1%. ‘ >
<link href= ".. l.. ldistlcsslbootstrap. min. css" rel= "stylesheet">
<l...
Core Element
core-header-panel
core-toolbar
core-drawer-panel
core-scaffold
core-icon
SVG’*‘—Z'C°7JX’2'¢Lx7’f: l‘/ '1"-J...
Material design with Polymer
Google | O2014’C°%aTz'5l’L7‘: lMateria| Designl
'¥fiLl. Android0)Ul7l/ —.la. '7—7
'fi—fi0)5%'...
Material design with Polymer
Material controls
ékit/ °—~>‘
https: //www. polymer-pro]ect. org/ docs/ elements/ material. ...
Polymer designer tool
Po| ymerU)EE7¥I I/24> IJETIJ FE L7‘:
¥lT7‘:73tIl/24> l~*a"5"‘*J‘Vf‘/ ?’? oC.1_'7fl“’C‘= ‘e? %>
0 ...
Custom Elements Gallery
Web Components7J“c‘_' / ut / i/1§lE'a= fi'é5l’L'CL$? '
Custom Elemen
I i ll 1' ' Ill ‘i
'iiip~iie...
My first Impression
-jnxsczsst/7‘ --- JSPc‘:75JSF’C‘ldZJ: < E l: ?’%a (l,7‘: )
-: i‘/ rl-i’—»‘r~>l~4l:0)E&t+75t‘firw= _
<...
DJJ-; s %J[l: P%a«) E-—C$lJT:7b§s
3>'~7éi? $AJ. .. Polymerlilfi7§il“C°"§'75 ‘?
of 31

Polymer入門

GDG DevFest Kyoto 2014 (2014/11/22)資料。
Published on: Mar 4, 2016
Published in: Technology      
Source: www.slideshare.net


Transcripts - Polymer入門

  • 1. pnolymer liL§&'>'C0) Polymer ~Polymer‘ Web Componentso’C‘IiI ? ~ a*s15@GDGfi%r£
  • 2. Self-introduction -GDG? ?T%BX5l“J7 (2!-<¥l2iciJi%‘%j: 'C°$5I, EiL, 'C$? ‘) - GWT75“!13‘§’ (Java Script75§D/ fit‘) -Twitterzoyouji (25-’cFo<77rI3—L, $fi/ u) - Web: http: //wvwv. ochi-| ab. org - BLOG: http: //ochi-lab. b|ogspot. jp ? s?E§z“liJava. ’:75C#75£o’: °c‘: FEJZ1’L'CL$? ’ (rb:7‘: ’*F: tiGwT'c-0)5"a%z=7f: *‘fifi3‘E)
  • 3. Why Polymer? '97‘ "7I7“%%%75“ —%$t£7:twruiLVr7:; L¥£1$i
  • 4. Why Polymer? V FumiYamazaki ~ . 5? V 11 ix " SCI‘-ixiiff-$3 M014 ' (Cc: "C A’ (1 Pol mert Webcom onents£C'DL'C A7635 < : amt TBEEJ 0 9 0 ct ma c t T‘. Google I/0 2014 Tafiméu 3 Inca: 5 5 > http: //goo. g|/ LOQR4n #io14 #io14jp Polymer <‘: . Web Components #io14 ; = 'I§§ Google IIO 0125333312‘ Seth Laddtt ‘A 1 . " . D - 7J‘? J t§F= ‘1L/ f:Ab‘l. ‘(. fi‘('Hl. '('f. :0)‘(‘”-Ii)‘. ?fi0)l§l§l3: ebcomgnents t Polym r‘(‘L; f:.
  • 5. Technical problems of Traditional Web Development ? iE5|E: JavaScript +CSS0)F‘nElLEF'E -2‘E*! §5IX: I—7°7ffi? ¥?£ L,7f; L -JavaScript75“E EE| '§’§<7o -id K3 c| ass9El: I9E€~'d’Z9 ><l’@0): |—l3c‘:0)l§i3v'°:7fJ§$fl=5?ofilEJ‘E'| ‘$7ffi372%a Xfifillfili 75“1EL
  • 6. What is Web Components? (1 ) a Custom Elements HTML nee 0)5¢’7“EiE7Jnt~= é_% a HTML Templates &Shadow DOM DOM“J'J—0)3J$1"L —> HTMLO)/ ‘<: I—7°’l| : a HTML Imports Custom E| ements(1J7’5¢Lx’5¢7“) Eieie (Javascript’C‘¥§E~z”) : mB®Efi®%%F%é
  • 7. What is Web Components? (2) HTML0)7—’77‘y7°7ffi‘7vyfiF'J‘d’<79 L1’)V»| >%>1J7°-til/ ll:75“fii<7o fi$| lH%'| ‘$75‘T%7L $| JH%7‘: °H’7Z£I5~ ’l’§Jr‘E72tJavaScript0)§EiI_li75§7l: § Una U <€l¥i‘= l:-‘r“*7““»r‘/ > l: OL'CXiF)l/ filflifiilii
  • 8. Shadow DOM mDOM“J')—0)%l$: 'L 7'J7°‘b)l/ ll: var shadow = document. querySe| ector('#name'). createShadowRoot(); var template = document. querySe| ector('#nTemplate‘); var clone = document. importNode(temp| ate. content, true); shadow. appendChi| d(c| one); «: :a: v id "name": > </ d.v: :» <tempIate id "nTemplate"> <style> </ style> : :l: HTML(/ JED‘/ Ll? < / temp| ate>
  • 9. Custom Elements ~Define New Tag Name~ <JavaScript> var myTag = document. registerElement(‘hello-tag‘)3 <HTML> <e1ement name= "hello-tag"> <temp1ate> <div> Hello </ div> </ temp1ate> </ e1ement>
  • 10. Custom Elements ~ Inherit Existing Tag~ var XFooExtended = document. registerE| ement('x-foo-extended‘, { prototype: XFooProto, extends: 'x-foo'}); <e1ement name= "count-button" extends= "button"> <temp1ate> Increment: </ temp1ate> <script> }) </ script> </ e1ement>
  • 11. HTML Import HTMLO)E%. «7+iA5'+ <Iink>'3¢’7“€tIJFfi - re| E'| ‘$0)l‘lL? §'E(import) - HTMLEE; *L5’+i7_$1;*%>l‘3r“fi’= H5’+*&l‘El¢E <link rel= "impoPt" href= "my—custom—element. html"> "Fllii; |i0)Custom E| ementsEEfia”+iA$’é'%>
  • 12. Process of Web Components 1. 5s‘fi7‘:72CE| ement('3¢7“)€'lfiE‘Z Shadow DOM&HTML Templatesérlfilafi (C0) '= |="C‘CSSt HTML, JavaScript%_‘~%<) 2. inL, Lv3¢’7‘7ffi7€%eirLr: HTML77»r; I/5 HTML | mports%_"lE'3'CIII—l~°‘d’.7o
  • 13. Polymer’s Element <po1ymer-element name= "he11o-tag"> <temp1ate> <div> Hello </ div> </ temp1ate> < sc ript > %t§>€‘Jvl~“¥EE: :t~E%zd'%> Po1ymer(); </ script> </ polymer-e1ement>
  • 14. Polymer’s Shadow DOM <temp| ate>0) Eli‘ Eli ShadowDOM c‘: L,’Cl‘£’z1’>1’L%> (this. createShadowRoot();7ZiE0)EEiE75§7F¥) <polymer-element name= ”tag—name” constructor= "TagName" noscript> <template> <! —— shadow DOM here ——> </ template> </ po1ymer—element>
  • 15. What is Polymer? aJavaScript U|7l/ —1.'7—7 mWeb Components*&= E5l“‘/7‘5"7*i“l>, l’2“’l~'C~‘°E» *| lFH'C‘%Z9clZ5lZl,7": Po| yfu| |5’f7‘5'J0)1 90 —> p| atform. js l: .J: U%”eIfi mpo| ymer. js + %$EE| ements(Web Components) %0)llfl0)Po| yfu| |5’f7‘5'} -Mozilla x-tags (http: //x-tags. org/ ) -Bosonic (http: //bosonic. github. io/ )
  • 16. Polymer > Web Components $7?+‘%aWeb components%l“e%'C‘l2l:72,tL OHTML Template UDTIUE OData Binding(Observers) OGesture API (Pointer Event) 7'7Xli5‘7'%l’l5t’>"“J9"li5‘= i"él’l50)iELé’? $"7“"i: htt s: www. ol mer- ro'ect. or docs ol mer touch. htm| OWeb Animation CSS Animations/ Transitions t SVG Animations ‘E tllféu‘
  • 17. Architecture Polymer Applications Pica Polymer Ul Elements Elements _ Polymer :1) Elements E Z‘ . C9 po| ymer. Js p| atform. js C 2 1'3 *3 . 2 E E 5 E Foundation 3 an u. l D g 3 E E ; LU 5 O *5 8 E -a 2 -2 0' (D 3 0 HTML Imports MDV Web Animatior
  • 18. Polyfill compatibility with Browser Polyflll Chrome . . Mobile Android Chrome Canary Firefox IE 10~ Salari 6* safari Template Mutation0bserver [1] HTML impons Custom Elements [1] Shadow DOM Object. observe() Web Animations Platform Native implementation Chrome . . Mobile Android Chrome Canary Firefox IE 10' Safari 6' Safari Template Mutationobserver HTML Imports F F 36 Custom Elements Shadow DOM 35 [2] 0bject. observe() 35 F 35 F 36 Web Animations ' wt. ) Lynn. ) (A) u. Platform Legend Working lPasses Tests) F = flag Limited (Useab| e) Limited lUntisab| e) Not Supported Not Working (Fails Tests) _ Unknown NIA [1] obsemng rnutaliolrs I5 flaky on ! E [2] no test SJIIE https: llwww. polymer-project. org/ resourceslcom patibility. html
  • 19. How to install Polymer (1) 9": i.—l*'J7)lx0) STARTER PROJECTO)’5‘°"7‘JE| —l‘°7fl)‘7.l'XX)‘ U‘, polymer V) tttttttttttt ed Getting the code bbbbbbbbbbbbbb (S m Installing Polymer irgi . ..ml lean: i, i—» "i>—»1—~sl «4,-, i—-. s.. ii—tli~- : ‘Ill ~ItI—~'1-‘»i. fl III Li 1 DOWNLOAD STARTER PROJECT . . , , 7't—Vt'1"’ v, ~ -_ : a I‘—' . :~ ~>—i wt: v - “'ill'i mi 'l»' "I1f l I'lI: l3,. ':'l: lllCl: :l}"é"»-x n
  • 20. How to install Polymer (2) 7:‘; ‘£li3'J mBower€—lE5 / <v’7—~)7?~—~‘/ “=v—<Twitterl<i§%> Maven‘ gem‘ cpan 0)J: ’37Z£°b0)o DZip'3¢°"7‘/ lIl—l~“ mGit$| lFfi (Github)
  • 21. Polymer files / component5'°»rl/7 l"}7fl)1 '3 %0) '= l3'§'75“Po| ymer0)$fi'3 8 core-component-page I NodeBind 8 observe-js B polymer 8 polymer-expressions J po| ymer—gestures I Temp| ateBinding 3 URL I webcomponentsjs
  • 22. Need Web server JavaScript UI 7|/ —_/ .'7—7 —> 75’f7‘/ l~*J"(l~“7‘: °l‘l"C‘§}J< ? F7174)“-/ ‘75“tlZ§ Web*7“~/ i‘—l:7v7°i: i—l~“? ‘Za7fi. |I| —7'J}l/7l'Xl‘iC—l'_L7"3_l: H5%>
  • 23. How to call Polymer <link re| ="import" href= "components/ polymer/ polymer. htm| "> up/2/st/2“arim l, tPoiyero)5«r7‘5U (html) E uafitfiilfio —> . :m.7‘: “l’r’C~EL !
  • 24. Compare with Bootstrap < Bootstrap0)i= %1%. ‘ > <link href= ".. l.. ldistlcsslbootstrap. min. css" rel= "stylesheet"> <link href= ".. l.. ldistlcsslbootstrap-theme. min. css" rel= "stylesheet"> <button type= "button" class= "btn btn-lg btn-default"><lbutton> < Po| ymer0)i= %1%> <link rel= "import" href= ".. lcomponentslpaper-buttonlpaper-button. html"> <paper-button label= "OK"><lpaper-button>
  • 25. Core Element core-header-panel core-toolbar core-drawer-panel core-scaffold core-icon SVG’*‘—Z'C°7JX’2'¢Lx7’f: l‘/ '1"-Jl’l5/TLZD ! http: //www. polymer-proiect. org/ components/ core-icons/ demo. html
  • 26. Material design with Polymer Google | O2014’C°%aTz'5l’L7‘: lMateria| Designl '¥fiLl. Android0)Ul7l/ —.la. '7—7 'fi—fi0)5%'>2l-—'U’—*f>5¢7:I: —ZETz'l: 'l§¥ '°/ .‘/ jllzs ‘E5’? /.. .. etc "7I7‘77°'J "7'—“/ El‘/ I:2l‘3l. ’Ct; Po| ymerl: J: U iii —> Paper E| ementc‘: l,’C¥§iE
  • 27. Material design with Polymer Material controls ékit/ °—~>‘ https: //www. polymer-pro]ect. org/ docs/ elements/ material. htm| 5'°= E’°—‘) https: //www. polymer-proiect. org/ components/ paper-elements/ demo. html
  • 28. Polymer designer tool Po| ymerU)EE7¥I I/24> IJETIJ FE L7‘: ¥lT7‘:73tIl/24> l~*a"5"‘*J‘Vf‘/ ?’? oC.1_'7fl“’C‘= ‘e? %> 0 3 < 3 =3 Q: .3 4- my~eiement D mmmm rtt; Eluttan cccccccc ctr https: //www. polymer-proiect. org/ toglgldesigl ner/
  • 29. Custom Elements Gallery Web Components7J“c‘_' / ut / i/1§lE'a= fi'é5l’L'CL$? ' Custom Elemen I i ll 1' ' Ill ‘i 'iiip~iieii: — llllllll” 1 S I What are Web Components? «'(h Colllllilnflllis me n : t)ll('t1l0 ii Llliullg lllélfvmy (lu‘. ..gll tiie w lie} eiietiie uly ElkagLlll<lr1la)Lllt‘. A>dlJlt Lulupulltlllz [4, ii tl) Aiiu . t Y) l iiiiiii. 1lML5tl ». li; ;e; llle . r.el: “All to sekvtll-xl Well 1 '71] ; )fillPl‘’<'' ll do Submit your own Cot ZEN". dcafoi n FlSl(l't](' oiiimvximeiiic Theta me lxilletpl es ireiyiiiei x Tag an. ’.lVamlla. l5lllalyollkan [JAR «mi gel up : .ll4l1lll)lu); _‘llll’)a sllllplr Lolllpu )d. l Gial(‘lald5Whl: ll mt wiieiiyexie lentlv m gt) : _l. llllllll lullltlulm lJ<lU nut‘. I! ll a, i,ieei e i’ll€<ll’P '6) 0l’lFl<K‘i plat, RI fil‘rl l'r'l(i’<l‘l(rl'é l': nll'l‘Fi’lrillaV‘llYlY riFllldll‘iEt'ilTl(lr€anfl pr(': f‘ll(fi'. lDllS r: ’. ((lll’ VEb(‘om[)Dl(‘n(S org Zeno Rocha projrtt ltad Latest elements Featured elements Most popular elements geiigiedm eieieriii iii iegit Auell tDl)‘iUll€ll ieiiiiiiiii bout; 6 HlM_lallll>Dll: A ll5’l)ll) élclllfilll ZLI , le<il)le cit llm'i'/ VIHETTV iiiie — ‘v> page Pt. ']a‘lrlll9 am; plat/ lanrk iwI|1P—p.1ge< . i,i, i rmirer nmaiflll l<I<iri: <vr. 'aI' ". '.'l[V*nll. t rafts RDl(('l‘J)l mi» 7 riiiim (I. l ml? l€Tl-(LE r= 'n: iriE7i polymer IT lnzirkablc [Jaipur npplc l’lal‘ldl)'. ’ll kulllpunkll : ei— pblylllrl Adllfi Al pple e[ftCl' L'l : léllt: ‘H[: a Vol(€—élEInenl§ utllltjltllliilkel. /l: A )Lllll_'l ii; ,iiii, s lal*l<1: lmlDr5lgll 'ii'ei—r. uiii, miieii ilnopel lulll '‘el ‘up. -eLl) API '. lalallU'. ':S'1U .1: 'Jn. rPlt= rri»_7llYl(lt] ‘rid '.1wP‘(l <'['1Il’l("l7 iimig l7~"lTli‘r http: //customelements. ir/
  • 30. My first Impression -jnxsczsst/7‘ --- JSPc‘:75JSF’C‘ldZJ: < E l: ?’%a (l,7‘: ) -: i‘/ rl-i’—»‘r~>l~4l:0)E&t+75t‘firw= _ <7/742/‘<lr%fi’ii‘i¥e7£icl: “57:itot%a/ ii7‘: “7;5 ? To 7) -GWT0)UiBinder. »‘: |flli7‘: ‘}J:1’e1~ —> GWT''j'’l: |—! ! -Po| ymerlE’3t7—)l/72iU|75§2lE3$$§élZl’l51’L%5 —> GWTc‘:0)i§T%&75"C‘%7'El: L75‘7'él: '?
  • 31. DJJ-; s %J[l: P%a«) E-—C$lJT:7b§s 3>'~7éi? $AJ. .. Polymerlilfi7§il“C°"§'75 ‘?

Related Documents