2013-02-19 29 views
5

Tôi mới sử dụng node.js, đã đưa ra yêu cầu để phát triển một ứng dụng dựa trên web phong phú bằng cách sử dụng Node.js.Phát triển ứng dụng phong phú với node.js

Hiện tại, tôi đang làm việc với hướng dẫn bắt đầu trên node.js. Tôi đã có cơ hội tìm kiếm trang here và bị lẫn lộn với hàng trăm khung công tác. Tôi không có ý tưởng để chọn một khuôn khổ phù hợp, và cần giúp đỡ về điều này để đưa ra quyết định hoàn hảo. Hãy để tôi giải thích yêu cầu của tôi.

  1. Muốn phát triển API RESTfull cho tất cả các chức năng. (Bất kỳ thư viện nào trên OAuth?)
  2. Muốn phát triển một ứng dụng web trên đầu API. Ứng dụng phải được thiết kế theo cách mà các chức năng chính cần được phát triển ở phía máy khách. Có nghĩa là, tất cả các logic kinh doanh phải được phát triển ở phía khách hàng. Tôi đã nghe một số thư viện như Backbone.js, Underscore.js đã thực hiện công việc, nhưng không có ý tưởng rõ ràng về nó.

Vui lòng đề xuất các khuôn khổ sẽ làm tốt hơn cho yêu cầu của tôi.

Cảm ơn,

+0

Không có một trăm khung MVC, 3/4 phía máy chủ ở mức tốt nhất và cùng một lượng phía máy khách. – mpm

+0

@mpm: Tôi nghĩ bạn đang đánh giá thấp. [TodoMVC] (http://todomvc.com/) liệt kê hơn 25 khung công tác phía máy khách và hơn biên dịch cho JS phía máy khách, cũng như một số danh mục khác. –

+0

@Scott Sauyet có bao nhiêu khung trong số này đã mở rộng tài liệu, bài đăng trên blog, hỗ trợ và hướng dẫn qua internet? đó là cách bạn nói với một khung công tác có giá trị sử dụng hay không. 80% trong số các khung này là không đáng kể từ góc độ nhận con nuôi. – mpm

Trả lời

15

Đây là một đống công nghệ tốt mà tôi sử dụng cho các ứng dụng của tôi:

Server side:

  • Express.js
  • tay lái
  • Passport.js
  • Mongoose
  • MongoDB
  • hình thức Caolan (Nhưng tôi hiện đang là tôi n quá trình thực hiện xử lý hình thức của riêng tôi)
  • Coffeescript

Khách hàng bên:

  • tay lái
  • Jquery
  • Require.js
  • Backbone.js
  • văn bản .js (plugin cho require.js)
  • Coffeescript (plugin cho require.js. My .coffee được biên dịch phía máy khách trong dev và phía máy chủ trong prod bằng cách sử dụng r.js)

Tôi có thể tạo một ứng dụng mẫu nhỏ sau này nếu bạn muốn.

[EDIT]

ok đây là ứng dụng mẫu.

cấu trúc dự án:

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 

Server side:

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 như vậy đó là điều cần thiết. Bây giờ bạn sẽ phải tìm hiểu cách sử dụng Backbone.Collection, Backbone.Model, cách định cấu hình Require.js, cách định cấu hình Passport.js và cách tạo Mongoose model. Bạn có thể sử dụng số Less middleware để biên dịch kiểu của mình.không cần số

Đừng quên rằng bạn có thể biên dịch trước tất cả ứng dụng khách của mình bằng r.js.

Bây giờ tôi hy vọng rằng trang này sẽ không bị lãng quên và nó sẽ giúp bất kỳ ai gặp phải nó trong tương lai.

+0

Cảm ơn, Bạn có thể làm cho tôi một ứng dụng mẫu nhỏ –

+0

Tôi sẽ thay thế trong danh sách này Handlebars với Jade, nhưng phần còn lại là rất tốt. – gustavohenke

+0

Jade là linh hoạt hơn, theo ý kiến ​​của tôi, cách xa html thực.Thêm vào đó, tôi nghĩ rằng Jade dẫn một số nhà phát triển thành văn bản cho nhiều logic trong lớp xem. –

2

Đây là một bài viết tuyệt vời giúp giải thích các khuôn khổ javascript phổ biến nhất:

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

Cuối cùng, cách tốt nhất là để tạo ra một danh sách ngắn của các khuôn khổ bạn nghĩ sẽ giúp bạn, sau đó chỉ cần có đôi tay của bạn bẩn với mỗi một cho một chút và xem đó phù hợp nhất với ứng dụng của bạn và phong cách lập trình.

Các vấn đề liên quan