Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
既存システムのフロントエンド・バックエンド分離 / meetup0706-seki
Search
Rakus_Dev
July 11, 2022
Technology
0
1.3k
既存システムのフロントエンド・バックエンド分離 / meetup0706-seki
Rakus_Dev
July 11, 2022
Tweet
Share
More Decks by Rakus_Dev
See All by Rakus_Dev
ARR100億超SaaSをさらに成長させるPdM組織の立ち上げと今後について
rakus_dev
0
450
B2B SaaSでSpringSecurityによる Roleを用いたユーザー権限設定の 実装について
rakus_dev
1
320
22歳になる長寿サービスのUI刷新 ~密結合システムからViewを分離した苦労話
rakus_dev
1
3.3k
【ラクステックカンファレンス2023】オープニングセッション/20230208_kude
rakus_dev
1
800
短納期でも進化をあきらめなかった新規プロダクト開発/20230208_matsuura_kawakami
rakus_dev
0
780
フロントエンド横断組織のチームトポロジー/20230208_kunieda
rakus_dev
0
980
ベテラン社員が抜けても若手が成長できるエンジニア組織づくり/20230208_otsuka_aramaki_kuyama
rakus_dev
0
800
デザイン組織が社内下請けから脱却するためにやったこと/20230208_kobayashi
rakus_dev
1
840
ゼロから始めるクラウドネイティブ/20230208_mikata_matsumoto
rakus_dev
0
740
Other Decks in Technology
See All in Technology
「知的単純作業」を自動化する、地に足の着いた大規模言語モデル (LLM) の活用
nrryuya
8
7.4k
令和版ソフトウェアエンジニアの情報収集術 PHPカンファレンス香川2024
ysknsid25
4
780
Shinagile 2024
kawaguti
PRO
1
110
TypescriptでのContextualな構造化ロギングと社内全体への導入
leveragestech
3
390
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
12
7.8k
Step by Stepで学ぶ、ADT(代数的データ型)、モナドからEffect-TSまで
leveragestech
1
2k
Prisma ORMを2年運用して培ったノウハウを共有する
tockn
18
4.4k
Kaggleで学ぶ系列データのための深層学習モデリング
yu4u
7
1.6k
M5と自作基板をくっつけてみた〜M5 Japan Tour 2024 Spring 福冈 (Fukuoka|福岡)〜
keropiyo
1
260
自らを知り外と繋がる、日経のエンジニア採用とDevRel活動/devreljp92
nishiuma
2
210
TanStack Routerで型安全かつ効率的なルーティングを実現
ytaisei
4
690
個人のAWSアカウントをマルチ運用してみた
miura55
2
280
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
Code Reviewing Like a Champion
maltzj
515
39k
Typedesign – Prime Four
hannesfritz
36
2.1k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Teambox: Starting and Learning
jrom
128
8.4k
Web Components: a chance to create the future
zenorocha
306
41k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Producing Creativity
orderedlist
PRO
338
39k
GitHub's CSS Performance
jonrohan
1025
450k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
Transcript
#RAKUSMeetup ©2022 RAKUS Co., Ltd. 既存システムのフロントエ ンド・バックエンド分離 株式会社ラクス 関 淳志
#RAKUSMeetup 自己紹介 関 淳志 ▪経歴 前職にてスマートフォンアプリのバックエンド開発、業務ツール系Webアプリの フロントエンド開発に従事 2021年にラクスに入社し、ChatDealerのフロントエンドの開発業務を担当 ▪趣味 野球観戦 そろそろ球場に行って現地観戦したい
#RAKUSMeetup セクション • フロントエンド/バックエンドを分離しようと考えた経緯 • ビジネスサイドへの提案 • ソースコード分離の実施 • ソースコードの分離を行い、見えてきた今後の課題
#RAKUSMeetup フロントエンド/バックエンドを 分離しようと考えた経緯
#RAKUSMeetup ChatDealerの技術スタック
#RAKUSMeetup 分離しようと考えた経緯 HTML/CSS/JavaScript/PHPと さまざまなソースコードがbladeファイル内で混在している 問題
#RAKUSMeetup 分離しようと考えた経緯 HTML/CSS/JavaScriptとPHPはファイルが 別ファイルであって欲しい! 理想
#RAKUSMeetup 実装がやりづらい… コードを分離しよう!
#RAKUSMeetup ビジネスサイドへの提案
#RAKUSMeetup ビジネスサイドへの提案 フロントエンドとバックエン ドのコードを分離したいで す!
#RAKUSMeetup 費用対効果はあるの…? 工数はどれくらいかかる…? それにどんなメリットがあるの…?
#RAKUSMeetup 分離後のメリットをアピール • 分業できることで実装工数が短縮する ◦ 並行作業ができる ◦ それぞれのエンジニアが実装することで効率UP • フロントエンドの実装を巻き取ることで
開発工数が下がる
#RAKUSMeetup ソースコード分離の実施
#RAKUSMeetup ソースコード分離の方針 • MPAの方針は変えない ◦ MPA:毎回サーバーにリクエストしてレスポンスが返る ◦ SPA:初回リクエストはMPAと同じ。以降Ajaxなどで 必要なデータを取得し差分更新 •
通常開発と並行して実施
#RAKUSMeetup リファクタリング対応 • HTMLはVueをマウントするエレメントのみ • データの受け取り • @includeしているbladeをVueコンポーネント化 • x-templateしているVueコードをVueコンポーネント化
#RAKUSMeetup HTMLはVueをマウントする エレメントのみ @section('body') <div class="body"> <h1>タイトル</h1> <p>これはテキストです。</p> </div> @stop
実施前 bladeファイルに直接HTML コードが書いている。
#RAKUSMeetup HTMLはVueをマウントする エレメントのみ 実施前 @section('body') <div id="app"></div> @stop 実施後 bladeファイルに記述する
HTMLコードはVueをマウン トするタグのみを記述する ルールにしました。
#RAKUSMeetup データの受け取り <script> const parameter = { key1: $value1, key2:
$value2, key3: $value3 }; </script> Blade データはオブジェクト形式で作 成。 将来的にAPI化した際にコン ポーネント内のロジックを変更 しないで済むため。
#RAKUSMeetup @includeしているbladeを コンポーネント化 @include('frame', [ 'title' => 'テキスト', 'description' =>
'これはテキストです。', ]) // frame.blade.php <div> <h1>{{ $title }}</h1> <p>{{ $description }}</p> @yield(‘content’) </div> 実施前 includeしているファイル内 でパーツ化を行なっていてい る。
#RAKUSMeetup <template> <div> <h1>{{ title }}</h1> <p>{{ description }}</p> <vue-content
/> </div> </template> <script> export default { name: "VueFrame", components: { VueContent }, props: ['title', 'description'] }; </script> @includeしているbladeを コンポーネント化 実施後 includeファイル内のパーツ をコンポーネント化。
#RAKUSMeetup x-templateしているVueコードを コンポーネント化 <script type="text/x-template" id="template"> <h1>@{{ title }}</h1> </script>
<script type="text/javascript"> Vue.component('title-text', { template: '#template', props: ['title'] } }); </script> 実施前 blade内でVueコンポーネ ントコードが記述されてい る。
#RAKUSMeetup <template> <h1>{{ title }}</h1> </template> <script> export default {
name: "TitleText", props: ['title'] }; </script> x-templateしているVueコードを コンポーネント化 実施後 SFC(単一ファイルコンポー ネント化しました。
#RAKUSMeetup ソースコードの分離を行い、 見えてきた今後の課題
#RAKUSMeetup 課題①バックエンドのAPI化 現状 グローバル変数にphp変数 を格納しVueに渡している … 理想 API化し基底コンポーネント でパラメーターを受け取るだ けにしたい。
#RAKUSMeetup 課題②テストツールの導入 現状 リファクタリング後、手動で 単体テスト、画面の差異がな いか確認している… 理想 単体テストやビジュアルリグ レッションテストの導入をし てテストを楽にしたい。
#RAKUSMeetup 課題③ビルドコストの増加 現状 1画面につき1エントリー1ア ウトプットしているのでVue コンポーネント化する度にエ ントリー数が増える… 理想 webpackの最適化をして 少しでもビルドコストを下げ
たい。
#RAKUSMeetup まとめ • フロントエンド部分のコードが複雑だった • 提案は分離したことによるメリットを強調 • フロントエンドコードはVueに置き換え • 課題についてはこれから要検討
#RAKUSMeetup ご静聴ありがとうございました