Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Learn and Understand Node.js

Learn and Understand Node.js

Node.js is an interesting new phenomenon to hit the development scene. Companies like Netflix, Walmart, Sams Club, PayPal, Medium, LinkedIn and Uber are just a few of the companies that are using it in production. Node.js is a server technology used to build and run web applications.

In this class, we’ll learn the basics of working with Node.js. You will build an application using Node.js. During the class you will add new features to your application, including connecting it to a database.

These are slides from a 3 hour workshop that I taught for Women Who Code Atlanta.

Jennifer Bland

September 25, 2016
Tweet

More Decks by Jennifer Bland

Other Decks in Technology

Transcript

  1. NODE.JS
    LEARN AND UNDERSTAND

    View full-size slide

  2. ▸ How to install Node.js
    ▸ Node and npm
    ▸ Middleware
    ▸ Templating Engines
    ▸ Routing
    WHAT YOU WILL LEARN 2

    View full-size slide

  3. ▸ www.github.com/ratracegrad/werise-intro-to-node
    GET THE CODE 3

    View full-size slide

  4. ▸ Server-side JavaScript
    ▸ Open Source runtime environment
    ▸ Similar to .Net in that it is a wrapper around your code
    ▸ Cross platform
    ▸ www.nodejs.org
    WHAT IS NODE.JS? 4

    View full-size slide

  5. ▸ Web development framework for Node
    ▸ Lightweight, un-opinionated and minimalist web
    framework
    ▸ An npm package
    ▸ We will build our website by writing code using the
    Express objects
    ▸ www.expressjs.com
    WHAT IS EXPRESS.JS? 5

    View full-size slide

  6. ▸ Sublime Text
    ▸ Webstorm
    ▸ Atom
    ▸ Brackets
    ▸ Vim
    ▸ Visual Studio Code
    EDITORS 6

    View full-size slide

  7. ▸ https://nodejs.org
    ▸ Click the big green button to download
    ▸ Double click downloaded file to install
    ▸ Validate it is installed by entering ‘node —version’ in
    terminal
    ▸ Validate npm is installed by entering npm —version in
    terminal
    INSTALLING NODE AND NPM 7

    View full-size slide

  8. ▸ Open up the example-01 folder
    ▸ open app.js
    ▸ var who = ‘jennifer’;

    console.log(‘hello’, who);
    ▸ node app.js
    GETTING STARTED 8
    example-01

    View full-size slide

  9. ▸ Application is a single JavaScript file that is executed
    ▸ That one file can pull stuff from other files or packages that
    are installed using npm
    ▸ To gain access to other files or modules you would use the
    command ‘require’
    EVERY APPLICATION IS A SINGLE FILE 9

    View full-size slide

  10. ▸ Copy code from nodejs.org to create an example of a web
    sever
    ▸ Open up example-02 folder
    ▸ Open app.js
    ▸ node app.js
    CREATE WEB SERVER 10
    example_02

    View full-size slide

  11. ▸ Express.js is a web development framework
    ▸ de-facto standard for the majority of Node.js applications
    out there today
    ▸ Removes the complexity of having to define everything for
    a web application with Node.js
    WHY USE EXPRESS? 11

    View full-size slide

  12. ▸ www.expressjs.com
    EXPRESS DOCUMENTATION 12

    View full-size slide

  13. ▸ npm is the node package manager
    ▸ When we install a package it is called a dependency
    ▸ npm will take care of versions in our application
    ▸ packages installed via npm are listed in the package.json
    file
    WHAT IS NPM? 13

    View full-size slide

  14. ▸ Open example-03 folder
    ▸ npm init

    answer questions

    creates a package.json file
    ▸ We are going to use express.js so we need to install it

    npm install express —save
    ▸ This adds the package to our package.json file
    ▸ In app.js add

    var express = require(‘express’);

    var app = express();

    app.listen(3000, function() { console.log(‘server running’); });

    DOCUMENTATION app.listen
    ▸ from terminal run node app
    CREATING OUR FIRST APP USING EXPRESS 14
    example_03

    View full-size slide

  15. ▸ Has entry for every prompt given with npm init
    ▸ dependencies are packages that you have installed to run
    your application
    ▸ these packages are installed in the node_modules folder
    ▸ When somebody downloads your code, they can just run
    npm install to install all required packages for your code
    and to make it run
    EXPLORE PACKAGE.JSON 15

    View full-size slide

  16. ▸ https://docs.npmjs.com/files/package.json
    NPM DOCUMENTATION ON PACKAGE.JSON 16

    View full-size slide

  17. ▸ npm uses symantic versioning

    major.minor.patch
    ▸ npm install when you get somebody’s code
    ▸ ^ - caret symbol will install anything that matches the major
    version
    ▸ ~ - tilde symbol will install anything that matches the minor
    version
    ▸ No symbol will install that exact version
    NPM VERSIONING 17

    View full-size slide

  18. ▸ If you make a change to your code, you must stop your
    server and start your server to see the changes to the code
    ▸ node does not reflect changes to your code
    ▸ nodemon does
    ▸ npm install -g nodemon
    ▸ The -g flag is global which means it is available to all your
    applications
    INSTALL NODEMON 18

    View full-size slide

  19. ▸ nodemon app.js
    ▸ var port = 3000;
    ▸ app.listen(port, function() {

    console.log(‘Server running on port ‘ + port);

    });
    ▸ nodemon automatically reloads server based on your
    changes
    ADDING A PORT 19

    View full-size slide

  20. ▸ http://expressjs.com/en/4x/api.html#app.get
    ROUTING DOCUMENTATION 20

    View full-size slide

  21. ▸ Routes have
    ▸ 1- an http verb
    ▸ 2 - the route to listen to
    ▸ 3 - callback function that takes two parameters - req and
    res
    ROUTING 21

    View full-size slide

  22. ▸ Our route command told the application to send ‘Hello
    World’ to any ‘get’ request to ‘/‘ root of our application
    ▸ GET is an HTTP verb
    ▸ Most commonly used HTTP verbs are 

    GET

    PUT

    POST

    DEL
    HTTP VERBS 22

    View full-size slide

  23. ▸ request is the call from the browser to the server. The
    request tells the server what type of request it is making by
    using an HTTP verb
    ▸ response is the server’s response to the request
    ▸ For brevity sakes, usually these two parameters are written
    as req and res
    REQUEST AND RESPONSE 23

    View full-size slide

  24. ▸ Routes are what you can use to have your application respond to
    requests
    ▸ Open up example-04
    ▸ npm init and npm install express —save
    ▸ app.get(‘/‘, function(req, res) {

    res.send(‘Hello World’);

    });
    ▸ node app.js
    ▸ Open browser and go to localhost:3000
    ROUTING 24
    example_04

    View full-size slide

  25. ▸ Websites have many pages and each page has its own url
    ▸ We need a route to handle the url for each page
    ▸ Create a new routes to handle all the pages for your
    website (about, contact, products)
    ▸ Test your new routes by going to each page
    ADDING ADDITIONAL ROUTES 25
    example_05

    View full-size slide

  26. ▸ The assets folder has a css folder, and img folder, a font
    folder and a js folder
    ▸ Kinda silly to have to create a route to serve up every file in
    all of these folders
    ▸ Express allows you to create static folders to server up files
    like these
    STATIC FOLDERS 26

    View full-size slide

  27. ▸ http://expressjs.com/en/4x/api.html#app.use
    DOCUMENTATION APP.USE 27

    View full-size slide

  28. ▸ Open up example-05 & npm install
    ▸ This method will create a mount point that express will
    search first for files and then if not found will then go to
    the routes
    ▸ app.use(express.static(‘public’));
    ▸ Test by going to browser and entering

    localhost:3000/assets/css/style.css
    APP.USE 28

    View full-size slide

  29. ▸ Our simple website will have home, about, contact and products
    pages. In addition it will have pages to display details about
    product1 and product2
    ▸ We were using res.send() to send text back to browser. Now we
    want to replace this and send back a .html file instead.
    ▸ res.sendFile() method will send a .html file to the browser
    ▸ This method requires the file to be sent and an options object that
    contains the path to root
    ▸ res.sendFile('index.html', { root: __dirname });
    ROUTING TO DISPLAY WEBSITE PAGES 29

    View full-size slide

  30. ▸ Add routes for about, contact and products pages
    ▸ Test and verify that you can go to every page
    ADD ALL NECESSARY ROUTES 30

    View full-size slide

  31. ▸ http://expressjs.com/en/4x/api.html#req.params
    REQUEST PARAMS DOCUMENTATION 31

    View full-size slide

  32. ▸ app.get(‘/products/:productName’, function(req, res) {

    var productName = req.params.productName;

    if (productName === ‘product1’) {

    res.sendFile('product1.html', { root: __dirname });

    } else {

    res.sendFile('product2.html', { root: __dirname });

    }

    }
    ADD ROUTING FOR INDIVIDUAL PRODUCT PAGES 32

    View full-size slide

  33. ▸ npm install -g express-generator
    ▸ express example-06
    ▸ cd example-06
    ▸ npm install
    EXPRESS APP GENERATOR 33

    View full-size slide

  34. ▸ PROS
    ▸ quick installation
    ▸ provides routing
    ▸ CONS
    ▸ have to use debug to start and get feedback
    ▸ don’t need all code functionality in www/bin
    EXPRESS APP GENERATOR PROS AND CONS 34

    View full-size slide

  35. ▸ example-07
    MY VERSION OF BEST STANDARD NODE APPLICATION 35

    View full-size slide

  36. ▸ Learned how to install node & npm
    ▸ How to install packages
    ▸ How to create a web application
    ▸ How to store data into a database
    SUMMARY 36

    View full-size slide

  37. ▸ Jennifer Bland

    [email protected]
    www.jenniferbland.com
    QUESTIONS & CONTACT
    37

    View full-size slide