Step 5 (S-44700)

From Stepik Wiki
Revision as of 23:25, 5 August 2017 by Admin (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Step on Stepik: https://stepik.org/lesson/12528/step/5

Step 5 (S-44700) 1.png

[00:00 - 00:17] однако современные приложения ведут себя несколько другим образом а это не значит что все что мы говорили давит в оно неправильно но помимо этого появился новый способ взаимодействия с пользователем а так называемой аякс запрос


[00:17 - 00:33] смотрите что происходит а браузер все также загружает 1 страничку от этого никуда не деться он загружает документ а чтоб не загружает связанные ресурсы а в том числе javascript после чего


[00:33 - 00:48] запускается java скрипт который присутствует на данном а на данной странице с помощью пожалуйста фронтенд разработчик имеет возможность построить полноценный пользовательский интерфейс


[00:48 - 01:05] а в частности добавить обработчики различных действий например щелчков на кнопке изменение размеров окна а прокрутки открывания меню закрывания меню и тому подобное


[01:05 - 01:22] это позволяет пользователю менять внешний вид страницы взаимодействие взаимодействовать с не меня ее а когда javascript полностью отработан страница показывается пользователю что пользователь может сделать он как раз может щелкнуть на


[01:22 - 01:39] гиперссылку либо заполнить форму а в случае с современными приложениями а это действие перехватывается обработчиком javascript таким образом действие пользователя оно приводит не к переходу на новую страничку


[01:39 - 01:56] а в большинстве случаев оно приводит к вызову а javascript функция которая работает внутри браузера а и далее выполняется тот код который а написал фронтенд разработчик мастер


[01:56 - 02:11] этот код может делать разные вещи например он может загрузиться порцию данных а соприкасающегося либо он может отправить форму изменить какие то данные после чего


[02:11 - 02:26] javascript может перерисовать страницу то есть он может изменить содержимое веб странички без полной ее перезагрузки а схематично это отображено здесь здесь проведен


Step 5 (S-44700) 2.png

[02:26 - 02:41] скажем а крайний пример такой в котором основная страничка тоже отдает статику вот увидите остановить документ загрузки которого все начинается он отдается в виде статического файла то есть


[02:41 - 02:56] а после чего к этому документу в качестве ресурса в загружаются стиля и java скрипты вместе все вот это правда составляет интерфейс пользователя


[02:56 - 03:13] то есть все таки статические ресурсы они формируют интерфейс пользователя а когда запускается java script он делает аякс запрос то есть вот это запрос италия


[03:13 - 03:29] а я не какой то новый протокол а это а технологии зону фактически это то же самое протокол http по которому загружается все остальные ресурсы


[03:29 - 03:46] отличие в том что этот запрос инициируется с помощью java скрипта аякс расшифровывается как асинхронный javascript и сервер сервер получив запрос


[03:46 - 04:01] генерирует ответ в современных приложениях ответ часто бывает не в страничка не а что мы ели сырыми данными в формате xml


[04:01 - 04:17] то есть сервер возвращает в браузер свои данные поскольку у нас в браузере работает javascript в момент когда он их получил он обрабатывает


[04:17 - 04:37] недавно и отображает как посчитают нужным например добавляется а новый комментарий на сайте появился новый комментарий загрузил с новой странице новостей он дорисовывает часть веб интерфейса а отличительная особенность


[04:37 - 04:55] заключается в том что пользователь не теряет управление то есть примерно вот в этот момент когда а все ресурсы загружена пользователь получает может двигать мышкой делать все что угодно в тот момент когда запросу ходит поскольку он асинхронный


[04:55 - 05:10] пользователь продолжает действовать своих страничка может щелкнув на другую кнопку и мы видим что время жизни прав страничка становится намного больше фактически пользователь сидит на 1 и той же странице


[05:10 - 05:26] взаимодействовала серверов а посредством javascript то время ответа сервера также уменьшается в данном случае поскольку мы нужно возвращать а данные


[05:26 - 05:44] в простом формате json как правило это занимает намного меньше времени то есть во 1 нужно вернуть меньше данных а во 2 в более простом формате результате работа с таким в приложении становится более похожий на работу


[05:44 - 06:02] обычном десктопном клиентским приложением а давайте еще раз поговорим про особенности современных приложений в еще называют вам то что я размещаю с 1 страницы а пользовательский интерфейс находится


Step 5 (S-44700) 3.png

[06:02 - 06:20] буквально на 1 или нескольких страниц а если в классическом случае в приложение оно насчитывает в себе сотни разных страниц с разными видами интерфейсов для вам по еще такие шанс может быть всего несколько там


[06:20 - 06:39] буквально 10 зачастую пользовательский интерфейс а полностью статичен это означает что вся логика которая работает на клиенте вся логика пользовательского интерфейса она размещена статических файлов ц suggest логика а


[06:39 - 06:56] пользы использовать интерфейс работает только на клиент и сервер не занимается логикой а используется шаблонизатор javascript а позже когда будем говорить про backend мы поговорим про шаблонизатор шаблонизация это способ


[06:56 - 07:11] а получить из данных и шаблона какое то готовое а в обычном случае в классическом выпиши вырезался происходит на север для современных веб приложений one page происходит


[07:11 - 07:26] джава скрипте и данные передаются виде не ведет он либо xml то есть в чистом виде передаются данные клиент а


[07:26 - 07:42] сейчас довольно много таких приложений но это не панацея и существует большое количество промежуточных вариантов когда а приложение приложение стоит строится по


[07:42 - 08:00] классическим принципом то есть спрей для по принципу перехода между страничками но а каждого в страницы она представляет довольно много интерактивных элементов с которыми можно взаимодействовать без перезагрузки страницы


[08:00 - 08:16] хороший пример какой нибудь сайт новостей все существующие сайты новостей они классически довольно большое количество из тех что видел то есть вы можете открыть главную страницу это отдельная страница можете открыть какую то рубрику


[08:16 - 08:32] это будет переход на новую страницу потом можете открыть a страница 1 новости от опять переход на новую страницу но если вы захочете захотите написать а комментарий к новости либо поставить лайк


[08:32 - 08:49] либо добавить знаю там поставь какую то оценку новость это скорее всего будет выполнена с помощью аякса технологии то есть без перезагрузки веб страница таким образом вы сможете продолжить чтение новость а


[08:49 - 09:05] итак мы поговорили о том что существует классический сценарий работы когда каждое взаимодействие с пользователем оно приводит к переходу на другую страницу и существует а современный подход к веб приложения когда


[09:05 - 09:23] пользовательский интерфейс загружается на 1 странице после чего с помощью технологии java скрипты аякс а пользовательский интерфейс загружает сервера чистые данные и также есть промежуточные варианты которые довольно широко распространены сегодня