Enviar pesquisa
Carregar
Angularreflex20141210
•
3 gostaram
•
753 visualizações
Shinichiro Takezaki
Seguir
http://acrovision.connpass.com/event/9957/ の資料です
Leia menos
Leia mais
Software
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 53
Baixar agora
Baixar para ler offline
Recomendados
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Shotaro Suzuki
Spring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作る
Go Miyasaka
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Shotaro Suzuki
Interactive connection2
Interactive connection2
Takao Tetsuro
Introducing Elastic 8.1 Release - More Integration, Faster Indexing Speed, Lo...
Introducing Elastic 8.1 Release - More Integration, Faster Indexing Speed, Lo...
Shotaro Suzuki
Ms retail update ra 20191030
Ms retail update ra 20191030
Microsoft Azure Japan
Building React, Flutter and Blazor development and debugging environment with...
Building React, Flutter and Blazor development and debugging environment with...
Shotaro Suzuki
Javaプログラマーももう逃げられない。マイクロサービスとAPIの世界。
Javaプログラマーももう逃げられない。マイクロサービスとAPIの世界。
Takakiyo Tanaka
Recomendados
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Shotaro Suzuki
Spring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作る
Go Miyasaka
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Shotaro Suzuki
Interactive connection2
Interactive connection2
Takao Tetsuro
Introducing Elastic 8.1 Release - More Integration, Faster Indexing Speed, Lo...
Introducing Elastic 8.1 Release - More Integration, Faster Indexing Speed, Lo...
Shotaro Suzuki
Ms retail update ra 20191030
Ms retail update ra 20191030
Microsoft Azure Japan
Building React, Flutter and Blazor development and debugging environment with...
Building React, Flutter and Blazor development and debugging environment with...
Shotaro Suzuki
Javaプログラマーももう逃げられない。マイクロサービスとAPIの世界。
Javaプログラマーももう逃げられない。マイクロサービスとAPIの世界。
Takakiyo Tanaka
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Shotaro Suzuki
エンタープライズJava環境におけるマイクロサービス・アーキテクチャーの必要性 #natsumiB4
エンタープライズJava環境におけるマイクロサービス・アーキテクチャーの必要性 #natsumiB4
Takakiyo Tanaka
Bpstudy20180725
Bpstudy20180725
Shinichiro Takezaki
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Shotaro Suzuki
Enterpriseapi20160210
Enterpriseapi20160210
Shinichiro Takezaki
Azure ADアプリケーションを使用した認証のあれやこれ ASP.NET Core編
Azure ADアプリケーションを使用した認証のあれやこれ ASP.NET Core編
DevTakas
【de:code 2020】 今すぐはじめたい SQL Database のかしこい使い分け術 前編
【de:code 2020】 今すぐはじめたい SQL Database のかしこい使い分け術 前編
日本マイクロソフト株式会社
CODT2020 ビジネスプラットフォームを支えるCI/CDパイプライン ~エンタープライズのDevOpsを加速させる運用改善Tips~
CODT2020 ビジネスプラットフォームを支えるCI/CDパイプライン ~エンタープライズのDevOpsを加速させる運用改善Tips~
Yuki Ando
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
ssuser070fa9
patterns & practices "Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後
patterns & practices "Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後
Akira Inoue
Api gatewayの話
Api gatewayの話
Hiroshi Hayakawa
Vs code conf2020-11-21-extensions-for-microservices-app-dev
Vs code conf2020-11-21-extensions-for-microservices-app-dev
Shotaro Suzuki
【de:code 2020】 Azure Cosmos DB - Build 2020 アップデート
【de:code 2020】 Azure Cosmos DB - Build 2020 アップデート
日本マイクロソフト株式会社
ゲームだけじゃないHTML5
ゲームだけじゃないHTML5
Osamu Shimoda
Insight into Azure Active Directory - Azure AD Custom Role & Scope
Insight into Azure Active Directory - Azure AD Custom Role & Scope
Kazuki Takai
JAWSUG & JAZUG Sendai Azure Update 20140517
JAWSUG & JAZUG Sendai Azure Update 20140517
Ayako Omori
Introducing the elastic 8.0 release a new era of speed, scale, relevance, and...
Introducing the elastic 8.0 release a new era of speed, scale, relevance, and...
Shotaro Suzuki
Chat bot created by QnA Maker
Chat bot created by QnA Maker
Takao Tetsuro
.NET 6の期待の新機能とアップデート
.NET 6の期待の新機能とアップデート
TomomitsuKusaba
Builderscon Tokyo 2017
Builderscon Tokyo 2017
Shinichiro Takezaki
BPStudy20121221
BPStudy20121221
Shinichiro Takezaki
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
Akira Inoue
Mais conteúdo relacionado
Mais procurados
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Shotaro Suzuki
エンタープライズJava環境におけるマイクロサービス・アーキテクチャーの必要性 #natsumiB4
エンタープライズJava環境におけるマイクロサービス・アーキテクチャーの必要性 #natsumiB4
Takakiyo Tanaka
Bpstudy20180725
Bpstudy20180725
Shinichiro Takezaki
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Shotaro Suzuki
Enterpriseapi20160210
Enterpriseapi20160210
Shinichiro Takezaki
Azure ADアプリケーションを使用した認証のあれやこれ ASP.NET Core編
Azure ADアプリケーションを使用した認証のあれやこれ ASP.NET Core編
DevTakas
【de:code 2020】 今すぐはじめたい SQL Database のかしこい使い分け術 前編
【de:code 2020】 今すぐはじめたい SQL Database のかしこい使い分け術 前編
日本マイクロソフト株式会社
CODT2020 ビジネスプラットフォームを支えるCI/CDパイプライン ~エンタープライズのDevOpsを加速させる運用改善Tips~
CODT2020 ビジネスプラットフォームを支えるCI/CDパイプライン ~エンタープライズのDevOpsを加速させる運用改善Tips~
Yuki Ando
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
ssuser070fa9
patterns & practices "Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後
patterns & practices "Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後
Akira Inoue
Api gatewayの話
Api gatewayの話
Hiroshi Hayakawa
Vs code conf2020-11-21-extensions-for-microservices-app-dev
Vs code conf2020-11-21-extensions-for-microservices-app-dev
Shotaro Suzuki
【de:code 2020】 Azure Cosmos DB - Build 2020 アップデート
【de:code 2020】 Azure Cosmos DB - Build 2020 アップデート
日本マイクロソフト株式会社
ゲームだけじゃないHTML5
ゲームだけじゃないHTML5
Osamu Shimoda
Insight into Azure Active Directory - Azure AD Custom Role & Scope
Insight into Azure Active Directory - Azure AD Custom Role & Scope
Kazuki Takai
JAWSUG & JAZUG Sendai Azure Update 20140517
JAWSUG & JAZUG Sendai Azure Update 20140517
Ayako Omori
Introducing the elastic 8.0 release a new era of speed, scale, relevance, and...
Introducing the elastic 8.0 release a new era of speed, scale, relevance, and...
Shotaro Suzuki
Chat bot created by QnA Maker
Chat bot created by QnA Maker
Takao Tetsuro
.NET 6の期待の新機能とアップデート
.NET 6の期待の新機能とアップデート
TomomitsuKusaba
Builderscon Tokyo 2017
Builderscon Tokyo 2017
Shinichiro Takezaki
Mais procurados
(20)
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
エンタープライズJava環境におけるマイクロサービス・アーキテクチャーの必要性 #natsumiB4
エンタープライズJava環境におけるマイクロサービス・アーキテクチャーの必要性 #natsumiB4
Bpstudy20180725
Bpstudy20180725
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Enterpriseapi20160210
Enterpriseapi20160210
Azure ADアプリケーションを使用した認証のあれやこれ ASP.NET Core編
Azure ADアプリケーションを使用した認証のあれやこれ ASP.NET Core編
【de:code 2020】 今すぐはじめたい SQL Database のかしこい使い分け術 前編
【de:code 2020】 今すぐはじめたい SQL Database のかしこい使い分け術 前編
CODT2020 ビジネスプラットフォームを支えるCI/CDパイプライン ~エンタープライズのDevOpsを加速させる運用改善Tips~
CODT2020 ビジネスプラットフォームを支えるCI/CDパイプライン ~エンタープライズのDevOpsを加速させる運用改善Tips~
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
patterns & practices "Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後
patterns & practices "Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後
Api gatewayの話
Api gatewayの話
Vs code conf2020-11-21-extensions-for-microservices-app-dev
Vs code conf2020-11-21-extensions-for-microservices-app-dev
【de:code 2020】 Azure Cosmos DB - Build 2020 アップデート
【de:code 2020】 Azure Cosmos DB - Build 2020 アップデート
ゲームだけじゃないHTML5
ゲームだけじゃないHTML5
Insight into Azure Active Directory - Azure AD Custom Role & Scope
Insight into Azure Active Directory - Azure AD Custom Role & Scope
JAWSUG & JAZUG Sendai Azure Update 20140517
JAWSUG & JAZUG Sendai Azure Update 20140517
Introducing the elastic 8.0 release a new era of speed, scale, relevance, and...
Introducing the elastic 8.0 release a new era of speed, scale, relevance, and...
Chat bot created by QnA Maker
Chat bot created by QnA Maker
.NET 6の期待の新機能とアップデート
.NET 6の期待の新機能とアップデート
Builderscon Tokyo 2017
Builderscon Tokyo 2017
Semelhante a Angularreflex20141210
BPStudy20121221
BPStudy20121221
Shinichiro Takezaki
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
Akira Inoue
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
Akira Inoue
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
Akira Inoue
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Shotaro Suzuki
次期Office製品群の新しい開発モデルの解説
次期Office製品群の新しい開発モデルの解説
kumo2010
Force.com開発基礎
Force.com開発基礎
Salesforce Developers Japan
ハイブリットクラウド環境におけるモダンアプリケーション開発
ハイブリットクラウド環境におけるモダンアプリケーション開発
政雄 金森
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Shotaro Suzuki
Intalio japan special cloud workshop
Intalio japan special cloud workshop
Daisuke Sugai
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Akira Inoue
Scalable Generator: Using Scala in SIer Business (ScalaMatsuri)
Scalable Generator: Using Scala in SIer Business (ScalaMatsuri)
TIS Inc.
Elastic on Azure Integration & Building React UI Based Search App Using Azure...
Elastic on Azure Integration & Building React UI Based Search App Using Azure...
Shotaro Suzuki
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Tsutomu Ogasawara
Mvc conf session_5_isami
Mvc conf session_5_isami
Hiroshi Okunushi
Smart Store サーバーレスアーキテクチャ編
Smart Store サーバーレスアーキテクチャ編
Microsoft Azure Japan
20190514 Smart Store - Azure servlerless architecture
20190514 Smart Store - Azure servlerless architecture
Issei Hiraoka
Azure Stack Hybrid DevOpsデモンストレーション
Azure Stack Hybrid DevOpsデモンストレーション
Masahiko Ebisuda
2021/03/19 パブリッククラウドを活かす運用プロセス自動化
2021/03/19 パブリッククラウドを活かす運用プロセス自動化
Issei Hiraoka
ASP.NET シングル ページ アプリケーション (SPA) 詳説
ASP.NET シングル ページ アプリケーション (SPA) 詳説
Akira Inoue
Semelhante a Angularreflex20141210
(20)
BPStudy20121221
BPStudy20121221
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
次期Office製品群の新しい開発モデルの解説
次期Office製品群の新しい開発モデルの解説
Force.com開発基礎
Force.com開発基礎
ハイブリットクラウド環境におけるモダンアプリケーション開発
ハイブリットクラウド環境におけるモダンアプリケーション開発
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Intalio japan special cloud workshop
Intalio japan special cloud workshop
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Scalable Generator: Using Scala in SIer Business (ScalaMatsuri)
Scalable Generator: Using Scala in SIer Business (ScalaMatsuri)
Elastic on Azure Integration & Building React UI Based Search App Using Azure...
Elastic on Azure Integration & Building React UI Based Search App Using Azure...
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Mvc conf session_5_isami
Mvc conf session_5_isami
Smart Store サーバーレスアーキテクチャ編
Smart Store サーバーレスアーキテクチャ編
20190514 Smart Store - Azure servlerless architecture
20190514 Smart Store - Azure servlerless architecture
Azure Stack Hybrid DevOpsデモンストレーション
Azure Stack Hybrid DevOpsデモンストレーション
2021/03/19 パブリッククラウドを活かす運用プロセス自動化
2021/03/19 パブリッククラウドを活かす運用プロセス自動化
ASP.NET シングル ページ アプリケーション (SPA) 詳説
ASP.NET シングル ページ アプリケーション (SPA) 詳説
Mais de Shinichiro Takezaki
Vtecx solution
Vtecx solution
Shinichiro Takezaki
Lt20190129
Lt20190129
Shinichiro Takezaki
Real techlt20180829
Real techlt20180829
Shinichiro Takezaki
11 29プレゼン資料
11 29プレゼン資料
Shinichiro Takezaki
React vtecx20171129
React vtecx20171129
Shinichiro Takezaki
20171025 date picker説明資料
20171025 date picker説明資料
Shinichiro Takezaki
React vtecx20171025
React vtecx20171025
Shinichiro Takezaki
Web study20171007
Web study20171007
Shinichiro Takezaki
React vtecx20170920
React vtecx20170920
Shinichiro Takezaki
React vtecx20170822
React vtecx20170822
Shinichiro Takezaki
Vtecx20151216 2
Vtecx20151216 2
Shinichiro Takezaki
Vtecx20151216
Vtecx20151216
Shinichiro Takezaki
Vtecxlt20151201
Vtecxlt20151201
Shinichiro Takezaki
No nosql20130424
No nosql20130424
Shinichiro Takezaki
Gaeja20121130
Gaeja20121130
Shinichiro Takezaki
Reflex works20120818 1
Reflex works20120818 1
Shinichiro Takezaki
Groovyコンファレンス
Groovyコンファレンス
Shinichiro Takezaki
Mais de Shinichiro Takezaki
(17)
Vtecx solution
Vtecx solution
Lt20190129
Lt20190129
Real techlt20180829
Real techlt20180829
11 29プレゼン資料
11 29プレゼン資料
React vtecx20171129
React vtecx20171129
20171025 date picker説明資料
20171025 date picker説明資料
React vtecx20171025
React vtecx20171025
Web study20171007
Web study20171007
React vtecx20170920
React vtecx20170920
React vtecx20170822
React vtecx20170822
Vtecx20151216 2
Vtecx20151216 2
Vtecx20151216
Vtecx20151216
Vtecxlt20151201
Vtecxlt20151201
No nosql20130424
No nosql20130424
Gaeja20121130
Gaeja20121130
Reflex works20120818 1
Reflex works20120818 1
Groovyコンファレンス
Groovyコンファレンス
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を提供することを⽬目的とする 1つの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 ちなみに、業務ロジック⽐比率率率は クライアント6:サーバ1ぐらい
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 – リッチで⾼高度度なユーザビリティを実現 • パフォーマンス – クライアントリソースの活⽤用で⾼高速化 – サーバ側への負荷は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
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とリビジョンで管理理される – リビジョン=更更新されると+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 } ] } }
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年春 ご清聴ありがとう ございました
Baixar agora