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

Devcon5, NYC 2013: How To Learn Node.js

Devcon5, NYC 2013: How To Learn Node.js

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications.

Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, and fun to use.

Join frog principal web engineer and O'Reilly technical author, Jesse Cravens, as he provides a framework for learning how to use Node.js for a number of different types of applications that include DIY IoT prototypes to real world applications by breaking the platform down into four main layers: callbacks, events, streams and modules.

Jesse Cravens

July 24, 2013
Tweet

More Decks by Jesse Cravens

Other Decks in Technology

Transcript

  1. Learning to Node.js
    July 2013
    Sunday, December 29, 13

    View full-size slide

  2. @jdcravens
    github.com/jessecravens
    frog
    Sunday, December 29, 13

    View full-size slide

  3. July 2013
    Devcon5 NYC 2013
    Intro to HTML5
    3
    Experience
    Sunday, December 29, 13

    View full-size slide

  4. July 2013
    Devcon5 NYC 2013
    Learning to Node.js
    Node.js is a platform built on Chrome’s JavaScript runtime for easily
    building fast, scalable network applications. Node.js uses an event-
    driven, non-blocking I/O model that makes it lightweight and
    efficient, perfect for data-intensive real-time applications that run
    across distributed devices.
    - nodejs.org
    Node.js is an open source project designed to help you write
    JavaScript programs that talk to networks, file systems or other I/O
    (input/output, reading/writing) sources.
    - Max Ogden
    4
    What is Node.js?
    Sunday, December 29, 13

    View full-size slide

  5. July 2013
    Devcon5 NYC 2013
    Learning to Node.js
    It is lightweight, simple, and easy to make complex reactionary
    systems with little effort.
    Best of all it is JavaScript, so you have no risk of falling madly in love
    with your initial prototype and will eventually rewrite in something
    'more production-worthy'.
    Or not.
    - voodootikigod
    5
    Why Node.js?
    Sunday, December 29, 13

    View full-size slide

  6. July 2013
    Devcon5 NYC 2013
    Learning to Node.js
    Simple, Asynchronous I/O
    Use your pizza delivery app and order a pizza. A ticket is created in the
    system and your pizza goes in the oven. Meanwhile, others order pizza
    and their pizzas go in the oven.
    But, the thickness of crust and types of toppings vary!
    If others had to wait at until your deep dish pie was fully baked, you’d
    be blocking all other orders in line from while your pizza was finished!
    This system is blocking I/O because all I/O (pizza baking) happens
    one at a time.
    We are talking non-blocking, which means we can cook many pizzas
    at once. The digital order is deferred and it sits and waits to be
    handled by the delivery person.
    6
    More Why Node.js?
    Sunday, December 29, 13

    View full-size slide

  7. July 2013
    Devcon5 NYC 2013
    Learning to Node.js
    Easily transferable JavaScript skillset
    Easy to install, build/maintain modules
    Balance between easy to use, and easy to scale
    7
    More Why Node.js?
    Sunday, December 29, 13

    View full-size slide

  8. July 2013
    Devcon5 NYC 2013
    Learning to Node.js
    Project Management, Workflow, Build Tools, etc
    Network Server and Streams
    ExpressJS Web Framework
    Soft, Real-Time Applications with WebSocket
    Micro Controllers, IoT Prototypes
    8
    When to use Node.js?
    Sunday, December 29, 13

    View full-size slide

  9. July 2013
    Devcon5 NYC 2013
    Learning to Node.js
    Core
    Callbacks
    Events
    Streams
    Modules
    Express
    9
    How to learn Node.js?
    Sunday, December 29, 13

    View full-size slide

  10. July 2013
    Devcon5 NYC 2013
    Intro to Node.js
    • Buffer
    • C/C++ Addons
    • Child Processes
    • Cluster
    • Crypto
    • Debugger
    • DNS
    • Domain
    • Events
    • File System
    10
    • STDIO
    • Stream
    • String Decoder
    • Timers
    • TLS/SSL
    • TTY
    • UDP/Datagram
    • URL
    • Utilities
    • VM
    • ZLIB
    • Globals
    • HTTP
    • HTTPS
    • Modules
    • Net
    • OS
    • Path
    • Process
    • Punycode
    • Query Strings
    • Readline
    • REPL
    Core
    Sunday, December 29, 13

    View full-size slide

  11. How to learn Node.js
    Callbacks
    Sunday, December 29, 13

    View full-size slide

  12. July 2013
    Devcon5 NYC 2013
    Learning to Node.js
    12
    Executing Functions w/out Callbacks
    var num = 1;
    function iterate() {
    num++
    };
    iterate();
    console.log(num) // 2
    Sunday, December 29, 13

    View full-size slide

  13. July 2013
    Devcon5 NYC 2013
    Learning to Node.js
    var a = false;
    asyncFunction(function({
    console.assert(a, 'a should be true');
    });
    a = true;
    13
    Executing Functions Async (Callbacks)
    Sunday, December 29, 13

    View full-size slide

  14. July 2013
    Devcon5 NYC 2013
    Learning to Node.js
    $( document ).ready(function() {
    $( "a" ).click(function( event ) {
    console.log( "Thanks for visiting!" );
    });
    });
    14
    Callbacks are familiar
    Sunday, December 29, 13

    View full-size slide

  15. July 2013
    Devcon5 NYC 2013
    Learning to Node.js
    var fs = require('fs');
    var num = undefined;
    function iterate() {
    fs.readFile('data.txt', function(data) {
    num = parseInt(data);
    num++;
    })
    }
    iterate();
    console.log(num); //undefined
    15
    Callbacks
    Sunday, December 29, 13

    View full-size slide

  16. July 2013
    Devcon5 NYC 2013
    Learning to Node.js
    var fs = require('fs')
    var num = undefined;
    function iterate(callback) {
    fs.readFile('data.txt', function(data) {
    ! num = parseInt(data);
    ! num ++;
    callback();
    })
    }
    function logNum() {
    console.log(num);
    }
    iterate(logNum);
    16
    Callbacks as Arguments
    Sunday, December 29, 13

    View full-size slide

  17. July 2013
    Devcon5 NYC 2013
    Learning to Node.js
    one(function() {
    two(function() {
    three();
    })
    })
    function one(cb) {
    console.log('one is done');
    cb.call();
    }
    function two(cb) {
    console.log('two is done');
    cb.call();
    }
    function three() {
    console.log('three is done');
    }
    17
    Callback Hell
    Sunday, December 29, 13

    View full-size slide

  18. July 2013
    Devcon5 NYC 2013
    Learning to Node.js
    async.series([
    function(callback){
    // do some stuff ...
    callback(null, 'one');
    },
    function(callback){
    // do some more stuff ...
    callback(null, 'two');
    }
    ],
    // optional callback
    function(err, results){
    // results is now equal to ['one', 'two']
    });
    18
    Async
    Sunday, December 29, 13

    View full-size slide

  19. July 2013
    Devcon5 NYC 2013
    Learning to Node.js
    Q.fcall(one)
    .then(two)
    .then(three)
    .then(four)
    .then(function (value4) {
    // Do something with value4
    })
    .catch(function (error) {
    // Handle any error from all above steps
    })
    .done();
    19
    Q
    Sunday, December 29, 13

    View full-size slide

  20. July 2013
    Devcon5 NYC 2013
    Learning to Node.js
    Callbacks should be familiar to UI developers.
    I/O from disk or over the network is slow, so these operations should be
    asynchronous.
    Functions are Objects, so they can be passed as arguments to other
    functions.
    Can use Libraries like Async or Q to manage Callback Hell.
    20
    Callbacks
    Sunday, December 29, 13

    View full-size slide

  21. Async
    DisneyBaby.com
    Sunday, December 29, 13

    View full-size slide

  22. Full Stack Asynchronuos I/O
    DisneyBaby.com
    Sunday, December 29, 13

    View full-size slide

  23. July 2013
    Devcon5 NYC 2013
    Intro to Node.js
    23
    function init() {
    // Global variables
    dbaby.Iris.delay = 7000;
    // ...
    var loopReadyDfd = loadSlides();
    $.when(loopReadyDfd).done(function() {
    // reposition the last slide
    $('#promo-' + dbaby.Iris.lastslide).css('right', -800 + "px");
    // ...
    nextIris(dbaby.Iris.delay);!
    }
    };
    Sunday, December 29, 13

    View full-size slide

  24. July 2013
    Devcon5 NYC 2013
    Intro to Node.js
    24
    function loadSlides() {
    var dfd = $.Deferred();
    // Determine slug from URL.
    var slug = $('#iris').data('slug');
    // Request additional slides.
    $.ajax({
    url: '/ajax/get/iris/' + slug + '/'
    }).done(
    function(data) {
    // fetch new promo HTML from response
    // ..
    // fetch src of all new images we're trying to load
    src = $.map( $promos.find('img'), function( img ) {
    return img.src;
    });
    // preload all new images
    $.when(dbaby.preloadImg( src ) ).then(
    function() {
    // ... set up a bunch of listeners
    // resolve deferred object
    dfd.resolve();
    }
    );
    });
    return dfd;
    }
    Sunday, December 29, 13

    View full-size slide

  25. July 2013
    Devcon5 NYC 2013
    Intro to Node.js
    25
    function nextIris(delay) {
    if (tickerOn) {
    if (irisOn && slideNow == dbaby.Iris.totalSlides) {
    var x1 = 0;
    var $pxWrap = $('#iris-wrapper');
    if ( Modernizr.csstransforms && $.browser.webkit ) {
    // for CSS transitions
    $pxWrap.css(TRANSITION, '0s cubic-bezier(.333, 0, 0, 1)');
    $pxWrap.css(TRANSFORM, 'translateX('+x1+'px)');
    }
    else {
    // for Animated transitions
    $pxWrap.css('margin-right', x1 + 'px');
    };
    $.when(nextSetReadyDfd,animReadyDfd).done(function(obj) {
    .when(transitionMomentSet(
    obj.$momentSet,
    obj.pixieDustType)
    ).done(function(){
    nextIris(delay);
    });
    });
    }
    }
    }
    Sunday, December 29, 13

    View full-size slide

  26. How to learn Node.js
    Events
    Sunday, December 29, 13

    View full-size slide

  27. July 2013
    Devcon5 NYC 2013
    Learning to Node.js
    var utils = require('utils'),
    EventEmitter = require('events').EventEmitter;
    var Engine = function() {
    console.log('init');
    };
    utils.inherits(Engine, EventEmitter);
    var e = new Engine();
    e.on('start', function() {
    console.log('start');
    });
    if (somecriteria) {
    e.emit('start');
    }
    27
    Events
    Sunday, December 29, 13

    View full-size slide

  28. simple CLI
    Event Emitter
    Sunday, December 29, 13

    View full-size slide

  29. How to learn Node.js
    Streams
    Sunday, December 29, 13

    View full-size slide

  30. July 2013
    Devcon5 NYC 2013
    Learning to Node.js
    var http = require('http');
    var fs = require('fs');
    var server = http.createServer(function (req, res){
    fs.readFile(__dirname + '/data.txt', function (err, data){
    res.end(data);
    });
    });
    server.listen(8000);
    //buffers up the entire data.txt file into memory
    for every request before writing the result back to
    clients.
    30
    Why Streams?
    Sunday, December 29, 13

    View full-size slide

  31. July 2013
    Devcon5 NYC 2013
    Learning to Node.js
    var http = require('http');
    var fs = require('fs');
    var server = http.createServer(function (req, res) {
    var stream = fs.createReadStream(__dirname + '/data.txt');
    stream.pipe(res);
    });
    server.listen(8000);
    //data.txt file will be written to clients one
    chunk at a time as received from the disk.
    //emits ‘data’ events per chunk of data and then
    emits ‘end’ event when they are all finished.
    31
    Why Streams?
    Sunday, December 29, 13

    View full-size slide

  32. July 2013
    Devcon5 NYC 2013
    Learning to Node.js
    Readable
    Writable
    Transform
    Duplex
    Passthrough
    32
    Types of Streams
    Sunday, December 29, 13

    View full-size slide

  33. simple in/out over HTTP
    Readable and Writeable Streams
    Sunday, December 29, 13

    View full-size slide

  34. July 2013
    Devcon5 NYC 2013
    Learning to Node.js
    stream-adventure by substack
    Streams 2 practical examples
    http://blog.strongloop.com/practical-examples-of-the-new-node-js-
    streams-api/
    34
    More on Streams
    Sunday, December 29, 13

    View full-size slide

  35. How to learn Node.js
    Modules
    Sunday, December 29, 13

    View full-size slide

  36. July 2013
    Devcon5 NYC 2013
    Learning to Node.js
    36
    Modules
    Sunday, December 29, 13

    View full-size slide

  37. July 2013
    Devcon5 NYC 2013
    Learning to Node.js
    37
    Modules
    Sunday, December 29, 13

    View full-size slide

  38. July 2013
    Devcon5 NYC 2013
    Learning to Node.js
    What is NPM?
    Online repository for the publishing of open-source Node.js projects
    Command-line utility for interacting with module repos for package
    installation, version management, and dependency management.
    $ npm search arduino
    38
    Modules
    Sunday, December 29, 13

    View full-size slide

  39. July 2013
    Devcon5 NYC 2013
    Learning to Node.js
    Use require()
    ! var http = require ('http');
    ! var spawn = require('child_process').spawn;
    ! var mod = require('some_module').do();
    Create package.json :
    ! {
    "id": "test_module",
    "version": "1.0.0",
    "dependencies": {
    "async": "latest"
    }
    ! }
    39
    Modules - Creating a Simple Module
    Sunday, December 29, 13

    View full-size slide

  40. July 2013
    Devcon5 NYC 2013
    Learning to Node.js
    $ git init
    $ npm init
    $ touch index.js
    - module.exports = 1
    $ node -pe "require('./example')"
    $ npm publish
    40
    Modules - Quick Start
    Sunday, December 29, 13

    View full-size slide

  41. ResponderJS
    Adaptive Middleware Node.js module
    Sunday, December 29, 13

    View full-size slide

  42. More Real World Use
    Sunday, December 29, 13

    View full-size slide

  43. July 2013
    Devcon5 NYC 2013
    Learning to Node.js
    Project Management, Workflow, Build Tools, etc
    Network Server and Streams
    ExpressJS Web Framework
    Soft, Real-Time Applications with WebSocket
    Micro Controllers, IoT Prototypes
    43
    When to use Node.js?
    Sunday, December 29, 13

    View full-size slide

  44. Express Web Framework
    Chapter 10 ‘HTML5 Hacks’
    Sunday, December 29, 13

    View full-size slide

  45. ws Module
    Chapter 9, Hack #71
    Sunday, December 29, 13

    View full-size slide

  46. Nerdclustr
    Real Time, Geo Location
    Sunday, December 29, 13

    View full-size slide

  47. Application Tracker
    Grunt, Bower, Yeoman
    Sunday, December 29, 13

    View full-size slide

  48. Trailr.io
    Node.js MicroController Framework
    Sunday, December 29, 13

    View full-size slide

  49. July 2013
    Devcon5 NYC 2013
    Learning to Node.js
    49
    trailr.io
    http://www.youtube.com/watch?v=H00_BGRkBRM&t=14m14s
    Sunday, December 29, 13

    View full-size slide

  50. July 2013
    Devcon5 NYC 2013
    Learning to Node.js
    50
    NodeCopter
    http://www.youtube.com/watch?v=gucpgJEJ5b4
    Sunday, December 29, 13

    View full-size slide

  51. July 2013
    Devcon5 NYC 2013
    Learning to Node.js
    51
    Johnny Five
    http://www.youtube.com/watch?v=jf-cEB3U2UQ
    Sunday, December 29, 13

    View full-size slide

  52. © 2012 frog. All rights reserved.
    Sunday, December 29, 13

    View full-size slide