HTML / CSS / JS + Node.js + node-webkit =クロスアーキテクチャアプリケーション



node.jsの人気が高まるにつれて、アプリケーション開発にとってますます魅力的になっています。 少なくとも、私は最近、この技術を頻繁に使用して、それらを迅速に開発しています。 現時点では、技術的には、1つの言語でのクロスプラットフォームアプリケーションの開発に障害はありません。 そして、古典的なWebアプリケーション(クライアントサーバー)だけでなく、デスクトップアプリケーションもあります。



1.クイックスタートが必要な場合は、エクスプレス

npm install express
      
      





2.次の内容でserver.jsファイルを作成します。

  var express = require('express'); var http = require('http'); var index = require('./routes/index.js'); var app = express(); //    express` app.get('/', index.index); http.createServer(app).listen(app.get('port'), function(){ console.log('Express server listening on port ' + app.get('port')); });
      
      





3. index.jsファイルを作成し、routesフォルダーに配置します

 exports.index = function(req, res){ res.render('index', {}); };
      
      





4. index.ejs(テンプレートエンジンとしてejsを使用)を作成し、それをビューフォルダーに配置します

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello world</title> </head> <body> <h1>Hello world!</> </body> </html>
      
      





出来上がり!



打ち上げ

 node server.js
      
      







ファイルをサーバーにコピーし、nginxを構成してサービスへのリクエストをプロキシするようにします... ただし、サーバーをいじりたいという欲求や機会があるとは限りません。 そして、プロジェクトをローカルで実行したとしても、大騒ぎです。 すぐに使えるものが欲しい。 ショートカットをクリックすると、アプリケーションが起動します。



Habrで発表されているnode-webkitプロジェクトは、 同様のプロジェクトの構築に役立ちます。

このテクノロジーの本質は、クライアントのJavaScriptコードにAPI node.jsを埋め込むことができることです。 つまり 仲介なしで、クライアントコードからデータベースとファイルシステムに直接接続できます。 魅力的に聞こえますが、動作の仕方は違いますが、このような混合物はあまり好きではありません。 これは、デスクトップアプリケーションのみを対象としています。 私は別のオプションが好きです。

このアプリケーションは、クライアントアプリケーションとサーバーというWebアプリケーション向けのクラシックスタイルで作成されています。 また、サーバー上でマルチユーザーアクセスを提供し、ローカル(シングルユーザー)アプリケーションとして実行できる必要があります。



レシピは次のとおりです。

1. node-webkitは、最初に表示される開始HTMLページについて知っている必要があります。

package.jsonに以下を追加します

 "main": "nw-start.html"
      
      





2. nw-start.htmlは次のようになります

 <!DOCTYPE html> <html> <head> <script> function bodyOnLoad(){ require('./server.js'); window.location.assign('http://localhost:3000/'); } </script> </head> <body onload="bodyOnLoad()"> <h1> Loading... </h1> </body> </html>
      
      





3.すべてのserver.jsコードは即時関数になります。

 (function startServer(){ var express = require('express'); var app = express(); .... http.createServer(app).listen(app.get('port'), function(){ console.log('Express server listening on port ' + app.get('port')); }); })();
      
      





4.プロジェクト全体をzip-archive nw-project.zipにパックします

5.起動

 nw nw-project.zip
      
      







「サーバー」部分がロードされる短い休止の後





何が起こっているかの本質は非常に簡単です。 node-webkitは開始ページをロードします。 その後、クライアント関数bodyOnLoadが実行されます。 bodyOnLoadは、server.jsモジュールをロードします(node.jsの呼び出しに必要)。 この呼び出しにより、server.js内のコードが実行され、結果としてhttp-serverが起動されます。 ページのURLを変更するだけです。これはwindow.location.assign( 'http:// localhost:3000 /')が行うことです。



このアプローチにより、Webアプリケーションのアーキテクチャを変更せずにデスクトップバージョンを作成できます。 確かに、この単純さのために、ある程度のパフォーマンスを払わなければならないことを理解する必要があります...結局のところ、データは直接ではなく、ネットワーク要求を通じて交換されます。



良い週末を...



All Articles