ビューのソースコードコンフリクトから解放されるPHPerのための次世代Webアプリケーション開発への道 / PHP Conference Kansai 2016

フロントエンドの技術が日々変わる中、様々なトレンドがあります。AngularJS、ReactJSなどなど。
何を使うか迷ったとき、将来のW3C仕様を見越して、より標準に近いとされる技術を採用するのも有効な選択肢ではないでしょうか？
PolymerはWeb Componentsを標準仕様に一番近い形で利用できるフロントエンドフレームワークとして注目されています。
このセッションではPolymerを使うと、これまでのフロントエンド開発とどのように違うのかについて、実務で投入してみた経験からフロントエンドとサーバサイド（PHP）の棲み分けなど、現時点のベストプラクティスについて解説します。

Transcript

1. Ϗϡʔͷιʔείʔυ
   ίϯϑϦΫτ͔Βղ์͞ΕΔ 1)1FSͷͨΊͷ࣍ੈ୅8FC ΞϓϦέʔγϣϯ։ൃ΁ͷಓ 1)1ΧϯϑΝϨϯεؔ੢
   CZ
   !TJ[VIJLP
2. ,FOJDIJSP
   ,JTIJEB
   5PLZP
   +"1"/
   TJ[VIJLP!HNBJMDPN
   
   !TJ[VIJLP
   IUUQTHJUIVCDPNTJ[VIJLP
   IUUQCMPHPQFOUPLZPKQ
   R:
   HmM^JRTIeUY
4. 1)1
   JTʜ
5. w$(*
   w.7$
   w.71.77.
   w41".JDSP
   4FSWJDF
6. w)5.-
   JO
   1)1
   w4NBSUZ5XJHʜ
   w"KBYK2VFSZʜ
   w'MVY8FC
   $PNQPOFOUTʜ
7. ΑΓૄ݁߹ʹ
   ͳ͖ͬͯͨ
8. https://www.infoq.com/jp/articles/no-more-mvc-frameworks
9. https://www.infoq.com/jp/articles/no-more-mvc-frameworks
10. https://www.infoq.com/jp/articles/no-more-mvc-frameworks HTTP Request HTTP Response
11. https://extensiblewebmanifesto.org/ ඪ४Խ૊৫Ͱ͋Δ8$ͱϒϥ΢βϕϯμ͚ͩͰͳ͘
    8FC։ൃऀ΋ר͖ࠐΜͰ8FCͷະདྷΛ֦ு͍ͯ͜͠͏
12. w ҆શͰޮ཰తͳɺ৽ͨͳ௿ϨϕϧػೳΛ8FCͷϓ ϥοτϑΥʔϜʹ௥Ճ͢Δ
    w طଘͷػೳ )5.-΍$44 ͕ɺ͜ΕΒ௿Ϩϕϧػ ೳʹΑΓͲͷΑ͏ʹ࣮૷͞ΕΔ͔Λࣔ͢͜ͱͰɺ ։ൃऀͷཧղΛଅਐ͠ɺෳ੡ΛՄೳͱ͢Δ
    w ৽ػೳͷ։ൃɺදݱɺςετΛ+BWBTDSJQUͰ࣮ࢪ ͠ɺඪ४Խͷલʹ8FC։ൃऀ͕ࢀըͰ͖ΔΑ͏ʹ ͢Δɻ͜ΕʹΑΓɺ8FC։ൃऀͱඪ४Խ୲౰ऀͷ ؒͰૉ੖Β͍͠αΠΫϧ͕࣮ݱ͞ΕΔ https://html5experts.jp/iwase/10825/
13. 8FC
    $PNQPOFOUT w4IBEPX
    %0.
    w$VTUPN
    &MFNFOUT
    w)5.-
    *NQPSUT
    w)5.-
    5FNQMBUFT https://github.com/w3c/webcomponents
14. w1PMZNFS
    w95BH
    w#040/*$
    w4LBUF+4
    w3FBDU+4
    w"OHVMBS 8FC
    $PNQPOFOUT >8FC$PNQPOFOUTPSH
15. より詳 しく 知 りたい人 は
16. 1PMZNFS https://www.polymer-project.org
17. http://qiita.com/laco0416/items/a75da4d7c2f0a21e0344
18. http://qiita.com/ko2ic/items/2aa3090dec040bd78eeb
19. http://hayato.io/2016/shadowdomv1/
20. https://html5experts.jp/komasshu/19704/
21. w8FC
    $PNQPOFOUT
    w%BUB
    #JOEJOH
    w#FIBWJPST
    w)FMQFST
    w.BUFSJBM
    %FTJHO
    w$-*
    5PPMT
22. ։ൃ؀ڥ wCPXFSKT
    w1PMZNFS$-*
    w+BWB4DSJQU)5.-
    wOPEFKTHVMQCSPXTFSTZOD
    wNPDLBQJTFSWFS
23. ϑϩϯτΤϯυ όοΫΤϯυ
24. 4UBSUVQ
    
    $-* $ npm install -g bower $ npm install -g polymer-cli $ polymer init $ polymer serve $ polymer test $ polymer build
25. 8FC
    $PNQPOFOUT
    
    %BUB
    #JOEJOH $ bower install --save geo-location $ bower install --save GoogleWebComponents/google-map <link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../bower_components/geo-location/geo-location.html"> <link rel="import" href="../bower_components/google-map/google-map.html"> <geo-location latitude="{{lat}}" longitude="{{lng}}"></geo-location> <google-map map="{{map}}" latitude="[[lat]]" longitude="[[lng]]" zoom="17"> <google-map-marker latitude="[[lat]]" longitude="[[lng]]"></google-map-marker> </google-map>
27. https://elements.polymer-project.org/
28. https://open-elements.org/
29. ಠࣗ
    $PNQPOFOUT <link rel="import" href="../bower_components/polymer/polymer.html"> <dom-module id="タグ名"> <template> <style> <!— 独自のCSS —> </style> <!— 独自コンポーネントのHTML —> </template> <script> Polymer({ is: 'タグ名', properties: { hoge: {type: Boolean, value: false} // HTMLのタグ属性などを定義 }, ready: function() { // コンポーネントが利用可能になったときの処理 } }); </script> </dom-module>
30. ֦ுλά <link rel="import" href="../bower_components/polymer/polymer.html"> <script> Polymer({ is: 'my-input', extends: 'input', behaviors: [Polymer.IronValidatableBehavior], properties: { hoge: {type: Boolean, value: false} // HTMLのタグ属性などを定義 }, ready: function() { // コンポーネントが利用可能になったときの処理 } }); </script>
31. #FIBWJPST wڞ௨ॲཧΛఆٛͰ͖Δ
    w1)1Ͱݴ͏ͱ
    USBJU
    ʹ͍ۙΠϝʔδ Ͱ࢖͑Δ
32. )FMQFST <iron-ajax url="/users" handle-as="json" method="GET" last- response="{{users}}"></iron-ajax> <ul> <template is="dom-repeat" items="[[users]]" as="user"> <li>{{user.name}}</li> </template> </ul> <template is="dom-if" if="[[admin]]"> <div>管理者だったら何か</div> </template>
33. .BUFSJBM
    %FTJHO <app-drawer-layout fullbleed> <app-drawer> <app-toolbar> <div class="title">メニュー</div> </app-toolbar> <!— ここにメニューを記述 —> </app-drawer> <app-header-layout has-scrolling-region> <app-header fixed condenses> <app-toolbar> <paper-icon-button icon="menu" drawer-toggle></paper-icon-button> ページタイトル </app-toolbar> </app-header> <div class="contents"> <!— 実際のコンテンツ —> </div> </app-header-layout> </app-drawer-layout>
34. https://shop.polymer-project.org/
35. http://d.hatena.ne.jp/hasegawayosuke/20130302/p1 $43'
    ରࡦ
36. +TPO
    8FC
    5PLFOT http://jwt.io
37. ϥΠϒϥϦ͔Β'8΁ w:FPNBO͔Β$-*΁
    wQBHFKT͔ΒBQQΤϨϝϯτ΁
    w͋ΒΏΔґଘੑΛഉআ͠ɺ౷Ұతϓϥο τϑΥʔϜͱͯ͠ఏڙ͞ΕΔํ޲΁
    wϏϧυ͸HVMQYY͔Β$-*΁
    wCPXFS͔Β$-*΁
38. %PDVNFOUBUJPO <!-- Loads Polymer element and behavior documentation usin [Hydrolysis](https://github.com/PolymerLabs/hydrolysi documentation page including demos (if available). --> /** * The relative root for determining paths to demos and default source * detection. */
39. ಘͨ஌ݟ w˛
    BQQSPVUF
    
    ˔
    FYDFTTSPVUFS
    w˛
    DMBTT
    
    ˔
    EPNJG
    ͳͲ
    wTDSJQU͸EPNNPEVMFͷ֎Ͱ΋0,
    w"SSBZ΍0CKFDUϓϩύςΟͷઃఆ͸
    
    Ͱͳ͘
    TFU
    ͰόΠϯσΟϯά
    wςʔϚͷઃఆʹ͸
    !BQQMZ
    WBS
    wW
    ͱ͸ҧ͏ͷͩΑ
40. ΦεεϝϙΠϯτ w 8$ඪ४ʹ͍ۙʢಠࣗͰ͸ͳ͍ʣ
    w ֶशίετ͕௿͍ +4੒෼͕গͳΊʣ
    w Ϋϩεϒϥ΢βʢ1PMZpMMʣ
    w ͢Ͱʹଟ਺ͷίϯϙʔωϯτ͕͋Δ
    w υΩϡϝϯτ͕ॆ࣮͍ͯ͠Δ
41. ͦ͏ͩ
    1PMZNFS
    ࢖͓͏ 1PMZNFS
42. WJTJU
    NZ
    CMPHHJUIVC https://github.com/sizuhiko http://blog.open.tokyo.jp R:
    HmM^JRTIeUY @sizuhiko #phpstudy 2016/3/30