Modern Web-development Stack

Some time ago now i stumbled over some web development tools and frameworks when evaluating the current modern stuff. After building some small applications i decided to write a very small seed application with the following technology stack. github

node

Not much to tell about node. It is built on Chrome’s V8 engine for building fast, scalable network application. If you do not hate javascript, give it a try!

expressjs

When using node you often want to build some kind of web service and express is the web application framework that gets the job done.

angularjs

There are a lot of frameworks for front end development out there at the moment. I chose AngularJS but you can switch to whatever you want. With around 23.000 (May 15 2014) Stars on github it may be the most popular one at the moment.

bower

Bower gives you the ability to pull in a lot of front end packages. Its an excellent dependency manager for front end libraries.

sass

SASS gives you a more powerful and better maintainable CSS.

gulp

Gulp calls itself a ‘streaming build system’. It is very similar to Grunt on a functionality basis, but while Grunt uses a JSON structure for defining the tasks, Gulp feels much more like programming than configuring.

Project Parts

|-- app				server side files			node
|   |-- modules					   
|   |-- views
|-- bower.json			bower dependencies			bower
|-- config			app configuration			node
|   |-- config.js
|   |-- express.js		web service configuration		express
|   |-- utilities.js
|-- gulpfile.js			gulp tasks				gulp
|-- package.json		npm dependencies			node
|-- public			client side files			angular
|   |-- scss			core scss files				sass
|   |-- img			core img files
|   |-- modules
|-- server.js			server startup file			node

I will work through the file structure and describe the most important parts of the application.

app/

This folder contains the application logic and the API.

  • modules/
    • The files are organised by their domain and not by their type. Each module in the modules folder has its own purpose and should be named after that.
    • The exposed API also goes in here
core.controller.js
exports.index = function(req, res) {
	res.render('index.html', {
	});
};
core.routes.js
module.exports = function(app) {
	var core = require('./core.controller');
	app.get('/', core.index);
};

In core.routes.js the get request for / gets mapped to the index function of the controller.

  • views/
    • The views folder contains the template .html files that get rendered by a template engine.

bower.js

Contains all the front end packages like angular or bootstrap

config/

  • config.js loads the environment variables.
  • express.js holds the configuration for the express webserver. Which template engine to use, where are the front end files to host, which compression should be used and stuff like that.
  • utilities.js contains a helper function to load the javascript files.

gulpfile.js

For more information take a look at the gulpjs documentation. I will state the most important plugins i use.

  • gulp-nodemon responsible for watching file changes and reloading these files.
  • gulp-concat concat multiple files into one
  • gulp-inject inject .css and .js files into the .html files
 gulp.task('inject_js', function () {
	return gulp.src('app/views/layout.html')
		.pipe(inject(gulp.src(['build/lib/**/*.js', ...],
			{read: false}), {ignorePath: '/build'}))
		.pipe(gulp.dest('build/serverViews/'));
});

gulp grabs all the .js files in build/lib/** and injects them in the following part of the layout.html

	<!-- inject:js -->
	<!-- endinject -->
  • gulp-bower-files loading all bower dependencies
  • gulp-ruby-sass compiling .scss files to .css

package.json

Contains all the node dependencies

public/

Here goes all the angularjs code. Again the files are organised in domains which makes a lot of sense for angular modules. There is not much magic here, just some basic stuff

server.js

The file to execute. It just loads the express configuration and starts the server.

var config = require('./config/config');

// Init the express application
var app = require('./config/express')();

// Start the app by listening on <port>
app.listen(config.port);

// Expose app
module.exports = app;

// Logging initialisation
console.log('Express app started on port ' + config.port);

github