Ubuntu14.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 は、シングルページアプリケーションの略です。 これらは、単一のWebページに適合するアプリケーションです。 サイトが開くと、それ以降はページがリロードされません。 このようなアプリケーションの目標は、デスクトップアプリと同じように、ページの読み込み時間を短縮し、さまざまなページに簡単に移行できるようにすることで、流動的なユーザーエクスペリエンスを提供することです。
このチュートリアルでは、コードを管理するためのフレームワークとしてSailsJSを使用してNodeJSサーバーをセットアップします。 クライアントとサーバーの両方で使用される同形テンプレートにはDustJSを使用します。
目標
私たちの主な目的は、サーバーだけでなくクライアントでも同形(または同じ)テンプレートを使用することです。 これは素晴らしいです
- クライアントとサーバーの両方で同じテンプレートとして記述および維持するコードが少なくなります
- 任意のページをサーバーから直接フェッチできるため、検索エンジンはインデックスに登録可能
前提条件
このチュートリアルは、Ubuntu14.04x64ドロップレットを作成したことを前提としています。 512MBのRAMでテストされました。 パッケージをインストールするには、sudoアクセス権を持つユーザーも必要です。
ステップ1—ソフトウェアのインストール
まず、npmからネイティブアドオンをコンパイルしてインストールするには、ビルドツールをインストールする必要があります。
sudo apt-get install python-software-properties python g++ make
次に、次のコマンド( ChrisLeaのPPAから)を使用してNodeJとNPMをインストールします。
sudo add-apt-repository ppa:chris-lea/node.js sudo apt-get update sudo apt-get install nodejs
注:これにより、NodePackageManagerまたはnpm
もインストールされます。 NPMは、ノードパッケージのインストールに使用されます。 NodeJのapt-get
に似ています。 これを使用して、Sails、dust-compiler
、およびその他の要件などのノードモジュールをインストールします。
次に、SailsJs
をインストールします。
sudo npm -g install sails
注:これにより、最新バージョンのSailsがインストールされます。 Sails.jsの詳細については、Webサイトを参照してください。
ステップ2—新しい帆プロジェクトを作成する
新しいアプリケーションを作成します。
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
your_server_ip:1337
にアクセスして、デフォルトのホームページを表示します。 完了したら、Ctrl+C
を使用してサーバーを停止します。
ステップ3—ビューエンジンの設定
まず、 ViewEngineを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©</p> </footer> </div> </body> </html>
HTMLは非常に単純です。 それは使用しています:
- スタイリング用のブートストラップ。
- ナビゲーションリンクのシンプルなナビゲーション。
- テンプレートが読み込まれる
<div id="template">...</div>
次に、routes.js
で/
のビューを設定する必要があります。 config/routes.js
を開き、次のように編集します。
ルート.js
'/': { view: 'layout' }
それでは、サーバーを持ち上げて(サーバーがすでに起動している場合は、Ctrl + Cを押して停止します)、進行状況を確認します。 dustspa
ディレクトリ(現在のディレクトリ)からこのコマンドを実行します。
sails lift
そして、ブラウザで次の場所を指定します:droplet_ip:1337
ページが表示されたら、次に進みましょう。 そうでない場合は、前の手順を確認してください。 また、この時点ではリンクは機能しません。
ステップ5—パーシャルの作成
注:パーシャル(またはテンプレート)はページの一部です。 SPAでは、ページ全体を置き換えるのではなく、一部だけを置き換えます。
views
ディレクトリにpartials
ディレクトリを作成し、次の新しいディレクトリに移動します。
mkdir views/partials cd views/partials
home.dust
、about.dust
、およびcontact.dust
ファイルをpartials
ディレクトリに次の内容で作成します。
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
で、dust-js
ライブラリとテンプレートファイルを<body>
タグの最後に追加します。
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/clickHandler.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
を渡します(何でも含めることができます。ここでは、ビューアクセスの数が含まれます)
views/layout.dust
を編集し、最後の<body>
タグ内に以下を追加して、この新しいclickHandler.js
ファイルを参照します。
<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/clickHandler.js
のコードをチェックして、コードをよりよく理解することができます。
xxx
という名前のダストテンプレートは、xxx.dust
という名前のファイルで作成されます。 複数の.dust
ファイルを作成し、1つのdust.jsテンプレートを別のテンプレートの一部として参照できます。 これは、複数のページの共通のヘッダーやフッターなどのタスクの「コンポーネント」または再利用可能なテンプレートの基礎です。 ここでは例で.dust
ファイル拡張子が使用されていますが、.tl
も一般的に見られることに注意してください。 ビルドプロセスにのみ関係するため、適切な拡張機能を使用できます。
部分参照構文{> name /}
もパスをサポートしているため、shared/header.dust
のようなパスにテンプレートを作成し、{> "shared/header" /}
として参照できます。 これにより、ディレクトリを使用してパーシャルをライブラリのような構造に編成できます。
githubでPartialsの詳細をご覧ください。
最終的な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©</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
ブラウザで次の場所を指定します:your_server_ip:1337
上位3つのリンクをクリックしてSPAをテストします:ホーム、バージョン情報、連絡先
結論
素晴らしい ! クライアントとサーバーの両方で同じテンプレートを使用できる同形のWebサイトを正常に構築しました。 シングルページアプリケーション(SPA)Webサイトを構築し、SailsJSフレームワークの使用についても理解しました。
外部リンク
使用されているテクノロジーについて詳しく知りたい場合は、以下のリンクにアクセスしてください。