node-intro.html

<!DOCTYPE html>
<html>
  <head>
    <title>Node for Novices</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style type="text/css">
      @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
      @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
      @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
      body { 
        font-family: 'Droid Serif';
      }
      h1, h2, h3 {
        font-family: 'Yanone Kaffeesatz';
        font-weight: normal;
        margin-top: 0.1em;
      }
      .remark-slide-content {
        height: 100%;
      }
      .the-end {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-family: 'Yanone Kaffeesatz';
        font-size: 250%;
      }
      .remark-container {
        background-color: #fff;
      }
      .remark-slide-scaler {
        box-shadow: none;
        -webkit-box-shadow: none;
        width: 98vw !important;
        height: 98vh !important;
        top: 0 !important;
        left: 0 !important;
        transform: scale(1.00) !important;
        margin: auto auto;
      }
      .remark-slide-content {
        font-size: 175%;
        padding: 1em 1em;
      }
      .columns {
        display: flex;
        height: 100vh;
      }
      .col-left  { 
        flex: none;
        width: 18%;
        height: 100%;
        margin-right: 2%;
        border-right: thin solid #ccc;
      }
      .col-right { 
        flex: none;
        width: 78%;
      }
      .remark-code, .remark-inline-code { 
        font-size: 110%;
        line-height: 110%;
        font-family: 'Ubuntu Mono';
      }
      .remark-code {
        border: thin solid #999;
        border-radius: 5px;
      }
      .remark-inline-code {
        font-size: 95%;
        padding: 0.3% 1%;
        background-color: hsl(0, 0%, 95%);
      }
      p {
        line-height: 150%;
      }
      li {
        margin-top: 0.5em;
      }
      li li {
        margin-top: 0.25em;
      }
      
      .remark-slide-content .columns .col-left p,
      .remark-slide-content .columns .col-left h1,
      .remark-slide-content .columns .col-left h2,
      .remark-slide-content .columns .col-left h3  {
        font-size: 3.25vw;
      }
      
      .remark-slide-content .columns .col-left .remark-code,
      .remark-slide-content .columns .col-left .remark-inline-code  {
        font-size: 2.5vw;
      }
      
      .do-not-do {
        color: red;
        font-size: 135%;
        margin: 1em;
        padding: 0.5em;
        border: solid thin #d1d1d1;
        background-color: hsl(61, 61%, 86%);
      }
      
      .shrink {
        font-size: 90%;
      }
    </style>
  </head>
  <body>
    <textarea id="source">

class: center, middle

# Node for Novices

### Sean Duncan
### (MetaSean)

???

Notes for the _first_ slide!

---

# What is Node.js?

>"Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world."  
https://nodejs.org/en/

---

# No, really, what is Node.js?

A stand-alone runtime environment for JavaScript.

--

- _not_ for browsers 
- _for_ servers, hardware, your own laptop, etc 
- starts with the same JavaScript engine as Chrome (i.e. V8)
- includes additional libraries (e.g. file handling)
--

- has a great, open-source ecosystem of other modules

--
- for a novice ☝️ are a good set of features to initially focus on, _but yes_, Node.js also has other awesome features!
--


---

# How to play with Node.js tonight

_Note_: &ensp;I'll be demoing in CodeAnywhere tonight,  
&emsp;&emsp;&emsp; **_but it's better to work locally if you can!_**

**If you already have node and an IDE or texteditor  installed:**
  1. Create a new directory for tonight's code along (e.g. 'purple-people-eater')
  
**If you do *_not_* already have node installed:**
  1. Go sign up for an account at [codeanywhere.com](https://codeanywhere.com)
  2. Create a new project (e.g. 'purple-people-eater')
  3. Add a new Connection Wizard, specifically the Node.js stack on Ubuntu


---

# Quick CodeAnywhere Tour

- View 👉 Layout 👉 Columns:2
- View 👉 File Explorer (`⌥-X`; `option-X`)
- View 👉 MiniMap (uncheck)
- Terminal tab: right-click project name 👉 SSH Terminal
- User 👉 Dashboard 👉 Projects
- Distraction-free mode: `⌘-ctl-⇧-F`
- New file: `ctrl-N`

---

layout: false
.columns[.col-left[
  ## `npm init`
]
.col-right[

# Initialize a local repository

```bash
 npm init
```
_or_
```bash
 /* use this version tonight */
 `npm init --yes` 
```
  
- [Relevant field descriptions](https://docs.npmjs.com/files/package.json)
]]

---

layout: false
.columns[.col-left[
  ## `npm init`
  ## `package.json`
]
.col-right[

# `package.json`

This file contains relevant metadata about your project, including other projects —known as 'modules'— that your project depends upon.

]]

---

layout: false
.columns[.col-left[
  ## `npm init`
  ## `package.json`
  ## `node_modules`
]
.col-right[

# `node_modules`

The `node_modules` directory contains any other node modules that you indicated that your project depends upon.
]]

---

layout: false
.columns[
.col-left[
  ## `npm init`
  ## `package.json`
  ## `node_modules`
  ## `yarn`
]
.col-right[

# `yarn`

- `yarn` is itself another node package…
- which reimplements some `npm` functionality.


You can install Yarn via:
```bash
npm install yarn --global
```
]
]

---

layout: false
.columns[
.col-left[
  ## local install
]
.col-right[

# Local Installations

.do-not-do[**_DO NOT DO, JUST WATCH AND LISTEN!_**]    

```bash
npm install learnyounode
```

- `npm install` installs one or more node modules
- in this case, it installs the `learnyounode` module
- if no module name is provided, but there is another file (we'll look at that file in a moment) which  includes dependencies, then it will install those modules

]
]

---

layout: false
.columns[
.col-left[
  ## local install
  ## local bin
]
.col-right[

# Local `bin`

.do-not-do[**_DO NOT DO, JUST WATCH AND LISTEN!_**]    

```bash
node node_modules/learnyounode/bin/learnyounode
```

- `node` runs the file listed immediately following it
- in this case the file includes a path from the current working directory and the filename, where: 
  - `node_modules/learnyounode/bin/` is the path
  - `learnyounode` is the filename  
    (which does not have the usual `.js` extension)


]
]
---

layout: false
.columns[
.col-left[
  ## local install
  ## local bin
  ## REPL
]
.col-right[

# REPL


```bash
node 
```

- running it without any paramaters switches your terminal / command line to a Node REPL (Read-eval-print loop)
  - **_If you want to, follow-along with this part._**
  - `node`
  - you'll notice the terminal prompt changes
  - `1+1` >>> `2`
  - `^-C` (ctrl-C) - _twice_ to exit the REPL mode

]
]

---

layout: false
.columns[
.col-left[
  ## local install
  ## local bin
  ## REPL
  ## scripts
]

.col-right[
.shrink[
.shrink[
.shrink[
.shrink[

# Scripts

.do-not-do[**_DO NOT DO, JUST WATCH AND LISTEN!_**]  

```javascript
/* package.json */
"scripts": {
  "teachMeNode": "node node_modules/learnyounode/bin/learnyounode"
},
```

Run the package's script with either:  
```bash
npm run teachMeNode
```
_OR_

```bash
yarn run teachMeNode
```
_OR_

```bash
yarn teachMeNode
```

]
]
]
]
]
]

---

layout: false
.columns[
.col-left[
  ## local install
  ## local bin
  ## REPL
  ## scripts
]
.col-right[

# Scripts

### Custom scripts names for that npm project  
- require `run`, e.g. `npm run teachMeNode` 
- if there are no other command line or terminal commands with the same name, `yarn` does not require the `run` parameter 

### Standard scripts associated with any npm project  
- e.g. `test`, `start`, `stop` don't require `run`, e.g. `npm test`  
- https://docs.npmjs.com/misc/scripts for the full list

]
]

---

layout: false
.columns[
.col-left[
  ## local install
  ## local bin
  ## REPL
  ## scripts
  ## global install
]
.col-right[

# Global Installations

Go ahead and run this command now:
```bash
 `npm install learnyounode --global`
```

- available from anywhere on your computer 
- global packages _can_ set-up their own global command line/terminal scripts
  - for example, you now have a `learnyounode` command available

]
]

---

# Node School

**"learnyounode"** is just one of many self-based [workshoppers](https://nodeschool.io/#workshopper-list) available at [nodeschool.io](https://nodeschool.io/#workshopper-list) to help you learn essential Node.js-related skills.
  
--

----
  
**_Once you have the `learnyounode` workshopper installed, start working through it by running:_**
```bash
 `learnyounode`
```

---

# 01-hello-world.js

```javascript
console.log("HELLO WORLD")
```

- [`console.log`](https://nodejs.org/dist/latest-v8.x/docs/api/console.html#console_console_log_data_args)

---

# 02-baby-steps.js


```javascript
const [cmd, file, `...numberArray`] = `process.argv`
const sum = nums `=>` nums`.reduce`( 
    (reduction, current) => 
        reduction + parseInt(current),
    0
)
`console.info`( sum(numberArray) )
```

- `...numberArray`, i.e. [destructuring assignment]( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
-  [`process.argv`](https://nodejs.org/dist/latest-v8.x/docs/api/process.html#process_process_argv)
- `=>`, i.e. [arrow function expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
- [Array's `reduce()` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)
- [`console.info`](https://nodejs.org/api/console.html#console_console_info_data_args)


---

# 03-my-first-io.js

```javascript
const fs = require('fs')

const fileName = process.argv[2]
const fileBuffer = fs.readFileSync(fileName)
const fileContents = fileBuffer.toString()
const linesInFile = fileContents.split('\n')
const newLineCount = linesInFile.length - 1

console.log(newLineCount)
```

- `fs`, i.e. [File System]( https://nodejs.org/dist/latest-v8.x/docs/api/fs.html)
- [`Buffer`](https://nodejs.org/dist/latest-v8.x/docs/api/buffer.html)

---

# 04-my-first-async-io.js

.shrink[
.shrink[

```javascript
const fs = require('fs')

const fileName = process.argv[2]
fs.readFile(fileName, countLines)

function countLines (err, data) {
  if (err) { throw err }
  const newLineCount = data.toString()
                           .split('\n')
                           .length - 1

  console.log(newLineCount)
}
```

- [`throw`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/throw)
- [`fs.readFile`]( https://nodejs.org/dist/latest-v8.x/docs/api/fs.html#fs_fs_readfile_path_options_callback)
- [Art of Node:  Callbacks](https://github.com/maxogden/art-of-node#callbacks)
]
]


---

# 07-http-client.js


.shrink[

```javascript
const http = require('http')

const handleResponse = response =>
  response.setEncoding('utf8')
          .on('data', console.log)
          .on('error', console.error)

http.get(process.argv[2], handleResponse)
    .on('error', console.error)
}
```
]


---

.the-end[

**Stay Curious**  
**and**  
**Keep Coding!**

]
  
  
    </textarea>
    <script src="out/remark.js" type="text/javascript">
    </script>
    <script type="text/javascript">
      var slideshow = remark.create({
        highlightLanguage: 'javascript',
        highlightLines: true,
        highlightSpans: true,
        highlightStyle: 'atom-one-light',
        slideNumberFormat: (current, total) => '',
        navigation: {
          scroll: false,
          click: false,
        }
      });
    </script>
  </body>
</html>