Ubuntu 14.04でNodeJS、SailsJS、DustJSを使用してSPA（シングルページアプリケーション）を構築する方法

前書き

*Node.js®*は、高速でスケーラブルなネットワークアプリケーションを簡単に構築するためのChromeのJavaScriptランタイム上に構築されたプラットフォームです。 Node.jsは、イベント駆動型のノンブロッキングI / Oモデルを使用するため、軽量で効率的であり、分散デバイス間で実行されるデータ集約型のリアルタイムアプリケーションに最適です。

Sails *は、バックエンドサーバー用のNodeJSフレームワークです。 Model-View-Controllerパターンに基づいて、アプリケーションの迅速な開発を可能にします。 Sailsには、リアルタイムプッシュメッセージ用のWebソケットが組み込まれています。 Waterline ORMをデフォルトのORMとして使用し、データベースに依存しません。言い換えれば、SQLおよび非SQLデータベースのスペクトル全体でのデータベース操作が可能になります。最も重要なこととして、Sailsはアプリケーションに適切な構造を提供します。
Dust *はJavaScriptテンプレートエンジンです。 ctemplateファミリーの言語から外観を継承し、サーバーとブラウザーの両方で非同期に実行するように設計されています。
SPA は Single Page Application *の略です。これらは、単一のWebページに収まるアプリケーションです。サイトが開くと、その後ページはリロードされません。このようなアプリケーションの目標は、デスクトップアプリのように、ページの読み込み時間を短縮し、さまざまなページに簡単に移行できるようにすることで、滑らかなユーザーエクスペリエンスを提供することです。

このチュートリアルでは、コードを管理するフレームワークとしてSailsJSを使用してNodeJSサーバーを設定します。クライアントとサーバーの両方で使用される同形テンプレートにDustJSを使用します。

目標

私たちの主な目的は、クライアントだけでなくサーバーでも同型（または同じ）テンプレートを使用することです。これは素晴らしいです

クライアントとサーバーの両方で同じテンプレートとして記述および保守するコードが少ない
任意のページをサーバーから直接取得できるため、インデックス可能な検索エンジン

前提条件

このチュートリアルでは、Ubuntu 14.04 x64ドロップレットを作成済みであることを前提としています。 512 MBのRAMでテストされました。 +また、パッケージをインストールするには、sudoアクセス権を持つユーザーが必要です。

ステップ1-ソフトウェアのインストール

最初に、npmからネイティブアドオンをコンパイルしてインストールするには、ビルドツールをインストールする必要があります。

sudo apt-get install python-software-properties python g++ make

次に、次のコマンドを使用してNodeJとNPMをインストールします（* Chris LeaのPPA *から）。

sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs

次に、 `+ SailsJs +`をインストールします。

sudo npm -g install sails

ステップ2-新しいSailsプロジェクトの作成

新しいアプリケーションを作成します。

sails new dustspa
cd dustspa

Sailsは次の構造で `+ dustspa +`ディレクトリを作成します：

--config
--views
---api
--tasks
--assets
README
.gitignore
package.json
.sailsrc
app.js
Gruntfile.js

`+ package.json`ファイルで次の行を見つけます。

"dependencies": {
"sails": "~0.11.0",

それらを次のように変更します。

"dependencies": {
    "dustjs-linkedin": "^2.5.1",
    "sails": "~0.11.0",

ほこりコンパイラは、ほこりテンプレートをほこりJavaScriptテンプレートにコンパイルするために使用されます。

次に、 `+ dustjs `パッケージと ` package.json +`ファイルの他のパッケージの依存関係をインストールします。

sudo npm install

ここで、 `+ sails lift +`を使用してサーバーを持ち上げます。

sails lift

デフォルトのホームページを表示するには、「：1337」にアクセスしてください。完了したら、 `+ Ctrl + C +`を使用してサーバーを停止します。

ステップ3-ビューエンジンの設定

まず、* View Engine *を `+ dust +`に設定します。

`+ config / views.js `で、 ` engine： 'ejs' `を ` engine： 'dust' +`に変更します。

nano ./config/views.js

行に移動：

   engine: 'ejs',

そしてそれを次のように変更します。

   engine: 'dust',

変更が完了したら、 + Ctrl + X +（保存）、Y（ファイル名の確認）、および_ENTER_（保存して終了）を押します。

上記の方法を使用して、今後すべてのファイルを編集します。

ステップ4-layout.dustの作成

`+ layout.dust +`のコンテンツがランディングページになります。最初のページについては、すべてのリクエストがこのページに送られます。その後、リクエストはフロントエンドで処理されます。

+ views`フォルダーにファイル + layout.dust`を作成します：

touch views/layout.dust

次のHTMLコードを `+ layout.dust +`にコピーします。

layout.dust

<!DOCTYPE html>
<html>
<head>
 <title>Dust SPA</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
 <div class="container">
   <div class="header">
     <nav>
       <ul class="nav nav-pills pull-right">
         <li role="presentation" class="active"><a href="#" class="links" data-template="home">Home</a></li>
         <li role="presentation"><a href="#" class="links" data-template="about">About</a></li>
         <li role="presentation"><a href="#" class="links" data-template="contact">Contact</a></li>
       </ul>
     </nav>
     <h3 class="text-muted">SPA - DustJS Templates, SailsJS Architecture</h3>
   </div>
   <br/>
   <div id="template">
     <h1>Partial Goes Here</h1>
   </div>
   <footer class="footer">
     <p>Styled by Bootstrap&copy;</p>
   </footer>
 </div>
</body>
</html>

HTMLは非常に単純です。それは使用しています：

スタイリング用のブートストラップ。
ナビゲーションリンクのシンプルなナビゲーション。
`+ <div id =" template "> … </ div> +`テンプレートがロードされる場所

次に、 + routes.js`で + / + `のビューを設定する必要があります。 `+ config / routes.js +`を開いて編集します：

routes.js

'/': {
  view: 'layout'
   }

次に、サーバーを持ち上げて（サーバーが既に起動している場合は、Ctrl + Cを押して停止します）、進行状況を確認します。 `+ dust spa +`ディレクトリ（現在のディレクトリ）からこのコマンドを実行します：

sails lift

ブラウザで次の場所を指定します： +：1337 +

ページが表示されたら、次に進みましょう。そうでない場合は、前の手順を確認してください。また、リンクはこの時点では機能しません。

ステップ5-パーシャルの作成

`+ views `ディレクトリにディレクトリ ` partials +`を作成し、この新しいディレクトリに変更します。

mkdir views/partials
cd views/partials

次の内容の + partials +`ディレクトリに `+ home.dust +、 + about.dust +、および `+ contact.dust +`ファイルを作成します。

home.dust

   <div class="jumbotron">
     <h1>Home Page
       {?home}<small class="pull-right">Visit Count: {home}</small>{/home}
     </h1>
     <p class="lead">This is the home page. Its actually a dust partial which will be replaced when we navigate away from the page. Only this partial will change while the rest of the page will not be reloaded. SPA Magic!</p>
     <p>
       <a class="btn btn-lg btn-success" href="http://linkedin.github.io/dustjs/" target="_blank" role="button">Check out DustJS</a>
       <a class="btn btn-lg btn-warning pull-right" href="http://sailsjs.org" target="_blank" role="button">Check out SailsJS</a>
     </p>
   </div>

about.dust

   <div class="panel panel-primary">
     <div class="panel-heading">
     <h1 class="panel-title">About Us
       {?about}<kbd class="pull-right">Visit Count: {about}</kbd>{/about}
     </h1>
     </div>
     <div class="panel-body">
       <h4>This is the About Us template. Its actually a dust partial which will be replaced when we navigate away from the page. Only this partial will change while the rest of the page will not be reloaded. SPA Magic!</h4>
       <br>
       <p>
         <a class="btn btn-lg btn-success" href="http://linkedin.github.io/dustjs/" target="_blank" role="button">Check out DustJS</a>
         <a class="btn btn-lg btn-warning pull-right" href="http://sailsjs.org" target="_blank" role="button">Check out SailsJS</a>
     </p>
     </div>
   </div>

contact.dust

   <div class="well">
     <h1 class="align-center">Show us some love and we'll get back to you !
       {?contact}<small class="pull-right">Visit Count: {contact}</small>{/contact}
     </h1>
     <hr/>
     <div class="input-group input-group-lg">
       <span class="input-group-addon" id="basic-addon1">@</span>
       <input type="text" class="form-control" placeholder="Email" aria-describedby="basic-addon1">
     </div>
     <br/>
     <p>
     <a class="btn btn-lg btn-success" href="#" role="button">Send Contact</a>
     </p>
   </div>

ステップ6-テンプレートのコンパイル

ダストテンプレートは、フロントエンドで使用する前にコンパイルする必要があります。

`+ dust compiler +`をインストールしましょう：

sudo npm install -g dust-compiler

コンパイル済みのテンプレートはすべて `+ assets / templates`に保存します。メインの `+ dusts +`ディレクトリに移動します：

cd ../..

次に、 `+ dust templates`をコンパイルします：

dust-compiler -s views/partials/ -d assets/templates/ --bootstrap --nonotify

これで、 `+ assets / templates`フォルダーに3つのファイルがあるはずです。

+ home.js +
+ about.js +
+ contact.js +

これで、必要なファイルがすべて揃いました。

まず、 `+ views / layout.dust `で、最後にある ` <body> `タグ内に ` dust-js`ライブラリとテンプレートファイルを追加します。

layout.dust

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dustjs-linkedin/2.5.1/dust-core.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dustjs-helpers/1.5.0/dust-helpers.min.js"></script>

<script type="text/javascript" src="/templates/home.js"></script>
<script type="text/javascript" src="/templates/about.js"></script>
<script type="text/javascript" src="/templates/contact.js"></script>

それが終わったら、リンクのクリックをキャプチャして必要なテンプレートをレンダリングするスクリプトを追加する必要があります。次の内容で `+ assets / js / click Handler.js`を作成します。

clickHandler.js

   (function () {

 var links = document.getElementsByClassName("links"),
 templateDiv = document.getElementById("template"),
 nav = document.querySelector('nav > ul'),
 clicked = false, viewCount = { home: 2, about: 1, contact: 1 };

 function clickHandler(e) {
   var target = event.target,
   templateName = this.getAttribute("data-template");
   if(clicked) {
     clicked.removeAttribute('class');
   }
   else {
     nav.querySelector('.active').removeAttribute('class');
   }
   target.parentElement.setAttribute('class','active');
   clicked = target.parentElement;

   dust.render(templateName, viewCount, function (err, out) {
     if(err) console.log('Error:',err);
     else {
       viewCount[templateName]++;
       templateDiv.innerHTML = out;
     }
   });
 };

 for(var i = 0; i < links.length; i++){
   links[i].addEventListener('click', clickHandler, false);
 }

})();

上記のスクリプトは非常に単純です。次のことを行います。

リンクのクリックイベントをキャプチャします
`+ data-template +`属性からリンクのテンプレート名を抽出します
クリックされたリンクを様式化する
`+ dust.render `関数を使用してテンプレートをレンダリングし、オブジェクト ` viewCount +`を渡します（ここにはすべてを含めることができます。ここには、ビューアクセスのカウントが含まれています）

この新しい + click Handler.js`ファイルを参照するには、 + views / layout.dust`を編集し、最後にある `+ <body> +`タグ内に以下を追加します。

<script type="text/javascript" src="/js/clickHandler.js"></script>

最後に、 + views`ディレクトリの + layout.dust`を編集する必要があります。

`+ views / layout.dust `の ` <div id =" template "> … </ div> +`を次のように変更します。

layout.dust

<div id="template">
 {> "partials/home"/}
</div>

上記の変更は何をしますか？！これは*テンプレートの再利用*です。 + dust.js`ビューエンジンは、 + {> "partials / home" /} + をファイル + view / partials / home.dust + `の内容に置き換えます。

このテンプレートはどのように再利用されますか？このテンプレートのコンパイル済みバージョン（ `+ dust-compiler `を使用してコンパイルしたもの）は、 ` assets / templates / home.js `にあります。このコンパイル済みテンプレートは、後でスクリプトタグに含まれます。 ` <script src =" / templates / home.js "/> `タグを使用してテンプレートが含まれると、その（テンプレート）は自動的に ` frontend `の ` dust.cache `オブジェクトに追加されます。次に、このテンプレートを再レンダリングするために、 ` dust.render（" home "、obj、callbackFunction）`を使用します。コードの理解を深めるために、 ` assets / js / click Handler.js`のコードを確認できます。

`+ xxx `という名前のDustテンプレートは、 ` xxx.dust `という名前のファイルで作成されます。複数の ` .dust `ファイルを作成し、1つのdust.jsテンプレートを別のテンプレートの一部として参照できます。これは、複数のページに共通のヘッダーとフッターなどのタスクの「コンポーネント」または再利用可能なテンプレートの基礎です。ここでは、例でファイル拡張子「 .dust 」を使用していますが、「。tl +」も一般的に見られることに注意してください。ビルドプロセスにのみ関係するため、機能する拡張機能を使用できます。

部分参照構文 `+ {> name /} `もパスをサポートしているため、 ` shared / header.dust `のようなパスにテンプレートを作成し、それを ` {>" shared / header "/} +として参照できます。 `。これにより、ディレクトリを使用して、パーシャルをライブラリのような構造に編成できます。

パーシャルの詳細については、https：//github.com/linkedin/dustjs/wiki/Dust-Tutorial#Partials [github]をご覧ください。

最終的な `+ layout.dust +`は次のようになります。

layout.dust

<!DOCTYPE html>
<html>
<head>
 <title>Dust SPA</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>

<body>
 <div class="container">
   <div class="header">
     <nav>
       <ul class="nav nav-pills pull-right">
         <li role="presentation" class="active"><a href="#" class="links" data-template="home">Home</a></li>
         <li role="presentation"><a href="#" class="links" data-template="about">About</a></li>
         <li role="presentation"><a href="#" class="links" data-template="contact">Contact</a></li>
       </ul>
     </nav>
     <h3 class="text-muted">SPA - DustJS Templates, SailsJS Architecture</h3>
   </div>
   <br/>
   <div id="template">
     {> "partials/home"/}
   </div>
   <footer class="footer">
     <p>Styled by Bootstrap&copy;</p>
   </footer>
 </div>

 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dustjs-linkedin/2.5.1/dust-core.min.js"></script>
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dustjs-helpers/1.5.0/dust-helpers.min.js"></script>
 <script type="text/javascript" src="/templates/home.js"></script>
 <script type="text/javascript" src="/templates/about.js"></script>
 <script type="text/javascript" src="/templates/contact.js"></script>
 <script type="text/javascript" src="/js/clickHandler.js"></script>
</body>

</html>

ステップ7-アプリのテスト

サーバーを持ち上げます。

sails lift

ブラウザで次を指定します： +：1337 +

上位3つのリンクをクリックしてSPAをテストします：ホーム、概要、連絡先

結論

驚くばかり！クライアントとサーバーの両方で同じテンプレートを使用できる同形ウェブサイトの構築に成功しました。 +シングルページアプリケーション（SPA）Webサイトを構築し、SailsJSフレームワークの使用についても理解しました。

外部リンク

使用されているテクノロジーについて詳しく知りたい場合は、以下のリンクをご覧ください。

TOC

Ubuntu 14.04でNodeJS、SailsJS、DustJSを使用してSPA（シングルページアプリケーション）を構築する方法

前書き

目標

前提条件

ステップ1-ソフトウェアのインストール

ステップ2-新しいSailsプロジェクトの作成

ステップ3-ビューエンジンの設定

ステップ4-layout.dustの作成

ステップ5-パーシャルの作成

ステップ6-テンプレートのコンパイル

ステップ7-アプリのテスト

結論

外部リンク

Related