既存システムのフロントエンド・バックエンド分離 / meetup0706-seki

Slide 1

Slide 1 text

Slide 2

Slide 2 text

#RAKUSMeetup 自己紹介関　淳志 ■経歴前職にてスマートフォンアプリのバックエンド開発、業務ツール系Webアプリのフロントエンド開発に従事 2021年にラクスに入社し、ChatDealerのフロントエンドの開発業務を担当 ■趣味野球観戦そろそろ球場に行って現地観戦したい

Slide 3

Slide 3 text

#RAKUSMeetup セクション ● フロントエンド/バックエンドを分離しようと考えた経緯 ● ビジネスサイドへの提案 ● ソースコード分離の実施 ● ソースコードの分離を行い、見えてきた今後の課題

Slide 4

Slide 4 text

#RAKUSMeetup フロントエンド/バックエンドを分離しようと考えた経緯

Slide 5

Slide 5 text

#RAKUSMeetup ChatDealerの技術スタック

Slide 6

Slide 6 text

#RAKUSMeetup 分離しようと考えた経緯 HTML/CSS/JavaScript/PHPとさまざまなソースコードがbladeファイル内で混在している問題

Slide 7

Slide 7 text

#RAKUSMeetup 分離しようと考えた経緯 HTML/CSS/JavaScriptとPHPはファイルが別ファイルであって欲しい！理想

Slide 8

Slide 8 text

#RAKUSMeetup 実装がやりづらい… コードを分離しよう！

Slide 9

Slide 9 text

#RAKUSMeetup ビジネスサイドへの提案

Slide 10

Slide 10 text

#RAKUSMeetup ビジネスサイドへの提案フロントエンドとバックエンドのコードを分離したいです！

Slide 11

Slide 11 text

#RAKUSMeetup 費用対効果はあるの…？工数はどれくらいかかる…？それにどんなメリットがあるの…？

Slide 12

Slide 12 text

#RAKUSMeetup 分離後のメリットをアピール ● 分業できることで実装工数が短縮する ○ 並行作業ができる ○ それぞれのエンジニアが実装することで効率UP ● フロントエンドの実装を巻き取ることで開発工数が下がる

Slide 13

Slide 13 text

#RAKUSMeetup ソースコード分離の実施

Slide 14

Slide 14 text

#RAKUSMeetup ソースコード分離の方針 ● MPAの方針は変えない ○ MPA：毎回サーバーにリクエストしてレスポンスが返る ○ SPA：初回リクエストはMPAと同じ。以降Ajaxなどで　　　　必要なデータを取得し差分更新 ● 通常開発と並行して実施

Slide 15

Slide 15 text

#RAKUSMeetup リファクタリング対応 ● HTMLはVueをマウントするエレメントのみ ● データの受け取り ● @includeしているbladeをVueコンポーネント化 ● x-templateしているVueコードをVueコンポーネント化

Slide 16

Slide 16 text

#RAKUSMeetup HTMLはVueをマウントするエレメントのみ @section('body')

タイトル

これはテキストです。

@stop 実施前 bladeファイルに直接HTML コードが書いている。

Slide 17

Slide 17 text

#RAKUSMeetup HTMLはVueをマウントするエレメントのみ実施前 @section('body')

@stop 実施後 bladeファイルに記述する HTMLコードはVueをマウントするタグのみを記述するルールにしました。

Slide 18

Slide 18 text

#RAKUSMeetup データの受け取り const parameter = { key1: $value1, key2: $value2, key3: $value3 }; Blade データはオブジェクト形式で作成。将来的にAPI化した際にコンポーネント内のロジックを変更しないで済むため。

Slide 19

Slide 19 text

#RAKUSMeetup @includeしているbladeをコンポーネント化 @include('frame', [ 'title' => 'テキスト', 'description' => 'これはテキストです。', ]) // frame.blade.php

@yield(‘content’)

実施前 includeしているファイル内でパーツ化を行なっていている。

Slide 20

Slide 20 text

#RAKUSMeetup

export default { name: "VueFrame", components: { VueContent }, props: ['title', 'description'] }; @includeしているbladeをコンポーネント化実施後 includeファイル内のパーツをコンポーネント化。

Slide 21

Slide 21 text

#RAKUSMeetup x-templateしているVueコードをコンポーネント化 <h1>@{{ title }}</h1> Vue.component('title-text', { template: '#template', props: ['title'] } }); 実施前 blade内でVueコンポーネントコードが記述されている。

Slide 22

Slide 22 text

#RAKUSMeetup

export default { name: "TitleText", props: ['title'] }; x-templateしているVueコードをコンポーネント化実施後 SFC（単一ファイルコンポーネント化しました。

Slide 23

Slide 23 text

#RAKUSMeetup ソースコードの分離を行い、見えてきた今後の課題

Slide 24

Slide 24 text

#RAKUSMeetup 課題①バックエンドのAPI化現状グローバル変数にphp変数を格納しVueに渡している … 理想 API化し基底コンポーネントでパラメーターを受け取るだけにしたい。

Slide 25

Slide 25 text

#RAKUSMeetup 課題②テストツールの導入現状リファクタリング後、手動で単体テスト、画面の差異がないか確認している… 理想単体テストやビジュアルリグレッションテストの導入をしてテストを楽にしたい。

Slide 26

Slide 26 text

#RAKUSMeetup 課題③ビルドコストの増加現状１画面につき１エントリー１アウトプットしているのでVue コンポーネント化する度にエントリー数が増える… 理想 webpackの最適化をして少しでもビルドコストを下げたい。

Slide 27

Slide 27 text

#RAKUSMeetup まとめ ● フロントエンド部分のコードが複雑だった ● 提案は分離したことによるメリットを強調 ● フロントエンドコードはVueに置き換え ● 課題についてはこれから要検討

Slide 28

Slide 28 text

#RAKUSMeetup ご静聴ありがとうございました

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

タイトル

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

{{ $title }}

Slide 20

Slide 20 text

{{ title }}

Slide 21

Slide 21 text

Slide 22

Slide 22 text

{{ title }}

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text