Submit Search
Upload
大きめレガシープロジェクトのフロント行く末
•
Download as PPTX, PDF
•
1 like
•
1,209 views
LIFULL Co., Ltd.
Follow
2021/03/02 Ltech#14 「LIFULL HOME'S」のフロントエンドについて語り尽くします! 中島拓哉
Read less
Read more
Technology
Report
Share
Report
Share
1 of 19
Download now
Recommended
【Ltech#8】レガシーシステム・プロセス改善史
【Ltech#8】レガシーシステム・プロセス改善史
LIFULL Co., Ltd.
個人開発でサービスを作る < 0→1のはじめかた >
個人開発でサービスを作る < 0→1のはじめかた >
慎吾 入江
東京では語れないHTML5[仮題]
東京では語れないHTML5[仮題]
Yu Morita
0からのwebディレクション講座 福岡 設計編_150117
0からのwebディレクション講座 福岡 設計編_150117
direkyo-kyusyu
Jアラート、防災行政無線、防災メール、行政ホームページ等の各情報について
Jアラート、防災行政無線、防災メール、行政ホームページ等の各情報について
知善 関
Webサービスの企画書 準備を楽しむ計画アプリ
Webサービスの企画書 準備を楽しむ計画アプリ
Reimi Kuramochi Chiba
【 ヒカ☆ラボ 】LIFULL Home's androidアプリの開発の裏側について
【 ヒカ☆ラボ 】LIFULL Home's androidアプリの開発の裏側について
LIFULL Co., Ltd.
Nintendo Labo の子育て力
Nintendo Labo の子育て力
Masaru Shimbori
Recommended
【Ltech#8】レガシーシステム・プロセス改善史
【Ltech#8】レガシーシステム・プロセス改善史
LIFULL Co., Ltd.
個人開発でサービスを作る < 0→1のはじめかた >
個人開発でサービスを作る < 0→1のはじめかた >
慎吾 入江
東京では語れないHTML5[仮題]
東京では語れないHTML5[仮題]
Yu Morita
0からのwebディレクション講座 福岡 設計編_150117
0からのwebディレクション講座 福岡 設計編_150117
direkyo-kyusyu
Jアラート、防災行政無線、防災メール、行政ホームページ等の各情報について
Jアラート、防災行政無線、防災メール、行政ホームページ等の各情報について
知善 関
Webサービスの企画書 準備を楽しむ計画アプリ
Webサービスの企画書 準備を楽しむ計画アプリ
Reimi Kuramochi Chiba
【 ヒカ☆ラボ 】LIFULL Home's androidアプリの開発の裏側について
【 ヒカ☆ラボ 】LIFULL Home's androidアプリの開発の裏側について
LIFULL Co., Ltd.
Nintendo Labo の子育て力
Nintendo Labo の子育て力
Masaru Shimbori
いまいる現場への愛を叫びたい
いまいる現場への愛を叫びたい
Takehiro Kameda
企業のビジネス戦略を体系化するWebサイト設計とは
企業のビジネス戦略を体系化するWebサイト設計とは
loftwork
Html5fun@東京 Bootstrapにアニメーションを付けよう
Html5fun@東京 Bootstrapにアニメーションを付けよう
Masayuki Abe
【SFO2020】業務SEを7か月でWebエンジニアに変える方法 ~アジャイルマインドを得るために~
【SFO2020】業務SEを7か月でWebエンジニアに変える方法 ~アジャイルマインドを得るために~
Yukio Okajima
20220319_新卒から活躍し続けるエンジニアが大切にしている5つのこと
20220319_新卒から活躍し続けるエンジニアが大切にしている5つのこと
LIFULL Co., Ltd.
仲介手数料無料の不動産売買 プレゼンテーション資料
仲介手数料無料の不動産売買 プレゼンテーション資料
Mori Taiki
デザイナーといい感じに プロトタイピング on Rails
デザイナーといい感じに プロトタイピング on Rails
Hisatake Ishibashi
ウフル・Enebular紹介 170225
ウフル・Enebular紹介 170225
知礼 八子
Trust Based Development
Trust Based Development
toshihiro ichitani
Deploy to Lobi
Deploy to Lobi
Hiroaki Nagata
2020 cocone
2020 cocone
cocone_recruit
WiLでのデザイン思考活用法
WiLでのデザイン思考活用法
Akinori "Aki" Koto
Lychee Redmine最新機能紹介とLycheeの未来について
Lychee Redmine最新機能紹介とLycheeの未来について
agileware_jp
株式会社ウィーヴァジャパン 御中
株式会社ウィーヴァジャパン 御中
Nagisa Yada
20160930_03_ロボットアプリ開発における、最適なUXを生み出すコツ
20160930_03_ロボットアプリ開発における、最適なUXを生み出すコツ
IoTビジネス共創ラボ
LIFULL HOME'S高速化への道のり
LIFULL HOME'S高速化への道のり
LIFULL Co., Ltd.
Gihyo Digital Publishing10年の歩み~専門書・専門雑誌の電子出版の過去・現在・未来
Gihyo Digital Publishing10年の歩み~専門書・専門雑誌の電子出版の過去・現在・未来
馮 富久
業務システムとfreeeをAPI連携する際の課題と工夫
業務システムとfreeeをAPI連携する際の課題と工夫
Yusuke Tamukai
オタクエンジニアを熱くさせる!モチベーションと効率をあげるチームビルディング_20210611_TechDay#1_3
オタクエンジニアを熱くさせる!モチベーションと効率をあげるチームビルディング_20210611_TechDay#1_3
虎の穴 開発室
Apple sapの提携のその後
Apple sapの提携のその後
智洋 大野
趣味と仕事の違い、現場で求められるアプリケーションの可観測性
趣味と仕事の違い、現場で求められるアプリケーションの可観測性
LIFULL Co., Ltd.
Kubernetesセキュリティの歩き方
Kubernetesセキュリティの歩き方
LIFULL Co., Ltd.
More Related Content
Similar to 大きめレガシープロジェクトのフロント行く末
いまいる現場への愛を叫びたい
いまいる現場への愛を叫びたい
Takehiro Kameda
企業のビジネス戦略を体系化するWebサイト設計とは
企業のビジネス戦略を体系化するWebサイト設計とは
loftwork
Html5fun@東京 Bootstrapにアニメーションを付けよう
Html5fun@東京 Bootstrapにアニメーションを付けよう
Masayuki Abe
【SFO2020】業務SEを7か月でWebエンジニアに変える方法 ~アジャイルマインドを得るために~
【SFO2020】業務SEを7か月でWebエンジニアに変える方法 ~アジャイルマインドを得るために~
Yukio Okajima
20220319_新卒から活躍し続けるエンジニアが大切にしている5つのこと
20220319_新卒から活躍し続けるエンジニアが大切にしている5つのこと
LIFULL Co., Ltd.
仲介手数料無料の不動産売買 プレゼンテーション資料
仲介手数料無料の不動産売買 プレゼンテーション資料
Mori Taiki
デザイナーといい感じに プロトタイピング on Rails
デザイナーといい感じに プロトタイピング on Rails
Hisatake Ishibashi
ウフル・Enebular紹介 170225
ウフル・Enebular紹介 170225
知礼 八子
Trust Based Development
Trust Based Development
toshihiro ichitani
Deploy to Lobi
Deploy to Lobi
Hiroaki Nagata
2020 cocone
2020 cocone
cocone_recruit
WiLでのデザイン思考活用法
WiLでのデザイン思考活用法
Akinori "Aki" Koto
Lychee Redmine最新機能紹介とLycheeの未来について
Lychee Redmine最新機能紹介とLycheeの未来について
agileware_jp
株式会社ウィーヴァジャパン 御中
株式会社ウィーヴァジャパン 御中
Nagisa Yada
20160930_03_ロボットアプリ開発における、最適なUXを生み出すコツ
20160930_03_ロボットアプリ開発における、最適なUXを生み出すコツ
IoTビジネス共創ラボ
LIFULL HOME'S高速化への道のり
LIFULL HOME'S高速化への道のり
LIFULL Co., Ltd.
Gihyo Digital Publishing10年の歩み~専門書・専門雑誌の電子出版の過去・現在・未来
Gihyo Digital Publishing10年の歩み~専門書・専門雑誌の電子出版の過去・現在・未来
馮 富久
業務システムとfreeeをAPI連携する際の課題と工夫
業務システムとfreeeをAPI連携する際の課題と工夫
Yusuke Tamukai
オタクエンジニアを熱くさせる!モチベーションと効率をあげるチームビルディング_20210611_TechDay#1_3
オタクエンジニアを熱くさせる!モチベーションと効率をあげるチームビルディング_20210611_TechDay#1_3
虎の穴 開発室
Apple sapの提携のその後
Apple sapの提携のその後
智洋 大野
Similar to 大きめレガシープロジェクトのフロント行く末
(20)
いまいる現場への愛を叫びたい
いまいる現場への愛を叫びたい
企業のビジネス戦略を体系化するWebサイト設計とは
企業のビジネス戦略を体系化するWebサイト設計とは
Html5fun@東京 Bootstrapにアニメーションを付けよう
Html5fun@東京 Bootstrapにアニメーションを付けよう
【SFO2020】業務SEを7か月でWebエンジニアに変える方法 ~アジャイルマインドを得るために~
【SFO2020】業務SEを7か月でWebエンジニアに変える方法 ~アジャイルマインドを得るために~
20220319_新卒から活躍し続けるエンジニアが大切にしている5つのこと
20220319_新卒から活躍し続けるエンジニアが大切にしている5つのこと
仲介手数料無料の不動産売買 プレゼンテーション資料
仲介手数料無料の不動産売買 プレゼンテーション資料
デザイナーといい感じに プロトタイピング on Rails
デザイナーといい感じに プロトタイピング on Rails
ウフル・Enebular紹介 170225
ウフル・Enebular紹介 170225
Trust Based Development
Trust Based Development
Deploy to Lobi
Deploy to Lobi
2020 cocone
2020 cocone
WiLでのデザイン思考活用法
WiLでのデザイン思考活用法
Lychee Redmine最新機能紹介とLycheeの未来について
Lychee Redmine最新機能紹介とLycheeの未来について
株式会社ウィーヴァジャパン 御中
株式会社ウィーヴァジャパン 御中
20160930_03_ロボットアプリ開発における、最適なUXを生み出すコツ
20160930_03_ロボットアプリ開発における、最適なUXを生み出すコツ
LIFULL HOME'S高速化への道のり
LIFULL HOME'S高速化への道のり
Gihyo Digital Publishing10年の歩み~専門書・専門雑誌の電子出版の過去・現在・未来
Gihyo Digital Publishing10年の歩み~専門書・専門雑誌の電子出版の過去・現在・未来
業務システムとfreeeをAPI連携する際の課題と工夫
業務システムとfreeeをAPI連携する際の課題と工夫
オタクエンジニアを熱くさせる!モチベーションと効率をあげるチームビルディング_20210611_TechDay#1_3
オタクエンジニアを熱くさせる!モチベーションと効率をあげるチームビルディング_20210611_TechDay#1_3
Apple sapの提携のその後
Apple sapの提携のその後
More from LIFULL Co., Ltd.
趣味と仕事の違い、現場で求められるアプリケーションの可観測性
趣味と仕事の違い、現場で求められるアプリケーションの可観測性
LIFULL Co., Ltd.
Kubernetesセキュリティの歩き方
Kubernetesセキュリティの歩き方
LIFULL Co., Ltd.
LIFULLの全社アプリケーション実行基盤 KEEL について
LIFULLの全社アプリケーション実行基盤 KEEL について
LIFULL Co., Ltd.
Kubernetesクラスタバージョンアップを支える技術
Kubernetesクラスタバージョンアップを支える技術
LIFULL Co., Ltd.
LIFULL HOME'SでのSolrの構成と運用の変遷
LIFULL HOME'SでのSolrの構成と運用の変遷
LIFULL Co., Ltd.
LIFULLでは新卒エンジニアに 丸一日のテスト研修を行なっている
LIFULLでは新卒エンジニアに 丸一日のテスト研修を行なっている
LIFULL Co., Ltd.
SaPID を導入するまでとそれから
SaPID を導入するまでとそれから
LIFULL Co., Ltd.
3D間取りを支える技術
3D間取りを支える技術
LIFULL Co., Ltd.
LIFULL HOME'Sのおとり広告予測モデルの開発
LIFULL HOME'Sのおとり広告予測モデルの開発
LIFULL Co., Ltd.
大企業でアジャイル開発を推進できる条件とその心構え
大企業でアジャイル開発を推進できる条件とその心構え
LIFULL Co., Ltd.
スクラムを利用したアジャイルオフショア開発のとりくみ
スクラムを利用したアジャイルオフショア開発のとりくみ
LIFULL Co., Ltd.
実践 マーケティングテクノロジーエンジニア
実践 マーケティングテクノロジーエンジニア
LIFULL Co., Ltd.
エンジニア × マーケティングテクノロジー が必要な理由
エンジニア × マーケティングテクノロジー が必要な理由
LIFULL Co., Ltd.
「空飛ぶホームズくん」を実現するVR技術
「空飛ぶホームズくん」を実現するVR技術
LIFULL Co., Ltd.
ニオイセンサで思索する街の新たな指標
ニオイセンサで思索する街の新たな指標
LIFULL Co., Ltd.
Well-beingを測る「LIFE WILL」開発の舞台裏
Well-beingを測る「LIFE WILL」開発の舞台裏
LIFULL Co., Ltd.
㊗ LINE新着物件通知 リリース!! PJ進行に沿って話す、 PjM/PdMとして やったこと
㊗ LINE新着物件通知 リリース!! PJ進行に沿って話す、 PjM/PdMとして やったこと
LIFULL Co., Ltd.
ウェブアクセシビリティ推進活動はじめました
ウェブアクセシビリティ推進活動はじめました
LIFULL Co., Ltd.
新しい検索体験とデザインシステム
新しい検索体験とデザインシステム
LIFULL Co., Ltd.
3時間でプロトタイプをユーザーにお届け!LIFULLの高速仮説検証プログラムとは?
3時間でプロトタイプをユーザーにお届け!LIFULLの高速仮説検証プログラムとは?
LIFULL Co., Ltd.
More from LIFULL Co., Ltd.
(20)
趣味と仕事の違い、現場で求められるアプリケーションの可観測性
趣味と仕事の違い、現場で求められるアプリケーションの可観測性
Kubernetesセキュリティの歩き方
Kubernetesセキュリティの歩き方
LIFULLの全社アプリケーション実行基盤 KEEL について
LIFULLの全社アプリケーション実行基盤 KEEL について
Kubernetesクラスタバージョンアップを支える技術
Kubernetesクラスタバージョンアップを支える技術
LIFULL HOME'SでのSolrの構成と運用の変遷
LIFULL HOME'SでのSolrの構成と運用の変遷
LIFULLでは新卒エンジニアに 丸一日のテスト研修を行なっている
LIFULLでは新卒エンジニアに 丸一日のテスト研修を行なっている
SaPID を導入するまでとそれから
SaPID を導入するまでとそれから
3D間取りを支える技術
3D間取りを支える技術
LIFULL HOME'Sのおとり広告予測モデルの開発
LIFULL HOME'Sのおとり広告予測モデルの開発
大企業でアジャイル開発を推進できる条件とその心構え
大企業でアジャイル開発を推進できる条件とその心構え
スクラムを利用したアジャイルオフショア開発のとりくみ
スクラムを利用したアジャイルオフショア開発のとりくみ
実践 マーケティングテクノロジーエンジニア
実践 マーケティングテクノロジーエンジニア
エンジニア × マーケティングテクノロジー が必要な理由
エンジニア × マーケティングテクノロジー が必要な理由
「空飛ぶホームズくん」を実現するVR技術
「空飛ぶホームズくん」を実現するVR技術
ニオイセンサで思索する街の新たな指標
ニオイセンサで思索する街の新たな指標
Well-beingを測る「LIFE WILL」開発の舞台裏
Well-beingを測る「LIFE WILL」開発の舞台裏
㊗ LINE新着物件通知 リリース!! PJ進行に沿って話す、 PjM/PdMとして やったこと
㊗ LINE新着物件通知 リリース!! PJ進行に沿って話す、 PjM/PdMとして やったこと
ウェブアクセシビリティ推進活動はじめました
ウェブアクセシビリティ推進活動はじめました
新しい検索体験とデザインシステム
新しい検索体験とデザインシステム
3時間でプロトタイプをユーザーにお届け!LIFULLの高速仮説検証プログラムとは?
3時間でプロトタイプをユーザーにお届け!LIFULLの高速仮説検証プログラムとは?
Recently uploaded
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
Recently uploaded
(8)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
大きめレガシープロジェクトのフロント行く末
1.
Copyright© LIFULL Co.,Ltd.
All Rights Reserved. 大きめレガシープロジェクトのフロン ト行く末 約10年前に作られたLIFULL HOME'Sの現行サイト。負債化したJSは何が不十分で負債化したのか、最小限のコストでよりよい設計・規則を 導入するためにどう立ち向かっていくか 2021.03
2.
Copyright© LIFULL Co.,Ltd.
All Rights Reserved. 2010年4月入社 アプリケーションエンジニアと入社して10年、現 在はややフロント寄りの業務をしている 学生時代にネトゲで嶌田氏と知り合い、その辺が きっかけでウェブ開発を始めた ウェブとDHHが大好き Nakajima Takuya Twitter: @nazomikan 大きめレガシープロジェクトのフロント行く末
3.
Copyright© LIFULL Co.,Ltd.
All Rights Reserved. 大きめレガシープロジェクトのフロント行く末 10年前にリニューアル後、以降大きなリニューアルもなく開発され続けてきたサイト(部分的にマイクロサービス化して いる) アプリケーション側の技術スタック • Symfony2 • Twig • jQuery + Backbone.View的な設計 • Babel/Rollup/Sass/部分的にtypescript LIFULL HOME’Sのサイト内情 1498 files. 136565 lines. JavaScript files (ignore library) おかしいな、さほど大きめではないような…
4.
Copyright© LIFULL Co.,Ltd.
All Rights Reserved. 大きめレガシープロジェクトのフロント行く末 基本的にはBackbone.Viewと同じ考え方 テンプレートパーツと対になるJavaScript側のViewがあって、それ単位で 振る舞いを記述している Backbone同様にイベント機構の統一などは重なっている View同士の連携はグローバルなカスタムイベントを使ってやりとりして いた。 (Backbone.Eventsをグローバル放出してpubsubするのとほぼ同じ) 既存コードでのViewの考え方
5.
Copyright© LIFULL Co.,Ltd.
All Rights Reserved. 大きめレガシープロジェクトのフロント行く末 • コードの流れの統一 • eventsを見ればそのUIの振る舞いがわかる • 全てのviewでそうなのでリードコストが削減される • Viewごとの振る舞い定義によるファイル分割 (問題あり) 解決されている問題
6.
Copyright© LIFULL Co.,Ltd.
All Rights Reserved. 大きめレガシープロジェクトのフロント行く末 結局なくならないDOM探索 • DOM探索で埋漏れるビジネスロジック • セレクタに依存してDOMの変更に弱い • 似た少し違うコードが量産されて、build時間が増大して いく • 横方向の区切りはできても縦方向のviewの境目が守られない • 安易なDOM探索が子,親viewを犯してしまう • 親・子分割がうまく行かず巨大な親だけ作られていく • インスタンスが露出して外部から使役される懸念が残る • XHR等で後に挿入されたHTMLへの振る舞いのアタッチが手動 になり、それでまたビジネスロジックが汚染される 後にわかるコードの隙
7.
Copyright© LIFULL Co.,Ltd.
All Rights Reserved.
8.
Copyright© LIFULL Co.,Ltd.
All Rights Reserved. 「HTMLとJavaScriptの概念的距離を圧縮したい」 DHH say: HTMLとJavaScriptはよく見ると、PHPとmysqlみたいな関係にある セレクタというQueryを投げてDOMを得ている データアクセスには手続きが必要で、壊れやすく、ビジネスロジックはそ のコードに埋もれ、さらには独特なそのデータ形式(NodeList等)の normalizeに苦心する DOMが変数やプロパティにアクセスするかのように簡単に参照でき、それ らへのアクセスに制限を設けることができれば問題は軽減する
9.
Copyright© LIFULL Co.,Ltd.
All Rights Reserved. 大きめレガシープロジェクトのフロント行く末 • JavaScriptの中にDOMを記述することでDOMの参照を探索せ ずに実現している • これもHTMLとJavaScriptの概念的距離の圧縮に成功し ている At modern library
10.
Copyright© LIFULL Co.,Ltd.
All Rights Reserved. Use React/Vue?
11.
Copyright© LIFULL Co.,Ltd.
All Rights Reserved. 大きめレガシープロジェクトのフロント行く末 • Existing DOMの安心感はなんだかんだ半端ない • JavaScriptが最悪動かなくてもHTMLドキュメントとして最低限機能を果たしてくれる • SEO的な懸念の回避 • インデックスが遅いだけで大丈夫とか、心配ならSSRすればとかあるけどそもそも そんな不安や複雑性を抱えたくない • 現行の資産(負債)の大きさ故にシステム構成レベルの変革を望まない • 負債は一括返済ではなく分割で返済したい • 返さなくていい負債は返すつもりもない • カバーする領域がJavaScript領域に閉じてない • 将来的な別ソリューションの登場時に撤退容易性が低い • 命預けるなら普遍的なHTMLを軸にしたライブラリにしたい • 将来的にビルドプロセスをなくしたいのでxxx-loader系と縁を持ちたくない • ビルド時間を気にしたり、ビルド設定に時間を費やすのはソフトウェアライターとして本 質的ではない しぶり続けて早5年、理由はよくあるやつ
12.
Copyright© LIFULL Co.,Ltd.
All Rights Reserved. 大きめレガシープロジェクトのフロント行く末 • Existing DOMのアプローチでDOMアクセスを省略できて、インスタンスを隠蔽できて、振る 舞いのアタッチを自動化できたらそれが一番いい • ついでに流行りのライブラリのようにHTML側からみて振る舞いが宣言的であれば嬉しい • ブラウザの敷いた道から離れたくない (戻るの大変なので) • WebComponentsがやや近しい?気がしてそれの発展に期待していた • 振る舞いの自動アタッチ • インスタンスの隠蔽 • DOMアクセスの制限(shadow root内に限られる) わがままな私たち
13.
Copyright© LIFULL Co.,Ltd.
All Rights Reserved. そんなこんなで負債を 垂れ流し続けたある日 Basecamp製のStimulusが熱いゾ
14.
Copyright© LIFULL Co.,Ltd.
All Rights Reserved. 大きめレガシープロジェクトのフロント行く末 • Basecamp製のJavaScriptライブラリ (thx. dhh, sstephenson, javan • Existing DOMアプローチ • DOMの変更をMutationObserverで監視し、対象のDOMが出現したら自動で定義した振る舞いをアタッチする。 • 操作したいDOMを明記しておくとgetterメソッドが自動で作られてプロパティのようにアクセスできる Stimulus data-[controller]-target=“xxx” の要素にthis.xxxTargetでアク セス data-action=“evt- >controller#method”で要素に 振る舞いをアタッチ data-cotrollerでHTMLと JavaScriptを接続
15.
Copyright© LIFULL Co.,Ltd.
All Rights Reserved.
16.
Copyright© LIFULL Co.,Ltd.
All Rights Reserved. 大きめレガシープロジェクトのフロント行く末 • Existing DOMの絶対的安心感 • アクセスするDOMは事前に定義でき、それらはシームレスにプロパティとしてアクセスできる • HTML側にアクセスする要素を記述するのでJavaScript側はHTMLの構造変更の影響をほぼ受けない • 振る舞いは自動でアタッチされインスタンスの隠蔽で悩む必要はない • HTML側からみて振る舞い、状態が宣言的である • HTMLの出現時に自動で振る舞いや状態がアタッチされるのでサーバ側からは大きなjsonを返す必要はなくHTMLを返 せばいい • 必然的に型・スキーマの重要性が下がる • Primitiveなcontrollerの再利用製の高さ • DOMをセレクタで探索するのではなくDOM側に対象を明記するのでDOMの構造差異に強く振る舞い自体の再利 用製が高い • disclosure/remover/modal/content-loader等、再利用製高い単一用途のcontrollerを作ってガンガン再利用できる Stimulus is great solution
17.
Copyright© LIFULL Co.,Ltd.
All Rights Reserved. 大きめレガシープロジェクトのフロント行く末 • stimulusでHTMLとJavaScriptの概念的距離を縮め、さらには振る舞いを宣言的にする • 全移行はコストかかるので本気ださない • 長い期間、既存設計と併用になるがそれを厭わない(困らないので) • 新しくそこを触るときにstimulusで置き換えられるところをそっと切り出すだけでいい • Build Processをいつか捨てるという夢は諦めない (ie11が死んだ暁には…) • bye babel, bye bundler, bye transpiler • アプリケーションの設定的な複雑性から解放されたい • PrimitiveなControllerを大量生産してコード量を1/20(次期目標)にしていく • 新規開発において既存のcontrollerをロードしてhtml側で属性組み立てるだけでそのページの振る舞いが完成すること が夢 • 書いたコードは例外なく将来負債になる • コードは書かないに越したことはない LIFULL HOME’Sの戦略
18.
Copyright© LIFULL Co.,Ltd.
All Rights Reserved. 大きめレガシープロジェクトのフロント行く末 LIFULL HOME’Sの戦略 HTMLを大事に Webに素直に
19.
Copyright© LIFULL Co.,Ltd.
All Rights Reserved. 大きめレガシープロジェクトのフロント行く末 終
Download now