Angularreflex20141210
3 likes762 views
http://acrovision.connpass.com/event/9957/ の資料です
![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}$](https://image.slidesharecdn.com/angularreflex20141210-141210062325-conversion-gate02/85/Angularreflex20141210-39-320.jpg)
![スキーマとインスタンス
ちなみに、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
}
]
}
}](https://image.slidesharecdn.com/angularreflex20141210-141210062325-conversion-gate02/85/Angularreflex20141210-40-320.jpg)
More Related Content
What's hot (20)
Similar to Angularreflex20141210 (20)
More from Shinichiro Takezaki (17)
Angularreflex20141210
- 1. AngularJSとReflexWorksで始めるSPA開発 Copyright ? Virtual Technology, Inc ?～ もうサーバー側で悩まなくて?大丈夫 ?～ 2014/12/10 有限会社バーチャルテクノロジー 1
- 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
- 4. Copyright ? Virtual Technology, Inc 1. SPA概要 4
- 5. SPA(Single Page Application)とは ? 優れたUXを提供することを?目的とする １つのWebページで提供されるアプリケーション – クライアントはXHR等でサーバにリクエストし、結果 をJSONなどのデータで受取る – ページの再読込せずにJavaScriptで動的に更更新する Copyright ? Virtual Technology, Inc 5
- 6. Copyright ? Virtual Technology, Inc なぜSPA? ? サーバーでHTMLを?生成するよりも、 クライアントで動的に画?面を更更新する?方が効率率率的 ? ユーザーの操作に応じてインタラクティブに動く リッチクライアントを実現できる 6 これってネイティブアプリ？ お客様 いいえ、Webアプリです。 開発者 SPA
- 7. SPAのアーキテクチャー h*p://www.slideshare.net/fullscreen/sagawafumio/ss-?‐38480894/6 7 Copyright ? Virtual Technology, Inc
- 8. Copyright ? Virtual Technology, Inc 疎結合で役割が明確 ? サーバサイド – View(HTML?生成)が不不要 – 主にJSONを返すRESTfulなAPIの提供 – 認証情報など?一部を除き基本的にステートレス – 業務ロジックの?一部（採番など） ? クライアントサイド – View(テンプレート) – ルーティング – コントローラ (業務ロジックの?大部分) – 通信 8 ちなみに、業務ロジック?比率率率は クライアント６：サーバ１ぐらい
- 9. 共通のAPIを持つのが理理想 サーバは単にデータを返すだけで画?面遷移など クライアントの状態は知らないことがポイント Copyright ? Virtual Technology, Inc 9
- 10. Copyright ? Virtual Technology, Inc 2. 事例例紹介とDEMO 10
- 11. 11 Copyright ? Virtual Technology, Inc ?大規模 Web帳票システム
- 12. 導?入の効果 UI/UX、パフォーマンス、スケーラビリティを同時に解決 12 Copyright ? Virtual Technology, Inc ? UI/UX – リッチで?高度度なユーザビリティを実現 ? パフォーマンス – クライアントリソースの活?用で?高速化 – サーバ側への負荷は７０％負荷軽減 ? スケーラビリティ – スモールスタートで急激なアクセスにもノード追加で対応
- 13. 公報?一括ダウンロードサービス Copyright ? Virtual Technology, Inc ?～ 特許検索索集合演算?スクリーニング効率率率化?支援ツール ?～ 13 1993年以降の日本国の特許? 実用新案データ（PDF公報）を 収録。様々な番号形式の取込 み、集合演算、栞やメモの付与、 フォルダ共有、 PDF公報の一 括ダウンロード機能などにより、 スクリーニング作業の効率化を はかれます。 http://www.pdc.jp/download/ h*ps://www.youtube.com/watch?feature=player_embeddedv=2RYXRVCf2n4
- 14. クラウドとオンプレミスの融合 Copyright ? Virtual Technology, Inc 14
- 15. WebSocketによるイベント通知機能 ? WebSocketのコネクション確?立立時に認証する ? 接続情報をセッションで管理理 ? フォルダ共有（R権限）でかつログイン中のユーザに通知 h*p://reflexworks.jp/features.html#pushNoUficaUons Copyright ? Virtual Technology, Inc 15 Reactive!
- 16. Copyright ? Virtual Technology, Inc 3. AngularJSと データバインディング 16
- 17. SPAといえばAngularJS Copyright ? Virtual Technology, Inc ? 双?方向データバインディング – Modelが変更更されたらViewを更更新する。またはその逆 ? ルーティング – バックボタンが使え普通のWebアプリと同じ感覚 ? テンプレートとしてのHTML ? その他 – DI – ディレクティブ – ??? 17
- 18. 18 Copyright ? Virtual Technology, Inc ?人気度度
- 19. Copyright ? Virtual Technology, Inc データバインディング イベントによってModelが変更更されたら ?自動的にViewの該当箇所が書き換わる 19 by
- 20. Copyright ? Virtual Technology, Inc languageFactory 20 ? ?日本語/英語の 切切り替え h*p://qiita.com/takeyama/ items/5e5fa1ece7f524ab8690
- 21. モデルとビューが完全に独?立立 データバインディングでPDFやEXCELを?生成 Copyright ? Virtual Technology, Inc PDFやEXCELも同様 21 by
- 22. モデルとビューが完全に独?立立 データバインディングでPDFやEXCELを?生成 Copyright ? Virtual Technology, Inc PDFやEXCELも同様 22 by
- 23. PDFやEXCELのデータバインディング モデルとビューが完全に独?立立 データバインディングでPDFやEXCELを?生成 Copyright ? Virtual Technology, Inc 23 by DEMO
- 24. SEO対策問題 「サーバサイドでのHTMLの事前レンダリングから解放され、Google がクロールするようになるのはいつか？」 「今年年の末までには」 ?? http://wazanova.jp/items/1613 Copyright ? Virtual Technology, Inc ルーティング URLのhashを使ってビューを切切り替え 特定のページに外部からリンクを張れる ? #/main ? #/booking ? #/master 24
- 25. Copyright ? Virtual Technology, Inc 4. ReflexWorks 25
- 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
- 29. 29 Copyright ? Virtual Technology, Inc
- 30. 30 Copyright ? Virtual Technology, Inc
- 31. 31 Copyright ? Virtual Technology, Inc
- 32. 32 Copyright ? Virtual Technology, Inc
- 33. h*p://reflexworks.jp/documentaUon.html Copyright ? Virtual Technology, Inc その他 ? ユーザ管理理?グループ管理理 ? CMS機能 33
- 34. 5. トランザクション、スキーマ Copyright ? Virtual Technology, Inc 34
- 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とリビジョンで管理理される – リビジョン＝更更新されると＋１される 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 } ] } }
- 41. MV*(ModelとView、あとWhatever) ModelとViewに集中するだけでよい あとはフレームワークがうまく処理理してくれる ? ModelはEntity(データの器)とビジネスロジック – テンプレートから Entity を?自動?生成 – クライアントとサーバそれぞれの Service を作成 ? ViewはレイアウトとViewロジック – HTMLがレイアウトの基本 – AngularJSのディレクティブにより 宣?言的に記述 Copyright ? Virtual Technology, Inc 41
- 42. Entityの?自動?生成とバリデーション サーバとクライアントの両?方で Entityが?自動?生成され DataのValidationを実?行行 Copyright ? Virtual Technology, Inc 42
- 43. Copyright ? Virtual Technology, Inc サンプルプログラム ? feedToArrayService.f2a()で MessagePack Arrayへの変換と バリデーション実?行行 ? reflexDataService.postでリクエスト送信 43
- 44. バリデーションエラーの場合 ? エラー箇所の項?目名(colName)と?行行(rowIndex) およびメッセージを画?面のエラー処理理に渡す Copyright ? Virtual Technology, Inc 44 画?面 エラーデータ ※ AngularJSのValidatorは使わず独?自実装
- 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
- 47. Copyright ? Virtual Technology, Inc 6. 開発環境 47
- 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 ローカル環境で 開発しているイメージ
- 51. GitHubにPushすることで?自動的にサーバにデプロイ Copyright ? Virtual Technology, Inc CircleCI 51
- 52. Copyright ? Virtual Technology, Inc まとめ ? SPAは素晴らしいアーキテクチャ – UI/UX、パフォーマンス、スケーラビリティ – HTMLとJSだけで楽チン開発 ? AngularJSとReflexWorksの組み合わせ – サーバを意識識することのない開発 – MV*モデルとデータバインディング ? 業務アプリ開発で苦労しないためには – トランザクション管理理とスキーマが?大事 52
- 53. ReflexWorksはBaaSになります 53 スタートアップを ?支援していきたい Copyright ? Virtual Technology, Inc 2015年春 ご清聴ありがとう ございました