Networking презентация

Июль 9, 2021

Содержание

2. connection
3. connection
4. connection HTTP
5. ip
6. ip
7. domain names https://google.com
8. domain names https://google.com
9. domain names google.com -> ?.?.?.?
10. dns DNS Server Client google.com
11. dns DNS Server Client 173.194.122.152
12. connecting to server 173.194.122.152:80
13. connecting to server 173.194.122.152:443
14. connecting to server https://173.194.122.152:443
15. get request
16. get request
17. A Misconception
18. it’s all html
19. it’s all html
20. it’s all html
21. it’s all html
22. server decides how to handle response GET /path/to/somewhere response.end(‘Hello world!’)
23. server decides how to handle response GET /path/to/somewhere.php php script.php HTML
24. Подходы к разработке
25. Server-Side Rendering
26. Client-Side Rendering
27. client-side rendering app.js index.html main.css Клиент
28. client-side rendering index.html
29. Isomorphic Rendering
30. XMLHttpRequest
31. xhr xhr.js const xhr = new XMLHttpRequest() xhr.open(‘GET’, ‘url’) xhr.onreadystatechange = () => { if (xhr.readyState
32. JSON
33. json file.json { “key”: ”data” “numericKey”: 42 }
34. json json.js const someObject = { key: ‘ayyy’, anotherKey: 45 } const jsonString = JSON.stringify(someObject) //
35. Практика
37. Скачать презентацию

Слайд 2

connection

Слайд 3

connection

Слайд 4

connection
HTTP

Слайд 5

ip

Слайд 6

ip

Слайд 7

domain names
https://google.com

Слайд 8

domain names
https://google.com

Слайд 9

domain names
google.com -> ?.?.?.?

Слайд 10

dns
DNS Server
Client
google.com

Слайд 11

dns
DNS Server
Client
173.194.122.152

Слайд 12

connecting to server
173.194.122.152:80

Слайд 13

connecting to server
173.194.122.152:443

Слайд 14

connecting to server
https://173.194.122.152:443

Слайд 15

get request

Слайд 16

get request

Слайд 17

A Misconception

Слайд 18

it’s all html

Слайд 19

it’s all html

Слайд 20

it’s all html

Слайд 21

it’s all html

Слайд 22

server decides how to handle response
GET /path/to/somewhere
response.end(‘Hello world!’)

Слайд 23

server decides how to handle response
GET /path/to/somewhere.php
php script.php
HTML

Слайд 24

Подходы к разработке

Слайд 25

Server-Side Rendering

Слайд 26

Client-Side Rendering

Слайд 27

client-side rendering
app.js
index.html
main.css
Клиент

Слайд 28

client-side rendering
index.html

src=‘app.js’>

Слайд 29

Isomorphic Rendering

Слайд 30

XMLHttpRequest

Слайд 31

xhr
xhr.js
const xhr = new XMLHttpRequest()
xhr.open(‘GET’, ‘url’)
xhr.onreadystatechange = () => {
if

(xhr.readyState === XMLHttpRequest.DONE &&
xhr.status === 200)
console.log(xhr.responseText)
}

Слайд 32

JSON

Слайд 33

json
file.json
{
“key”: ”data”
“numericKey”: 42
}

Слайд 34

json
json.js
const someObject = {
key: ‘ayyy’,
anotherKey: 45
}
const jsonString = JSON.stringify(someObject)
//

{"key":"ayyy","anotherKey":45}
const parsedObject = JSON.parse(jsonString)
parsedObject.key
// ayyy

Слайд 35

Практика