Server Side Rendering with WebComponents

Slide 1

Slide 1 text

4FSWFS4JEF3FOEFSJOH XJUI8FC$PNQPOFOUT ͓ͷ͏͑ !MJLS 8FC$PNQPOFOUTLZPUP.FFUVQ

Slide 2

Slide 2 text

ࣗݾ঺հ w ͓ͷ͏͑ w ژ౎େֶֶࡍ༥߹ڭҭݚڀਪਐηϯλʔ  ੓ࡦͷͨΊͷՊֶϢχοτಛఆॿڭ w ՄࢹԽɺ࠷దԽɺΞϧΰϦζϜͷݚڀ w OHLZPUPΦʔΨφΠβʔɺ  8FC$PNQPOFOUT΍Γ͍ͨϚϯ

Slide 3

Slide 3 text

֓ཁ w ϋΠύϑΥʔϚϯεͳ8FCαΠτΛߏங͢Δ্Ͱɺ 4FSWFS4JEF3FOEFSJOH 443 ͸ແࢹͰ͖ͳ͘ͳΓͭ ͭ͋Γ·͢ɻ8FC$PNQPOFOUTͱ4FSWFS4JEFϨϯμ Ϧϯάͷؔ܎ʹ͍ͭͯ޲͖߹ͬͯΈ͍ͨͱࢥ͍·͢ɻ

Slide 4

Slide 4 text

޲͖߹ͬͯΈͨ

Slide 5

Slide 5 text

͕ɺ

Slide 6

Slide 6 text

݁࿦͸ಛʹͳ͍

Slide 7

Slide 7 text

಺༰ w 4FSWFS4JEF3FOEFSJOH 443 ͷඞཁੑʹ͍ͭͯɺ  1SPHSFTTJWF8FC"QQT 18" ͷಈ޲ͱڞʹղઆ w 8FC$PNQPOFOUTͱ443ͷ෇͖߹͍ํʹ͍ͭͯߟ͑Δ w ͜Ε͔Βͷ8FCϑϩϯτΤϯυ։ൃʹ͍ͭͯߟ͑Δ w ·ͩ·ͩ໛ࡧதͰ͢

Slide 8

Slide 8 text

8FC$PNQPOFOUT͕΍͖ͬͯͨ

Slide 9

Slide 9 text

͜Ε͔Βͷ8FC։ൃ w 8FC$PNQPOFOUT w )5.-ɺ$44ɺ+BWB4DSJQUͷίϯϙʔωϯτԽ w 1SPHSFTTJWF8FC"QQT w 3FMJBCMFɺ'BTUɺ&OHBHJOH

Slide 10

Slide 10 text

1SPHSFTTJWF8FC"QQT 18" w IUUQTEFWFMPQFSTHPPHMFDPNXFCQSPHSFTTJWF XFCBQQT w 18"Λ࡞Δ࣌ͷࢦ਑ w IUUQTEFWFMPQFSTHPPHMFDPNXFC QSPHSFTTJWFXFCBQQTDIFDLMJTU w -JHIUIPVTF w 18"lྑ͍8FCαΠτz

Slide 11

Slide 11 text

-JHIUIPVTF "VEJU5PPM w 8FCαΠτΛղੳͯ͠఺਺Խ w $ISPNFʹ૊ΈࠐΈ w 1SPHSFTTJWF8FC"QQ w 1FSGPSNBODF w "DDFTTJCJMJUZ w #FTU1SBDUJDFT

Slide 12

Slide 12 text

18"ϑΝʔετͳઃܭ w ޙ෇͚Ͱ18"ʹ͢Δͷ͸೉͍͠ w ࠷ॳ͔Β18"Λҙࣝͨ͠ઃܭ 18"ϑΝʔετ w 18"ͷ࡞Γํ 41"Λ͔ͬ͠Γ࡞Δ 4FSWJDF8PSLFSɺ8FC"QQ.BOJGFTUʹରԠ͢Δ w 41"͕࡞ΕΕ͹18"։ൃ͸೉͘͠ͳ͍ w ͨͩ͠ύϑΥʔϚϯε࠷దԽΛআ͘

Slide 13

Slide 13 text

'JSTUMPBEGBTUFWFOPO( w IUUQTEFWFMPQFSTHPPHMFDPNXFCQSPHSFTTJWF XFCBQQTDIFDLMJTUpSTUMPBEGBTUFWFOPOH w ಡΈࠐΈඵҎ಺ʢ3"*-1FSGPSNBODF.PEFMʣ w IUUQTEFWFMPQFSTHPPHMFDPNXFC GVOEBNFOUBMTQFSGPSNBODFSBJM w (ͷԼΓ࠷େཧ࿦஋.CQTʢ)4%1"ʣ w ࣮ޮ଎౓͸ʙ.CQT w 8FCϖʔδʹڐ͞ΕΔ௨৴༰ྔ͸.#ఔ౓

Slide 14

Slide 14 text

18"ͰͷύϑΥʔϚϯε࠷దԽ w ௨৴αΠζΛݮΒ͢ w ෆཁͳ΋ͷ͸ಡΈࠐ·ͳ͍ w NJOJGZɺѹॖ w ฒྻಡΈࠐΈ w )551 w ΫϦςΟΧϧϨϯμϦϯάύεͷ୹ॖ w 4FSWFS4JEF3FOEFSJOH

Slide 15

Slide 15 text

ΫϦςΟΧϧϨϯμϦϯάύε w IUUQTEFWFMPQFSTHPPHMFDPNXFC GVOEBNFOUBMTQFSGPSNBODFDSJUJDBMSFOEFSJOH QBUI w IUUQTEFWFMPQFSTHPPHMFDPNXFC GVOEBNFOUBMTQFSGPSNBODFDSJUJDBMSFOEFSJOH QBUIDPOTUSVDUJOHUIFPCKFDUNPEFM

Slide 16

Slide 16 text

18" )5.-ɺ+4 ϒϥ΢β Ωϟογϡ "1* ॳճΞΫηε ճ໨Ҏ߱ΞΫηε $44ɺFUD "QQ4IFMM*OTUBMM ௿଎ͳωοτϫʔΫ

Slide 17

Slide 17 text

18"XJUI443 )5.-ɺ+4 ϒϥ΢β Ωϟογϡ "1* ॳճΞΫηε ճ໨Ҏ߱ΞΫηε $44ɺFUD "QQ4IFMM*OTUBMM 4431BHF ௿଎ͳωοτϫʔΫ

Slide 18

Slide 18 text

18"Ͱͷ4FSWFS4JEF3FOEFSJOH w Ϋϩʔϥɺ0(1ରԠ w 1SFSFOEFSJOHͰ΋ରԠՄೳ w ॳظඳըͷߴ଎Խ w ΫϦςΟΧϧϨϯμϦϯάύεͷ୹ॖ w ϒϥ΢β͕ϦιʔεΛॱ൪ʹಡΈࠐΜͰ  ॲཧ͢ΔϓϩηεΛ؆ུԽ

Slide 19

Slide 19 text

18"XJUI8FC$PNQPOFOUT w جຊతʹ͸௨ৗͷ18"ͱมԽ͠ͳ͍ w ຤୺ͷ69ཁૉͷίϯϙʔωϯτԽ w ίϯϙʔωϯτͷ஗ԆಡΈࠐΈ w ฒྻಡΈࠐΈ

Slide 20

Slide 20 text

8FC$PNQPOFOUTΛ༻͍ͨ41"։ൃ w 41"ϑϨʔϜϫʔΫ8FC$PNQPOFOUT w ϑϨʔϜϫʔΫͷ຤୺Ͱ8FC$PNQPOFOUTΛར༻ w IUUQTDVTUPNFMFNFOUTFWFSZXIFSFDPN w ϑϧ8FC$PNQPOFOUT w 8FC$PNQPOFOUTϕʔεϑϨʔϜϫʔΫͷར༻ w 1PMZNFSɺ4LBUF+4ɺ4UFO$*- w 6OJWFSTBM&4.PEVMFT

Slide 21

Slide 21 text

/PEFKTͰͷ&4.PEVMFTαϙʔτ w /PEFW ೥݄ Ͱϑϥά෇͖αϙʔτ͕։࢝ w FYQFSJNFOUBMNPEVMFT w /PEFWͰຊ֨ීٴ͔ w ೥݄ࠒϦϦʔεɺ݄ࠒ-54קࠂ w ࢀরɿIUUQUFQQFJTIBUFOBCMPHDPNFOUSZ FTNPEVMFTJOOPEFKT w ೥ʹ͸&4.PEVMFTͷ࣌୅͕΍ͬͯ͘Δʢ͔΋ʣ

Slide 22

Slide 22 text

8FC$PNQPOFOUTͱ443 w 41"ϑϨʔϜϫʔΫXJUI8FC$PNQPOFOUT w 41"ϑϨʔϜϫʔΫྲྀͷ443 w "OHVMBS6OJWFSTBMɺ/FYUKTɺʜ w ϑϨʔϜϫʔΫͷΦʔόϔου w ϑϧ8FC$PNQPOFOUT w /PEFKT PSαʔόαΠυݴޠ ΛؤுΔ w 4FSWFS4JEFͰ$VTUPN&MFNFOUTΛల։͢Δ͔ʁ

Slide 23

Slide 23 text

ϑϧ8FC$PNQPOFOUTͰͷ443ઓུ w ΫϥΠΞϯταΠυͰͷ$VTUPN&MFNFOUTల։ w ͏·͘ϚʔΫΞοϓ͠ͳ͚Ε͹ฒྻಡΈࠐΈͰ͖ͳ͍ w αʔόαΠυͰͷ$VTUPN&MFNFOUTల։ w /PEFKTͰ8FC$PNQPOFOUTରԠ͠ͳ͚Ε͹ͳΒͳ͍ w ".1UP18" w ͦ΋ͦ΋ॳظདྷ๚ͷϖʔδΛผʹ༻ҙ͢Δ

Slide 24

Slide 24 text

͜Ε͔Βͷ8FCϑϨʔϜϫʔΫΛໝ૝͢Δ w "QQ4IFMMͱ69ͷ෼཭ w "QQ4IFMM w 18" ΦϑϥΠϯ 443Λલఏ w ϧʔςΟϯάɺॳظϖΠϯτʹಛԽ w 69 w 8FC$PNQPOFOUTϕʔε w εςʔτ؅ཧ͕՝୊

Slide 25

Slide 25 text

ผղɿ131-ύλʔϯ w IUUQTEFWFMPQFSTHPPHMFDPNXFC GVOEBNFOUBMTQFSGPSNBODFQSQMQBUUFSO w 1VTIɺ3FOEFSɺ1SFDBDIFɺ-B[ZMPBE w 1PMZNFS4IPQσϞ  IUUQTTIPQQPMZNFSQSPKFDUPSH w ௨৴࿏ͷۭ͖࣌ؒΛ௵͢

Slide 26

Slide 26 text

131-WT443 w 131- w Ϧιʔεґଘؔ܎ͷఆ͕ٛॏཁ w πʔϧͷ੔උʹظ଴ʁ w 443 w /PEFKTΞϓϦͷߏஙɾӡ༻εΩϧ͕ٻΊΒΕΔ w ৽ͨͳϑϨʔϜϫʔΫͷొ৔ʹظ଴ʁ

Slide 27

Slide 27 text

೰Έ w Ϋϩʔϥɺ0(1ରԠ͚ͩͳΒ1SFSFOEFSJOHͰͰ͖Δͷ Ͱ443͸ෆཁͱࢥͬͯͨ w 18"ͰύϑΥʔϚϯεΛ௥ٻ͢ΔͳΒ΍ͬͺΓ443͸ ඞཁ͔΋ʁ w Ͱ΋443͸ߏங΋ӡ༻΋ෳࡶ͗͢ͳ͍͔ʁ w &4.PEVMFTͱ131-ύλʔϯΛపఈ͢Ε͹443͸΍ͬ ͺΓ͍Βͳ͍ʁ

Slide 28

Slide 28 text

·ͱΊ w 18"ʹ8FC$PNQPOFOUT͸૊ΈࠐΈՄೳ w ϋΠύϑΥʔϚϯεΛ໨ࢦ͢ͳΒ443͸ආ͚ΒΕͳ͍ w 8FC$PNQPOFOUTͷ׆༻Λਅ໘໨ʹߟ͑Δ࣌ظ w ԿΛ໨ඪͱ͢Δ͔ݟۃΊΔ w ૯߹֨ಆٕͱͯ͠ͷ18"ઃܭ w ஌ࣝΛ૯ಈһͯ͠lྑ͍8FCαΠτzΛͭ͘Δ