[PPT] - Lets talk about Node.js Hello! Nils Mehlhorn freelance software PowerPoint Presentation

SLIDE 1

Let’s talk about Node.js

SLIDE 2

Hello!

Nils Mehlhorn

freelance software engineer

2

nils-mehlhorn.de

www

@n_mehlhorn @n_mehlhorn

SLIDE 3

3

What’s Node.js? Views & APIs Real World

SLIDE 4

What’s Node.js

Let’s look at the basics

4

SLIDE 5

Node.js is ...

… a JavaScript runtime … based on Chrome’s V8 engine … designed for scalable network apps … asynchronous event-driven ? … using non-blocking IO ??

5

SLIDE 6

6

IO =

Access to slow stuff

network
file system
database

SLIDE 7

Blocking IO

7

const fs = require('fs') const options = {encoding: 'utf-8'} // block const content = fs.readFileSync('./file.txt', options) console.log(content) console.log('(other things your app does)')

Synchronous Call (JavaScript is single-threaded)

SLIDE 8

8

Non-Blocking IO

const fs = require('fs') const options = {encoding: 'utf-8'} // no block, but async fs.readFile('./file.txt', options, (err, content) => { console.log(content) }) console.log('(other things your app does)')

Asynchronous Callback

SLIDE 9

Node.js Event Loop

9

JS

Event Loop

Thread Worker Pool Thread

readFile(cb) register done cb() more: What the heck is the event loop anyway?

Thread Thread

SLIDE 10

Promises

10 const fs = require('fs') const options = {encoding: 'utf-8'} function getJsonFile(path, callback) { fs.readFile(path, options, (err, content) => { if (err) { callback(err) } const json = JSON.parse(content) callback(null, json) }) } function getJsonFile(path) { return fs.promises.readFile(path, options) .then(content => JSON.parse(content)) }

▣ no “callback hell” ▣ less error-prone ▣ chainable

SLIDE 11

Views & APIs

Let’s build for the web

11

SLIDE 12

Express

12

web service database file system Node.js browser

Request Handling View Rendering Authentication Routing Logging

Express HTTP Client SQL Client fs app

SLIDE 13

Hello World with Express

13

const express = require('express') const app = express() app.get('/', (req, res) => { res.send('Hello World') }) const port = 3000 app.listen(port, () => { console.log('Server started') })

http://localhost:3000

SLIDE 14

Views

14

app.set('views', './views')) app.set('view engine', 'ejs') app.get('/greet', (req, res) => { const data = { title: 'iJS', person: req.query.person } res.render('greet', data) })

<!DOCTYPE html> <html> <head> <title><%= title %></title> </head> <body> <h1><%= title %></h1> <p>Hey there, <%= person %>!</p> </body> </html>

/greet?person=Delilah

greet.ejs

SLIDE 15

Embedded JavaScript Templates

15

<html> <body> <% include(../header, {title}) %> <main>Hello</main> <% include ../footer %> </body> </html> Includes <title><%= title %></title> Output <ul> <% users.forEach(user => { %> <li><%= user.name %></li> <% }) %> </ul> Control Flow

SLIDE 16

APIs

16

let todos = [ {id: 1, text: "Do laundry", done: true}, {id: 2, text: "Prepare talk", done: true}, {id: 3, text: "Go on vacation", done: false} ] app.get('/todos', (req, res) => { res.json(notes) })

[ { "id": 1, "text": "Do laundry", "done": true }, { "id": 2, "text": "Prepare talk", "done": true }, { "id": 3, "text": "Go on vacation", "done": false } ]

/todos

SLIDE 17

Back-End API

17 17 /todos

฀ Do laundry ฀ Prepare talk ☐ Go on vacation

Enter text ... Add

SLIDE 18

Back-End API

18 18

let todos = [...] app.patch('/todos/:id', (req, res) => { const id = req.params.id const todo = todos .find(todo => todo.id === id) todo.done = !todo.done res.sendStatus(200) })

/todos

฀ Do laundry ฀ Prepare talk ☐ Go on vacation

Enter text ... Add PATCH /todos/3

SLIDE 19

Back-End API

19 19

let todos = [...] // parse JSON from HTTP body app.use(express.json()) app.post('/todos', (req, res) => { const todo = req.body todo.id = getNextId() todo.done = false todos.push(todo) res.json(todo) })

/todos

฀ Do laundry ฀ Prepare talk ฀ Go on vacation

Try Node.js Add POST /todos {“text”: “Try Node.js”}

SLIDE 20

Middleware

20

const express = require('express') const path = require('path') // serve static files from ./public app.use(express.static( path.join(__dirname, 'public') )) /* request handlers */ // handle unmapped routes app.use((req, res) => { res.status(404).send('Not Found') }) ▣ Parsing ▣ Routing ▣ Static Files ▣ Error Handling ▣ Authentication ▣ Logging

rder

SLIDE 21

Project Structure

21

// install generator npm -g install express-generator // generate project express --view=ejs my-app

Configures: ▣ Error handling ▣ View rendering ▣ Static files ▣ Cookie parsing ▣ Logging

SLIDE 22

package.json

22

{ "name": "ijs-express", "version": "0.0.1", "scripts": { "start": "node index.js", "watch": "nodemon index.js", "start-ts: "ts-node index.ts" }, "dependencies": {...}, "devDependencies": { "nodemon": "^1.19.4", "ts-node": "^8.4.1" } }

SLIDE 23

Real World

Node.js is a tool

23

SLIDE 24

Opportunities

24

Ecosystem Full Stack JS IO Performance npm is biggest registry deployment options tool support community code sharing no context switch hiring

nboarding

multitude of requests connect downstream services less concurrency concerns

SLIDE 25

Challenges

no typing

25

Security Maintainability CPU Performance package corruption code injection architecture testing linting audits best practices worker threads NestJS TypeScript Jest

SLIDE 26

Use Cases

26

Realtime ▣ Chat ▣ Gaming Data-intensive ▣ Internet of Things ▣ Streaming Web ▣ Server-side pages ▣ APIs You’re most effective with what you have - until you’re not

SLIDE 27

27

scenelab.io

SLIDE 28

Server-side Image Rendering

28

Node.js fs Google Cloud SDK libvips sharp fastify JSON PNG JPG Cloud Storage Raw Images C++ Image Processing

SLIDE 29

Thumbnail Generation

29

upload image t r i g g e r Cloud Storage Cloud Function save thumbnail

SLIDE 30

Thanks!

Nils Mehlhorn

freelance software engineer

30

nils-mehlhorn.de @n_mehlhorn @n_mehlhorn

www