Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
NODEJS – THE OTHER SIDE OF JAVASCRIPT
By 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 B...
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)
• Javasc...
MOST POPULAR NPM MODULE
• Express : web development framework
• Connect : extensible HTTP server framework,
serves as base...
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 TEMPLA...
EXPRESSJS AND MONGOSE
USING EXPRESS GENERATOR
• Express generator : express <package>
• Run : SET DEBUG=<package>:* & npm start
• Default run in...
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-si...
SOURCES
• http://expressjs.com/en/starter/basic-routing.html
• http://mongoosejs.com/
• http://jade-lang.com/tutorial/
• h...
THANK YOU
mazipanneh.wordpress.com
@Maz_Ipan
/mazipanneh
/in/irfanmaulanamazipan
Upcoming SlideShare
Loading in …5
×

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

822 views

Published on

Introduce Nodejs and create our first web development in Nodejs stack environment.

Published in: Technology

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

  1. 1. NODEJS – THE OTHER SIDE OF JAVASCRIPT By Irfan Maulana Presented for Brown Bag at Blibli.com
  2. 2. 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
  3. 3. WHAT IS NODEJS ? • JavaScript runtime built on Chrome's V8 JavaScript engine.
  4. 4. MAN BEHIND • Initiate by Ryan Dahl (github.com/ry) • from 2015 handled by Node.js Foundation
  5. 5. WHAT IS DIFFERENT ? FRONT BACK NODEJS IS JAVASCRIPT, BUT IN DIFFERENT SIDE
  6. 6. 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
  7. 7. 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
  8. 8. YOU SHOULD USE NODEJS • CHAT • API • QUEUED INPUT • MONITORING DASHBOARD • SERVER-SIDE WEB APPLICATION
  9. 9. DON’T USE NODEJS • RELATIONAL DB BEHIND • HEAVY COMPUTATION/PROCESSING
  10. 10. NODEJS SHOWCASE • Walmart • E-bay/Paypal • Microsoft - Azure CLI, Yammer • Linkedin • Trello • Uber • Medium • Wordpress
  11. 11. WEB DEVELOPMENT IN NODEJS
  12. 12. 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
  13. 13. EXPRESSJS AND MONGOSE
  14. 14. USING EXPRESS GENERATOR • Express generator : express <package> • Run : SET DEBUG=<package>:* & npm start • Default run in : http://localhost:3000/
  15. 15. HOW EXPRESS SEND DATA • SERVER RENDER • REST
  16. 16. OUR MONGODB CONNECTION
  17. 17. SCHEMA AND MODEL IN MONGOOSE
  18. 18. USING OUR MONGOOSE MODEL
  19. 19. EXPRESS ROUTER
  20. 20. POSTMAN
  21. 21. INTRODUCE JADE TEMPLATING
  22. 22. USING JADE FOR VIEW • HTML : XML LIKE STRUCTURE • JADE : JSON LIKE STRUCTURE
  23. 23. JADE LAYOUT SAMPLE
  24. 24. USING JADE LAYOUT
  25. 25. JAVASCRIPT UNIT TEST
  26. 26. CREATE OUR RESTFUL UNIT TEST
  27. 27. GRUNT TASK
  28. 28. OUR GRUNT PLUGIN • grunt-contrib-uglify • grunt-contrib-cssmin • grunt-contrib-concat • grunt-contrib-jade
  29. 29. UGLIFY ( MINIFY JAVASCRIPT)
  30. 30. CSS MINIFY
  31. 31. CONCAT FILE CSS AND JAVASCRIPT
  32. 32. COMPILE JADE
  33. 33. 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
  34. 34. 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- node-js • https://scotch.io/tutorials/build-a-restful-api-using- node-and-express-4
  35. 35. THANK YOU mazipanneh.wordpress.com @Maz_Ipan /mazipanneh /in/irfanmaulanamazipan

×