Server.js

Server.js

Build Status

Write server code in frontend JavaScript files, and more.

The purpose of this project is to unify all JavaScript code in frontend. With the support of server.js solution, frontend developers are now able to embed backend codes in fontend files.

Thanks to node.js, JavaScript developers can now write one language for both frontend and backend. But due to different host environments, the developers come from frontend world usually need a lot of time to learn about backend development skills before getting their first web app running. And as long as the web app grows, although frontend and backend codes are written in the same language, they are not organized well - actually they have to be isolated. This will bring much effort for further development, which usually involves code changes on both ends and also their communicating interfaces.

Some existing solutions move the fontend codes to backend. For example, Meteor allows developers to combine codes for both ends in the same backend js files. Server.js does the similar thing, but on the opposite direction, which allows embedding server code in frontend js files. Since most functions of a web app is triggered from the frontend - the end user's web browser, I believe it's more reasonable to move code to the front.

The ideal use case is that the developer only need play attention to frontend files and keep backend untouched, and everything just go well.

Imagine that you are designing the login page for your web app. There's an input for username and another one for password and at the bottom a Login button. Once the user clicks the Login button, your onclick event handler is triggered, where you get the entered username and password. With server.js, you can now directly check database whith this information right in your onclick event handler. How wonderful it is!

How to install

mkdir your_project
cd your_project
npm install serverjs --save

How to start

Under your project directory, create file app.js and write your app code (as easy as one line of code)

// app.js
(new require('serverjs')).start();

And then start you app with node.js.

node app.js

Now the server is started at port 3000. Open your web browser and navigate to http://localhost:3000 you'll see a default Hello, World web page while the same message is printed in backend console.

Directory structure

You may have noticed that in your project directory, a sub-directory named public is automatically created on your first run, which is the root folder for your website. The default index.html and index.js files are also created for a start (home page). You can also put your other html files, js files and all assets under this directory. Once you put an html file as well as a js file with the same file name, the js file will be automatically embedded in that html file within a script tag. This follows the principle of convention over configuration, which you'll see in many places in server.js solution.

Hot code reload

Inspired by Meteor, hot code reload is very useful during development process. Server.js also introduces this technology, which means if any file under public directory has been changed, the web browser will be automatically reloaded to reflect the change. You don't need to manually reload the page for every update.

How to code

Once you place the string statement 'server code' on the first line of a function (or the second line, right after 'use strict'), it'll become a backend function, and you can write your backend code directly in it. To invoke this backend function from frontend, besides all original parameters for this function, just put an Error-First Callback at the end, as you usually do in most async function calls.

Following are several quick demos. Try to put them in your index.js file and see the results.

Hello, world (default)

function hello() {
  'server code';
  console.log('Hello, world!');
}

hello();

Hello, world (anonymous)

(function() {
  'server code';
  console.log('Hello, world!');
})();

Node version

function getNodeVersion(callback) {
  'server code';
  callback(null, process.version);
}

getNodeVersion(function(err, ver) {
  alert('Node version: ' + ver);
});

File system

var readdir = function(callback) {
  'server code';
  var fs = require('fs');
  fs.readdir(__dirname, callback);
}

readdir(function(err, files) {
  if (err) {
    alert('Error!');
    return;
  }
  alert('Files:\n' + files.join('\n'));
});

Easy routing

Basides the magical inline RPC calls, server.js also introduces an easy way of routing system.

Template engine

Handlebars

The main function

TBD

Shared code

TBD

RESTful API

TBD

Sessions

TBD

Development mode

Development mode is enabled by default. You can change this setting to production mode by:

• environment variable
• initialization option

Behavior differences between development mode and production mode are listed as below.

TABLE

Security considerations

TBD

Inside server.js

The chapter contains some advanced details about server.js.

Initialization options

TBD

About 'server code'

TBD

RPC

Client and server communicate via a WebSocket connection (or the ajax fallback).

Hot code reload

TBD

More samples

see Server.js Samples