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.

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

847 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

×