More Related Content
Similar to 要求開発アライアンス納涼会 LT (フロント開発) (20)
More from Atsushi Takayasu (10)
要求開発アライアンス納涼会 LT (フロント開発)
- 2. 1 2 3 4 5前提条件という名の言い訳
▌ご存知の方はご存知だと思いますが
私はフロントエンジニアではありません!
▌プラットフォームビジネスとしてAPIを展開し
ようとするとどうしてもここが話題になるの
で、勉強した話をしたいと思います。
Copyright (C) 2018 Atsushi Takayasu All Rights Reserved. 2
- 3. 1 2 3 4 5背景
▌SoEにおけるアプリケーションは基本的にマルチ
チャネル(Web、スマートフォンなど)が要求され
るが、コストは最小限にしたい
▌MSAで構成したシステムを画面UIでどう統合するか
は意外に課題であり、その解決案の一つとして見て
いた
Copyright (C) 2018 Atsushi Takayasu All Rights Reserved. 3
- 4. 1 2 3 4 5位置情報サービス(API)
▌室内の位置情報を元にした位置情報サービスを提供
しています。
▌ハードが必要です!
Copyright (C) 2018 Atsushi Takayasu All Rights Reserved. 4
経路管理
BLE管理 経路/
BLE情報
運営者
位置情報
APIs
位置情報
経路情報/
BLE情報
利用者
- 5. 1 2 3 4 5MSAと統合の例
▌MSAに基づいたサービスを画面で統合する
Copyright (C) 2018 Atsushi Takayasu All Rights Reserved. 5
①
②
③
④
⑤
⑥
⑦
⑧
⑨
⑩
⑪
【引用元】
https://www.slideshare.net/JayLee1/cf-meetup-in-seoul-spring-cloud-services
- 6. 1 2 3 4 5SPAを実現するJSエコシステム
▌Node,jsをベースとするJSのエコシステムによって
SPA(Single Page Application)を実現しています。
Copyright (C) 2018 Atsushi Takayasu All Rights Reserved. 6
Node
webpackなど
各ライブラリコマンド(vue-cli-serviceなど)
React Angular Vue
- 7. 1 2 3 4 5SPAを実現するルータ
▌URLとコンポーネントをマッピングして、DOM(仮
想DOM)の書き換えを支援する。
Copyright (C) 2018 Atsushi Takayasu All Rights Reserved. 7
<Switch>
<Route exact path='/' component={Top} />
<Route exact path='/tasks' component={Task} />
</Switch>
<NavDropdown eventKey={5} id={5}title="タスク">
<LinkContainer exact to="/tasks">
<MenuItem eventKey="5.1" onClick={ () =>
this.updateModal(false)} >検索・一覧</MenuItem>
</LinkContainer>
ルート定義(ReactRouter Bootstrap)
メニュー定義( ReactRouter Bootstrap)
- 8. 1 2 3 4 5Webコンポーネント
▌ようやく、Webコンポーネント(画面)が定義でき
るようになりました!
▌実際はまだまだなので、各ライブラリが独自実装し
ている
Copyright (C) 2018 Atsushi Takayasu All Rights Reserved. 8
https://caniuse.com/#search=Custom
- 9. 1 2 3 4 5コンポーネントの例
▌VUEJSで見てます。
Copyright (C) 2018 Atsushi Takayasu All Rights Reserved. 9
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For guide and recipes on how to configure / customize
this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank"
rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-
cli/tree/dev/packages/%40vue/cli-plugin-babel"
target="_blank" rel="noopener">babel</a></li>
〜略〜
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String,
},
};
</script>
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
- 10. 1 2 3 4 5コンポーネント間の通信
▌コンポーネント間にイベントを受け渡す、情報を受
け渡す時に原則として親子関係でしか実施できませ
ん。(ライブラリによります)
▌不便(正確には少し違う)なので、Fluxという仕組
みを利用します
Copyright (C) 2018 Atsushi Takayasu All Rights Reserved. 10
Component
Action
Dispatcher
Store
- 11. 1 2 3 4 5最後に
▌SPAのフロントアプリケーションはB2Cサイトだけ
でなく社員向けシステムでも求められてつつある。
▌特にハイブリッド開発としてSPAのJSアプリケー
ションをビルドすることで対応することもできるた
め大きな注目を浴びている
▌コンポーネント、ルータ、Fluxを意識するとわかり
やすいかと。
Copyright (C) 2018 Atsushi Takayasu All Rights Reserved. 11
https://qiita.com/superyusuke/items/948d2a084f87eaa3f9c2
https://raw.githubusercontent.com/kamranahmedse/developer-
roadmap/master/images/frontend-v2.png
参考URL