13 ноября 2016

Эволюция Web приложений для чайников


Большинство людей, пользующихся Web приложениями сегодня, не являются системными администраторами, программистами, учёными естественно-научных дисциплин и даже просто техническими специалистами в компьютерной области и вполне резонно называют себя "чайниками". Тем не менее, многие из них интересуются, каким образом Web приложения умеют работать без Интернет, без браузера и в тоже самое время позволяют редактировать файлы на облачном диске.



К сожалению, Web технологии в настоящее время стали настолько сложны, что можно с уверенностью утверждать, что не существует на Земле человека, который знал бы их все. Физически просто не реально хотя бы раз в жизни прочитать документацию даже по пяти наиболее значимым Web технологиям, каждая из которых опирается на десятки стандартов и сотни библиотек (API). По этой причине коротко и в тоже время полностью технически корректно объяснить не специалисту суть поведения Web приложения в конкретной ситуации практически не представляется возможным. Здесь либо коротко, либо технически корректно (последнее займёт недели, месяцы или годы в зависимости от глубины восприятия).

Тем не менее, далее я хочу привести самое короткое описание эволюции Web технологий для полных чайников, которое объясняет почему "совершенно невозможное" - не только возможно, но и является стандартом для Web приложений. Ввиду вышеизложенных причин, всё описанное ниже никак не претендует на полноту изложения и техническую корректность по Гамбургскому счёту, а специально максимально упрощено для восприятия рядовым пользователем ОС Windows.

Первое поколение Web приложений


Изначальная цель создания World Wide Web (коротко WWW или Web) состояла в том, чтобы обеспечить единую стандартизованную систему публикации научных документов, независимо от аппаратной платформы (компьютера), операционной системы (ОС) и даже конкретного программного обеспечения (ПО). По этой причине в качестве универсального носителя информации был разработан язык HTML (гипертекст), который представляет собой обычный текст, в который можно вставить теги (текст в угловых скобках), описывающий переходы (гиперссылки). Гипертекстовый файл также может содержать теги со ссылками на картинки, но для упрощения далее в этой статье будем понимать выражение "показать текст" в смысле "отобразить основной текст, а также загрузить картинки вместо соответствующих тегов".

Web приложение первого поколения могло состоять всего из одного файла:

index.html

Если в своём браузере вы в адресной строке наберёте какую-либо ссылку (адрес сайта), то ваш браузер обратиться к Web серверу по указанному адресу и загрузит файл index.html. Далее браузер отобразит на экране текст из файла index.html фактически в первозданном виде (только найденные в тексте теги будут заменены разметкой, картинками или гиперссылками).

Второе поколение Web  приложений



Несмотря на то, что уже первое поколение Web приложений полностью решило изначальную задачу, внешний вид страниц оставлял желать много лучшего (не всем достаточно чёрного текста на белом фоне с редкими графиками (картинками)). По этой причине первоначальную задачу решили переформулировать так: "обеспечить публикацию любых двухмерных документов, чтобы было красиво". Для этих целей, в дополнение к стандарту HTML (гипертекст) ввели стандарт CSS (стили), который описывает, каким образом должен отображаться на экране текст из файлов HTML (всякие отступы, рамочки, заливки и т.п.)
Web приложение второго поколения обычно могло состоять всего из двух файлов:

index.html
styles.css
Теперь, при переходе по ссылке на какой-либо сайт, происходит следующее:
1) Браузер сначала загружает заголовок гипертекстового файла index.html, где находит путь к файлу стилей styles.css
2) Браузер полностью загружает файл стилей styles.css
3) Браузер загружает основное тело гипертекстового файла index.html и отображает текст согласно установкам в файле стилей.

Третье поколение Web  приложений



Если гипертекст хорошо разбавить картинками и приукрасить стилями, то он выглядит вполне сносно для большинства деловых применений, однако была одна проблема, а именно, при каждом нажатии на гиперссылку вся эта красота должна была загружаться полностью заново, поэтому даже простейшее меню на сайте, где более одной страницы было пыткой (через коммутируемое модемное соединение). По этой причине задачу для Web приложений решили переформулировать так: "обеспечить публикацию любых двухмерных документов, чтобы было красиво и быстро (интерактивно)".
Для решения данной задачи, в дополнение к стандартам HTML (гипертекст) и CSS (стили), ввели стандарт JavaScript (скрипт), основная цель которого тогда была в том, чтобы обрабатывать нажатия пользователя в окне браузера и модифицировать текущую гипертекстовую страницу "на лету", отменяя таким образом необходимость загружать новую страницу по каждому клику мышкой. Введение JavaScript (скриптов) таким образом не только позволило "ускорить Web в разы", но и придать ему интерактивности. Теперь, страницы гипертекста уже не были статичными, а могли меняться в зависимости от действий пользователя или от потока данных. Например, вы могли сделать сайт в виде электронной таблицы (Google Sheets) в которую можно было вводить данные, осуществлять расчёты и выводить результаты в реальном масштабе времени, ни разу не перегружая заново основную страницу сайта.

Web приложение третьего поколения уже включало файлы трёх типов:

index.html
styles.css
main.js
Теперь, при переходе по ссылке на какой-либо сайт, стало происходить следующее:
1) Браузер сначала загружает заголовок гипертекстового файла index.html, где находит путь к файлам стилей (styles.css) и файлам скриптов (main.js)
2) Браузер в случайном порядке загружает файлы стилей (styles.css) и скриптов (main.js)
3) Браузер загружает основное тело гипертекстового файла index.html и отображает текст согласно установкам в файле стилей. При этом в памяти браузера создаётся модель документа (DOM), которая становиться доступна скриптам для редактирования.
4) При любых действиях пользователя на странице, для которых описаны функции в скрипте, запускается соответствующая функция из main.js (скрипта), которая модифицирует в памяти браузера модель документа (DOM) и браузер мгновенно перерисовывает страницу (документ) из памяти. Поскольку скрипт и отрисовка страницы работают очень быстро, то у пользователя создаётся впечатление непрерывности действия. Это позволяет создавать первые Web игры и другие интерактивные приложения.

Третье поколение Web приложений просуществовало без критически важных структурных изменений дольше всех остальных, однако, несмотря на неизменность структуры Web приложения и его основного функционального смысла, внутри всех основных стандартов успели произойти просто эпические изменения:
Стандарт HTML (гипертекст) стал поддерживать теги не только для картинок, но для аудио, видео и даже 3D графики.
Стандарт CSS (стили) стал поддерживать не только статические стили, но динамические, включая анимацию гипертекста.
Стандарт JavaScript (скрипт) стал поддерживать внедрение нативного кода (ассемблера), классов, поддержку всевозможных переферийных устройств (от принтеров, до роботов) и т.д.

В результате этих поистине эпических изменений Web стандартов, в качестве Web приложений третьего поколения появились 3D игры, CAD системы, CRM/ERP системы, видео хостинги, аудио редакторы, системы управления промышленными предприятиями (станки ЧПУ, роботы), облачные диски и офисные пакеты.

Четвёртое поколение Web  приложений



Казалось бы, Web приложения уже и так могут делать всё, что угодно, но многие люди до сих пор предпочитают нативные приложения на мобильных устройствах. Дело в том, что несмотря на то, что Web приложения третьего поколения могут спокойно работать в сети на смартфонах, не хуже локальных приложений, их трудно найти и запустить (мало кому хочется набирать ссылку в браузере на маленьком экране). В итоге требование к Web приложениям превратилось в следующее: "А теперь, пожалуйста, всё тоже самое, но без браузера".

Для решения данной задачи Google предложил дополнить Web приложение файлом manifest.json (манифестом), который описывал поведение Web приложения при локальной установке и продаже через магазин приложений. Теперь пользователь может с любого устройства, включая смартфон, зайти в магазин приложений, например Google Apps Marketplace, найти там понравившееся приложение и установить его одним кликом. После чего на экране десктопа, планшета, смартфона появится ярлык для запуска этого приложения. При этом, при нажатии на этот ярлык Web приложение будет открываться в оригинальном окне или на весь экран и может использовать только стандартные средства ввода для ОС, так что если пользователь не знает, что работает с Web приложением, он может даже этого не понять. 

Web приложение четвёртого поколения включает минимум четыре файла:

index.html
styles.css
main.js
manifest.json
Теперь, при переходе по ссылке на какой-либо сайт, либо в магазин приложений происходит следующее:
1) При неоднократном посещении Web сайта вверху страницы появляется диалоговое окно, предлагающее установить приложение на компьютер. Если пользователь хочет установить Web приложение локально, он нажимает кнопку "Установить" (или кнопку "Добавить" - зависит от версии Web приложения).
2) При посещении магазина Web приложений, если пользователь хочет установить Web приложение локально, он нажимает кнопку "Установить" (или кнопку "Добавить" - зависит от версии магазина приложений).
3) При установке Web приложения на локальном компьютере создаётся ярлык, указывающий на сайт Web приложения, иконка которого, равно как и параметры запуска в оригинальном окне (без интерфейса браузера) берутся из файла manifest.json

После установки Web приложения, при клике на ярлык приложения происходит следующее:
1) Браузер запускается в особом режиме (без видимых элементов интерфейса) и ему передаются параметры Web приложения (поэтому у пользователя создаётся впечатление, что приложение работает без браузера).
2) Браузер сначала загружает заголовок гипертекстового файла index.html, где находит путь к файлам стилей (styles.css) и файлам скриптов (main.js)
3) Браузер в случайном порядке загружает файлы стилей (styles.css) и скриптов (main.js)
4) Браузер загружает основное тело гипертекстового файла index.html и отображает текст согласно установкам в файле стилей. При этом в памяти браузера создаётся модель документа (DOM), которая становиться доступна скриптам для редактирования.
5) При любых действиях пользователя на странице, для которых описаны функции в скрипте, запускается соответствующая функция main.js (скрипта), которая модифицирует в памяти браузера модель документа (DOM) и браузер мгновенно перерисовывает страницу (документ) из памяти. Таким образом можно создавать любые динамические приложения.

Пятое поколение Web  приложений



Web приложения четвёртого поколения устанавливаются и прекрасно работают на любых устройствах, подключенных к Интернет, включая смартфоны. Причём под час работают настолько хорошо, что большинство пользователей даже не догадывается о том, что работают с Web приложением. Например, как давно вы узнали, что Google Maps на смартфонах Android является Web приложением? Да-да, то самое приложение, где красивая 3D карта с сенсорным интерфейсом, а также поддержка GPS и Wi-Fi.
Тем не менее, есть ещё на Земле регионы, где Интернет то есть, то не очень. Кроме того, есть Microsoft, который в ярости от того, что Google с его Web приложениями на Android выбил его полностью с мобильного рынка и уже несколько лет крутит чёрную телерекламу в США, о том, что Web приложения, не являются настоящими локальными приложениями, раз им Интернет постоянно нужен.
В итоге требование к Web приложениям превратилось в следующее: "А теперь, пожалуйста, всё тоже самое, но ещё и без Интернет".

Предложенное Google и Mozilla решение данной задачи оказалось достаточно простым и эффективным. В дополнение к существующим Web стандартам в браузеры Google Chrome и Mozilla Firefox внедрена поддержка Service Worker (сервисы). Теперь при любом запуске Web приложения, на локальном компьютере, планшете, смартфоне запускаются сервисы (sw.js или background.js), которые первоначально выкачивают из Интернет минимально необходимый набор файлов Web приложения для полностью локальной работы, а потом постоянно мониторят соединение с Интернет. В случае пропадания Интернет, сервисы полностью перехватывают поток данных локально запущенного Web приложения, выдавая ему предварительно закешированные файлы от имени Web сервера, а также генерируя ответы, которые в контексте текущего состояния Web приложения, позволяют создать у пользователя полное впечатление, что Интернет никуда и не пропадал, так как он может спокойно просматривать и редактировать информацию в Web приложении даже при полном отсутствии связи.

Web приложение пятого поколения включает как правило пять основных файлов:

index.html
styles.css
main.js
manifest.json
sw.js
Теперь, при переходе по ссылке на какой-либо сайт, либо в магазин приложений происходит следующее:
1) При неоднократном посещении Web сайта вверху страницы появляется диалоговое окно, предлагающее установить приложение на компьютер. Если пользователь хочет установить Web приложение локально, он нажимает кнопку "Установить" (или кнопку "Добавить" - зависит от версии Web приложения).
2) При посещении магазина Web приложений, если пользователь хочет установить Web приложение локально, он нажимает кнопку "Установить" (или кнопку "Добавить" - зависит от версии магазина приложений).
3) При установке Web приложения на локальном компьютере создаётся ярлык, указывающий на сайт Web приложения, иконка которого, равно как и параметры запуска в оригинальном окне (без интерфейса браузера) берутся из файла manifest.json
4) При первом запуске Web приложения на локальном компьютере устанавливаются (регистрируются) сервисы приложения (sw.js). При этом, сервисы при установке тут же выкачивают из Интернет все остальные исполняемые файлы и данные Web приложения,  необходимые для полноценной offline работы, сохраняя их в кэше браузера.

После установки Web приложения, при клике на ярлык приложения происходит следующее:
1) Браузер запускается в особом режиме (без видимых элементов интерфейса) и ему передаются параметры Web приложения (поэтому у пользователя создаётся впечатление, что приложение работает без браузера).
2) Браузер открывает соединение с сайтом Web приложения через сервисы (sw.js), которые установлены локально ранее.
3) Сервисы (sw.js) проверяют наличие соединения с сайтом Web приложения. Если такое соединение есть, то они могут передать на сервер данные, введённые пользователем, пока он был в offline режиме, а также обновить свой кеш, либо возобновить ранее прерванную загрузку файлов, при неожиданном пропадании Интернет или выключении компьютера.
4) Сервисы (sw.js) начинают отдавать в поток приложения свежие (при наличии Интернет), либо кешированные копии файлов.
5) Браузер сначала загружает заголовок гипертекстового файла index.html, где находит путь к файлам стилей (styles.css) и файлам скриптов (main.js)
6) Браузер в случайном порядке загружает файлы стилей (styles.css) и скриптов (main.js)
7) Браузер загружает основное тело гипертекстового файла index.html и отображает текст согласно установкам в файле стилей. При этом в памяти браузера создаётся модель документа (DOM), которая становиться доступна скриптам для редактирования.
8) При любых действиях пользователя на странице, для которых описаны функции в скрипте, запускается соответствующая функция main.js (скрипта), которая модифицирует в памяти браузера модель документа (DOM) и браузер мгновенно перерисовывает страницу (документ) из памяти.
9) При возобновлении/пропадании соединения с Интернет в любой момент времени, сервисы (sw.js) мгновенно подстраиваются под работу в online/offline режиме без обрыва потока к Web приложению, поэтому пользователь может заметить пропадание соединения с Интернет только при совместной работе над документом с другими пользователями (у них как бы наступит перерыв). При индивидуальной работе с документом Web приложение будет работать также стабильно, как если бы вы редактировали файл документа с помощью локального приложения на локальном компьютере. По этой причине вы можете использовать такие Web приложения, как Google Docs полностью offline, если вы редактируете файл, который был закеширован ранее.