This is an attempt to create a full SPA (Single Page Application) template for web applications with modern techniques. We are going to use an MVC model shared among the client an the server. The client is going to hold the view and the controller, and the server is going to hold the model.
As main tools, we are going to use Angular, Foundation and Node, and the template is going to be alive in Windows Azure Servers to play with it and test it functionality.
In the client side we are going to work with HTML5, CSS3 and JavaScript. The view is going to be built using HTML5 and CSS3 and the controller is going to be programmed in JavaScript using a framework for simplicity. We have chosen Angular because it's really complete and it allows us to implement a controller in a relatively efficient and clean way. The idea is to separate the view from the code and delegate in the controller the DOM manipulation by checking certain labels inside the view.
In the server side we are going to use Node with a REST architecture. We can use too PHP, Python, Ruby or whatever technology available in the market. We don't really care because the REST server allow us to use one or another indistinctly. We don't even care too much about the client because what we are doing is defining a communication protocol among the client and the server, so as long as we call the appropriate services in the server and can parse the JSON data returned, we can use whatever we want for both communication sides.
The server, of course, can get the data from everywhere. Mainly, the idea is using a database to store this data, but you can even take it from a JSON file or just a plain text file. For this template we are going to use JSON files for test data but I am going to leave a note about doing the same using a Mongo database.
The file structure for a Node application is the following (this structure can vary depending on the author and of course this is just the simplest structure needed for this template).
webAppTemplate
│
├── server.js
├── package.json
├── README.md
├── web.config // Just for Windows Azure Servers
│
├── public
│ ├── js
│ ├── css
│ ├── images
│ └── data
│
├── views
│ ├── index.jade
│ ├── layout.jade
│ │
│ └── partials
│
├── routes
│
└── node_modules
The Node server is going to route all the requests from the client to files inside views folder. These files are going to be written in Jade and rendered into html files before being sent to the client. The partials folder stores the partial views that are going to be loaded into our only page ng-view.
The routes folder is going to store the routes files where we are going to define the contents of the response to our client requests.
The public folder is going to store the static data of the application like scripts, stylesheets, images, configuration files...