Soumettre la recherche
Mettre en ligne
レガシーと向き合い技術スタックを代謝する(ElasticBeanstalk / Vue.js)
•
1 j'aime
•
2,567 vues
Recruit Lifestyle Co., Ltd.
Suivre
Meetup#9での発表資料です。 リクルートライフスタイル 岩下 太
Lire moins
Lire la suite
Ingénierie
Signaler
Partager
Signaler
Partager
1 sur 34
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
渋谷java−あなたのプロジェクトで気軽にjavaをバージョンアップするために必要なこと
渋谷java−あなたのプロジェクトで気軽にjavaをバージョンアップするために必要なこと
Y Watanabe
Arachne Unweaved (JP)
Arachne Unweaved (JP)
Ikuru Kanuma
XP祭り2017 LT 「DevOps再考」(改題)
XP祭り2017 LT 「DevOps再考」(改題)
Hiroyuki Ohnaka
テンプレートエンジンにMixer2を使うとSeleniumでのテストもラクになるかもねという話
テンプレートエンジンにMixer2を使うとSeleniumでのテストもラクになるかもねという話
Y Watanabe
Java8移行は怖くない~エンタープライズ案件でのJava8移行事例~
Java8移行は怖くない~エンタープライズ案件でのJava8移行事例~
Hiroyuki Ohnaka
JavaScriptフレームワーク入門にVue.jsはいかが?
JavaScriptフレームワーク入門にVue.jsはいかが?
好洋 山崎
Beginners scala 20121113
Beginners scala 20121113
Taisuke Shiratori
Turnipによるエンドツーエンドテストことはじめ
Turnipによるエンドツーエンドテストことはじめ
Takayuki Ujita
Recommandé
渋谷java−あなたのプロジェクトで気軽にjavaをバージョンアップするために必要なこと
渋谷java−あなたのプロジェクトで気軽にjavaをバージョンアップするために必要なこと
Y Watanabe
Arachne Unweaved (JP)
Arachne Unweaved (JP)
Ikuru Kanuma
XP祭り2017 LT 「DevOps再考」(改題)
XP祭り2017 LT 「DevOps再考」(改題)
Hiroyuki Ohnaka
テンプレートエンジンにMixer2を使うとSeleniumでのテストもラクになるかもねという話
テンプレートエンジンにMixer2を使うとSeleniumでのテストもラクになるかもねという話
Y Watanabe
Java8移行は怖くない~エンタープライズ案件でのJava8移行事例~
Java8移行は怖くない~エンタープライズ案件でのJava8移行事例~
Hiroyuki Ohnaka
JavaScriptフレームワーク入門にVue.jsはいかが?
JavaScriptフレームワーク入門にVue.jsはいかが?
好洋 山崎
Beginners scala 20121113
Beginners scala 20121113
Taisuke Shiratori
Turnipによるエンドツーエンドテストことはじめ
Turnipによるエンドツーエンドテストことはじめ
Takayuki Ujita
エンドツーエンドテストを自動化したらチームがすごく良くなった@XPまつり2015LT
エンドツーエンドテストを自動化したらチームがすごく良くなった@XPまつり2015LT
Taichi Watanabe
JJUG CCC 2015 Fall keynote
JJUG CCC 2015 Fall keynote
心 谷本
Jjugccc2017spring m6 javafx
Jjugccc2017spring m6 javafx
torutk
React.jsでHowManyPizza
React.jsでHowManyPizza
松田 千尋
フロントでのGraphQL
フロントでのGraphQL
Chao Li
JSオジサン openframeworks emscripten
JSオジサン openframeworks emscripten
minoru nakanou
Clojure Language Update (2015)
Clojure Language Update (2015)
sohta
React NativeでTwitterクライアントを作ってみよう
React NativeでTwitterクライアントを作ってみよう
dcubeio
WebエンジニアのReactNativeでの戦い方
WebエンジニアのReactNativeでの戦い方
PIXTA Inc.
2013 08-19 jjug
2013 08-19 jjug
sk44_
20140712 knockoutjs-hands-on-in-osaka
20140712 knockoutjs-hands-on-in-osaka
Seiji Noro
Selenium再入門-W3C勧告とページオブジェクトパターンと私-201707webエンジニア勉強会#2神田
Selenium再入門-W3C勧告とページオブジェクトパターンと私-201707webエンジニア勉強会#2神田
Y Watanabe
javascript を Xcode でテスト
javascript を Xcode でテスト
Yoichiro Sakurai
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
Shuichi Takaya
Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)
Tokuhiro Matsuno
React + Flux
React + Flux
_yukikayuki
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
Muyuu Fujita
JSX Design Overview (日本語)
JSX Design Overview (日本語)
Kazuho Oku
Play jjug2012spring
Play jjug2012spring
Takafumi Ikeda
大規模なJavaScript開発の話
大規模なJavaScript開発の話
terurou
世界をすこしだけ前に進めるということ
世界をすこしだけ前に進めるということ
Yukei Wachi
AngulaとElixirの新しい関係
AngulaとElixirの新しい関係
陸 谷出
Contenu connexe
Tendances
エンドツーエンドテストを自動化したらチームがすごく良くなった@XPまつり2015LT
エンドツーエンドテストを自動化したらチームがすごく良くなった@XPまつり2015LT
Taichi Watanabe
JJUG CCC 2015 Fall keynote
JJUG CCC 2015 Fall keynote
心 谷本
Jjugccc2017spring m6 javafx
Jjugccc2017spring m6 javafx
torutk
React.jsでHowManyPizza
React.jsでHowManyPizza
松田 千尋
フロントでのGraphQL
フロントでのGraphQL
Chao Li
JSオジサン openframeworks emscripten
JSオジサン openframeworks emscripten
minoru nakanou
Clojure Language Update (2015)
Clojure Language Update (2015)
sohta
React NativeでTwitterクライアントを作ってみよう
React NativeでTwitterクライアントを作ってみよう
dcubeio
WebエンジニアのReactNativeでの戦い方
WebエンジニアのReactNativeでの戦い方
PIXTA Inc.
2013 08-19 jjug
2013 08-19 jjug
sk44_
20140712 knockoutjs-hands-on-in-osaka
20140712 knockoutjs-hands-on-in-osaka
Seiji Noro
Selenium再入門-W3C勧告とページオブジェクトパターンと私-201707webエンジニア勉強会#2神田
Selenium再入門-W3C勧告とページオブジェクトパターンと私-201707webエンジニア勉強会#2神田
Y Watanabe
Tendances
(12)
エンドツーエンドテストを自動化したらチームがすごく良くなった@XPまつり2015LT
エンドツーエンドテストを自動化したらチームがすごく良くなった@XPまつり2015LT
JJUG CCC 2015 Fall keynote
JJUG CCC 2015 Fall keynote
Jjugccc2017spring m6 javafx
Jjugccc2017spring m6 javafx
React.jsでHowManyPizza
React.jsでHowManyPizza
フロントでのGraphQL
フロントでのGraphQL
JSオジサン openframeworks emscripten
JSオジサン openframeworks emscripten
Clojure Language Update (2015)
Clojure Language Update (2015)
React NativeでTwitterクライアントを作ってみよう
React NativeでTwitterクライアントを作ってみよう
WebエンジニアのReactNativeでの戦い方
WebエンジニアのReactNativeでの戦い方
2013 08-19 jjug
2013 08-19 jjug
20140712 knockoutjs-hands-on-in-osaka
20140712 knockoutjs-hands-on-in-osaka
Selenium再入門-W3C勧告とページオブジェクトパターンと私-201707webエンジニア勉強会#2神田
Selenium再入門-W3C勧告とページオブジェクトパターンと私-201707webエンジニア勉強会#2神田
Similaire à レガシーと向き合い技術スタックを代謝する(ElasticBeanstalk / Vue.js)
javascript を Xcode でテスト
javascript を Xcode でテスト
Yoichiro Sakurai
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
Shuichi Takaya
Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)
Tokuhiro Matsuno
React + Flux
React + Flux
_yukikayuki
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
Muyuu Fujita
JSX Design Overview (日本語)
JSX Design Overview (日本語)
Kazuho Oku
Play jjug2012spring
Play jjug2012spring
Takafumi Ikeda
大規模なJavaScript開発の話
大規模なJavaScript開発の話
terurou
世界をすこしだけ前に進めるということ
世界をすこしだけ前に進めるということ
Yukei Wachi
AngulaとElixirの新しい関係
AngulaとElixirの新しい関係
陸 谷出
脱・独自改造! GebでWebDriverをもっとシンプルに
脱・独自改造! GebでWebDriverをもっとシンプルに
Hiroko Tamagawa
TeachmeBizを支えるフロントエンドのアーキテクチャと品質担保
TeachmeBizを支えるフロントエンドのアーキテクチャと品質担保
Shingo Sasaki
React Redux Redux-Saga + サーバサイドレンダリング
React Redux Redux-Saga + サーバサイドレンダリング
エンジニア勉強会 エスキュービズム
クリスマスを支える俺たちとJava(JJUG CCC 2015 Spring AB4)
クリスマスを支える俺たちとJava(JJUG CCC 2015 Spring AB4)
Koichi Sakata
ビジネス的に高価値なアジャイルテスト
ビジネス的に高価値なアジャイルテスト
Tsutomu Chikuba
JavaScript Tips 2015(PDF 版)
JavaScript Tips 2015(PDF 版)
taskie
ソフトウェア開発の現場風景
ソフトウェア開発の現場風景
Koichi ITO
ABC2012Spring 20120324
ABC2012Spring 20120324
Tak Inamori
Intoroduction to React.js
Intoroduction to React.js
Yuto Matsukubo
Bp study39 nodejs
Bp study39 nodejs
Yohei Sasaki
Similaire à レガシーと向き合い技術スタックを代謝する(ElasticBeanstalk / Vue.js)
(20)
javascript を Xcode でテスト
javascript を Xcode でテスト
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)
React + Flux
React + Flux
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
JSX Design Overview (日本語)
JSX Design Overview (日本語)
Play jjug2012spring
Play jjug2012spring
大規模なJavaScript開発の話
大規模なJavaScript開発の話
世界をすこしだけ前に進めるということ
世界をすこしだけ前に進めるということ
AngulaとElixirの新しい関係
AngulaとElixirの新しい関係
脱・独自改造! GebでWebDriverをもっとシンプルに
脱・独自改造! GebでWebDriverをもっとシンプルに
TeachmeBizを支えるフロントエンドのアーキテクチャと品質担保
TeachmeBizを支えるフロントエンドのアーキテクチャと品質担保
React Redux Redux-Saga + サーバサイドレンダリング
React Redux Redux-Saga + サーバサイドレンダリング
クリスマスを支える俺たちとJava(JJUG CCC 2015 Spring AB4)
クリスマスを支える俺たちとJava(JJUG CCC 2015 Spring AB4)
ビジネス的に高価値なアジャイルテスト
ビジネス的に高価値なアジャイルテスト
JavaScript Tips 2015(PDF 版)
JavaScript Tips 2015(PDF 版)
ソフトウェア開発の現場風景
ソフトウェア開発の現場風景
ABC2012Spring 20120324
ABC2012Spring 20120324
Intoroduction to React.js
Intoroduction to React.js
Bp study39 nodejs
Bp study39 nodejs
Plus de Recruit Lifestyle Co., Ltd.
業務と消費者の体験を同時にデザインするリクルートの価値検証のリアル ー 「Airレジ ハンディ」セルフオーダーのブレない「価値」の確かめ方 ー
業務と消費者の体験を同時にデザインするリクルートの価値検証のリアル ー 「Airレジ ハンディ」セルフオーダーのブレない「価値」の確かめ方 ー
Recruit Lifestyle Co., Ltd.
分散トレーシングAWS:X-Rayとの上手い付き合い方
分散トレーシングAWS:X-Rayとの上手い付き合い方
Recruit Lifestyle Co., Ltd.
OOUIを実践してわかった、9つの大切なこと
OOUIを実践してわかった、9つの大切なこと
Recruit Lifestyle Co., Ltd.
Flutter移行の苦労と、乗り越えた先に得られたもの
Flutter移行の苦労と、乗り越えた先に得られたもの
Recruit Lifestyle Co., Ltd.
CTIサービスを支える裏側 〜物理デバイスとの戦い〜 | iOSDC Japan 2020
CTIサービスを支える裏側 〜物理デバイスとの戦い〜 | iOSDC Japan 2020
Recruit Lifestyle Co., Ltd.
「進化し続けるインフラ」のためのマルチアカウント管理
「進化し続けるインフラ」のためのマルチアカウント管理
Recruit Lifestyle Co., Ltd.
Air事業のデザイン組織とデザイナー
Air事業のデザイン組織とデザイナー
Recruit Lifestyle Co., Ltd.
リクルートライフスタイル AirシリーズでのUXリサーチ
リクルートライフスタイル AirシリーズでのUXリサーチ
Recruit Lifestyle Co., Ltd.
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
Recruit Lifestyle Co., Ltd.
データサイエンティストが力を発揮できるアジャイルデータ活用基盤
データサイエンティストが力を発揮できるアジャイルデータ活用基盤
Recruit Lifestyle Co., Ltd.
Real-time personalized recommendation using embedding
Real-time personalized recommendation using embedding
Recruit Lifestyle Co., Ltd.
データから価値を生み続けるには
データから価値を生み続けるには
Recruit Lifestyle Co., Ltd.
データプロダクト開発を成功に導くには
データプロダクト開発を成功に導くには
Recruit Lifestyle Co., Ltd.
Jupyter だけで機械学習を実サービス展開できる基盤
Jupyter だけで機械学習を実サービス展開できる基盤
Recruit Lifestyle Co., Ltd.
SQLを書くだけでAPIが作れる基盤
SQLを書くだけでAPIが作れる基盤
Recruit Lifestyle Co., Ltd.
BtoBサービスならではの顧客目線の取り入れ方
BtoBサービスならではの顧客目線の取り入れ方
Recruit Lifestyle Co., Ltd.
The Design for Serverless ETL Pipeline データ分析基盤のレガシーなデータロードをサーバレスでフルリプレースするまで道のり
The Design for Serverless ETL Pipeline データ分析基盤のレガシーなデータロードをサーバレスでフルリプレースするまで道のり
Recruit Lifestyle Co., Ltd.
リクルートライフスタイルにおける深層学習の活用とGCPでの実現方法
リクルートライフスタイルにおける深層学習の活用とGCPでの実現方法
Recruit Lifestyle Co., Ltd.
ビックデータ分析基盤の成⻑の軌跡
ビックデータ分析基盤の成⻑の軌跡
Recruit Lifestyle Co., Ltd.
Refactoring point of Kotlin application
Refactoring point of Kotlin application
Recruit Lifestyle Co., Ltd.
Plus de Recruit Lifestyle Co., Ltd.
(20)
業務と消費者の体験を同時にデザインするリクルートの価値検証のリアル ー 「Airレジ ハンディ」セルフオーダーのブレない「価値」の確かめ方 ー
業務と消費者の体験を同時にデザインするリクルートの価値検証のリアル ー 「Airレジ ハンディ」セルフオーダーのブレない「価値」の確かめ方 ー
分散トレーシングAWS:X-Rayとの上手い付き合い方
分散トレーシングAWS:X-Rayとの上手い付き合い方
OOUIを実践してわかった、9つの大切なこと
OOUIを実践してわかった、9つの大切なこと
Flutter移行の苦労と、乗り越えた先に得られたもの
Flutter移行の苦労と、乗り越えた先に得られたもの
CTIサービスを支える裏側 〜物理デバイスとの戦い〜 | iOSDC Japan 2020
CTIサービスを支える裏側 〜物理デバイスとの戦い〜 | iOSDC Japan 2020
「進化し続けるインフラ」のためのマルチアカウント管理
「進化し続けるインフラ」のためのマルチアカウント管理
Air事業のデザイン組織とデザイナー
Air事業のデザイン組織とデザイナー
リクルートライフスタイル AirシリーズでのUXリサーチ
リクルートライフスタイル AirシリーズでのUXリサーチ
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
データサイエンティストが力を発揮できるアジャイルデータ活用基盤
データサイエンティストが力を発揮できるアジャイルデータ活用基盤
Real-time personalized recommendation using embedding
Real-time personalized recommendation using embedding
データから価値を生み続けるには
データから価値を生み続けるには
データプロダクト開発を成功に導くには
データプロダクト開発を成功に導くには
Jupyter だけで機械学習を実サービス展開できる基盤
Jupyter だけで機械学習を実サービス展開できる基盤
SQLを書くだけでAPIが作れる基盤
SQLを書くだけでAPIが作れる基盤
BtoBサービスならではの顧客目線の取り入れ方
BtoBサービスならではの顧客目線の取り入れ方
The Design for Serverless ETL Pipeline データ分析基盤のレガシーなデータロードをサーバレスでフルリプレースするまで道のり
The Design for Serverless ETL Pipeline データ分析基盤のレガシーなデータロードをサーバレスでフルリプレースするまで道のり
リクルートライフスタイルにおける深層学習の活用とGCPでの実現方法
リクルートライフスタイルにおける深層学習の活用とGCPでの実現方法
ビックデータ分析基盤の成⻑の軌跡
ビックデータ分析基盤の成⻑の軌跡
Refactoring point of Kotlin application
Refactoring point of Kotlin application
レガシーと向き合い技術スタックを代謝する(ElasticBeanstalk / Vue.js)
1.
レガシーと向き合い技術スタックを 代謝する(ElasticBeanstalk/Vue.js) Futoshi Iwashita /
RLS Meetup#9 リクルートライフスタイルの フロントエンドのいまとこれから
2.
• 岩下 太
(jaxx2104) • 2017年5⽉ 中途⼊社 • フロントエンドエンジニア
3.
😭
4.
今⽇話したいこと • これまで1年間レガシーと向き合ってきた話 • 最近の取り組みについて2つの事例を紹介
5.
6.
jQueryです
7.
でもイメージよりは ずっと良いプロダクトです
8.
独⾃フレームワーク • jQuery +
lodash.template + morphdom の組み合わせ • MVVMモデルでDOM操作は基本しない
9.
ビルドツールは grunt から
gulp, webpack へと移⾏ ビルド時間の短縮 (特に開発時のcssビルド 60s -> 1s未満に改善)
10.
Unit Test, E2E
Test • ユニットテストは ava, sinon 半年でカバレッジ率は 40% -> 60% に • E2Eテストは Nightmare でUI差分取得
11.
モックやドキュメント • モックが⼀通り揃っているので開発のウェイトタイ ムは少ない • コードドキュメントは100%(OSSにPRを出して無 理⽮理カバレッジを上げたというのは秘密)
12.
Codecov, Sentry • カバレッジ率のチェックはCodecov =>
積極的にテストを書く環境作り • エラー検知はSentry => エラーの即時対応 => 障害原因となりやすい画⾯実装について議論できる
13.
レガシーと向き合いながら ⽇々の業務の中で改善している💪
14.
新規の開発案件での取り組み
15.
ひとつめ(フロントの取り組み) • 新規に3機能(フォームの多い設定画⾯) • API通信・iOS連携・バリデーション •
Vue.js の導⼊検討
16.
事前に認識合わせ
17.
利⽤したもの • Vue.js +
Vuex + vue-router • Vue スタイルガイド • Atomic Design • Storybook • Prettier + eslint-plugin-vue
18.
prettier + eslint-plugin- vue
19.
良かったこと • 仕様を決めながら⼤変だったがなんとか完成 • 画⾯と機能を分離できたことやコードフォーマットを 強制したことによる技術的な取り組み •
⽅針の事前共有したことによるコミュニケーションの 取り組み • UIパーツの移⾏ができたので既存画⾯についても移⾏ するきっかけとなった
20.
反省点 • 事前共有の段階で状態管理について踏み込んだ議 論ができると良かった • ディレクトリ構成やコンポーネントの粒度はVue のスタイルガイドやAtomicDesignを参考にし たがやっぱり⼈それぞれ •
VeeValidate でハマった(Qiita書いた)
21.
ふたつめ(インフラの取り組み) • 新規顧客向けのデモモード機能の提供 • JSONのモックAPIサーバーの構築
22.
ElasticBeanstalk + Node.js
23.
ElasticBeanstalk • 負荷分散、オートスケーリング、モニタリングを よしなにやってくれる • 環境設定のカスタマイズはコードベースでアプリ ケーションと⼀緒に管理できる
24.
M 4 M 4 M 4 M 4 ExtELB ExtELB In tELB In tELB U ser U ser A u to Sca lin g A u to Sca lin g C lo u d Fro n t C lo u d Fro n t Sta tic File Sta tic File B a ck u p B a ck u p V ersio n in g V ersio n in g Ela stic B ea n sta lk Ela stic B ea n sta lk C lo u d W a tch C lo u d W a tch D evelo p er D evelo p er 構成図
25.
アプリケーション構成
26.
Immutable deploy
27.
Rolling deploy # ver1 ver2ver1 # デプロイ時に同じ環境に新旧のサーバが混在する インスタンスを使いまわす事になる
28.
Immutable deploy 😇 😇#
# ver1 ver1 ver2 ver2ver1 デプロイ時に環境を分けて作成する インスタンスは常に新しい状態を保つ
29.
良かったこと • フロントエンドエンジニアでも運⽤しやすいイン フラ環境が構築が出来た • Immutable
Deploy は Node.js でクラス タリングした場合に相性が良さそう • インフラとフロントの関わりが強くなったこと で、サービス開発を最⼤化できた
30.
反省点 • 既存インフラにElasticBeanstalkを寄せて いくのは少し⼿間だった • チームに展開するため運⽤フローをもっと早い段 階で整備すべきだと思った
31.
1年間レガシーと向き合って
32.
フロントエンドエンジニアが レガシーと向き合う場⾯って多い • サービス開発の実現可能性を下げてしまう • 同じ機能でもiOS/FE間の⾮機能要件での差異が⼤きい •
競合他社が提供している機能が技術要件によって阻害されている • フロントエンドエンジニアとしての評価 • 社外から⾒たとき最低限の技術スタックを満たせていない
33.
フロントエンドエンジニアとして 技術スタックを代謝するために • アプリケーションにフォーカスし続ける • 常にクライアントのエンゲージメント向上に貢献する •
いつか良いレガシーとなる為にレガシーと向き合う • それ以外(デザイン、インフラ etc..) • フロントエンドエンジニアはバケツリレー要員として発⽣し ている職能だと思っているので積極的に関与していく • ⾃動化・省⼒化するところが⾒せ所
34.
以上です ありがとうございました!
Télécharger maintenant