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

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

Transcript

1. Ϗϡʔͷιʔείʔυ
   ίϯϑϦΫτ͔Βղ์͞ΕΔ
   1)1FSͷͨΊͷ࣍ੈ୅8FC
   ΞϓϦέʔγϣϯ։ൃ΁ͷಓ
   1)1ΧϯϑΝϨϯεؔ੢CZ!TJ[VIJLP
   

   View Slide

2. ,FOJDIJSP,JTIJEB
   5PLZP +"1"/
   TJ[VIJLP!HNBJMDPN !TJ[VIJLP
   IUUQTHJUIVCDPNTJ[VIJLP
   IUUQCMPHPQFOUPLZPKQ
   R:
   HmM^JRTIeUY
   

   View Slide

3. View Slide

4. 1)1JTʜ
   

   View Slide

5. w$(*
   w.7$
   w.71.77.
   w41".JDSP4FSWJDF
   

   View Slide

6. w)5.-JO1)1
   w4NBSUZ5XJHʜ
   w"KBYK2VFSZʜ
   w'MVY8FC$PNQPOFOUTʜ
   

   View Slide

7. ΑΓૄ݁߹ʹ
   ͳ͖ͬͯͨ
   

   View Slide

8. https://www.infoq.com/jp/articles/no-more-mvc-frameworks
   

   View Slide

9. https://www.infoq.com/jp/articles/no-more-mvc-frameworks
   

   View Slide

10. https://www.infoq.com/jp/articles/no-more-mvc-frameworks
    HTTP Request
    HTTP Response
    

    View Slide

11. https://extensiblewebmanifesto.org/
    ඪ४Խ૊৫Ͱ͋Δ8$ͱϒϥ΢βϕϯμ͚ͩͰͳ͘
    8FC։ൃऀ΋ר͖ࠐΜͰ8FCͷະདྷΛ֦ு͍ͯ͜͠͏
    

    View Slide

12. w ҆શͰޮ཰తͳɺ৽ͨͳ௿ϨϕϧػೳΛ8FCͷϓ
    ϥοτϑΥʔϜʹ௥Ճ͢Δ
    w طଘͷػೳ )5.-΍$44
    ͕ɺ͜ΕΒ௿Ϩϕϧػ
    ೳʹΑΓͲͷΑ͏ʹ࣮૷͞ΕΔ͔Λࣔ͢͜ͱͰɺ
    ։ൃऀͷཧղΛଅਐ͠ɺෳ੡ΛՄೳͱ͢Δ
    w ৽ػೳͷ։ൃɺදݱɺςετΛ+BWBTDSJQUͰ࣮ࢪ
    ͠ɺඪ४Խͷલʹ8FC։ൃऀ͕ࢀըͰ͖ΔΑ͏ʹ
    ͢Δɻ͜ΕʹΑΓɺ8FC։ൃऀͱඪ४Խ୲౰ऀͷ
    ؒͰૉ੖Β͍͠αΠΫϧ͕࣮ݱ͞ΕΔ
    https://html5experts.jp/iwase/10825/
    

    View Slide

13. 8FC$PNQPOFOUT
    w4IBEPX%0.
    w$VTUPN&MFNFOUT
    w)5.-*NQPSUT
    w)5.-5FNQMBUFT
    https://github.com/w3c/webcomponents
    

    View Slide

14. w1PMZNFS
    w95BH
    w#040/*$
    w4LBUF+4
    w3FBDU+4
    w"OHVMBS
    8FC$PNQPOFOUT
    >8FC$PNQPOFOUTPSH
    

    View Slide

15. より詳
    しく
    知
    りたい人
    は
    

    View Slide

16. 1PMZNFS
    https://www.polymer-project.org
    

    View Slide

17. http://qiita.com/laco0416/items/a75da4d7c2f0a21e0344
    

    View Slide

18. http://qiita.com/ko2ic/items/2aa3090dec040bd78eeb
    

    View Slide

19. http://hayato.io/2016/shadowdomv1/
    

    View Slide

20. https://html5experts.jp/komasshu/19704/
    

    View Slide

21. w8FC$PNQPOFOUT
    w%BUB#JOEJOH
    w#FIBWJPST
    w)FMQFST
    w.BUFSJBM%FTJHO
    w$-*5PPMT
    

    View Slide

22. ։ൃ؀ڥ
    wCPXFSKT
    w1PMZNFS$-*
    w+BWB4DSJQU)5.-
    wOPEFKTHVMQCSPXTFSTZOD
    wNPDLBQJTFSWFS
    

    View Slide

23. ϑϩϯτΤϯυ
    όοΫΤϯυ
    

    View Slide

24. 4UBSUVQ$-*
    $ npm install -g bower
    $ npm install -g polymer-cli
    $ polymer init
    $ polymer serve
    $ polymer test
    $ polymer build
    

    View Slide

25. 8FC$PNQPOFOUT%BUB#JOEJOH
    $ bower install --save geo-location
    $ bower install --save GoogleWebComponents/google-map
    
    
    
    
    
    
    
    

    View Slide

26. View Slide

27. https://elements.polymer-project.org/
    

    View Slide

28. https://open-elements.org/
    

    View Slide

29. ಠࣗ$PNQPOFOUT
    
    
    
    <br/><!— 独自のCSS —><br/>
    
    
    <br/>Polymer({<br/>is: 'タグ名',<br/>properties: {<br/>hoge: {type: Boolean, value: false} // HTMLのタグ属性などを定義<br/>},<br/>ready: function() { // コンポーネントが利用可能になったときの処理<br/>}<br/>});<br/>
    
    

    View Slide

30. ֦ுλά
    
    <br/>Polymer({<br/>is: 'my-input',<br/>extends: 'input',<br/>behaviors: [Polymer.IronValidatableBehavior],<br/>properties: {<br/>hoge: {type: Boolean, value: false} // HTMLのタグ属性などを定義<br/>},<br/>ready: function() { // コンポーネントが利用可能になったときの処理<br/>}<br/>});<br/>
    

    View Slide

31. #FIBWJPST
    wڞ௨ॲཧΛఆٛͰ͖Δ
    w1)1Ͱݴ͏ͱUSBJUʹ͍ۙΠϝʔδ
    Ͱ࢖͑Δ
    

    View Slide

32. )FMQFST
    response="{{users}}">
    
    
    {{user.name}}
    
    
    
    管理者だったら何か
    
    

    View Slide

33. .BUFSJBM%FTJHO
    
    
    
    メニュー
    
    
    
    
    
    
    
    ページタイトル
    
    
    
    
    
    
    
    

    View Slide

34. https://shop.polymer-project.org/
    

    View Slide

35. http://d.hatena.ne.jp/hasegawayosuke/20130302/p1
    $43'ରࡦ
    

    View Slide

36. +TPO8FC5PLFOT
    http://jwt.io
    

    View Slide

37. ϥΠϒϥϦ͔Β'8΁
    w:FPNBO͔Β$-*΁
    wQBHFKT͔ΒBQQΤϨϝϯτ΁
    w͋ΒΏΔґଘੑΛഉআ͠ɺ౷Ұతϓϥο
    τϑΥʔϜͱͯ͠ఏڙ͞ΕΔํ޲΁
    wϏϧυ͸HVMQYY͔Β$-*΁
    wCPXFS͔Β$-*΁
    

    View Slide

38. %PDVNFOUBUJPO
    
    /**
    * The relative root for determining paths to demos and default source
    * detection.
    */
    

    View Slide

39. ಘͨ஌ݟ
    w˛BQQSPVUF˔FYDFTTSPVUFS
    w˛DMBTT˔EPNJGͳͲ
    wTDSJQU͸EPNNPEVMFͷ֎Ͱ΋0,
    w"SSBZ΍0CKFDUϓϩύςΟͷઃఆ͸
    Ͱͳ͘TFU
    ͰόΠϯσΟϯά
    wςʔϚͷઃఆʹ͸!BQQMZ WBS
    wWͱ͸ҧ͏ͷͩΑ
    

    View Slide

40. ΦεεϝϙΠϯτ
    w 8$ඪ४ʹ͍ۙʢಠࣗͰ͸ͳ͍ʣ
    w ֶशίετ͕௿͍ +4੒෼͕গͳΊʣ
    w Ϋϩεϒϥ΢βʢ1PMZpMMʣ
    w ͢Ͱʹଟ਺ͷίϯϙʔωϯτ͕͋Δ
    w υΩϡϝϯτ͕ॆ࣮͍ͯ͠Δ
    

    View Slide

41. ͦ͏ͩ1PMZNFS࢖͓͏
    1PMZNFS
    

    View Slide

42. WJTJUNZCMPHHJUIVC
    https://github.com/sizuhiko
    http://blog.open.tokyo.jp
    R:
    HmM^JRTIeUY
    @sizuhiko #phpstudy 2016/3/30
    

    View Slide