Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Kenichiro Kishida

July 16, 2016
Tweet

More Decks by Kenichiro Kishida

Other Decks in Technology

Transcript

  1. w ҆શͰޮ཰తͳɺ৽ͨͳ௿ϨϕϧػೳΛ8FCͷϓ ϥοτϑΥʔϜʹ௥Ճ͢Δ w طଘͷػೳ )5.-΍$44 ͕ɺ͜ΕΒ௿Ϩϕϧػ ೳʹΑΓͲͷΑ͏ʹ࣮૷͞ΕΔ͔Λࣔ͢͜ͱͰɺ ։ൃऀͷཧղΛଅਐ͠ɺෳ੡ΛՄೳͱ͢Δ w

    ৽ػೳͷ։ൃɺදݱɺςετΛ+BWBTDSJQUͰ࣮ࢪ ͠ɺඪ४Խͷલʹ8FC։ൃऀ͕ࢀըͰ͖ΔΑ͏ʹ ͢Δɻ͜ΕʹΑΓɺ8FC։ൃऀͱඪ४Խ୲౰ऀͷ ؒͰૉ੖Β͍͠αΠΫϧ͕࣮ݱ͞ΕΔ https://html5experts.jp/iwase/10825/
  2. 4UBSUVQ$-* $ npm install -g bower $ npm install -g

    polymer-cli $ polymer init $ polymer serve $ polymer test $ polymer build
  3. 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>
  4. ಠࣗ$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>
  5. ֦ுλά <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>
  6. )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>
  7. .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>
  8. %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. */