Angularreflex20141210

AngularJSとReflexWorksで始めるSPA開発
Copyright © Virtual Technology, Inc
〜～もうサーバー側で悩まなくて⼤大丈夫〜～

2014/12/10 有限会社バーチャルテクノロジー
1

• ⽵竹嵜伸⼀一郎郎（たけざきしんいちろう）
• ⽵竹⼭山恵悟（たけやまけいご）

• （有）バーチャルテクノロジー
– 分散KVSのミドルウェア(ReflexWorks)開発

2

Agenda

1. SPA概要
2. 事例例紹介とDEMO
3. AngularJSとデータバインディング
4. ReflexWorks
5. トランザクション、スキーマ
6. 開発環境
3

1. SPA概要
4

SPA(Single Page Application)とは

• 優れたUXを提供することを⽬目的とする
１つのWebページで提供されるアプリケーション

– クライアントはXHR等でサーバにリクエストし、結果
をJSONなどのデータで受取る
– ページの再読込せずにJavaScriptで動的に更更新する
5

なぜSPA?
• サーバーでHTMLを⽣生成するよりも、
クライアントで動的に画⾯面を更更新する⽅方が効率率率的
• ユーザーの操作に応じてインタラクティブに動く
リッチクライアントを実現できる
6
これってネイティブアプリ？
お客様
いいえ、Webアプリです。
開発者
SPA

SPAのアーキテクチャー
h*p://www.slideshare.net/fullscreen/sagawafumio/ss-‐38480894/6
7

疎結合で役割が明確
• サーバサイド
– View(HTML⽣生成)が不不要
– 主にJSONを返すRESTfulなAPIの提供
– 認証情報など⼀一部を除き基本的にステートレス
– 業務ロジックの⼀一部（採番など）
• クライアントサイド
– View(テンプレート)
– ルーティング
– コントローラ (業務ロジックの⼤大部分)
– 通信
8
ちなみに、業務ロジック⽐比率率率は
クライアント６：サーバ１ぐらい

共通のAPIを持つのが理理想
サーバは単にデータを返すだけで画⾯面遷移など
クライアントの状態は知らないことがポイント
9

2. 事例例紹介とDEMO
10

11
⼤大規模 Web帳票システム

導⼊入の効果
UI/UX、パフォーマンス、スケーラビリティを同時に解決
12

• UI/UX
– リッチで⾼高度度なユーザビリティを実現
• パフォーマンス
– クライアントリソースの活⽤用で⾼高速化
– サーバ側への負荷は７０％負荷軽減

• スケーラビリティ
– スモールスタートで急激なアクセスにもノード追加で対応

公報⼀一括ダウンロードサービス
〜～特許検索索集合演算・スクリーニング効率率率化⽀支援ツール〜～
13
1993年以降の日本国の特許・
実用新案データ（PDF公報）を
収録。様々な番号形式の取込
み、集合演算、栞やメモの付与、
フォルダ共有、 PDF公報の一
括ダウンロード機能などにより、
スクリーニング作業の効率化を
はかれます。
http://www.pdc.jp/download/
h*ps://www.youtube.com/watch?feature=player_embeddedv=2RYXRVCf2n4

クラウドとオンプレミスの融合
14

WebSocketによるイベント通知機能
• WebSocketのコネクション確⽴立立時に認証する
• 接続情報をセッションで管理理
• フォルダ共有（R権限）でかつログイン中のユーザに通知
h*p://reflexworks.jp/features.html#pushNoUficaUons

15
Reactive!

3. AngularJSと
データバインディング
16

SPAといえばAngularJS
• 双⽅方向データバインディング
– Modelが変更更されたらViewを更更新する。またはその逆
• ルーティング
– バックボタンが使え普通のWebアプリと同じ感覚
• テンプレートとしてのHTML
• その他
– DI
– ディレクティブ
– ・・・
17

18
⼈人気度度

データバインディング
イベントによってModelが変更更されたら
⾃自動的にViewの該当箇所が書き換わる
19
by

languageFactory
20
• ⽇日本語/英語の
切切り替え
h*p://qiita.com/takeyama/
items/5e5fa1ece7f524ab8690

モデルとビューが完全に独⽴立立
データバインディングでPDFやEXCELを⽣生成
PDFやEXCELも同様
21
by

PDFやEXCELも同様
22
by

PDFやEXCELのデータバインディング
23
by
DEMO

SEO対策問題

「サーバサイドでのHTMLの事前レンダリングから解放され、Google
がクロールするようになるのはいつか？」

「今年年の末までには」
・・ http://wazanova.jp/items/1613
ルーティング
URLのhashを使ってビューを切切り替え
特定のページに外部からリンクを張れる
• #/main
• #/booking
• #/master
24

4. ReflexWorks
25

サーバサイドどうするの？
• LAMP
– RailsでHerokuとか
– クライアントといろいろ被っている(密結合）
• MEAN
– スキーマレスNoトランザクション(MongoDB)
– コールバック地獄（Node.js)
• BaaS
– SPAをターゲットにしたものが少ない
– 開発環境がが
26

AngularJS＋ReflexWorksがよい理理由
• ドキュメント指向
– XMLやJSONなどの構造化データの読み書きができる
– ACIDトランザクションをサポート
• MV*アーキテクチャー
– ModelとViewに集中、データバインディング
– サーバサイドを意識識しない開発
• ソフトスキーマ
– アプリケーションで定義するスキーマを採⽤用、
項⽬目の追加が容易易
• クライアントビルド環境
– Yeoman、Grunt、Bower ＋ CircleCI (Travis CI)
27

28
• リソースURLを⾃自由に設定・追加
• リソースを様々なフォーマットに変換

直感的なREST API

29

30

31

32

h*p://reflexworks.jp/documentaUon.html
その他
• ユーザ管理理・グループ管理理
• CMS機能
33

5. トランザクション、スキーマ
34

MongoDBでも実は同じこと
1. トランザクション問題を回避する
2. スキーマをしっかりと設計する
MongoDBでECサイトを実運用する3つのテクニックより
h*p://blog.otakumode.com/2014/08/01/ec-‐mongodb/
MongoDBでもうまく設計すればECだって作れるよ
裏裏を返せばそれだけ⼤大変な⽬目に合いますよということ
35

ReflexWorksのトランザクション管理理
データの⼀一貫性を確保しつつ⾼高いスループットを実現

• Feed(Collection)単位のAtomicトランザクション
https://www.facebook.com/notes/virtual-‐‑‒technology/
bdbトランザクションとreflexworksの処理理について/486790368009209
– 分離離レベル：REPEATABLE READ
• かつ、Entry単位のバージョン⽐比較
– 分離離レベル：SNAPSHOT ISOLATION
– 全てのEntryはURLとリビジョンで管理理される
– リビジョン＝更更新されると＋１される
36
詳細：

例例：「鏡＋明細」で1トランザクション
37
feed
entry
id鏡,リビジョン/id
/entry
entry
id明細1,リビジョン/id
/entry
entry
id明細2,リビジョン/id
/entry
　・・・・
/feed
鏡
明細

業務アプリではスキーマが必要
• 任意のログをDBに突っ込んで分析に使う
といった⽤用途にはスキーマレスがいい
• そもそもモデルを設計しないと業務アプ
リは作れない
• スキーマレスはお⼿手軽だが⾃自由に開発し
ていると後で酷い⽬目にあう
• パフォーマンス向上やスケーラブルにす
る為にはやはりスキーマ設計が必要
38

スキーマテンプレート
• シンプルなシンタックス
– 「項⽬目名（型）＝正規表現」の形式で記述
• バリデーション
– 正規表現で値をチェック

• ソフトスキーマ
– 項⽬目の追加が可能
• 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}$

スキーマとインスタンス
ちなみに、GET /booking?booking.type=Foo で配列も検索可能
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
}
]
}
}

MV*(ModelとView、あとWhatever)
ModelとViewに集中するだけでよい
あとはフレームワークがうまく処理理してくれる
• ModelはEntity(データの器)とビジネスロジック
– テンプレートから Entity を⾃自動⽣生成
– クライアントとサーバそれぞれの Service を作成

• ViewはレイアウトとViewロジック
– HTMLがレイアウトの基本
– AngularJSのディレクティブにより宣⾔言的に記述
41

Entityの⾃自動⽣生成とバリデーション
サーバとクライアントの両⽅方で
Entityが⾃自動⽣生成され DataのValidationを実⾏行行
42

サンプルプログラム
• feedToArrayService.f2a()で
MessagePack Arrayへの変換と
バリデーション実⾏行行
• reflexDataService.postでリクエスト送信
43

バリデーションエラーの場合
• エラー箇所の項⽬目名(colName)と⾏行行(rowIndex)
およびメッセージを画⾯面のエラー処理理に渡す
44
画⾯面
エラーデータ
※ AngularJSのValidatorは使わず独⾃自実装

スキーマでこんなこともできる
• APIドキュメントの⾃自動⽣生成
• APIクライアントの動的定義
• APIサーバのレスポンス⾃自動⽣生成とテスト
全てがJSONになる
h*p://r7kamura.hatenablog.com/entry/2014/06/10/023433
45

サーバサイドJavaScript
• GET /s/booking などで起動
• /booking.js の doGet() が呼ばれる (CoC)
• POST、PUT、DELETEも同様
• JSの関数内部で ReflexContext.xxx(url) を実
⾏行行することで実際にDBを読み書きする
46

6. 開発環境
47

48
ビルドツール
• Yo
– Scaffold（雛形）の作成
• Grunt
– タスクランナー
• Bower
– パッケージ管理理

セットアップ、実⾏行行、デプロイ
• npm install –g generator-reflexworks
• yo reflexworks
• grunt serve
• grunt test
• grunt protractor:E2E_local
• grunt upload
49

grunt-connect-proxy
• grunt でリバースプロキシ
• クロスドメイン問題の回避
• サービスのURLだけをサーバに向ける
50
/d/master
ローカル環境で
開発しているイメージ

GitHubにPushすることで⾃自動的にサーバにデプロイ
CircleCI
51

まとめ
• SPAは素晴らしいアーキテクチャ
– UI/UX、パフォーマンス、スケーラビリティ
– HTMLとJSだけで楽チン開発
• AngularJSとReflexWorksの組み合わせ
– サーバを意識識することのない開発
– MV*モデルとデータバインディング
• 業務アプリ開発で苦労しないためには
– トランザクション管理理とスキーマが⼤大事
52

ReflexWorksはBaaSになります
53
スタートアップを
⽀支援していきたい
2015年春
ご清聴ありがとう
ございました

Angularreflex20141210

More Related Content

What's hot

Similar to Angularreflex20141210

More from Shinichiro Takezaki

Angularreflex20141210