Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rich app development with node.js

I'm new to node.js, have given a requirement to develop a rich web based application using Node.js.

Right now I'm working on the getting started guides on node.js. I had a chance to look the page here and got confused with hundreds of frameworks. I have no idea to choose a suitable framework, and need help on this to make a perfect decision. Let me explain my requirement.

  1. Want to develop RESTfull API for all the functionalities. (Any libraries on OAuth?)
  2. Want to develop a web application on top of the API. The application has to be designed in such a way that major functionalities should be developed in the client side. Means, all the business logic has to be developed in the Client side. I heard some libraries like Backbone.js, Underscore.js already doing the job, but didn't have clear idea on it.

Please suggest me the frameworks which will do better for my requirement.

Thanks,

like image 748
started on node.js Avatar asked Feb 19 '13 13:02

started on node.js


2 Answers

Here is a good tech stack that I use for my applications:

Server side:

  • Express.js
  • Handlebars
  • Passport.js
  • Mongoose
  • MongoDB
  • Caolan forms (But I am currently in the process of implementing my own form handler)
  • Coffeescript

Client side:

  • Handlebars
  • Jquery
  • Require.js
  • Backbone.js
  • text.js (plugin for require.js)
  • Coffeescript (plugin for require.js. My .coffee are compiled client side in dev and server side in prod using r.js)

I might make a little sample app later if you want.

[EDIT]

ok here is a sample app.

Project structure:

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 so that is the essential. Now you'll have to learn how to use Backbone.Collection, Backbone.Model, how to configure Require.js, how to configure Passport.js and how to make a Mongoose model. You can use the Less middleware to compile your style.less

Don't forget that you can precompile all your client application with r.js.

Now I hope that this page will not be forgotten and that it will help anyone who come across it in the future.

like image 62
Jean-Philippe Leclerc Avatar answered Oct 03 '22 07:10

Jean-Philippe Leclerc


This is a great article which helps explain the most popular javascript frameworks:

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

Ultimately, the best way is to make a short-list of frameworks you think will help you, then just get your hands dirty with each one for a bit and see which most suits your app and programming style.

like image 40
royse41 Avatar answered Oct 03 '22 07:10

royse41