ITエンジニア/デザイナ向けにオープンソースを毎日紹介

サーバサイドとの通信を行うWebアプリケーションの場合、Ajax/JSONPを介してデータの授受を行うと思います。それに対してローカルに全てのデータがある場合、それらを変数に入れて処理するというのが多いのではないでしょうか。

そんなWebアプリケーションの組み立て方を変えてくれるかも知れないフレームワークがLocal.jsです。ローカルでもAjaxを使ってデータ取得を行えるようになります。

ローカルでAjax!
ローカルでAjax!

Local.jsの使い方

例えばこんな感じのコードになります。

local.addServer('hello-world', function(req, res) {
  res.writeHead(200, 'OK');
  res.end('Hello, world!');
});

local.GET('httpl://hello-world')
  .then(function(res) {
    console.log(res.body);
    // => 'Hello, world!'
  });

httplというスキーマでローカルのモックサーバにアクセスします。そしてwriteHeadでHTTPステータスを返し、endでレスポンスを出力します。Ajaxと変わりませんね。

// http://myserver.com/worker.js
function main(req, res) {
  res.writeHead(200, 'OK');
  res.end('Hello, other world!');
}

// The page:
local.GET('httpl://myserver.com(/worker.js)/')
  .then(function(res) {
    console.log(res.body);
    // => "Hello, other world!"
  });

こんな感じに書くと必ずmainを通るようになります。

メソッドは各種対応しています。

local.HEAD('httpl://myhost.com(/myworker.js)/');
local.GET('httpl://myhost.com(/myworker.js)/');
local.GET({ url: 'httpl://myhost.com(/myworker.js)/', Accept: 'application/json' });
local.DELETE('httpl://myhost.com(/myworker.js)/');
local.POST({ foo: 'bar' }, 'httpl://myhost.com(/myworker.js)/');
local.PUT({ foo: 'bar' }, 'httpl://myhost.com(/myworker.js)/');
local.PATCH({ foo: 'bar' }, 'httpl://myhost.com(/myworker.js)/');

Local.jsを使うと、サーバサイドで行っているようなMVCで言うところのMCを処理して、レスポンスをJavaScript + Viewで処理すると言った形にできそうです。テスト用のモックサーバとして使うこともできるでしょうし、Webサービス版とオフライン版をスキーマを変更するだけで実現するといった実装もできるようになりそうです。

こういった実装は面白そうです。
こういった実装は面白そうです。

Local.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Local.js 0.6.2 - An IPC framework for open-architecture Web applications.

pfraze/local

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2