ewd.js アーキテクチャー

EWD.js アーキテクチャー

CAMTA-JP, GT.M 研究会澤田潔

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 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 とは？● EWD.js の特徴● EWD.js アーキテクチャー

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

MTA2015 宮崎 08/30 13

EWD.js のメッセージング

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 の特徴● 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 度に１個のリクエストを処理

● すべての子プロセスが使用中なら、着信リクエストは非同期のマスター 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 35

高信頼性ウェブサービス

セキュアな JSONウェブサービスコール

アマゾンウェブサービスと同等な

シークレットキーを共有

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 版

MTA2015 宮崎 08/30 45

レガシー M アプリをフェニックス！

● Astute Semantics VistA FilemanGUI

MTA2015 宮崎 08/30 46

ご清聴ありがとうございました

ewd.js アーキテクチャー

Software