ewd.js アーキテクチャー
TRANSCRIPT
MTA2015 宮崎 08/30 2
アジェンダ
● EWD.js とは?● 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.js プログラミングのキーポイント● 高信頼性 ( セキュア ) ウェブサービス● 負荷分散 / 機能分散 (ewd-federator)● 実用 EWD.js アプリ開発● レガシー 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 の特徴
● EWD.js アーキテクチャー● EWD.js のメッセージング● EWD.js プログラミングのキーポイント● 高信頼性 ( セキュア ) ウェブサービス● 負荷分散 / 機能分散 (ewd-federator)● 実用 EWD.js アプリ開発● レガシー M アプリをフェニックス!
MTA2015 宮崎 08/30 12
アジェンダ● EWD.js とは?● EWD.js の特徴● EWD.js アーキテクチャー
● EWD.js のメッセージング● EWD.js プログラミングのキーポイント● 高信頼性 ( セキュア ) ウェブサービス● 負荷分散 / 機能分散 (ewd-federator)● 実用 EWD.js アプリ開発● レガシー M アプリをフェニックス!
MTA2015 宮崎 08/30 24
アジェンダ● EWD.js とは?● EWD.js の特徴● EWD.js アーキテクチャー● EWD.js のメッセージング
● EWD.js プログラミングのキーポイント● 高信頼性 ( セキュア ) ウェブサービス● 負荷分散 / 機能分散 (ewd-federator)● 実用 EWD.js アプリ開発● レガシー M アプリをフェニックス!
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 度に1個のリクエストを処理
● すべての子プロセスが使用中なら、着信リクエストは非同期のマスター Node.js プロセスにキューイングされる
● 子プロセスのプールサイズは需要に応じて設定可能
MTA2015 宮崎 08/30 32
サーバ側の同期 / 非同期
● EWD.js で使用するデータベースコネクタは同期処理● バックエンドの JavaScript ロジック
– メンテナンスが容易– 直感的にクライアントリクエストとシンクロしながら書くこ
とが可能● いわゆる「コールバック地獄」や、疑似同期シンタックスは
ありません ( No “ callback hell ” or pseudo-synchronous syntax )
● 以上の理由から– 迅速な開発– JavaScript ロジックの保守性が大幅に向上
MTA2015 宮崎 08/30 33
アジェンダ● EWD.js とは?● EWD.js の特徴● EWD.js アーキテクチャー● EWD.js のメッセージング● EWD.js プログラミングのキーポイント
● 高信頼性 ( セキュア ) ウェブサービス● 負荷分散 / 機能分散 (ewd-federator)● 実用 EWD.js アプリ開発● レガシー M アプリをフェニックス!
MTA2015 宮崎 08/30 34
高信頼性ウェブサービス
● バックエンド EWD.js の JavaScript のメソッドは、 JSON ウェブサービスとして公開可能
● アクセスは自動的にセキュアが確保される● すべての HTTP リクエストには、 HMAC-SHA256 デジタル
署名が必要● Amazon ウェブサービスにで使用されているものと同じセ
キュリティ● 例 :
– EWD.js システム間でのライトウェイトなピア · ツー · ピアのアクセス
MTA2015 宮崎 08/30 36
アジェンダ● EWD.js とは?● EWD.js の特徴● EWD.js アーキテクチャー● EWD.js のメッセージング● EWD.js プログラミングのキーポイント● 高信頼性 ( セキュア ) ウェブサービス
● 負荷分散 / 機能分散 (ewd-federator)● 実用 EWD.js アプリ開発● レガシー M アプリをフェニックス!
MTA2015 宮崎 08/30 37
負荷分散 / 機能分散ewd-federator
ewd-federator
Cache / GlobalsDB / GT.Mpersistent JSON cacheing, storage
Node.js
RESTClients
REST
Requ
ests
EWD.jssystem
HTTP-basedWeb Service
REST-basedService
Back-endServers
HTTP
REST
HMAC-SHA256
Signed HTTP EWD.jssystem
EWD.jssystem
Aggregateresponses
InterceptIncomingrequest
InterceptIncomingresponse
レプ
リケ
ーシ
ョン
サーバからのレスポンスをインターセプトしてルーティングを変更
クライアントからのREST リクエストをインターセプトしてルーティングを変更
サーバからのレスポンスを集約してクライアントへ返す
MTA2015 宮崎 08/30 38
アジェンダ● EWD.js とは?● EWD.js の特徴● EWD.js アーキテクチャー● EWD.js のメッセージング● EWD.js プログラミングのキーポイント● 高信頼性 ( セキュア ) ウェブサービス● 負荷分散 / 機能分散 (ewd-federator)
● 実用 EWD.js アプリ開発● レガシー M アプリをフェニックス!
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
実用 EWD.js アプリ開発
● ユースケース:フル オープンソース● サーバ側
安定バージョン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
DataBaseInterFace
NodeM 0.5.0 AGPL3 FWSLC API 仕様が cache.node 互換の GT.M 専用の node.js I/F
DataBase GT.M V6.2-001 AGPL3 F.I.S
MTA2015 宮崎 08/30 41
実用 EWD.js アプリ開発
● ユースケース:フル オープンソース● ブラウザ側 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, スタイルシート (CSS), JavaScript
スマホ , タブレット , PC ブラウザ等デバイスの画面サイズの差異とそれに応じた Widget 適応力
クライアントプログラミング
画面制御サーバ API
JavaScript, CSS, JavaScript ライブラリ , EWD.js, クライアント OS
JavaScript と JS ライブラリを利用して、画面コンポーネントのコントローラを管理 , XSS 対策
サーバプログラミング
ビジネスロジッククライアント APIDB API
Node.js, Node.js 対応ライブラリ , EWD.js, サーバ OS
Login/Logout 管理 , Session 管理 , セキュアマネージメント
M-DB マネージメントM 言語ルーチンメンテ
データベースマネージメントDB API
M 言語 , DB マネージメント , サーバ OS
レガシー M 言語ルーチンを EWD.js サーバモジュール API に基づき Outer ラッパーを開発
MTA2015 宮崎 08/30 43
アジェンダ● EWD.js とは?● EWD.js の特徴● EWD.js アーキテクチャー● EWD.js のメッセージング● EWD.js プログラミングのキーポイント● 高信頼性 ( セキュア ) ウェブサービス● 負荷分散 / 機能分散 (ewd-federator)● 実用 EWD.js アプリ開発
● レガシー M アプリをフェニックス!
MTA2015 宮崎 08/30 44
レガシー M アプリをフェニックス!
● EWD.js は単一のプログラム言語スキル– JavaScript
● アプリ開発のメインコントローラを革命的移行– From :超希少な M 言語開発リソース– To : 容易に人材確保が可能な JavaScript 開発者
● JavaScript の機能を介して、レガシー M 言語のコア機能をインタフェース– レガシー M コードは、 Node,js 用にラッピング
● 事例– VA Fileman の GUI 版