Slide 1 of 76
Node & Express
Leon Noel
#100Devs
I ain't know nothin' 'bout no Visa, I was in the park with the gang
Moms be feelin' bad, I try to tell her she is not to blame
No social security, couldn't get a license, but I still didn't complain
Slide 2 of 76Agenda
- Questions?
- Let's Talk - #100Devs
- Review - Event Loop
- Learn - CRUD
- Learn - Express
- Learn - Build your own API
- Homework - Build your own API
Slide 3 of 76
Questions
About last class or life
Slide 4 of 76Checking In
Like and Retweet the Tweet
!checkin
Slide 5 of 76Live CAR Class
FRIDAY
6:00pm EST
And we are talking about the agency
Slide 6 of 76Office Hours
SUNDAY
1:00pm EST
Slide 7 of 76Networking
1 coffee chat this week
Slide 8 of 76USE THE SHEET!
NOW WITH TWO TABS!: Google Sheet
Slide 10 of 76PUSH EVERY DAY
Slide 11 of 76Submitting Work
Slide 12 of 76Submitting Work
Slide 13 of 76
Homework
(should be done)
Slide 14 of 76Spaced Repetition
Ali Abdaal: https://youtu.be/Z-zNHHpXoMM
Slide 15 of 76Backend!
Butt first!
Slide 16 of 76
Javascript is
single-threaded
Synchronous aka processes
one operation at a time
vs
Slide 17 of 76Things should block
Slide 18 of 76THE ENVIRONMENT
Slide 19 of 76Not This
Slide 20 of 76THIS
Slide 21 of 76
Our JS is running in
a browser
Browsers have a BUNCH of APIs we can use that are async and enable us to keeping looking a cute cat photos while those operations are being processed asynchronously
Slide 22 of 76function houseOne(){
console.log('Paper delivered to house 1')
}
function houseTwo(){
setTimeout(() => console.log('Paper delivered to house 2'), 0)
}
function houseThree(){
console.log('Paper delivered to house 3')
}
houseOne()
houseTwo()
houseThree()
Slide 23 of 76EVENT LOOP
Slide 24 of 76Time for some data structures
Slide 25 of 76Queue
Like a real queue, the first element which was added to the list, will be the first element out.
This is called a FIFO (First In First Out) structure.
Slide 26 of 76let queue = []
queue.push(2) // queue is now [2]
queue.push(5) // queue is now [2, 5]
let i = queue.shift() // queue is now [5]
alert(i) // displays 2
Queue Example
Slide 27 of 76Stack
The first pancake made, is the last pancake served.
This is called a stack.
The first element which was added to the list, will be the last one out. This is called a LIFO (Last In First Out) structure.
Slide 28 of 76let stack = []
stack.push(2) // stack is now [2]
stack.push(5) // stack is now [2, 5]
let = stack.pop() // stack is now [2]
alert(i) // displays 5
Stack Example
Slide 29 of 76Back To Getting Got
Slide 30 of 76
JS IS RUNNING IN THE BROWSER
V8 Engine
(Parse Code > Runnable Commands)
Window Runtime (Hosting Environment)
Gives Us Access To Web APIs
Passes stuff to Libevent (Event Loop)
Slide 31 of 76The Event Loop monitors the Callback Queue and Job Queue and decides what needs to be pushed to the Call Stack.
Slide 32 of 76
Call Stack
Web APIs
Task Queue
(Also, a job queue)
console.log('Paper delivered to house 1')
setTimeout(() => {
console.log('Paper delivered to house 2'), 0)
}
console.log('Paper delivered to house 3')
Console
main()
Call Stack
Web APIs
Task Queue
(Also, a job queue)
console.log('Paper delivered to house 1')
setTimeout(() => {
console.log('Paper delivered to house 2'), 0)
}
console.log('Paper delivered to house 3')
Console
main()
log('house 1')
Call Stack
Web APIs
Task Queue
(Also, a job queue)
console.log('Paper delivered to house 1')
setTimeout(() => {
console.log('Paper delivered to house 2'), 0)
}
console.log('Paper delivered to house 3')
Console
main()
log('house 1')
Call Stack
Web APIs
Task Queue
(Also, a job queue)
console.log('Paper delivered to house 1')
setTimeout(() => {
console.log('Paper delivered to house 2'), 0)
}
console.log('Paper delivered to house 3')
Console
main()
log('house 1')
setTimeout()
Call Stack
Web APIs
Task Queue
(Also, a job queue)
console.log('Paper delivered to house 1')
setTimeout(() => {
console.log('Paper delivered to house 2'), 0)
}
console.log('Paper delivered to house 3')
Console
main()
log('house 1')
setTimeout()
Call Stack
Web APIs
Task Queue
(Also, a job queue)
console.log('Paper delivered to house 1')
setTimeout(() => {
console.log('Paper delivered to house 2'), 0)
}
console.log('Paper delivered to house 3')
Console
main()
log('house 1')
setTimeout() - cb or promise...
log('house 3')
Call Stack
Web APIs
Task Queue
(Also, a job queue)
console.log('Paper delivered to house 1')
setTimeout(() => {
console.log('Paper delivered to house 2'), 0)
}
console.log('Paper delivered to house 3')
Console
log('house 1')
setTimeout() - cb or promise...
log('house 3')
Call Stack
Web APIs
Task Queue
(Also, a job queue)
console.log('Paper delivered to house 1')
setTimeout(() => {
console.log('Paper delivered to house 2'), 0)
}
console.log('Paper delivered to house 3')
Console
cb / promise
log('house 1')
log('house 3')
Call Stack
Web APIs
Task Queue
(Also, a job queue)
console.log('Paper delivered to house 1')
setTimeout(() => {
console.log('Paper delivered to house 2'), 0)
}
console.log('Paper delivered to house 3')
Console
log('house 1')
log('house 3')
log('house 2')
Slide 33 of 76Backend BABY
Slide 34 of 76Does Javascript have access to the DOM natively (built in)?
Slide 35 of 76
Slide 36 of 76Javascript needed Web APIs to handle async and a bunch of stuff in the Browser
Slide 37 of 76JS is a language that can only do what the hosting environment allows
Slide 38 of 76What Do Servers Need?
Slide 39 of 76
Disk Access
(hardrive/ssd)
&&
Network Access
(internet, request / responses)
Slide 40 of 76What if there was a hosting environment that allowed JS to have disk and network access
Music & Light Warning - Next Slide
Slide 41 of 76NODE.js BABY
Slide 42 of 76Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.
Slide 43 of 76
Slide 44 of 76The same shit that lets you run JS in the browser can now be used to run JS on Servers, Desktops, and elsewhere
Slide 45 of 76Engine Vs. Compiler
Slide 46 of 76And just like the browser's Web APIs Node come with a bunch of stuff
Slide 47 of 76
Built in Modules
(libraries or collections of functions)
HTTP (network access)
FS (file system access)
Slide 48 of 76
Access to millions of packages via NPM
(groupings of one or more custom modules)
Slide 49 of 76Not Web APIs, but C/C++ APIs
Slide 50 of 76
sorry, don't remember the source
Slide 51 of 76Let's Code
Simple Node Server
Slide 52 of 76
Just
HTTP & FS
const http = require('http')
const fs = require('fs')
http.createServer((req, res) => {
fs.readFile('demofile.html', (err, data) => {
res.writeHead(200, {'Content-Type': 'text/html'})
res.write(data)
res.end()
})
}).listen(8000)
Slide 53 of 76Let's Look
More Complex Backend
Slide 54 of 76
Slide 55 of 76How could we clean this up?
Slide 57 of 76But First
Blast To The Past
Slide 58 of 76How Does The Internet Work
Slide 60 of 76CRUD
Create (post) - Make something
Read (get) - Get Something
Update (put) - Change something
Delete (delete) - Remove something
Slide 61 of 76Instagram
What are some Create (post) requests?
Slide 62 of 76Instagram
What are some Read (get) requests?
Slide 63 of 76Instagram
What are some Update (put) requests?
Slide 64 of 76Instagram
What are some Delete (delete) requests?
Slide 65 of 76Coffee Chat & Professional Review
Slide 66 of 76Let's Build An App with Express
Slide 67 of 76
Express
Fast, unopinionated, minimalist web framework for Node.js
With a myriad of HTTP utility methods and middleware at your disposal, creating a robust API is quick and easy.
Slide 68 of 76
Slide 69 of 76TONIGHT WE BUILD
Slide 71 of 76mkdir api-project
cd api-project
npm init
npm install express --save
Setting Up The Project
Slide 72 of 76app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html')
})
Serving Up HTML
Slide 73 of 76app.get('/api/savage', (request, response) => {
response.json(object)
})
Serving Up JSON
Slide 74 of 76heroku login -i
heroku create simple-rap-api
echo "web: node server.js" > Procfile
git add .
git commit -m "changes"
git push heroku main
Push To Heroku
Slide 75 of 76
Slide 76 of 76Homework
