Open SKT: メルペイ開発の裏側 / builderscon tokyo 2019 Open SKT - Speaker Deck
決済系の難しい系
決済のトランザクションだけじゃなくて、他にも難しいことがある
メルカリ、メルペイの考え方の違い
複数のサービスをリリースしてきた
マイクロサービスアーキテクチャを採用していて、40個以上ある
スーパーかぜぐすりタイム
サービスを普段開発している時に、より安定するという状況をつくれない
コストをかけてでもインフラのように信頼できるシステムを作れるようにする
client -> api gateway -> api service -> backend service
api serviceが本当に正しいリクエストかどうかを判断する
色々なサービスに結びついている決済システム
分散システムのトランザクションをマイクロサービスでやるのは難しい
中央の決済をするマイクロサービスで状態を一括管理することにする
お金は加算と減算ができて、減算は失敗するかもしれない
べき等性を担保する必要がある
Tryが全て成功したら、confirmを行なう
どこかが失敗したらcancelをする
メルカリの金額の動きがあると、その金額の内訳も知っておかなければならない
会計がそれを担う
会計が本当にデータが正しいかをマイクロサービス間で連携して、確かめる
不確定なデータから確定したデータに変換する <- 清算処理
＃＃ 不正検知
どこでやるか
- ログイン
- 入金
- 出勤
金融庁からガイドラインが出ている
疑わしい人と取引を見つけ出す
ルールベースと機械学習ベースのモニタリングをやっている
splunkで判断して報告
DesignDoc -> Dev -> Test -> Readliness check -> Release -> Ops
開発の安定性をどうするかは考えていきたい
QAはちゃんと自分で説明できるように、しっかりテストケースを書く production readiness checkは、品質チェック項目リストなどがある。経営陣との判断もある
メルペイの本番環境にログインできるのは、SREのみ 扱っているデータが、お金の情報だから
障害起こった時にどうするか、開発者がアクセスする時はちゃんと権限を考えて制限をかけた状態でやってもらう
HHKBを6年くらい使っていたけど、自作キーボード作りたくなったらしい
そな太さん
Reactがなんか良さそうで使っている人もいるかも
宣言的UIを実現するためのツール
宣言的UIは標準になりつつある
Reactが大きい
Reactは宣言的UIを意識しなくても大丈夫な構造になっている
HTMLなどはそれ
実行すれば毎回同じ結果が返ってくる
時間軸と起こったことを理解しないと、動作がわからない
変数などがあり、それが変わった時に再描画してくれる
前の状態を考慮して、今の状態を変更する
描画時に分岐ができ、状態を気にしなくても書くことができる
- ローカルステート
- グローバルステート
- redux
ユーザなどは、global stateとかになりやすい（色んな所で利用する）
User情報をバケツリレーとかしたくないので、global stateから直接取ってくることができる
- local stateはコールバック
- 参照を渡して変更
Function: View Hooks: その他
usePopupなどの関数に状態(useStateで)を切り出して、それをpopupしたいコンポーネントで再利用するだけ HoCは利用しなくても良くなった
useEffectを利用することで、複数の処理を分けることができる そしてuseEffectも関数化できるので再利用できる。
iOSアプリ設計パターン入門という本が良い
clean architectureを利用すると、repository層をplugableにできる
sakitoさん
現在フロントエンドに欠かせないwebpackとBabelを理解しよう
TC39というコミュニティがある
- Stawperson
- Proposal
- Draft
- Candidate
- Finished
ブラウザに実装されないと、その機能が出るかどうかがわからない
ブラウザごとにエンジンが異なっている
JavaScriptを変換する
babelは、最初6to5という名前だったらしい 6から5へ変換するから
便利な機能を使いたいから利用する
ソースコード変換 <- codemods
can i useで色々対応状況を見れる
babelの変換ステップ
- Parsing
- ASTに変換する
- AST explorer
- Transformation
- ASTを使いやすいように変換
- code generate
- 生成
@babel/cli, @babel/coreを利用する
parse, generateのみ
変換はbabel pluginsを利用
pluginを入れたら変換できた！
モジュールバンドラー img, cssなどもモジュールとして取り込み一つにする
ほぼpluginでできている
modules-webmakeがcommonJSをブラウザー用に変換していたツールだった これにcode splitting機能を追加したかったが、reject なのでmodules-webmakeをforkして、webpackにした
1つのバンドラーとして開発していたところ、instagramで利用されていて注目された
- entry
- 起点となるファイルを指定
- output
- loaders
- loaderは末尾から呼ばれるので、一番下のloaderが先に呼ばれる
- plugins
- mode
- browser compatibility
webpack -> webpack cli
compiler, compilationが色んなイベントをhookしている
compilerはrunなど、compilationは最適化
以下スライド参照