NODEJS WEB DEVELOPMENTBy Irfan Maulana | SDE at Blibli.com

About me• Name : Irfan Maulana• Work : PT. Global Digital Niaga (Blibli.com)• Role : Software Development Engineer• Full-stack developer in Java and Javascript

Outline1. Intro2. Getting Know NodeJS3. Power of NodeJS4. Web Development with NodeJS5. Demo 6. Bundling Assets in NodeJS (*depend with time)7. Unit Test (*depend with time)

1. INTRO

Are you Javascript developer ?

JS Popularity

Source : stackoverflow

Before Node

After Node

2. GETTING KNOW NODEJS

Nodejs Wiki• JavaScript runtime built on Chrome's V8 JavaScript

engine.

Native JS v Nodejs

Nodejs live in different side with native js

FRONT-SIDE BACK-SIDE

Man Behind• Originally written in 2009 by Ryan Dahl (github.com/

ry) and demonstrate in European JSConf November 8 2009• Inspired by file upload progress bar on flickr

3. POWER OF NODEJS

Isomorphic Javascript• Isomorphic from the greek “isos” for equal and

“morph” for shape• When backend and frontend share the same code

Non-Blocking I/O• Not like a traditional thread base I/O, nodejs using

single thread as a native Javascript has do• In thread base, you must allocate maximal thread in

your webserver and every thread will execute one task in one moment, if there another request will be execute after first request has done• Nodejs’s thread can execute other request without

waiting, it will return callbacks that will be only filled when request has done.• Callback that provide is not always the Data, it can

be an exception

Async Request Handler

Source : strongloop

NPM• Include when you install node• You can install and manage all your dependency

easier

Third-Party Library• Have a goodness of JavaScript, easy to extends, easy

to rebuild your own library• In npmjs.com 253167 total packages library• Will be many choices for each library, just choose as

you need

4. WEB DEVELOPMENT WITH NODEJS

Development Stack• Framework : Expressjs• Database : Mongodb (using mongoose module for

connection)• Template Engine : Jade

Expressjs• Express is a minimal and flexible Node.js web

application framework that provides a robust set of features for web and mobile applications. (http://expressjs.com/ )

Expressjs Install• Installing : npm install express• Initial project : express init sampleapp• Install dependency : npm install (in project directory)• Run project : npm start

Expressjs Basic Routing

This route will redirect to index.jade and set data title that will be process in server side by jade

This route will send you json response

Mongoose• elegant mongodb object modeling for node.js (

http://mongoosejs.com/)• Installing : just add dependency in package.json and

run npm install

MongoDB Connection

Just require mongoose depedency and connect with mongoodb in one line code.

Schema and Model

Schema is our mongoDB collection (table) structure wrapper.Model is object that we use for querying.

Using Model for Query

• We using product model for find (*select all) data• This route will return json of all data in table Product• Access in URL / with method GET

Jade - Template Engine• Lightweight templating engine• Adopt JSON structure instead XML• http://jade-lang.com/

Jade v HTML

In jade, you never worry about close tag that spent your time.Just indent like you see HTML

Jade for snippetWe create layout.jade as our main layout, we define block css, content and javascript that will use later

Using snippet• Here we use

our layout.jade and fill our block content, javascript we defined• We can split

our big page, into smaller block than just include that file

Server Renderer

5. DEMOFork on : https://github.com/mazipan/nodejs-simple-restfull-with-express

6. BUNDLING ASSETS IN NODEJS

Grunt• The Javascript Task Runner (http://gruntjs.com/)• Why ? • In one word: automation. The less work you have to

do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes.• Install CLI : npm install -g grunt-cli • Added grunt and grunt plugin in devDepedencies

Configure Task• Create Gruntfile.js• Initial configure your task• Load your task• Register your task

Uglify• Javascript assets minifying and bundling into one file if

needed

CSS Minify• CSS assets minifying and concating

7. UNIT TEST

Our Module for Test• Supertest is our agent that will access url method like

postman• Should is easy understand assertion• Mocha is our main test case• Install mocha before : npm install –g mocha• Run : mocha test or node test (in project directory)

Setup depedency

• Setup devDependency in package.json• You can setup script test execution for using node test

Sample Unit Test

GITHUB REPO & CONTACT ME

Github Repository• https://github.com/mazipan/nodejs-simple-restfull-wi

th-express• https://github.com/mazipan/nodejs-simple-restfull-tes

t-with-mocha • https://github.com/mazipan/nodejs-mongodb-simple-

library-application

Contact me

mazipanneh.wordpress.com

@Maz_Ipan

/mazipanneh

/in/irfanmaulanamazipan

mazipanneh@gmail.com