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

Node JS for Architects Part 1

Node JS for Architects Part 1

An introduction to NodeJS and the basics associated with it.

Allan Chua

March 18, 2022
Tweet

More Decks by Allan Chua

Other Decks in Technology

Transcript

  1. NodeJS
    for Architects
    PART 1
    By Allan Chua

    View full-size slide

  2. Agenda
    How NodeJS
    works
    Tooling Building scripts
    like a boss
    Pre-requisites

    View full-size slide

  3. Series of topics
    NodeJS
    Scripting
    1
    Frontend
    Engineering React
    2
    API
    Development
    3
    Hosting static
    frontends in AWS
    4
    hosting APIs
    in AWS
    5
    Containers in
    AWS
    6
    Serverless
    APIs for AWS
    7
    Storing data in
    AWS
    8

    View full-size slide

  4. Goal of Training
    Convert you to
    Solution Architects
    With skills in
    nodejs and AWS

    View full-size slide

  5. Pre-requisites
    Things that you need before you can work like a ninja in NodeJS

    View full-size slide

  6. Linux is recommended
    Any linux distro
    is fine
    But ubuntu is highly
    recommended because
    of its compatibility
    with major Ides
    If you are in windows,
    There’s a solution for that
    and it’s called windows
    subsystems for linux
    Macbook pro is the most
    loved machine by developers
    but its very expensive.

    View full-size slide

  7. Shell skill is a must
    Its almost impossible to Create automation
    pipelines and deploy NodeJS without having a
    decent shell skill.

    View full-size slide

  8. You’ll need a code editor and a
    browser of course
    IDE & Browser

    View full-size slide

  9. How node JS works

    View full-size slide

  10. JavaScript
    Originally Written
    for the Browsers
    But now works
    everywhere

    View full-size slide

  11. NODE JS Is a runtime
    responsible for executing JS
    outside a browser

    View full-size slide

  12. But how?
    If JS was made for browsers,
    how was it able to execute js
    everywhere?

    View full-size slide

  13. Thanks to v8
    V8 is google chrome’s
    javascript engine

    View full-size slide

  14. How v8 works
    It is used by nodejs to take
    javascript and execute it outside a
    browser.
    machine executable
    code
    V8 translates takes js
    as input

    View full-size slide

  15. Server and client delta
    But there’s a difference between server and
    browser code
    • DOM
    • Cookies
    • Document
    • Window
    • APIs related to
    browser window
    • File system
    • EXECUTE Shell
    • Web servers and clis
    Browser Node JS

    View full-size slide

  16. Asynchronous = Efficiency
    NodeJS is awesome because it
    enables superior use of
    compute resources in a server
    READ THIS GUYS:
    https://www.geeksforgeeks.org/why-node-js-is-a-single-threaded-language/

    View full-size slide

  17. Single Language means
    happy owners
    - Less cognitive switch
    - Faster onboarding of
    developers
    - Faster engineering

    View full-size slide

  18. Could be used to make
    And many more
    Web ApiS websites Artificial
    Intelligence

    View full-size slide

  19. Largest programming ecosystem
    The large ecosystem of nodejs applications can easily
    result to reduction of engineering cost
    Stackoverflow Sample
    Projects
    Youtube
    Videos
    Medium
    Articles

    View full-size slide

  20. Core Tools
    NVM NPM NPX
    We’ll view tackle this on frontend
    and api development portions

    View full-size slide

  21. NVM
    Stands for
    NODE VERSION MANAGER.
    Installation Script

    View full-size slide

  22. NVM
    It’s shell-based cli tool used for managing the
    active version of nodeJs installed in your
    machine.

    View full-size slide

  23. NVM
    View all
    available versions
    download
    versions
    Switch Between
    versions

    View full-size slide

  24. NVM
    View all available
    versions

    View full-size slide

  25. NVM
    List versions with
    long term support

    View full-size slide

  26. NVM
    Use a Specific
    Version

    View full-size slide

  27. NPM
    Stands for
    NODE package MANAGER.

    View full-size slide

  28. NPM – Package Manager
    Open source
    Repository of
    packages
    Configuration
    like version, and
    type
    Package
    management
    Run and
    Manage Scripts

    View full-size slide

  29. Installed together
    with NodeJS

    View full-size slide

  30. NPM - Verify
    Verify NPM’s existence

    View full-size slide

  31. NPM
    Can also refer to:
    The open source repository of javascript
    packages
    https://www.npmjs.com/

    View full-size slide

  32. The nodejs developer
    workflow

    View full-size slide

  33. The nodejs development workflow
    Install
    dependencies
    Initialize your
    project
    Write your
    code
    Execute
    application
    entry point

    View full-size slide

  34. Let’s rock and roll

    View full-size slide

  35. Let’s build an
    avatar generator
    in 5 minutes

    View full-size slide

  36. If you want to try
    it out later after the session
    https://github.com/allanchua101/avatar-generator

    View full-size slide

  37. Let’s setup a project

    View full-size slide

  38. Type all this code guys
    GENERATE-AVATAR.JS

    View full-size slide

  39. Run the code

    View full-size slide

  40. Let’s beautify our output
    Install colors package using the code above

    View full-size slide

  41. Update our javascript logging code
    Let’s utilize colors to sprinkle
    creativity on our logs

    View full-size slide

  42. Results
    Before change and after ^_^

    View full-size slide

  43. Let’s go crazier and make
    graffiti out of the text

    View full-size slide

  44. Update our Code again

    View full-size slide

  45. Sweet graffiti in your
    logs

    View full-size slide

  46. Challenge
    for this week

    View full-size slide

  47. Homework
    - I would strongly suggest using dual
    boot and have ubuntu as the 2nd boot
    system of your pCs
    - If you are in windows and you love it,
    setup WSL
    - Install Node JS
    - Install NVM

    View full-size slide

  48. Homework 1
    Create a NODE JS script that can convert EXCEL
    files to JSON and save it on the disk

    View full-size slide

  49. Homework 2
    Create a NODE JS script that can convert JSON files
    to EXCEL and save it on the disk

    View full-size slide

  50. Homework 3
    Create a NODE JS script that can add a background
    image to a transparent PNG file and save it on the
    disk

    View full-size slide

  51. Homework 4
    Create a NODE JS script that generates a QR code
    for a website and save it on the disk

    View full-size slide

  52. Homework 5
    Create a NODE JS script that generates a barcode
    based on the provided product ID and save it on the
    disk

    View full-size slide

  53. Homework 6
    Create a NODE JS script that retrieves data from movie list
    API and generate an excel file from it. Use this package:
    https://www.npmjs.com/package/movie-list-node

    View full-size slide

  54. Next Week
    We will take a look
    at each of your
    outputs and

    View full-size slide

  55. Next Session
    We will look into frontend development using React JS

    View full-size slide