Irfan maulana nodejs web development

1. NODEJS WEB DEVELOPMENT
By Irfan Maulana | SDE at Blibli.com

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

3. Outline
1. Intro
2. Getting Know NodeJS
3. Power of NodeJS
4. Web Development with NodeJS
5. Demo
6. Bundling Assets in NodeJS (*depend with time)
7. Unit Test (*depend with time)

4. 1. INTRO

5. Are you Javascript developer ?

6. JS Popularity
Source : stackoverflow

7. Before Node

8. After Node

9. 2. GETTING KNOW NODEJS

10. Nodejs Wiki
• JavaScript runtime built on Chrome's V8 JavaScript
engine.

11. Native JS v Nodejs
Nodejs live in different side with native js
FRONT-SIDE BACK-SIDE

12. 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

13. 3. POWER OF NODEJS

14. Isomorphic Javascript
• Isomorphic from the greek “isos” for equal and
“morph” for shape
• When backend and frontend share the same code

15. 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

16. Async Request Handler
Source : strongloop

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

18. 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

19. 4. WEB DEVELOPMENT WITH NODEJS

20. Development Stack
• Framework : Expressjs
• Database : Mongodb (using mongoose module for
connection)
• Template Engine : Jade

21. 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/ )

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

23. 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

24. Mongoose
• elegant mongodb object modeling for node.js
(http://mongoosejs.com/)
• Installing : just add dependency in package.json and
run npm install

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

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

27. 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

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

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

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

31. 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

32. Server Renderer

33. 5. DEMO
Fork on : https://github.com/mazipan/nodejs-simple-restfull-
with-express

34. 6. BUNDLING ASSETS IN NODEJS

35. 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

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

37. Uglify
• Javascript assets minifying and bundling into one file if
needed

38. CSS Minify
• CSS assets minifying and concating

39. 7. UNIT TEST

40. 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)

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

42. Sample Unit Test

43. GITHUB REPO & CONTACT ME

44. 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

45. Contact me
mazipanneh.wordpress.com
@Maz_Ipan
/mazipanneh
/in/irfanmaulanamazipan
mazipanneh@gmail.com