ECTテンプレートエンジンJavascriptがリリースされました

ちょうど3か月前、私は ECTテンプレートエンジンをJavaScriptコミュニティに紹介しました 。 昨日、彼のためにアップデートがリリースされました。これについてはこの記事で説明します。

ECTを知っていますか？

ECTは、CoffeeScript構文が組み込まれたJavaScriptテンプレートエンジンです（そのため、名前はEmbedded CoffeeScript Templatesです）。 ECTは当初、最大のパフォーマンスに焦点を当てて開発されたと同時に、開発者に豊富な機能セットを提供します。

新機能

性能

ECTは、最速のJavaScriptテンプレートエンジンと呼ぶことができます。 この項目の下では、近い将来、作業が完了しました。 元々求められていた速度を達成しました。

クライアントに送信する前のサーバー上のテンプレートのプリコンパイル

ECTの発行後、批判と感謝の両方で多くのレビューを受けました。 レビューと提案がありました。 最も頻繁な提案の1つは、サーバー側でテンプレートをプリコンパイルする機能を追加して、クライアントにかなり重いcoffee-script.jsをロードせず、クライアントのパフォーマンスを向上させることでした。



今、そのような機会が現れました。 コンパイラは、connect / expressのミドルウェアとして実装されます。



次のように機能します。

• サーバーでテンプレートエンジンを構成します。
• ミドルウェアテンプレートコンパイラを接続/エクスプレスアプリケーションのスタックに追加します。
• クライアントで、ルートとしてミドルウェアを提供するURLを指定します。

クライアントがサーバーからテンプレートを要求すると、この要求はテンプレートコンパイラのミドルウェアとして機能し、それに応じてクライアントは既にコンパイルされたテンプレートを受け取ります。 この点で、クライアント側でCoffeeScriptコンパイラーを接続する必要はなく、同時に、各変更後にテンプレートを手動でコンパイルする必要はありません。 コンパイラーはすべて自分で行います。



ただし、手動でのコンパイルは依然として便利です。 たとえば、Node.JSなしでサーバーとして、またはPhoneGapでテンプレートエンジンを使用するには（ECTは非常に使いやすいです）。 TODOは、コマンドラインからテンプレートをプリコンパイルするためのユーティリティを作成する段階に既に入りました。



ミドルウェアの例：

var connect = require('connect'); var ECT = require('ect'); var renderer = ECT({ root : __dirname + '/views', ext : '.ect' }); //  .   root        . var app = connect() /** *  middleware  . *   root  base url,    . * ..  url http://server:3000/views/page      __dirname + '/views' + 'page.ect' */ .use(renderer.compiler({ root: '/views', gzip: true })) //     middleware .use(function(err, req, res, next) { res.end(err.message); }); app.listen(3000);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

クライアント上のテンプレートエンジンの構成では、テンプレートコンパイラのミドルウェア構成と同じルートを指定する必要があります。

 var renderer = ECT({ root : '/views', ext : '.ect' }); var data = { title : 'Hello, World!' }; var html = renderer.render('template', data);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

完全な高速フレームワークのサポート

ExpressでECTをテンプレートエンジンとして接続することは、今では問題ありません。

 var express = require('express'); var app = express(); var ECT = require('ect'); var ectRenderer = ECT({ watch: true, root: __dirname + '/views' }); app.engine('.ect', ectRenderer.render); app.get('/', function(req, res){ res.render('index.ect'); }); app.listen(3000); console.log('Listening on port 3000');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

構文

renderメソッドを同期的に呼び出す機能が追加されました。



これにより、たとえばconnect-domainを使用して、エラーが集中的にキャッチされるときのパフォーマンスがわずかに向上し、コードの記述スタイルを自由に選択できます。



非同期スタイル：

 var renderer = ECT({ root : '/views' }); var data = { title : 'Hello, World!' }; renderer.render('template.ect', data, function (err, html) { });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

同期スタイル：

 var renderer = ECT({ root : '/views' }); var data = { title : 'Hello, World!' }; var html = renderer.render('template.ect', data);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

両方のオプションが同期的に実行されることに注意してください。 違いは書き込みスタイルのみで、最初のオプションはコールバックにエラーを渡し、2番目のオプションはエラーの場合にスローを行います。 2番目のオプションは少し速く動作します。



複数行の式のサポートが追加されました。



私自身はテンプレート内にヘルパーを書くという考えをあまり好きではありませんが、この機能は頻繁に尋ねられました（ エコ問題もテンプレートエンジンの問題にこの機能を追加するように頼まれました ）ので、それを実装することにしました。



これで、テンプレートコードで小さな関数を定義したり、他のコードを実行したりできます。



例：

 <% truncateHelper = (str) -> if str.length > 10 return (str.substr 0, 10) + '…' else return str %> <div> <%- truncateHelper @title %> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デザート用

ECTの場合、 Sublime Text 2の構文強調プラグインがリリースされました。TurtlePieに感謝します。