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