WebMatrix 2 RCの紹介:Node.js、Jade、EJS、LESS、CoffeeScriptなどのサポート

数か月にわたる活発な開発の後、 WebMatrixチームはWebMatrix 2リリース候補の新しいバージョンを紹介できることを嬉しく思います。 WebMatrix 2には多くの新機能が含まれていますが、今日は、WebMatrixでNode.jsアプリケーションの開発をサポートするために行われた作業の概要を理解することをお勧めします。







WebMatrix 2をダウンロードするには、 次のリンクをクリックしてください 。 WebMatrix 2の革新については、前の予備バージョンからこちらをご覧ください



どれくらいやりましたか?



1年足らず前、カーネギーメロン大学で働き、ASP.NETアプリケーション内でNode.jsを使用して、オンライン学習環境プロジェクトでリアルタイムメッセージングを実装しようとしました。 WindowsでNodeを操作するのは簡単な作業ではありませんでした。Nodeをデプロイすると、NPMを操作するときに問題が発生する可能性があります。 Windows環境でのノードの使用は、絶え間ない戦いのようでした。



私がマイクロソフトに入社してから過去12か月で、Joyentと協力して多くの作業を行い、Windowsとノードおよびnpmリリースをリリースし、Windows Azureでのノードサポート保証しました 。 開発者、IT管理者、そして最も重要なのはシステムを使用するユーザーに最高のエクスペリエンスを提供するために協力しました。



作業の結果の1つは、Windows AzureのNode.jsでアプリケーションを構築する際のエクスペリエンスが大幅に改善されたことです。 SDK開発チームのGlenn Blockは、MicrosoftがWindows AzureをNode.js開発者にとってより良い場所にした方法について素晴らしい記事を書きました 。 Scott Guthrieが彼のブログで次のように語っています: Meet the new Windows Azure



WebMatrix 2に会う



今日Node.jsを使い始めるのは比較的簡単な作業です。 ノード、npm(ノードインストーラーに付属)をインストールし、お気に入りのコードエディターで開始します。 node.js、プロジェクト管理用の無数の構成、CoffeeScriptおよびLESSコンパイルツール、プロジェクトの構成設定、およびアプリケーションの展開を操作するために、さまざまなツールを使用できます。 WebMatrix 2は、Node.jsアプリケーションを構築する別の方法を提供します。アプリケーションを1か所で構築するために必要なすべてを使用します。







WebMatrix 2は、主にWebアプリケーションを構築するために設計されています。 スタート画面から開始して、テンプレートを使用してアプリケーションを作成したり、プロジェクトギャラリーから既製のオープンソースアプリケーションをインストールしたりできます。 現在のテンプレートセットを使用すると、Node.js、PHP、およびもちろんASP.NETに基づいてアプリケーションを作成できます。 すぐに使えるWebMatrix 2には、3つのNode.jsテンプレートが含まれています。





空のサイトでは、httpサーバーを使用する非常に簡単な例が提供されますが、まったく同じ例がnodejs.orgで入手できます。 エクスプレスサイトは、Node.js エクスプレスフレームワークのscaffoldツールを使用して生成される単純なアプリケーションです。 Expressベースのスタートアップサイトは、より興味深いテンプレートです。 そのソースコードはGiHubにあります。このプロジェクトは、jade、LESS css、TwitterとFacebook経由のログイン、モバイルレイアウトとcaptchaを使用して、親と子のレイアウトを含むサイトを実装する方法を示します。 これらのテンプレートのいずれかに基づいてアプリケーションを作成すると、WebMatrix 2はノード、npm、およびIISNodeがシステムにインストールされているかどうかを判断します。 不足しているものがない場合、WebMatrixは不足しているコンポーネントを自動的にインストールします。 環境のこの機能は、PHPおよびASP.NETに基づくプロジェクトにも適用できます。



clip_image002



Node Starter Siteテンプレートを開くと、Express、Jade、LESS、socket.ioベースのチャット、EveryAuthを介したログイン、jQuery Mobileを使用したモバイルクライアントサポートを含む完全に機能するWebサイトが作成されます。



clip_image003



Node.jsのIntelliSense



WebMatrix 2の目標の1つは、Node.jsで作業を開始する開発者のエントリのしきい値を下げることでした。 この目標を達成する1つの方法は、すべてのアプリケーションが構築される基本モジュールにIntelliSenseサポートを実装することです。 IntelliSenseに使用するドキュメントは、 公式サイトnode.jsから取得したものです。



clip_image004



コアモジュール用のIntelliSenseに加えて、WebMatrix 2は、NPMを使用してインストールされた独自のJavaScriptコードおよびサードパーティモジュールの自動コード補完もサポートしています。 NPMギャラリーはすでに10,000を超える要素に達しているため、アプリケーションを構築する無限の可能性があります。 より複雑なプロジェクトをやり直す場合、開発者は困難を感じるかもしれません。 WebMatrix 2は、オープンソースパッケージでの作業を簡素化します。



clip_image005



JadeおよびEJSのサポート



Node.jsを操作するための非常に便利なツールを構築するために、WebMatrix 2に組み込みの JadeおよびEJSエディターを含めることにしました。 JadeおよびEJSの場合、WebMatrixは構文の強調表示、HTMLコード検証、コード領域選択、自動コード補完をサポートしています。



clip_image006



山かっこを使用したい場合は、高度なHTMLエディターを利用できるため、EJSの操作がさらに便利になります。



clip_image007



地球上で最高の{LESS}エディター



はい、私はCSS前処理のファンです。 CSSコードを書くのは、気に入っているからではなく、特定の結果が必要だからです。そのため、できるだけ少ないコードを書きたいと思います。 LESSやSassのようなツールは、変数、ミックスイン、添付ファイル、汎用組み込み関数など、CSSでまだ利用できない機能を開発者に提供します。



clip_image008



WebMatrix 2のLESSエディターは、構文の強調表示を提供するだけでなく、LESS固有の検証、変数と不純物のIntelliSense、およびLESS固有のコードフォーマットもサポートします。 ほとんどのノード開発者はNPMモジュールを使用してサーバー上でCSSコードを処理しますが、LESSをローカルでコンパイルする必要がある場合は、 Orange Bitsコンパイラを使用してデザイン時にCSSをコンパイルできます。



clip_image009



CoffeeScriptエディター



LESSがCSSコードの記述を容易にするように、 CoffeeScriptはJavaScriptコードの記述を容易にします。 WebMatrix 2は、構文の強調表示、コード領域、およびコード補完を提供し、開発を簡素化します。 サーバーでコンパイルせずにCoffeeScriptを使用する場合は、開発中にOrange Bitsコンパイラーを使用してJavaScriptコードをコンパイルできます。



clip_image010



モバイルエミュレータ



モバイルアプリの開発は必須です。 WebMatrix 2は、いくつかの方法でモバイル開発を簡素化しようとしています。 まず、プロジェクトテンプレート(この場合はNode Starter Template)は、モバイルデバイスをサポートするように設計されており、アダプティブマークアップを使用します。



これは、サイトのコンテンツを頻繁に変更する必要がない場合に非常に適しています。 しかし、より複雑なシナリオでは、このアプローチでは不十分です。 これを回避するために、Node Starter Templateはユーザーのクライアントを決定するメカニズムを提供し、モバイルクライアントを決定する場合、サイトの特別なモバイルバージョンをユーザーに送信します。 モバイルプレゼンテーションはjQuery Mobileに基づいています。 個々のビューには特別な命名規則があり、タイプ(ビュー名)_mobile.jadeのモバイルビューを作成できます。



WebMatrixはさらに多くを提供します。 さまざまなデバイスのさまざまなブラウザーでサイトがどのように見えるかを確認する必要がある場合はどうでしょうか? WebMatrix 2は、モバイルおよびデスクトップブラウザーを起動メニューに追加できる拡張モデルを提供します。



clip_image011



現在、Windows PhoneおよびiPhone / iPadエミュレーターのサポートを提供しています。 将来的には、コミュニティはAndroidなどの他のエミュレータをサポートするか、アプリケーションをテストするためのオンラインツールをサポートすることも想定しています。



clip_image012



拡張機能とオープンソース



開発ツールは、開発者がサポートする場合に役立ちます。 すべての開発者で成功し、共に成長したいと考えています。 この目標を達成するために、開発者が独自の拡張機能を構築して他の開発者に提供できるようにする拡張モデルを作成しました。 拡張ギャラリーは、 http://extensions.webmatrix.com/からオンラインで入手できます。 これらの拡張機能をGitHubに移植する予定です。NodePowerTools拡張機能は、オープンソースに切り替える最初のステップです。





今後数か月以内に、Microsoftからの拡張機能が増え、オープンソースに移行される予定です。



clip_image013



一緒に働いた



WebMatrixチーム、Glenn Block、Clydio Caldato、Node Advisor、Isaac Schlueter、Joyentのすべての人たちを含め、このリリースを支援してくれたすべての人に感謝します。 詳細については、次のリンクをご覧ください。





喜んでコードを書いてください!



All Articles