2013-02-19 9 views
5

私はnode.jsが新しく、Node.jsを使ってリッチなWebベースのアプリケーションを開発する必要があります。node.jsを使ったリッチなアプリケーション開発

今、node.jsの入門ガイドを作成しています。 私はページhereを見る機会があり、何百ものフレームワークと混同しました。私は適切な枠組みを選ぶことを考えておらず、完璧な決定を下すためにこれに助けが必要です。私の要求を説明しましょう。

  1. すべての機能に対してRESTfull APIを開発したいと考えています。 (OAuthのライブラリはどれですか?)
  2. APIの上にWebアプリケーションを開発したいと考えています。 アプリケーションは、主要な機能がクライアント側で開発されるように設計する必要があります。つまり、すべてのビジネスロジックはクライアント側で開発されなければなりません。私はBackbone.js、Underscore.jsのようなライブラリを既に聞いていましたが、それについて明確なアイデアはありませんでした。

私の要件に適したフレームワークを教えてください。

おかげで、

+0

何百ものMVCフレームワークがなく、最高で3/4のサーバ側とクライアント側の同量です。 – mpm

+0

@mpm:あなたは過小評価していると思います。 [TodoMVC](http://todomvc.com/)には25以上のクライアント側フレームワークがリストされており、クライアントサイドJSや他の多くのカテゴリにコンパイルされています。 –

+0

@Scott Sauyetこれらのフレームワークのうち、インターネット上で拡張されたドキュメント、ブログ投稿、サポート、チュートリアルはどれくらいありますか?それは、フレームワークが使う価値があるかどうかを伝える方法です。これらのフレームワークの80%は採用の観点からは重要ではない。 – mpm

答えて

15

は、私は私の用途に使用する優れた技術スタックです:

サーバー側:

  • Express.js
  • ハンドルバー
  • Passport.js
  • マングース
  • MongoDB
  • Caolanフォーム(しかし、私は現在私ですnは自分のフォームハンドラを実装するプロセス)
  • CoffeeScriptの

クライアント側:

  • ハンドルバー
  • のjQuery
  • Require.js
  • BACKBONE.JS
  • テキスト.js(require.jsのプラグイン)
  • Coffeescript(require.js用のプラグイン。私の.coffeeは、r.jsを使ってdev/server側でコンパイルされたクライアント側です)

後で少しサンプルアプリケーションを作成することがあります。

[編集]

okここにサンプルアプリケーションがあります。

プロジェクト構造:

forms 
    |___ sampleForm.coffee 
models 
    |___ sampleModel.coffee 
public 
    |___ images 
    |___ stylesheets 
    | |___ style.less 
    |___ sampleapp 
    |___ main.js 
    |___ cs.js 
    |___ text.js 
    |___ require.js 
    |___ collections 
    | |___ sampleCollection.coffee 
    |___ models 
    | |___ sampleModel.coffee 
    |___ templates 
    | |___ sampleTemplate.hbs 
    |___ lib 
    | |___ handlesbars.js 
    | |___ backbone.js 
    | 
    | |___ ... 
    |___ views 
     |___ sampleView.coffee 
routes 
    |___ index.coffee 
views 
    |___ index.hbs 
app.js 
application.coffee 
package.json 

サーバー側:

app.js

require('coffee-script'); 
module.exports = require('./application.coffee'); 

application.coffee

... standard express.js initialization 
require("./routes")(app) 
... start server 

index.coffee

SampleModel = require "../models/sampleModel" 
module.exports = (app) => 
    app.get "/index", (req,res) => 
    return res.render "index" 

    app.get "/samplemodels", (req,res) => 
    SampleModel.find {}, (err, models) => 
     return res.send 404 if err or !models 
     return res.send models 
    return 

index.hbs

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>Sample app</title> 
    <link type="text/css" href="/stylesheets/style.css" rel="stylesheet" > 
    <script src="/mainapp/require.js" data-main="/mainapp/main"></script> 
</head> 
<body> 
    <div id="main-content"></div> 
</body> 
</html> 

main.js

require.config({...}) // Configure requires.js... 

require(["jquery", "cs!models/samplemodel", "cs!views/sampleview","cs!collections/samplecollection"], function ($, Model, View, Collection) { 
    var collection = new Collection(); 
    collection.fetch(); 
    var view = new View({collection: collection}); 
    $("body").html(view.render().$el); 
}) 

sampleview.coffee

define ["backbone", "jquery", "handlebars","text!templates/sampleTemplate.hbs"], (Backbone, $, Hbs, template) => 
    class MainView extends Backbone.View 
    initialize: => 
     @collection.on "change", @render 
     @template = Hbs.compile template 
    render: => 
     html = @template {models: @collection.models} 
     @$el.html(html) 
     return @ 

sampleTemplate.hbs

{{#models}} 
    <p>{{name}}</p> 
{{/models}} 

[OK]をので、それが不可欠です。ここでBackbone.CollectionBackbone.ModelRequire.jsの設定方法、Passport.jsの設定方法、およびMongoose modelの設定方法を学ぶ必要があります。 Less middlewareを使用してstyle.lessをコンパイルすることができます

r.jsですべてのクライアントアプリケーションをプリコンパイルできることを忘れないでください。

ここではこのページを忘れずに、将来にわたってそれを見つけた人に役立つことを願っています。

+0

ありがとう、ちょっとサンプルアプリを作ってください。 –

+0

私はこのリストのハンドルバーをジェイドに置き換えますが、残りはとても良いです。 – gustavohenke

+0

Jadeはより柔軟ですが、私の意見では、実際のhtmlからはるかに離れています。さらに、Jadeはいくつかの開発者をリードし、ビュー層の多くのロジックに書き込むと思います。 –

2

これは、最も人気のJavaScriptフレームワークを説明するのに役立ちます素晴らしい記事です:

http://coding.smashingmagazine.com/2012/07/27/journey-through-the-javascript-mvc-jungle/

最終的には、最良の方法は、あなたがすると思いますフレームワークのショートリストを作成することですお手伝いをしてください。ちょうどあなたの手をそれぞれ汚いものにして、どちらがあなたのアプリやプログラミングスタイルに最も適しているかを見てください。ここで

関連する問題