More Related Content
Similar to MAJINを支えるフロントエンド技術 (20)
MAJINを支えるフロントエンド技術
- 2. © Geniee, Inc.
プロフィール
張 志鋒(チョウ シホウ)
• 前職はUnity UIライブラリやHTML5 WebGLゲームエンジンなどを開発
• 2016年にジーニーに入社してすぐMAJINの立ち上げに携わる
• 現在はMAJINの基盤技術の開発を主に担当
孫 星越(ソン セイエツ)
• 2015年大学院を卒業後に新卒としてジーニーに入社
• DMPチームでデータの可視化と集計の開発を経験
• MAを立ち上げる際に携わる
• 現在はMAのアプリケーション開発を主に担当する
2
- 5. © Geniee, Inc. 5
MAJINの全体概要
顧客に合わせてマーケティングプロセスを効率化・可視化・自動化
リードナーチャリング & リードクオリフィケーションリードジェネレーション
一般的なCRM・MAツール
× 広告運用
名刺管理・IP分析
顧客の動きと状態を可視化し、適切なアクションを適切なタイミングで実施
不良リードへの工数削減、優良リードに注力
課
題
認
知
情
報
収
集
比
較
検
討
受
注
- 7. © Geniee, Inc.
MAJINのフロントエンドとJavaScript
MAJIN管理画面
• 主に「フロントエンド」と呼ばれる部分
• ES6 + Vue.js
Tracker (MAJIN追跡のタグ)
• お客様のサイトに埋められる行動追跡スクリプト
• 最近ボットなどの機能を実装するため、管理画面と同じJSコードベースに移行した
Webスクレイピング
• Headless Chromeを使用し外部データ連携などでブラウザの行為をシミュレート
• ES6がHeadless Chromeとの親和性が高い
End2Endテスト
• Webスクレイピングと共通する技術を使用、ES6を採用
• Mochaが使いやすい
7
今回説明する部分
- 9. © Geniee, Inc.
Vue.jsを選んだ理由
使い方が簡単、学習コストが低い
• 勉強会1時間程で始められる
初めから少しづつ適用していける(Progressive framework)
• 最初はシナリオ機能から導入した
• 使える人が増えれば増えるほど、Vue.jsに統一することが可能となった
MVVM(Model-view-viewmodel)であること
• 大規模なシングルページアプリケーションに不可欠
コミュニティが活発、将来性がある
9
- 10. © Geniee, Inc.
MAJINフロントエンドの課題
高機能なシナリオとコンテンツ
• メール、エントリーフォーム、LINEメッセージ、Webプッシュ、Appプッシュなど
• 一つの画面でMAJINの自動化機能を集約したシナリオ
• 一つの状態マネージャーで十数種類のノードの追加、更新や操作履歴を記録できる
技術的負債が残っている
需要多様化 & 機能複雑化 & 規模巨大化
10
- 13. © Geniee, Inc.
Vueの状態管理
活用事例・その一:シナリオとVuex
13
Vue.js Components
<parent>
<child> <child>
- 20. © Geniee, Inc.
活用事例・その三:TypeScript & Yeomanによる効率向上
TypeScript導入して型チェックを行う
• TypeScript ~= 型チェックのあるES6
• ES6と完全に互換性があるので導入が簡単
VuePropertyDecoratorでVue.jsをTypeScriptで簡単に書ける
20
- 25. © Geniee, Inc.
まとめ
MAJINとMAJINのフロントエンドを紹介した
MAJINのフロントエンドの課題とその解決案を紹介した
• 高機能なシナリオとコンテンツ → Vuex活用
• 既存機能とのギャップを埋める → 独自プラグイン開発
• 需要多様化 & 機能複雑化 & 規模巨大化 → TypeScriptとYeomonを導入
今後に
• 一部のAPIをGraphQLに移行する
• TypeScript化を推進
• End2Endテストカバレッジ向上
25
Editor's Notes
- 四つの部分を説明するだけ
- * LINEコンテンツ* Workflowのundo/redo. -> vuex だからやりやすかった* TypeScript & vue-class-componet decoartor & yeoman 活用*
- 四つの部分を説明するだけ
- これらの課題を解決するために、われわれはアーキテクチャから着手しました。
- 考えましょう
- 文字をなんとかを
- 複数のビューが同じ状態に依存する 異なるビューからのアクションで、同じ状態を変更する必要
- 矢印を追加コミット番号
方向を変更
- なんでもできるようと伝える
- Yaml例を追加
- Validatorも説明
- 左側の一部を削る矢印を追加