Weitere ähnliche Inhalte
Ähnlich wie Angularreflex20141210 (20)
Mehr von Shinichiro Takezaki (17)
Angularreflex20141210
- 2. • ⽵竹嵜 伸⼀一郎郎 (たけざき しんいちろう)
• ⽵竹⼭山 恵悟(たけやま けいご)
• (有)バーチャルテクノロジー
– 分散KVSのミドルウェア(ReflexWorks)開発
Copyright © Virtual Technology, Inc
2
- 3. Copyright © Virtual Technology, Inc
Agenda
1. SPA概要
2. 事例例紹介とDEMO
3. AngularJSとデータバインディング
4. ReflexWorks
5. トランザクション、スキーマ
6. 開発環境
3
- 5. SPA(Single Page Application)とは
• 優れたUXを提供することを⽬目的とする
1つのWebページで提供されるアプリケーション
– クライアントはXHR等でサーバにリクエストし、結果
をJSONなどのデータで受取る
– ページの再読込せずにJavaScriptで動的に更更新する
Copyright © Virtual Technology, Inc
5
- 6. Copyright © Virtual Technology, Inc
なぜSPA?
• サーバーでHTMLを⽣生成するよりも、
クライアントで動的に画⾯面を更更新する⽅方が効率率率的
• ユーザーの操作に応じてインタラクティブに動く
リッチクライアントを実現できる
6
これってネイティブアプリ?
お客様
いいえ、Webアプリです。
開発者
SPA
- 8. Copyright © Virtual Technology, Inc
疎結合で役割が明確
• サーバサイド
– View(HTML⽣生成)が不不要
– 主にJSONを返すRESTfulなAPIの提供
– 認証情報など⼀一部を除き基本的にステートレス
– 業務ロジックの⼀一部(採番など)
• クライアントサイド
– View(テンプレート)
– ルーティング
– コントローラ (業務ロジックの⼤大部分)
– 通信
8
ちなみに、業務ロジック⽐比率率率は
クライアント6:サーバ1ぐらい
- 12. 導⼊入の効果
UI/UX、パフォーマンス、スケーラビリティを同時に解決
12
Copyright © Virtual Technology, Inc
• UI/UX
– リッチで⾼高度度なユーザビリティを実現
• パフォーマンス
– クライアントリソースの活⽤用で⾼高速化
– サーバ側への負荷は70%負荷軽減
• スケーラビリティ
– スモールスタートで急激なアクセスにもノード追加で対応
- 13. 公報⼀一括ダウンロードサービス
Copyright © Virtual Technology, Inc
〜~ 特許検索索集合演算・スクリーニング効率率率化⽀支援ツール 〜~
13
1993年以降の日本国の特許・
実用新案データ(PDF公報)を
収録。様々な番号形式の取込
み、集合演算、栞やメモの付与、
フォルダ共有、 PDF公報の一
括ダウンロード機能などにより、
スクリーニング作業の効率化を
はかれます。
http://www.pdc.jp/download/
h*ps://www.youtube.com/watch?feature=player_embeddedv=2RYXRVCf2n4
- 17. SPAといえばAngularJS
Copyright © Virtual Technology, Inc
• 双⽅方向データバインディング
– Modelが変更更されたらViewを更更新する。またはその逆
• ルーティング
– バックボタンが使え普通のWebアプリと同じ感覚
• テンプレートとしてのHTML
• その他
– DI
– ディレクティブ
– ・・・
17
- 19. Copyright © Virtual Technology, Inc
データバインディング
イベントによってModelが変更更されたら
⾃自動的にViewの該当箇所が書き換わる
19
by
- 20. Copyright © Virtual Technology, Inc
languageFactory
20
• ⽇日本語/英語の
切切り替え
h*p://qiita.com/takeyama/
items/5e5fa1ece7f524ab8690
- 24. SEO対策問題
「サーバサイドでのHTMLの事前レンダリングから解放され、Google
がクロールするようになるのはいつか?」
「今年年の末までには」
・・ http://wazanova.jp/items/1613
Copyright © Virtual Technology, Inc
ルーティング
URLのhashを使ってビューを切切り替え
特定のページに外部からリンクを張れる
• #/main
• #/booking
• #/master
24
- 26. サーバサイドどうするの?
• LAMP
– RailsでHerokuとか
– クライアントといろいろ被っている(密結合)
• MEAN
– スキーマレスNoトランザクション(MongoDB)
– コールバック地獄(Node.js)
• BaaS
– SPAをターゲットにしたものが少ない
– 開発環境がが
Copyright © Virtual Technology, Inc
26
- 27. AngularJS+ReflexWorksがよい理理由
• ドキュメント指向
– XMLやJSONなどの構造化データの読み書きができる
– ACIDトランザクションをサポート
Copyright © Virtual Technology, Inc
• MV*アーキテクチャー
– ModelとViewに集中、データバインディング
– サーバサイドを意識識しない開発
• ソフトスキーマ
– アプリケーションで定義するスキーマを採⽤用、
項⽬目の追加が容易易
• クライアントビルド環境
– Yeoman、Grunt、Bower + CircleCI (Travis CI)
27
- 28. 28
Copyright © Virtual Technology, Inc
• リソースURLを⾃自由に設定・追加
• リソースを様々なフォーマットに変換
直感的なREST API
- 35. MongoDBでも実は同じこと
1. トランザクション問題を回避する
2. スキーマをしっかりと設計する
MongoDBでECサイトを実運用する3つのテクニック より
h*p://blog.otakumode.com/2014/08/01/ec-‐mongodb/
MongoDBでもうまく設計すればECだって作れるよ
裏裏を返せばそれだけ⼤大変な⽬目に合いますよということ
Copyright © Virtual Technology, Inc
35
- 36. ReflexWorksのトランザクション管理理
データの⼀一貫性を確保しつつ⾼高いスループットを実現
• Feed(Collection)単位のAtomicトランザクション
https://www.facebook.com/notes/virtual-‐‑‒technology/
bdbトランザクションとreflexworksの処理理について/486790368009209
Copyright © Virtual Technology, Inc
– 分離離レベル:REPEATABLE READ
• かつ、Entry単位のバージョン⽐比較
– 分離離レベル:SNAPSHOT ISOLATION
– 全てのEntryはURLとリビジョンで管理理される
– リビジョン=更更新されると+1される
36
詳細:
- 37. 例例:「鏡+明細」で1トランザクション
Copyright © Virtual Technology, Inc
37
feed
entry
id鏡,リビジョン/id
/entry
entry
id明細1,リビジョン/id
/entry
entry
id明細2,リビジョン/id
/entry
・・・・
/feed
鏡
明細
- 38. 業務アプリではスキーマが必要
• 任意のログをDBに突っ込んで分析に使う
といった⽤用途にはスキーマレスがいい
• そもそもモデルを設計しないと業務アプ
リは作れない
• スキーマレスはお⼿手軽だが⾃自由に開発し
ていると後で酷い⽬目にあう
• パフォーマンス向上やスケーラブルにす
る為にはやはりスキーマ設計が必要
Copyright © Virtual Technology, Inc
38
- 39. Copyright © Virtual Technology, Inc
スキーマ テンプレート
• シンプルなシンタックス
– 「項⽬目名(型)= 正規表現」の形式で記述
• バリデーション
– 正規表現で値をチェック
• ソフトスキーマ
– 項⽬目の追加が可能
• Index
– Index指定が可能
39
booking
registration_no=d{0,7}-d{0,2}$
date(datestring)!=^d{0,2}/d{0,2}/d{0,2}$
type[]!=^Foo$|^Bar$|^Buzz$
payment_method_name!=^[0-9a-zA-Z]{0,15}$
shipper
customer_no=^d{0,6}$
company_name!=^[a-zA-Z0-9- .,/:@`~()'%]{0,50}$
zipcode!=^d{3}-d{4}$
- 40. スキーマとインスタンス
ちなみに、GET /booking?booking.type=Foo で配列も検索可能
Copyright © Virtual Technology, Inc
booking
registration_no=d{0,7}-d{0,2}$
date(datestring)!=^d{0,2}/d{0,2}/d{0,2}$
type[]!=^Foo$|^Bar$|^Buzz$
payment_method_name!=^[0-9a-zA-Z]{0,15}$
shipper
customer_no=^d{0,6}$
company_name!=^[a-zA-Z0-9- .,/:@`~()'%]{0,50}$
zipcode!=^d{3}-d{4}$
40
{
feed: {
entry: [
{
booking: {
registration_no: 0000001-01,
”date: 14/10/20,
”type: [ ”Foo” ,”Bar” ],
payment_method_name: CARD,
},
shipper: {
customer_no: 12347,
company_name: ”ABC Corp,
zipcode: 651-2133
},
updated: 2014-10-20T17:38:17.644+09:00
}
]
}
}
- 43. Copyright © Virtual Technology, Inc
サンプルプログラム
• feedToArrayService.f2a()で
MessagePack Arrayへの変換と
バリデーション実⾏行行
• reflexDataService.postでリクエスト送信
43
- 45. スキーマでこんなこともできる
• APIドキュメントの⾃自動⽣生成
• APIクライアントの動的定義
• APIサーバのレスポンス⾃自動⽣生成とテスト
Copyright © Virtual Technology, Inc
全てがJSONになる
h*p://r7kamura.hatenablog.com/entry/2014/06/10/023433
45
- 46. サーバサイドJavaScript
• GET /s/booking などで起動
• /booking.js の doGet() が呼ばれる (CoC)
• POST、PUT、DELETEも同様
• JSの関数内部で ReflexContext.xxx(url) を実
⾏行行することで実際にDBを読み書きする
Copyright © Virtual Technology, Inc
46
- 48. 48
Copyright © Virtual Technology, Inc
ビルドツール
• Yo
– Scaffold(雛形)の作成
• Grunt
– タスクランナー
• Bower
– パッケージ管理理
- 49. セットアップ、実⾏行行、デプロイ
• npm install –g generator-reflexworks
• yo reflexworks
Copyright © Virtual Technology, Inc
• grunt serve
• grunt test
• grunt protractor:E2E_local
• grunt upload
49
- 50. Copyright © Virtual Technology, Inc
grunt-connect-proxy
• grunt でリバースプロキシ
• クロスドメイン問題の回避
• サービスのURLだけをサーバに向ける
50
/d/master
ローカル環境で
開発しているイメージ
- 52. Copyright © Virtual Technology, Inc
まとめ
• SPAは素晴らしいアーキテクチャ
– UI/UX、パフォーマンス、スケーラビリティ
– HTMLとJSだけで楽チン開発
• AngularJSとReflexWorksの組み合わせ
– サーバを意識識することのない開発
– MV*モデルとデータバインディング
• 業務アプリ開発で苦労しないためには
– トランザクション管理理とスキーマが⼤大事
52