[Blibli Brown Bag] Nodejs - The Other Side of Javascript

NODEJS – THE OTHER SIDE OF JAVASCRIPTBy Irfan Maulana

Presented for Brown Bag at Blibli.com

ABOUT ME

• Name : Irfan Maulana• Join at Blibli : October 2015• Role : SDE – Front End Developer• Project : SEOUL aka Blibli.com main website• Has been code Javascript for at least 2 years

WHAT IS NODEJS ?

• JavaScript runtime built on Chrome's V8 JavaScript engine.

MAN BEHIND

• Initiate by Ryan Dahl (github.com/ry)• from 2015 handled by Node.js Foundation

WHAT IS DIFFERENT ?

FRONT BACK

NODEJS IS JAVASCRIPT, BUT IN DIFFERENT SIDE

NODEJS OFFER

• Lightweight server• Near Real-Time Speed• Non-Blocking I/O with Event-Loop• NPM (like Ruby GEM)• Javascript Isomorphic• Thousand Third Party Library• Growth community and documentation

MOST POPULAR NPM MODULE

• Express : web development framework• Connect : extensible HTTP server framework, serves as

base express• Socket.io and sockjs : websockets component• Jade : templating engine• Mongo and Mongojs : Mongodb wrapper• Redis : Redis client library• Coffe-script : CoffeScript compiler• Underscore : utility library• Forever : utility for ensuring node script runs continously

YOU SHOULD USE NODEJS

• CHAT• API• QUEUED INPUT• MONITORING DASHBOARD• SERVER-SIDE WEB APPLICATION

DON’T USE NODEJS

• RELATIONAL DB BEHIND• HEAVY COMPUTATION/PROCESSING

NODEJS SHOWCASE

• Walmart• E-bay/Paypal• Microsoft - Azure CLI, Yammer• Linkedin• Trello• Uber• Medium• Wordpress

WEB DEVELOPMENT IN NODEJS

OUR NODEJS WEB DEV STACK

• EXPRESSJS : BASE FRAMEWORK – APP GENERATOR

• MONGOOSE : MONGODB CONNECTION• JADE : HTML TEMPLATE• ANGULAR JS : FRONTEND FRAMEWORK• MOCHA – SHOULD – SUPERTEST : UNIT TEST• GRUNT : TASK RUNNER

EXPRESSJS AND MONGOSE

USING EXPRESS GENERATOR

• Express generator : express <package>• Run : SET DEBUG=<package>:* & npm start• Default run in : http://localhost:3000/

HOW EXPRESS SEND DATA

• SERVER RENDER

• REST

OUR MONGODB CONNECTION

SCHEMA AND MODEL IN MONGOOSE

USING OUR MONGOOSE MODEL

EXPRESS ROUTER

POSTMAN

INTRODUCE JADE TEMPLATING

USING JADE FOR VIEW

• HTML : XML LIKE STRUCTURE• JADE : JSON LIKE STRUCTURE

JADE LAYOUT SAMPLE

USING JADE LAYOUT

JAVASCRIPT UNIT TEST

CREATE OUR RESTFUL UNIT TEST

GRUNT TASK

OUR GRUNT PLUGIN

• grunt-contrib-uglify• grunt-contrib-cssmin• grunt-contrib-concat• grunt-contrib-jade

UGLIFY ( MINIFY JAVASCRIPT)

CSS MINIFY

CONCAT FILE CSS AND JAVASCRIPT

COMPILE JADE

GITHUB REPOSITORY

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

• https://github.com/mazipan/nodejs-simple-restfull-test-with-mocha

• https://github.com/mazipan/nodejs-mongodb-simple-library-application

• https://github.com/socketio/socket.io

SOURCES

• http://expressjs.com/en/starter/basic-routing.html• http://mongoosejs.com/• http://jade-lang.com/tutorial/• http://gruntjs.com/getting-started• www.toptal.com/nodejs/why-the-hell-would-i-use-n

ode-js

• https://scotch.io/tutorials/build-a-restful-api-using-node-and-express-4

THANK YOUmazipanneh.wordpress.com

@Maz_Ipan

/mazipanneh

/in/irfanmaulanamazipan