MeteorJSユニバースへの最初のステップ

クライアント側のプログラミングに興味があるなら、おそらく流行っているいわゆるフルスタックフレームワークを参照する新しいWebフレームワークではないMeteorを聞いたことがあると思います。 彼についてはすでにHabréで書いているので、情報が重複しないように、 ここまたはここで読むことができます 。 私はかなり長い間流星について聞いていましたが、まだそれに触れることを敢えてしませんでした。 それで、次の週末が来て、再び私は彼に出くわしました。 今回は、正直に試してみることにしました。 たぶん、この投稿は誰かに研究の始まりへの小さな刺激を与えるか、少なくともこのツールに精通するでしょう。 その後、それは無駄ではないでしょう。

免責事項：中毒を引き起こす可能性があります。

catへようこそ、meteorjsをマスターするための最初のステップを踏みましょう。

設置

そのため、まずは流星自体をインストールする必要があります。 LinuxライクなOSおよびOSXの場合、ターミナルでコマンドを実行する必要があります

$ curl https://install.meteor.com/ | sh
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

幸運でなく 、Windowsを使用している場合は、 win.meteor.comからバイナリをダウンロードしてインストールし、すべてが機能するはずです。

プロジェクトを作成する

プロジェクトの作成は単純ではありません。フレームワークには、プロジェクトを作成するためのmeteorユーティリティが含まれています。 ターミナルで実行するだけで十分です

 $ meteor create projectName
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

流星はプロジェクト用のフォルダーを作成し、新しいアプリケーション用の最小限のファイルセットをそこに配置します。

プロジェクトの構造についていくつかの言葉を言う必要があります。 最初に、流星はhtml、css、js用の3つのファイルと、インストールされたパッケージに関する情報を保存するための2つのファイルを作成します。

 projectName.css projectName.html projectName.js smart.json smart.lock
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アプリケーション全体をこれらの3つのファイルに書き込むことができます。 もちろん、それはしません。



流星を使用すると、プロジェクト内のファイルの整理方法を決定できます。 Ruby on Railsなどのルールを課すことはありません。ファイルやフォルダーに好きな名前を付けることができます。

これでサーバーを起動できます。 ここのすべても簡単です。 プロジェクトディレクトリで、 $ meteor



コマンドを実行します。 これで、アプリケーションはポート3000で利用可能になりました。 これまでのところ、超自然的なものは何も含まれていませんが、すでに魔法の組み込みデータ反応性を備えた実行可能な流星アプリケーションです。 まだ何がわからなくても心配しないでください。これについては後で詳しく説明します。

今、あなたは少し実験することができます。

まず、流星によって作成された3つのファイルを削除しましょう。それらは必要ありません。

次に、クライアントとサーバーの2つのフォルダーを作成する必要があります。 これは、数少ないファイルホスティング規則の1つです。 サーバーフォルダー内にあるものはすべてサーバー上でのみ実行され、それに応じてクライアント上のクライアントフォルダー内でのみ実行されます。 他のすべてのファイルは、それらがどこにあっても、両方の環境で実行されます。 すぐにさらに詳細lib



ディレクトリのファイルは他のファイルより早く接続され、 main.*



接続されます。

ファイルの接続について少し

流星は開発の利便性を考慮し、Live Reloadはそのまま使用できます。プロジェクトディレクトリ内のファイルを変更すると、サーバーが再起動され、ブラウザーでページが更新されます。 さらに、スクリプトとスタイルを接続する必要はありません。流星はそれらを見つけて接続します。coffeescriptまたはless / scss /スタイラスの信奉者である場合は、インストールされたプラグインを使用します。コンパイルします。

Me石と大気

実際にはプラグインについて。 すでにご存知かもしれませんが、流星はそのパケットシステムを使用しています。 パッケージにはいくつかのタイプがあります。

コアパッケージ

プロジェクトの作成時にすでに含まれている最も基本的なパッケージ。 これらには、たとえばjQueryやアンダースコアが含まれます。 これらのライブラリはすぐに使用できます。

Meteorスマートパッケージ

meteorユーティリティを使用してインストールされる約40個のプラグインのグループ。 ターミナルでコマンドを実行すると、リストを見ることができます

 $ meteor list
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次のコマンドでプラグインをインストールできます

 $ meteor add packageName
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

サーバーをシャットダウンせずに。

しかし、結局のところ、40個のプラグインでさえ、これはあなたが言うことができる無視できるものであり、あなたは絶対に正しいでしょう。

大気スマートパッケージ

これがAtmosphereの助けとなります-サードパーティのプラグインの一種のリポジトリです。 執筆の時点で、859もの多くがありました、あなたはあなたの好みに合わせて何かを選ぶことができます。 大気からプラグインをインストールするには、npm meteoriteパッケージをインストールする必要があります。 彼はプラグインのインストールに従事します。

 $ sudo npm install -g meteorite
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

インストール後、meteorコマンドの使用をmrtに置き換えることができます。mrtは、標準機能を完全に複製する（たとえば、 $ mrt



ときにサーバーを起動する）か、たとえば呼び出されたときに特定の機能を追加する

 $ mrt add foundation-5
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この場合、大気リストからFoundation-5プラグインを追加します。

それは非常に素晴らしいプラグインインストールシステムであることがわかりました。

Npm-パッケージ

さて、そしてもちろんnpmパッケージ。 結局のところ、流星はまだnodejsです。 使い慣れたnpmパッケージを安全にインストールして使用できます。

ビジネス向け

すでに小さなアプリケーションで何かをしましょう。 例として、やるべきことの簡単な結論を出します。 すべてをより美しく見せるために、プロジェクトにブートストラップを追加します。

 $ mrt add bootstrap
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テンプレートから始めましょう。 Meteorは、 ハンドル処理にHandlebarsエンジンを使用します。 クライアントフォルダーにメインテンプレートを作成しますmain.html

 <head> <title>Simple To-Do list</title> </head> <body> <div class="container"> <header class="navbar"> <div class="navbar-inner"> <a class="brand" href="/">To-Do</a> </div> </header> <div id="main" class="row-fluid"> {{> todosList}} </div> </div> </body>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

todosListはネストされたテンプレートで、部分的です。 ファイルを自由に配置できると言ったのを覚えていますか？ これは今でも正しいですが、整理して、 client



ディレクトリにサブビューディレクトリを作成します。このサブディレクトリには、コントローラのようなテンプレートとjsファイルを配置します。 通常、jsファイルは各テンプレートに対応します。

予定リストと個々の要素のテンプレートを作成します。

 /client/views/todosList.html: <template name="todosList"> <div class="todos"> {{#each todos}} {{> todo}} {{/each}} </div> </template>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 /client/views/todo.html: <template name="todo"> <div class="todo"> <h3>{{task}}</h3> </div> </template>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、テンプレートの準備ができました。 ここではすべてが単純です-todosListは、すべてのtodoのリスト（タスクのコレクション）を表示します。 このコレクションを定義しましょう。 サーバーとクライアントの両方に配置する必要があります。つまり、 server



もclient



もコレクションファイルのホストに適していません。 そのような場合のために、プロジェクトルートにcollections



ディレクトリを作成することを提案します。 そして、ファイル自体を追加します

 /collections/todos.js: Todos = new Meteor.Collection('todos');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコードを開始するには、コレクション自体を作成するだけで十分です。

最後に行うことは、表示に使用するデータをテンプレートに表示することです。 別のファイルを作成します。

 /client/views/todosList.js: Template.todosList.helpers({ todos: Todos.find() });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

リストテンプレートでは、式{{#each todos}}？を使用したことを思い出してください。..ここで、この「変数」のソースを設定するだけです。

これで、ブラウザコンソールを開き、タスクをコレクションに追加できます。

 Todos.insert({task: '  meteorJS'});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結果はもうすぐです-最初のTo Doタスクはすぐに描画されます。 ちなみに、同じページを別のブラウザーで開くと、追加されたタスクもそこに表示されます。

スタートには十分すぎるようです。 流星を使用して最も単純な要素を作成する方法を見ました。 もちろん、これだけでは十分ではありません。ルーティング、セキュリティについて詳しく説明する価値があります（ブラウザコンソールからデータベースに完全にアクセスできることにお気づきになりましたか？）、他にも多くのものがありますが、1つの記事には収まりません。 少し後で、流星の研究の中で、コンソールにデータを追加するだけでなく、プロジェクトインターフェースにこの機能を実装することから、ルーティングとスマートアクセス制御を操作すること、その他の興味深いことへの移行について説明します。

最後に、便利なリンクをいくつか残します。

実際にサイト流星 -ここでは、フレームワークに関する入門ビデオをいくつか見て、ドキュメントを読みます。

有用な資料へのリンク集



読んでくれてありがとう、この興味深いフレームワークに少なくとも少し興味があることを願っています。