Web приложение что это
Как работают веб-приложения
1. Чем веб-приложения отличаются от сайтов
Для меня сайт это в первую очередь что-то информационное и статичное: визитка компании, сайт рецептов, городской портал или вики. Набор подготовленных заранее HTML-файлов, которые лежат на удаленном сервере и отдаются браузеру по запросу.
Сайты содержат различную статику, которая как и HTML-файл не генерируется на лету. Чаще всего это картинки, CSS-файлы, JS-скрипты, но могут быть и любые другие файлы: mp3, mov, csv, pdf.
Блоги, визитки с формой для контакта, лендинги с кучей эффектов я тоже отношу для простоты к сайтам. Хотя в отличие от совсем статических сайтов, они уже включают в себя какую-то бизнес-логику.
А веб-приложение — это что-то технически более сложное. Тут HTML-страницы генерируются на лету в зависимости от запроса пользователя. Почтовые клиенты, соцсети, поисковики, интернет-магазины, онлайн-программы для бизнеса, это все веб-приложения.
2. Какие бывают веб-приложения
Веб-приложения можно разделить на несколько типов, в зависимости от разных сочетаний его основных составляющих:
3. Pyhon-фреймворк Django aka бэкенд
В разработке фреймворк — это набор готовых библиотек и инструментов, которые помогают создавать веб-приложения. Для примера опишу принцип работы фреймворка Django, написанного на языке программирования Python.
Первым этапом запрос от пользователя попадает в роутер (URL dispatcher), который решает какую функцию для обработки запроса надо вызвать. Решение принимается на основе списка правил, состоящих из регулярного выражения и названия функции: если такой-то урл, то вот такая функция.
Функция, которая вызывается роутером, называется вью (view). Внутри может содержаться любая бизнес-логика, но чаще всего это одно из двух: либо из базы берутся данные, подготавливаются и возвращаются на фронт; либо пришел запрос с данными из какой-то формы, эти данные проверяются и сохраняются в базу.
Данные приложения хранятся в базе данных (БД). Чаще всего используются реляционные БД. Это когда есть таблицы с заранее заданными колонками и эти таблицы связаны между собой через одну из колонок.
Данные в БД можно создавать, читать, изменять и удалять. Иногда для обозначения этих действий можно встретить аббревиатуру CRUD (Create Read Update Delete). Для запроса к данным в БД используется специальный язык SQL (structured query language).
В Джанго для работы с БД используются модели (model). Они позволяют описывать таблицы и делать запросы на привычном разработчику питоне, что гораздо удобнее. За это удобство приходится платить: такие запросы медленнее и ограничены в возможностях по сравнению с использованием чистого SQL.
Полученные из БД данные подготавливаются во вью к отправке на фронт. Они могут быть подставлены в шаблон (template) и отправлены в виде HTML-файла. Но в случае одностраничного приложения это происходит всего один раз, когда генерируется HTML-страница, на который подключаются все JS-скрипты. В остальных случаях данные сериализуются и отправляются в JSON-формате.
4. Javascript-фреймворки aka фронтенд
Клиентская часть приложения — это скрипты, написанные на языке программирования Javascript (JS) и исполняемые в браузере пользователя. Раньше вся клиентская логика основывалась на использовании библиотеки JQuery, которая позволяет работать с DOM, анимацией на странице и делать AJAX запросы.
DOM (document object model) — это структура HTML-страницы. Работа с DOM — это поиск, добавление, изменение, перемещеие и удаление HTML-тегов.
AJAX (asynchronous javascript and XML) — это общее название для технологий, которые позволяют делать асинхронные (без перезагрузки страницы) запросы к серверу и обмениваться данными. Так как клиентская и серверная части веб-приложения написаны на разных языках программирования, то для обмена информацией необходимо преобразовывать структуры данных (например, списки и словари), в которых она хранится, в JSON-формат.
JSON (JavaScript Object Notation) — это универсальный формат для обмена данными между клиентом и сервером. Он представляет собой простую строку, которая может быть использована в любом языке программирования.
Сериализация — это преобразование списка или словаря в JSON-строку. Для примера:
Десериализация — это обратное преобразование строки в список или словарь.
С помощью манипуляций с DOM можно полностью управлять содержимым страниц. С помощью AJAX можно обмениваться данными между клиентом и сервером. С этими технологиями уже можно создать SPA. Но при создании сложного приложения код фронтенда, основанного на JQuery, быстро становится запутанным и трудно поддерживаемым.
К счастью, на смену JQuery пришли Javascript-фреймворки: Backbone Marionette, Angular, React, Vue и другие. У них разная философия и синтаксис, но все они позволяют с гораздо большим удобством управлять данными на фронтенде, имеют шаблонизаторы и инструменты для создания навигации между страницами.
HTML-шаблон — это «умная» HTML-страница, в которой вместо конкретных значений используются переменные и доступны различные операторы: if, цикл for и другие. Процесс получения HTML-страницы из шаблона, когда подставляются переменные и применяются операторы, называется рендерингом шаблона.
Полученная в результате рендеринга страница показывается пользователю. Переход в другой раздел в SPA это применение другого шаблона. Если необходимо использовать в шаблоне другие данные, то они запрашиваются у сервера. Все отправки форм с данными это AJAX запросы на сервер.
5. Как клиент и сервер общаются между собой
Общение клиента с сервером происходит по протоколу HTTP. Основа этого протокола — это запрос от клиента к серверу и ответ сервера клиенту.
Для запросов обычно используют методы GET, если мы хотим получить данные, и POST, если мы хотим изменить данные. Еще в запросе указывается Host (домен сайта), тело запроса (если это POST-запрос) и много дополнительной технической информации.
Современные веб-приложения используют протокол HTTPS, расширенную версию HTTP с поддержкой шифрования SSL/TLS. Использование шифрованного канала передачи данных, независимо от важности этих данных, стало хорошим тоном в интернете.
Есть еще один запрос, который делается перед HTTP. Это DNS (domain name system) запроc. Он нужен для получения ip-адреса, к которому привязан запрашиваемый домен. Эта информация сохраняется в браузере и мы больше не тратим на это время.
Когда запрос от браузера доходит до сервера, он не сразу попадает в Джанго. Сначала его обрабатывает веб-сервер Nginx. Если запрашивается статический файл (например, картинка), то сам Nginx его отправляет в ответ клиенту. Если запрос не к статике, то Nginx должен проксировать (передать) его в Джанго.
К сожалению, он этого не умеет. Поэтому используется еще одна программа-прослойка — сервер приложений. Например для приложений на питоне, это могут быть uWSGI или Gunicorn. И вот уже они передают запрос в Джанго.
После того как Джанго обработал запрос, он возвращает ответ c HTML-страницей или данными, и код ответа. Если все хорошо, то код ответа — 200; если страница не найдена, то — 404; если произошла ошибка и сервер не смог обработать запрос, то — 500. Это самые часто встречающиеся коды.
6. Кэширование в веб-приложениях
Еще одна технология, с которой мы постоянно сталкиваемся, которая присутствует как веб-приложениях и программном обеспечении, так и на уровне процессора в наших компьютерах и смартфонах.
Cache — это концепция в разработке, когда часто используемые данные, вместо того чтобы их каждый раз доставать из БД, вычислять или подготавливать иным способом, сохраняются в быстро доступном месте. Несколько примеров использования кэша:
Что такое веб-приложение: определение и ключевые преимущества
Веб-приложение тоже работает через браузер, и визуально похоже на сайт, но в отличие от сайта, имеет более сложную логику и функционал (личные кабинеты, функционал с ограничением доступа, расчеты, формирование отчетов и др.). Поэтому не всякая команда, которая делает сайты, может создать веб-приложение.
Наглядные примеры
К примеру, возьмем Microsoft Office. Это приложение, которое устанавливается на ваш компьютер. А теперь посмотрим на его аналог — Google Docs. Это тоже программа, только находится она на удаленном сервере (не на вашем ПК), а доступ к ней возможен только через Интернет. Поэтому Google Docs относится к веб-приложениям.
Еще один пример. Adobe Photoshop — приложение для обработки изображений. Для работы с ним его нужно скачать с сайта и установить на ваш компьютер. А вот у похожего на фотошоп сервиса Figma есть веб-приложение, которое работает через Интернет, не требует скачивания и установки.
Веб-приложение — это программное обеспечение, которое хранится на удаленном сервере и доступно через Интернет. Собственно такой подход принято называть «Программное обеспечение как услуга» (SaaS). 
Отличия веб-приложений от сайтов и мобильных приложений
Веб-приложения позволяют сотрудникам создавать документы и изображения, обмениваться информацией и совместно работать над проектами независимо от местоположения или устройства. Сайты же обычно имеют стандартный и несложный набор функций.
Мобильные приложения разрабатываются под какую-то платформу (Android или iOS) и требуют установки на устройство. А веб-приложения доступны пользователю без скачивания, вне зависимости от устройства и браузера пользователя.
Ключевые преимущества веб-приложений
Вывод
Распространение Интернета среди компаний и частных лиц повлияло на способ ведения бизнеса. Это привело к широкому распространению веб-приложений по мере того, как компании переходят от традиционных моделей к облачным и сетевым моделям. Веб-приложения дают компаниям возможность оптимизировать свои операции, повысить эффективность и сократить расходы.
Онлайн-приложения, такие, как почтовые клиенты, текстовые редакторы, электронные таблицы и другие программы, предоставляют те же функции, что и версии для настольных компьютеров. Однако у них есть дополнительное преимущество, заключающееся в том, что они работают на нескольких платформах, имеют более широкий охват и легко доступны из любого места.
Что такое веб-приложения, виды и их преимущества
Руководитель отдела веб-разработки
Время чтения: 10 минут
Отправим вам статью на:
Что такое веб-приложение?
В отличие от вебсайта, веб-приложение — это полноценная программа, доступ к которой пользователь получает через интернет, то есть она не требует установки на устройство. Веб-приложение интерактивно и позволяет пользователям взаимодействовать с разными элементами: например, оставить заявку на покупку товара, оформить покупку авиабилета или прокомментировать пост друга.
Вы можете создать веб-приложение практически в любой сфере, и все они могут приносить пользу и клиентам, и бизнесу. Вот несколько идей веб-приложений :
Виды веб-приложений
Веб-приложения можно классифицировать по-разному: в зависимости от их функционала и назначения. Давайте подробнее разберем эти типы приложений, чтобы лучше понимать, как они работают и какое подойдет для ваших бизнес-задач.
Есть три основных шаблона построения сайтов:
Чтобы подробнее узнать про различия, преимущества и недостатки SPA, MPA и PWA, читайте нашу статью: “ Что такое SPA, MPA и PWA ”.
Другая классификация основана на предназначении веб-приложений. Вот самые популярные виды приложений для бизнеса:
Принципы работы веб-приложений
Веб-приложения работают по принципу “клиент-сервер”. В данном случае клиент-браузер связывается с веб-сервером посредством сети. Содержание веб-приложения на устройстве пользователя формируется, когда он отправляет определенный запрос.
В зависимости от типа веб-приложения принципы их работы могут отличаться:
Преимущества веб-приложений
Экономия
В ходе разработки вам не придется создавать отдельные приложения для разных операционных систем — они работают одинаково в любых браузерах: Internet Explorer, Opera, Safari, Google Chrome и т.д.
Безопасность
Веб-система имеет единую точку входа, поэтому вы можете централизованно настроить ее защиту. Кроме того, данные пользователей хранятся в облаке, поэтому при повреждении жесткого диска информация уцелеет.
Доступ с разных устройств
Пользователь может взаимодействовать с веб-приложением через компьютер, смартфон, планшет и т. д. Главное — доступ к интернету.
Отсутствие клиентского ПО
Пользователям не нужно ничего скачивать и, что еще более важно, обновлять. Вы можете менять клиентский интерфейс, а обновление до последней версии произойдет при очередной загрузке страницы.
Масштабируемость
Даже если нагрузка на систему увеличится, вам не придется наращивать мощность клиентских мест. Обычно веб-приложения могут обрабатывать большее количество данных только силами аппаратных ресурсов, поэтому вам не придется переписывать код и менять архитектуру.
Как разработать веб-приложение
Для создания web приложений нужны разнообразные инструменты, которые помогут создать структуру, красиво оформить продукт и сделать его интерактивным. Вот основные технологии разработки веб-приложений :
Разработка веб-приложений включает в себя несколько шагов и может быть достаточно долгим и трудоемким процессом. Вот основные этапы web разработки :
Подпишитесь
Оставьте адрес, и каждый месяц мы будем высылать свежую статью
о новых трендах в разработке програмного обеспечения.
Web Apps: быстро, дёшево, круто
Каждый Web App (веб-апп) — это маленькое и весёлое фронтенд-приключение.
Однажды в iFunny мы устроили «веб-апп марафон», развлекли миллионы пользователей и попутно заработали много денег. А теперь готовы рассказать, как же это всё было.
Для начала представлюсь. Меня зовут Антон, я тимлид фронтенд-команды FunCorp.
И в этой статье я поделюсь опытом разработки интерактивных веб-приложений на базе мобильного WebView.
Web App View
WebView — это встроенный в мобильное приложение браузер.
А если есть браузер, значит, есть и обширные возможности HTML5, JS, CSS.
Это в теории. А как же на самом деле?
А на самом деле нас интересовали и другие вопросы:
Web App #1: Hellowinner
В те времена команда состояла из двух человек и над всеми веб-аппами работал я один. С момента моего присоединения к команде прошло два месяца, поэтому с корабля я прямиком попал на «веб-апп бал».
Первое приложение было подготовлено к 31 октября — дню празднования Хеллоуина. С помощью мини-игры с двумя кнопками планировалось пощекотать нервы пользователям и вызвать вот такую реакцию:
Само же приложение выглядело вот так:
Пользователи с азартом ловили кнопку, приложение насмешливо приглашало делать это ещё быстрее. В момент Х на экране внезапно появлялась анимация с криками, звуками и вибрациями, что вызывало бурю эмоций. И не только у пользователей: при взгляде на этого зайца меня и сейчас слегка передергивает.
Технологический стек был простым:
Генератор Harp предоставил полную инфраструктуру из коробки, так что я написал код, сгенерировал статичный сайт с CSS, HTML, JS, положил всё это дело на CDN, завернул в WebView и радовался. И было чему: первый опыт с веб-приложениями дал такой пик посещаемости, что позже каждый product-менеджер считал своим долгом придумать что-то интересное.
Web App #2: Putin vs Trump
Частично эта история упоминалась в статье про фейлы. Пришло время рассказать, как же всё было на самом деле.
В следующем веб-аппе было решено проводить опросы пользователей. Разумеется, в любимом формате — на скользкие и горячие темы. Первый опрос назывался President you want, и в нём нужно было выбрать Путина или Трампа.
В отличие от первого приложения, второе подразумевало наличие серверной части и работу с базой данных. На тот момент думалось, что это довольно просто и я, будучи фронтенд-разработчиком, справлюсь. Справился. С некоторыми оговорками.
В качестве базы данных я использовал MongoDB: API для мобильных клиентов iFunny крутился именно на данной системе, был готовый кластер, и выбор был очевиден. Express.js был выбран в качестве серверного фреймворка. Все тот же Jade (Pug) в качестве шаблонизатора, LESS в качестве препроцессора и сборка статики с помощью Gulp.
В первые часы после запуска нового приложения проголосовало свыше миллиона пользователей. И тут произошел курьёз: сумма процентов перевалила за 100%. Не 146% конечно, рядом.
Вместо того чтобы использовать стандартный инкремент из базы данных, я использовал банальное «текущее значение = текущее значение + 1». А про такое понятие, как конкурентность запросов, узнал вообще только в продакшене. Ну да, пустили слона в посудную лавку.
Получилось смешно, и пользователи восприняли это как хорошую шутку.
Я же исправлял ошибки глубокой ночью, дрожащими руками и с матами. Эти 10 тысяч запросов в секунду преподали хороший урок, и я пообещал себе больше так не делать.
Тот самый опрос, исправленный:
Web App #3: Booby Bird
После внушительных успехов предыдущих веб-аппов было решено запустить полноценную HTML5-игру. А так как в отделе по-прежнему работало 2 человека, разработка была поручена китайскому фрилансеру, которого нашли продакт-менеджеры.
Парень — молодец, постарался на славу:
Мой оптимизм окончательно иссяк после того, как приложение наотрез отказалось запускаться на боевом домене. В итоге, я перенес код на уже проверенный Express.js и, насколько смог, внес заплатки в обфусцированный клиентский код. Игра ожила. Уже тогда было понятно, что конструкция хрупкая и держится на честном слове.
В конце игры был рейтинг лучших игроков и, разумеется, его сломали через 10 минут после релиза. Пользователи раскопали ссылку на сохранение результатов и массово принялись менять в ней значения. Я выпустил обновление, в котором персонализировал ссылку с помощью JWT-токена, и массовое окучивание топа закончилось.
Вот только я не мог защитить код, который целиком и полностью попадал к пользователю: обфускация разбиралась, а запросы по сети просматривались в соответствующих утилитах. Отдельные юзеры, которые умели пользоваться снифферами, снова разобрали ссылку с результатами и много разной ерунды туда послали. За что потом сами были отправлены в бан, благо идущий в комплекте JWT-токен оказался им не по силам.
Этот веб-апп всё же набрал приличное количество просмотров и, к нашему удивлению, имел очень длинный хвост повторных заходов.
Web App #4: Holiday Giveaway
На один из самых любимых американцами праздников — Рождество — была устроена лотерея, в которой разыгрывались приставки, подарочные карты, камеры, футболки и ряд других приятностей. Всего было проведено 4 розыгрыша, каждый в строго определённое время. После проведения очередного розыгрыша открывалась регистрация на следующий.
«Под капотом» были все те же Express.js, Jade (Pug), LESS. Ожидался большой пик посещаемости, и в качестве базы данных я использовал отдельный кластер MongoDB. И даже провел нагрузочное тестирование, чтобы вот в этот раз все точно получилось как надо. Ну, вы понимаете.
Веб-апп показал отличные результаты: около 3 миллионов участников уже в первом туре. Вот только вместе с успехом пришли и трудности.
Сначала проблема возникла в связке NGINX и PM2, который использовался для управления инстансами приложения. Мне искренне было страшно, я вообще не понимал, что делать: HTML5, CSS, JS, а тут какие-то таймвейты в сети, озадаченные DevOps-инженеры и молчаливый требовательный взгляд технического директора. Спустя некоторое время проблема была устранена, а до следующего розыгрыша призов был запас времени. Я наивно начал полагать, что теперь всё хорошо, отмучился.
И тут снова проблема: встроенный в серверную часть планировщик отказался делать второй розыгрыш. По какому-то наитию я решил проверить результаты работы скрипта и оказалось, что они отсутствовали. За окном была луна, локально дебажить проблему не получалось — всё работало, а время неумолимо шло против меня: приближалась публикация результатов второго розыгрыша. Спасло то, что я предусмотрительно оставил возможность ручного запуска. За минуту до публикации результатов розыгрыша я запустил скрипт, убедился, что он корректно отработал, и выдохнул.
Далее последовали бессонные ночные часы, в которых я держался как мог: смотрел фильмы, пробовал увлечься поиском ошибки, дремал в обнимку с будильником. В 3 часа ночи я запустил финальный розыгрыш, ещё раз всё перепроверил и уснул.
Такие жертвы были оправданы: спустя 24 часа у веб-аппа было более 12 миллионов просмотров, тысячи комментариев и большой шум по социальным сетям. Пользователи сильно взбудоражились: им определённо понравилось приложение. Да и мне понравилось, что скрывать.
Минусы и плюсы веб-аппов
За период с сентября по декабрь было сделано 6 веб-аппов. И каждый из них дал хорошие результаты. «Веб-апп марафон» позволил ответить на все интересующие вопросы, в том числе на самый важный: да, это определённо стоящая тема, чтобы продолжать ей заниматься.
Сейчас разработка веб-аппов уже поставлена на поток: за прошедший 2017 их было 94, а по количеству сессий что-то около 101 миллиона. Кстати, большую часть можно посмотреть по ссылке.
Я же, в свою очередь, понял кое-что про работу в продуктовой компании.
Когда решался вопрос со сменой работы, я морально готовился к тому, что делать один продукт — это скучно, и мне скорее всего предстоит «пилить сайт» ближайшие 2 года. Когда же пришлось делать веб-аппы, обжигаться инкрементом, видеть больше 10К реквестов в секунду, руками ночью запускать скрипты — понял, как ошибался. Мне действительно приходилось «пилить продукт», правда, каждую неделю — новый. А это отличный фан и приличное развитие навыков.
К слову, те «ближайшие 2 года» мне всё-таки предстояло «пилить сайт», только в качестве новоиспеченного лида формировавшейся с нуля фронтенд-команды. Этот опыт повеселей веб-аппов будет. О нём расскажу в следующей статье.
Урок 1. Web-приложение: понятие, компоненты и принципы работы
1. Сущность web-приложения
2. Пятиуровневая структура сети
3. Сетевые сервисы
4. История развития web-приложений
5. Типы web-приложений
6. Принцип работы web-приложений
7. HTTP-протокол
Десктопные приложения предполагают установку клиента на стороне пользователя. В зависимости от типа операционной системы, процессора, видеокарты и других параметров могут потребоваться разные версии программы. Это создает определенные неудобства как разработчикам (им требуется постоянно выискивать баги в разных средах, расширять объем кода для учета всех возможных комбинаций железа клиента), так и пользователям (необходимо скачивание постоянных обновлений, новое железо с той операционной системой, которую поддерживает приложение).
Наиболее динамично на сегодня развиваются web-приложения, так как они для своей работы требуют только установленный браузер на клиентской стороне. Они:
Чтобы сообщение от вашего компьютера дошло к пользователю на другом конце планеты, используется сложная структура передачи сетевых данных на нескольких уровнях.
1. Физический уровень
2. Канальный уровень
Канальный уровень отвечает за соединение устройств одной сети (локальной). Здесь используется два популярных протокола:
3. Сетевой уровень
На основании адресов устройств сети мы можем подключаться к сайтам, серверам, почтовым клиентам и получать требуемую информацию. Существует 2 протокола IP : 4-ой и 6-ой версий. В ближайшем будущем произойдет полный переход на последнюю версию, так как версия IPv4 уже не справляется с растущим количеством компьютеров и гаджетов с доступом к сети (более того, в 2020 году в мире закончились свободные IP-адреса ).
4. Транспортный уровень
Транспортный уровень позволяет идентифицировать адресатов и не смешивать потоки данных. На любом ПК или мобильном устройстве может одновременно работать несколько приложений, которым требуется сетевое подключение. Согласитесь, email и MMORPG никогда не меняются местами при получении сообщений. Вы всегда уверены в том, что на почту приходит сообщение, а в игре информация характеризуется другими параметрами.
TCP гарантирует получение всей передаваемой информации (иначе возникнет ошибка), а UDP такой гарантии не дает. Так, когда вы скачиваете книгу с сайта, применяется протокол TCP (разве нужна кому-то книга кусками?), а когда смотрите стрим на ютубе, то достаточно UDP протокола (если потеряется несколько кадров, вы этого не заметите, зато качество трансляции будет высоким).
5. Уровень приложений
Уровень приложений – это, по факту, то, с чем непосредственно работает программист большую часть времени. Главная задача данного слоя – предоставить клиенту удобный интерфейс для взаимодействия с сетью и устройствами.
Здесь используется огромное количество разнообразных протоколов, среди которых:
1. HTTP (применяется браузером для получения данных с Интернета),
2. SMTP (для почтовых сервисов),
3. FTP (загрузка файлов),
4. BitTorrent (пиринговый протокол),
5. SSH (защищенное соединение).
Наиболее значимым в рамках курса является HTTP протокол, о котором пойдет речь ниже.
1 – DNS (Domain Name System, система доменных имен)
Браузеру все равно, что вы введете в адресную строку: набор чисел или имя сайта. На заре Интернета, когда было не так много сайтов, запомнить адреса 2-5 страниц было реальным. В любом случае, числа плохо укладываются в памяти, а вот слова – очень даже просто. Благодаря DNS нам не нужно помнить сочетания цифр.
К слову, узнать IP-адрес любого сайта можно в командной строке. Для Windows и UNIX-систем команда выглядит одинаково.
2 – NAT (Network Address Translation, преобразование сетевых адресов)
Одна из главных проблем в Интернете – безопасность. Никто не хочет, чтобы к его компьютеру или смартфону получил доступ злоумышленник. А ведь зная ваш адрес, сделать это достаточно просто. К чему это может привести, объяснять не требуется (кража паролей, кредитных карточек, платежных данных, личной информации).
Когда вы запрашиваете адрес какой-то страницы в Интернете, то передаете, в том числе, свой адрес. Как же защититься? Разработчики сервиса NAT это предусмотрели. На самом деле запрос к удаленному серверу идет не от имени вашего ПК. Ваш реальный адрес маскируется роутером или файрволом и передается в скрытом виде. Особенно это удобно для крупных компаний, где компьютеры объединены в сеть (запрос будет отправляться не от отдельного ПК, а от общего роутера, поэтому узнать адрес конкретной машины практически невозможно).
3 – DHCP (Dynamic Host Configuration Protocol, протокол динамической настройки узла)
Представим ситуацию, когда у предприятия имеется 100-200 ПК, которые имеют выход в сеть. Перед администратором сети стоит непосильная задача: настроить каждую машину, постоянно следить за тем, чтобы не было повторяющихся адресов, так как начнется коллизия данных.
Ознакомившись с общей структурой сети, ее сервисами, перейдем к web-приложениям и специфике их работы в этой среде. Вкратце опишем эволюцию этих сервисов.
Развитие веб-приложений напрямую связано с популяризацией Интернета. По мере появления новых технологий и инструментов совершенствовались и набирали популярность web-приложения.
Он представляет собой набор гипертекста со ссылками на основные понятия, направления развития ресурса и т.п. В сравнении с современными сетевыми проектами он выглядит просто и неказисто, но имеет историческое значение.
Долгое время web-приложения оставались простыми, так как не было инструментария и потребностей в их усложнении. Лишь только в начале 21 века они стали набирать популярность и к сегодняшнему моменту представлены огромным разнообразием.
Благодаря им каждый может оплатить коммунальные услуги в сети, пообщаться с коллегами в видеоконференции, делать онлайн-покупки, осуществлять поиск на основе своих интересов.
Понятие «сайт» в узком смысле связано со статическими страничками, содержимое которых жестко задано и выложено в сеть. Web-приложения ассоциируются с динамически генерируемым контентом в зависимости от запроса пользователя как с перезагрузкой, так и без перезагрузки страницы.
Для работы веб-приложений требуется клиентская часть ( frontend ), т.е. интерфейс, представление на экране пользователя, и серверная часть (для обработки запросов, записи в базы данных получаемых сведений).
Хоть первые web-приложения и появились в конце 20 века, до сих пор нет единой классификации их видов. Это связано с тем, что последние 5-10 лет их развитие совершило революционный скачок, породив новые разновидности.
В общем виде все web-приложения можно разбить на 5 типов. Деление в некоторой степени условное, так как возможно сочетание нескольких типов в одном приложении.
1. Серверные web-приложения
Пример чисто серверного приложения – push-уведомления (от почтовых сервисов, мессенджеров, операторов связи) в смарфонах. Клиент получает информацию, что появилось новое сообщение, письмо, изменения в тарифе, не предпринимая для этого никаких действий.
2. Клиентские web-приложения
Клиентские приложения в чистом виде не требуют серверной части и обходятся возможностями JavaScript, используя в качестве оболочки браузер пользователя. Они не сохраняют результат своей работы дольше одной сессии.
Типичные примеры таких приложений: простые игры, браузерный фоторедактор.
3. SPA приложения
Неопытный пользователь может даже посчитать, что столкнулся с десктопным приложением, так как все изменения происходят практически моментально. К слову, многие мобильные приложения используют такой подход.
4. MPA приложения
5. PWA приложения
Представим ситуацию: человек посещает некоторый сайт, который предлагает ему установить его на другие устройства. Теперь и на ПК, и в телефоне вы сможете получать уведомления, работать оффлайн, независимо от модели устройств и их мощностей.
PWA-версии приложений встречаются у многих компаний (тот же Aliexpress почти в 2 раза повысил конверсию от новых посетителей благодаря этому).