EWD.js アーキテクチャー

EWD.js アーキテクチャー
CAMTA-JP, GT.M 研究会
澤田潔

MTA2015 宮崎 08/30 2
アジェンダ
●
EWD.js とは？
● EWD.js の特徴
●
● EWD.js のメッセージング
● EWD.js プログラミングのキーポイント
● 高信頼性 ( セキュア ) ウェブサービス
●
負荷分散 / 機能分散 (ewd-federator)
●
実用 EWD.js アプリ開発
●
レガシー M アプリをフェニックス！

MTA2015 宮崎 08/30 3
EWD.js とは？
●
アプリケーション開発フレームワーク
– ブラウザベースのクラサバ・アプリを開発する
– ウェブサービスを提供する
– レガシー Mumps アプリケーションを覚醒！
– (Legacy Mumps application modernisation)
●
ランタイムプラットフォーム
– Node.js ベースのアプリケーションサーバ機能
– ウェブサーバ機能
– JSON データベースとしてインテグレーション
●
Caché, GT.M, GlobalsDB, MongoDB

MTA2015 宮崎 08/30 4
アジェンダ
●
EWD.js とは？
●
EWD.js の特徴
● EWD.js アーキテクチャー
●
EWD.js のメッセージング
● 負荷分散 / 機能分散 (ewd-federator)
●
● レガシー M アプリをフェニックス！

MTA2015 宮崎 08/30 5
EWD.js の特徴
●
100% JavaScript
– ブラウザ
– バック - エンド ( ビジネスロジック ) ： Node.js
● 100% JSON ベースのデータ
– ブラウザ
– バックエンド
– データベース
●
旧来の Mumps コードは Node,js からアクセス可能
●
高性能
– Node.js
– データベースへはイン - プロセスインターフェイス
● 高スケーラブル
– ステートレス

MTA2015 宮崎 08/30 6
アジェンダ
●
EWD.js とは？
● EWD.js アーキテクチャー
●
●

MTA2015 宮崎 08/30 7

MTA2015 宮崎 08/30 8
※ 各子プロセスは、一度に一つのリクエストを処理

MTA2015 宮崎 08/30 9
※ 子プロセスは、処理が完了すると、すぐに利用可
能なプールへ結果を戻す

MTA2015 宮崎 08/30 10
※ 子プロセスは、リクエストを送信すると子プロセス
プールから削除

MTA2015 宮崎 08/30 11
EWD.js の開発

MTA2015 宮崎 08/30 12
アジェンダ
●
EWD.js とは？
●
●

MTA2015 宮崎 08/30 13

MTA2015 宮崎 08/30 14

MTA2015 宮崎 08/30 15

MTA2015 宮崎 08/30 16

MTA2015 宮崎 08/30 17

MTA2015 宮崎 08/30 18

MTA2015 宮崎 08/30 19

MTA2015 宮崎 08/30 20

MTA2015 宮崎 08/30 21

MTA2015 宮崎 08/30 22

MTA2015 宮崎 08/30 23

MTA2015 宮崎 08/30 24
アジェンダ
●
EWD.js とは？
●
●
EWD.js プログラミングのキーポイント
●

MTA2015 宮崎 08/30 25
ブラウザからメッセージ送信 (index.html)
index.html
<h3> ハローワールドアプリ </h3>
<input type="button"
value=" メッセージを送信 "
onClick="sendMessage()"/>
<div id="response"></div>
ボタンをクリックした際に発火
する JavaScript 関数

MTA2015 宮崎 08/30 26
ブラウザからメッセージ送信 (app.js)
app.js
var sendMessage = function() {
EWD.sockets.sendMessage({
type: "sendHelloWorld",
params: {
text: ' ハローワールド !',
sender: 'MTA',
date: '2015/08/30 14:39:40'
}
});
};
サーバ側メッセージハンドラ名
JSON 形式
送信データ

MTA2015 宮崎 08/30 27
バックエンドモジュール (helloworld.js)
helloworld.js
module.exports = {
onMessage: {
sendHelloWorld: function(params, ewd) {
var savedMsg =
new ewd.mumps.GlobalNode('ABC', []);
savedMsg._setDocument(params);
return {savedInto: 'ABC'};
}
}
}
サーバ側
メッセージハンドラ
GlobalNode オブジェクト
※ MUMPS データベース内
の、ある物理的なグローバ
ル・ノードを表す。ブラウザ側へ
JSON 形式データを返す
（バックエンドと同じ
ハンドラ名）

MTA2015 宮崎 08/30 28
ブラウザ側ハンドラ (app.js)
app.js
EWD.application = {
onMessage: {
sendHelloWorld: function(messageObj) {
var text =
' 送信メッセージは ' +
' 保存に成功しました ' +
' 保存先は :' +
messageObj.message.savedInto;
document
.getElementById('response')
.innerHTML = text;
}
}
};
クライアント側
メッセージハンドラ
受信データを修飾して
指定した ID へ HTML 挿入
JSON 形式
受信データ

MTA2015 宮崎 08/30 29
ブラウザ側 HTML(index.html)
Index.html
<h3> ハローワールドアプリ </h3>
<input type="button"
value=" メッセージを送信 "
onclick="sendMessage()">
<div id="response">
送信メッセージは保存に
成功しました保存先は :
ABC
</div>
挿入された HTML

MTA2015 宮崎 08/30 30
ポーリング不要！
●
ポーリング
– イベントが発生しているかどうかを定期的にチェック
する仕組み
● ウェブソケット ( ブラウザ側ハンドラ ) によって、バックエ
ンドは " 何時でも” ブラウザへメッセージを送信すること
ができる
– 特定のブラウザへ
– 特定の EWD.js アプリが動作しているすべてのブラウザへ
– 接続中のすべてのブラウザへ

MTA2015 宮崎 08/30 31
サーバ側の同期 / 非同期
●
バックエンド・モジュールは Node.js の子プロセスで実行
● EWD.js は、ブロッキング , 同期 I/O を利用する余裕がある
ので、 EWD.js の子プロセスは 1 度に１個のリクエストを処
理
●
すべての子プロセスが使用中なら、着信リクエストは非同
期のマスター Node.js プロセスにキューイングされる
● 子プロセスのプールサイズは需要に応じて設定可能

MTA2015 宮崎 08/30 32
サーバ側の同期 / 非同期
●
EWD.js で使用するデータベースコネクタは同期処理
● バックエンドの JavaScript ロジック
– メンテナンスが容易
– 直感的にクライアントリクエストとシンクロしながら書くこ
とが可能
● いわゆる「コールバック地獄」や、疑似同期シンタックスは
ありません ( No “ callback hell ” or pseudo-synchronous syntax )
● 以上の理由から
– 迅速な開発
– JavaScript ロジックの保守性が大幅に向上

MTA2015 宮崎 08/30 33
アジェンダ
●
EWD.js とは？
●
●
高信頼性 ( セキュア ) ウェブサービス
●

MTA2015 宮崎 08/30 34
高信頼性ウェブサービス
●
バックエンド EWD.js の JavaScript のメソッドは、 JSON
ウェブサービスとして公開可能
● アクセスは自動的にセキュアが確保される
● すべての HTTP リクエストには、 HMAC-SHA256 デジタル
署名が必要
●
Amazon ウェブサービスにで使用されているものと同じセ
キュリティ
●
例 :
– EWD.js システム間でのライトウェイトなピア · ツー · ピア
のアクセス

MTA2015 宮崎 08/30 35
高信頼性ウェブサービス
セキュアな JSON
ウェブサービスコール
アマゾンウェブサービス
と同等な
シークレットキーを共有

MTA2015 宮崎 08/30 36
アジェンダ
●
EWD.js とは？
●
●
●

MTA2015 宮崎 08/30 37
負荷分散 / 機能分散
ewd-federator
ewd-federator
Cache / GlobalsDB / GT.M
persistent JSON cacheing, storage
Node.js
REST
Clients
REST
Requests
EWD.js
system
HTTP-based
Web Service
REST-based
Service
Back-end
Servers
HTTP
REST
HM
AC-SHA256
Signed
HTTP
EWD.js
system
EWD.js
system
Aggregate
responses
Intercept
Incoming
request
Intercept
Incoming
response
レ
プ
リ
ケ
ー
シ
ョン
サーバからの
レスポンスを
インターセプトして
ルーティングを変更
クライアントからの
REST リクエストを
インターセプトして
ルーティングを変更
サーバからの
レスポンスを集約
してクライアントへ返す

MTA2015 宮崎 08/30 38
アジェンダ
●
EWD.js とは？
●
●
● 実用 EWD.js アプリ開発

MTA2015 宮崎 08/30 39
EWD.js アプリ開発関連 Lib 選択条件
● ライセンス
– プロプラエタリ or オープンソース (GPL,Apache,MIT,etc)
●
ドキュメントの整備状況
– example, install, config, method, event, i18n
●
サポータの活発度
– isseu レポート
● パワーユーザの有無
– ex: NASA が採用 , マイクロソフトが採用など
●
パトロン
– ex: BootStrap は Twitter 社が開発元
●
活性度
– 開発・バグフィックスの停滞 / 停止がないか
● 潜在する致命的リスク ( いわゆるハシゴ外しの有無 )
– ある日突然有償！
– バージョンアップ時の互換性欠如
– 企業買収

MTA2015 宮崎 08/30 40
●
ユースケース：フルオープンソース
● サーバ側
安定バージョン
2015.08.10 現在
ライセンス開発元考察
OS Ubuntu 14.02 GPL Canonical 誰にでも使いやすい最新かつ安定した
長期サポート版 (LTS)
Node.js Ver 0.10.38 MIT Node.js
Developers
Google V8 JS エンジン
サーバサイド JavaScript
EWD.js Build 100 Apache2.0 M/GateWay
DataBase
InterFace
NodeM 0.5.0 AGPL3 FWSLC API 仕様が cache.node 互換の G
T.M 専用の node.js I/F
DataBase GT.M V6.2-001 AGPL3 F.I.S

MTA2015 宮崎 08/30 41
●
ユースケース：フルオープンソース
● ブラウザ側 Javascript モジュール + CSS
種別モジュール安定バージョン
2015.08.10 現在ライセンス開発元考察
ブラウザ仕様 HTML5 5.0 W3C W3C
JavaScript
基本ライブラリ
jQuery 2.1.4 MIT jQuery チー
ム
JS ライブラリのデファクトス
タンダード。マイクロソフトも
採用
HTML+CSS
基本ライブラリ
Boot Strap 3.3.4 MIT Twitter NASA 採用
セレクト BOX
強化ライブラリ
select2 3.5.2 MIT Select2 チーム
お知らせ
ライブラリ
toastr 1.2.0 MIT Toastr チーム
日時
フォーマッタ
moment 2.10.3 MIT moment チー
ム
UI ライブラリ Jquery UI 1.11.4 MIT & GPL jQuery Project

MTA2015 宮崎 08/30 42
EWD.js アプリ開発に必要なスキル
役割スキルその他
デザイン ,UI 画面 HTML5, スタイルシート (CS
S), JavaScript
スマホ , タブレット , PC ブラウザ
等デバイスの画面サイズの差異
とそれに応じた Widget 適応力
クライアント
プログラミング
画面制御
サーバ API
JavaScript, CSS, JavaScri
pt ライブラリ , EWD.js, クラ
イアント OS
JavaScript と JS ライブラリを利
用して、画面コンポーネントのコン
トローラを管理 , XSS 対策
サーバ
プログラミング
ビジネスロジック
クライアント API
DB API
Node.js, Node.js 対応ライブ
ラリ , EWD.js, サーバ OS
Login/Logout 管理 , Session 管
理 , セキュアマネージメント
M-DB マネージ
メント
M 言語ルーチ
ンメンテ
データベースマ
ネージメント
DB API
M 言語 , DB マネージメント ,
サーバ OS
レガシー M 言語ルーチンを EW
D.js サーバモジュール API に基
づき Outer ラッパーを開発

MTA2015 宮崎 08/30 43
アジェンダ
●
EWD.js とは？
●
●
● 実用 EWD.js アプリ開発
●

MTA2015 宮崎 08/30 44
●
EWD.js は単一のプログラム言語スキル
– JavaScript
● アプリ開発のメインコントローラを革命的移行
– From ：超希少な M 言語開発リソース
– To ：容易に人材確保が可能な JavaScript 開発者
●
JavaScript の機能を介して、レガシー M 言語のコア機
能をインタフェース
– レガシー M コードは、 Node,js 用にラッピング
● 事例
– VA Fileman の GUI 版

MTA2015 宮崎 08/30 45
●
Astute Semantics VistA FilemanGUI

MTA2015 宮崎 08/30 46
ご清聴ありがとうございました

EWD.js アーキテクチャー

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to EWD.js アーキテクチャー

Similar to EWD.js アーキテクチャー (20)

More from Kiyoshi Sawada

More from Kiyoshi Sawada (20)

EWD.js アーキテクチャー