php indonesia - nodejs web development
TRANSCRIPT
![Page 1: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/1.jpg)
NODEJS WEB DEVELOPMENTBy Irfan Maulana | SDE at Blibli.com
![Page 2: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/2.jpg)
About me• Name : Irfan Maulana• Work : PT. Global Digital Niaga (Blibli.com)• Role : Software Development Engineer• Full-stack developer in Java and Javascript
![Page 3: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/3.jpg)
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)
![Page 4: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/4.jpg)
1. INTRO
![Page 5: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/5.jpg)
Are you Javascript developer ?
![Page 6: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/6.jpg)
JS Popularity
Source : stackoverflow
![Page 7: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/7.jpg)
Before Node
![Page 8: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/8.jpg)
After Node
![Page 9: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/9.jpg)
2. GETTING KNOW NODEJS
![Page 10: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/10.jpg)
Nodejs Wiki• JavaScript runtime built on Chrome's V8 JavaScript
engine.
![Page 11: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/11.jpg)
Native JS v Nodejs
Nodejs live in different side with native js
FRONT-SIDE BACK-SIDE
![Page 12: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/12.jpg)
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
![Page 13: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/13.jpg)
3. POWER OF NODEJS
![Page 14: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/14.jpg)
Isomorphic Javascript• Isomorphic from the greek “isos” for equal and
“morph” for shape• When backend and frontend share the same code
![Page 15: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/15.jpg)
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
![Page 16: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/16.jpg)
Async Request Handler
Source : strongloop
![Page 17: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/17.jpg)
NPM• Include when you install node• You can install and manage all your dependency
easier
![Page 18: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/18.jpg)
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
![Page 19: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/19.jpg)
4. WEB DEVELOPMENT WITH NODEJS
![Page 20: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/20.jpg)
Development Stack• Framework : Expressjs• Database : Mongodb (using mongoose module for
connection)• Template Engine : Jade
![Page 21: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/21.jpg)
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/ )
![Page 22: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/22.jpg)
Expressjs Install• Installing : npm install express• Initial project : express init sampleapp• Install dependency : npm install (in project directory)• Run project : npm start
![Page 23: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/23.jpg)
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
![Page 24: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/24.jpg)
Mongoose• elegant mongodb object modeling for node.js (
http://mongoosejs.com/)• Installing : just add dependency in package.json and
run npm install
![Page 25: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/25.jpg)
MongoDB Connection
Just require mongoose depedency and connect with mongoodb in one line code.
![Page 26: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/26.jpg)
Schema and Model
Schema is our mongoDB collection (table) structure wrapper.Model is object that we use for querying.
![Page 27: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/27.jpg)
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
![Page 28: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/28.jpg)
Jade - Template Engine• Lightweight templating engine• Adopt JSON structure instead XML• http://jade-lang.com/
![Page 29: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/29.jpg)
Jade v HTML
In jade, you never worry about close tag that spent your time.Just indent like you see HTML
![Page 30: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/30.jpg)
Jade for snippetWe create layout.jade as our main layout, we define block css, content and javascript that will use later
![Page 31: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/31.jpg)
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
![Page 32: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/32.jpg)
Server Renderer
![Page 33: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/33.jpg)
5. DEMOFork on : https://github.com/mazipan/nodejs-simple-restfull-with-express
![Page 34: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/34.jpg)
6. BUNDLING ASSETS IN NODEJS
![Page 35: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/35.jpg)
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
![Page 36: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/36.jpg)
Configure Task• Create Gruntfile.js• Initial configure your task• Load your task• Register your task
![Page 37: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/37.jpg)
Uglify• Javascript assets minifying and bundling into one file if
needed
![Page 38: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/38.jpg)
CSS Minify• CSS assets minifying and concating
![Page 39: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/39.jpg)
7. UNIT TEST
![Page 40: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/40.jpg)
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)
![Page 41: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/41.jpg)
Setup depedency
• Setup devDependency in package.json• You can setup script test execution for using node test
![Page 42: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/42.jpg)
Sample Unit Test
![Page 43: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/43.jpg)
GITHUB REPO & CONTACT ME
![Page 44: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/44.jpg)
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
![Page 46: PHP Indonesia - Nodejs Web Development](https://reader033.vdocument.in/reader033/viewer/2022042723/5871ab891a28abda6a8b58b1/html5/thumbnails/46.jpg)