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.

PHP Indonesia - Nodejs Web Development

about web development in nodejs and all tech-stack to build website.

  • Be the first to comment

PHP Indonesia - Nodejs Web Development

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

    Be the first to comment

    Login to see the comments

  • phpindonesia

    Mar. 26, 2016
  • KrisTriyantio

    Apr. 1, 2016
  • williammdavis

    Dec. 4, 2016
  • wahyuhidayat152

    May. 9, 2018
  • hasimjatmiko

    Aug. 19, 2018

about web development in nodejs and all tech-stack to build website.

Views

Total views

1,736

On Slideshare

0

From embeds

0

Number of embeds

456

Actions

Downloads

61

Shares

0

Comments

0

Likes

5

×