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

良い週末を...

Source: https://habr.com/ru/post/J181670/


All Articles