что такое веб приложение пример

Как работают веб-приложения

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 — это концепция в разработке, когда часто используемые данные, вместо того чтобы их каждый раз доставать из БД, вычислять или подготавливать иным способом, сохраняются в быстро доступном месте. Несколько примеров использования кэша:

Источник

Веб-приложение

9 ноября 2017 Опубликовано в разделах: Азбука терминов. 53217

Практически любой интернет-ресурс входит в их число. Это поисковые системы, видео сервисы типа youtube, соцсети, любые веб-сайты с функциями аутентификации пользователя, покупки, заказа, бронирования, калькуляторы кредитов.

Как работает веб-приложение

Технически это интернет-приложение с архитектурой «клиент-сервер». Чтобы понять принцип, давайте вспомним основные элементы такой архитектуры.

Клиентом служит браузер, сервером — веб-сервер. Связь происходит посредством сети. Представьте, что web-приложение состоит изначально из страниц с частично либо полностью неопределенным содержимым. Итоговое содержание веб-страниц сформируется тогда, когда конкретный пользователь отправит запрос.

Страницы, которые мы видим в браузере, могут быть статическими и динамическими.

Статическая web-страница отображается для всех посетителей одинаково. Как это работает:

В случае с динамическими страницами схема выглядит так:

Технические аспекты

Среди нефункциональных важны:

Классификация

Веб приложения можно разделить на виды в зависимости от технологий создания, а также по назначению.

Остановимся подробно на популярных и востребованных.

Основное преимущество такого подхода в том, что web-страницы не обновляются со всеми данными заново, а лишь подгружают нужное с сервера, это повышает производительность и степень интерактивности. Один из принципов работы — подгрузка JavaScript. Удобно применять в интернет-магазинах, сайтах-каталогах, любых крупных интернет-проектах, требующих обработки больших массивов данных.

Также различают такие технологии, как ASP, JSP, CGI. Они могут быть разработаны на любом языке программирования, например, PHP, Java и т.д.

По назначению веб-приложения условно можно разделить в зависимости от сферы применения. Почему условно? Как мы выяснили выше, любой интерактивный сайт – это онлайн-приложение. Соответственно, таких сфер, тематик и классификаций можно придумать множество.

CRM — система управления проектами, направленная на автоматизацию обработки полного спектра информации о клиентах и товарах.

Подобные решения — это комплексный продукт, объединяющий функции баз данных, почты, календаря, учета финансов и другие. В них могут быть интегрированы, в зависимости от потребностей, различные модули: управленческой отчетности, бухгалтерии, учета кадров и т.д.

CRM являются основой бизнеса телемаркетинговых компаний и колл-центров. Незаменимы, когда нужно настроить проектную работу с четким разделением по ролям и зонам ответственности, взаимодействие между отделами, работу с клиентами. Это актуально для банков, агентств маркетинговых коммуникаций, компаний-разработчиков IT, онлайн-магазинов товаров и услуг.

Более заточенный под потребности конкретного бизнеса вариант – это ERP. Это web-приложения, разработанные для автоматизации процессов управления внутрихозяйственной деятельностью крупных предприятий с развитой филиальной сетью, различными направлениями деятельности, сложноподчиненной структурой. Включает модули производственного, финансового управления, закупки и тд.

В интернете сегодня представлены все виды бизнеса и категории потребителей. Веб-приложения помогают готовить, покупать, выбирать автомобили, растить детей, учить китайский, исследовать глубины океана и звезды. Новые технологии дают возможность разработчикам создавать продукт под любой спрос, вкус и кошелек.

При этом, у всего многообразия онлайн-приложений есть общие характерные черты.

Примеры применения веб приложений

Пример 1

Процедура сотрудничества компании с банковским учреждением теперь выглядит так:

Не нужно тратить время на неоднократные поездки, сидение в очередях, перекладывание бумажек.

Пример 2

Еще один тренд последних лет — использование crm-программ. Владельцы даже малого бизнеса по достоинству оценили все возможности, которые получают при использовании сервиса управления рабочим временем и проектами.

Все это стало возможным благодаря развитию веб-технологий.

– Только качественный трафик из Яндекса и Google
– Понятная отчетность о работе и о планах работ
– Полная прозрачность работ

Источник

Основы прогрессивных веб-приложений

Видели когда-нибудь кнопку «Добавить на главный экран», которая появлялась на экране вашего Android-смартфона, когда вы просматривали какой-нибудь сайт? Если щёлкнуть по этой кнопке, то на телефон, в фоновом режиме, будет установлено некое приложение, значок для запуска которого попадёт на главный экран. Теперь это приложение можно запустить и работать с сайтом почти так же, как и раньше, но только в обычном телефонном интерфейсе.

То, о чём мы говорим, представляет собой мобильное приложение, которое было загружено из веб-приложения. Причём, как можно заметить, для установки такого приложения вам не приходится взаимодействовать с Play Market. В результате, установка таких приложений упрощается настолько, насколько это вообще возможно. Однако это — далеко не самое интересное. Запуская подобные программы, вы получаете возможность работать с теми данными, которые они выводят, даже без подключения к интернету. Они позволяют взаимодействовать с веб-страницами в оффлайне. Ну не замечательно ли это?

Автор материала, который мы сегодня публикуем, расскажет о таких вот приложениях, о том, зачем они нужны, и о том, как их создавать.

Вероятно, вы уже поняли, что мы только что говорили о так называемых прогрессивных веб-приложениях (Progressive Web App, PWA). Такое приложение можно установить прямо из окна браузера, значок для его запуска будет выглядеть как значок обычного мобильного приложения, и оно, как многие мобильные приложения, позволит вам работать с ним без подключения к интернету.

Кнопка «Добавить на главный экран»

Поговорим теперь о том, что такое «прогрессивность» в применении к веб-приложениям. Предлагаю познакомиться с ними поближе, выяснить, чем они отличаются от обычных веб-приложений, и, кроме того, хочу рассказать вам о том, почему я полагаю, что PWA лучше традиционных мобильных приложений.

Что такое прогрессивное веб-приложение?

Термин «Progressive Web App» придумали Алекс Рассел и Франсес Берриман. По словам Алекса, прогрессивные веб-приложения — это всего лишь веб-сайты, которые принимали правильные витамины. То, что лежит в основе PWA, нельзя назвать новым фреймворком или новой технологией. Это, фактически, набор передовых методов разработки, которые позволяют сделать так, чтобы поведение веб-приложения оказалось бы очень похожим на поведение классических настольных или мобильных приложений.

Значок PWA на главном экране

PWA дают пользователю новые удобные возможности посредством прогрессивных улучшений приложений. В целом, это означает, что PWA, на мобильных устройствах разных поколений, будут работать примерно одинаково. Конечно, некоторые возможности обычных телефонных приложений могут быть им недоступны, но такие приложения обычно работают на разных устройствах так, как они и должны на них работать.

Зачем нужны прогрессивные веб-приложения?

Прежде чем разобраться с тем, зачем вообще нужны PWA, поговорим о том, с какими проблемами мы сталкиваемся, проектируя веб-приложения и обычные мобильные приложения.

Есть множество причин использовать PWA, здесь хотелось бы выделить основные возможности, которые они дают. Если описать эти возможности одним словом, то тут подойдёт аббревиатура FIRE (Fast, Integrated, Reliable, Engaging), то есть, прогрессивное веб-приложение должно быть быстрым, интегрированным в рабочую среду устройства, надёжным, и иметь средства вовлечения пользователей в работу с ним.

Как создать прогрессивное веб-приложение?

Компания Google опубликовала контрольный список по разработке прогрессивных веб-приложений. Рассмотрим минимальные требования к приложению, соответствие которым позволяет называть его PWA.

▍1. Манифест приложения

Манифест PWA — это файл manifest.json примерно такого содержания:

Перед нами — обычный JSON-файл, который содержит мета-информацию о веб-приложении. Здесь есть данные о значках приложения (один из них пользователь видит на главном экране после установки приложения), о фоновом цвете приложения, о его полном и сокращённом названии, и так далее. Этот манифест можно написать самостоятельно, а можно использовать специальный инструмент, автоматизирующий создание таких файлов.

Сайт, облегчающий создание файла manifest.json

▍2. Сервис-воркеры

Сервис-воркеры — это воркеры, управляемые событиями, которые выполняются в фоне приложения и действуют в роли посредников между приложением и сетевыми ресурсами. Они могут перехватывать сетевые запросы и кэшировать информацию для приложения. Их можно использовать для загрузки данных, которые планируется использовать для обеспечения работы приложения в оффлайновом режиме. Сервис-воркеры представляют собой JavaScript-программы, которые перехватывают обработку определённых событий и выполняют некие задачи.

▍3. Значки

▍4. Безопасность

Для того чтобы некое приложение можно было бы называть PWA, оно, кроме прочего, должно поддерживать обмен данными по защищённому каналу связи с использованием HTTPS. SSL-сертификат для организации такого соединения несложно получить, воспользовавшись возможностями сервисов вроде Cloudflare и LetsEncrypt. Защита приложений — это не только то, что в наши дни прямо-таки обязательно, это ещё и способ продемонстрировать пользователю надёжность приложения и выстроить с ним доверительные отношения.

Итоги

В этом материале мы поговорили о прогрессивных веб-приложениях, рассказали о том, зачем они нужны, какие проблемы они решают, какие требования к ним предъявляются. Так же здесь мы затронули тему их разработки, в частности, поговорили о манифесте PWA, о сервис-воркерах, о значках приложений, и о том, что их нужно защищать, используя HTTPS. Технологию PWA нередко воспринимают как нечто, относящееся исключительно к Android-смартфонам, и до недавнего времени такая точка зрения вполне имела право на жизнь. Однако, учитывая события, произошедшие в этом году, можно говорить о том, что PWA ждёт очень интересное будущее на множестве платформ. Тема PWA, на самом деле, всем этим далеко не исчерпывается. Поэтому, вполне возможно, мы к ней ещё вернёмся.

Уважаемые читатели! Как вы относитесь к прогрессивным веб-приложениям?

Источник

Десктопное или веб-приложение: плюсы и минусы

Сегодня поговорим об отличиях десктопных и веб-приложений. Не обещаем, что сможем быть полностью непредвзятыми, но постараемся честно рассмотреть плюсы и минусы.

Итак, веб-приложение работает через браузер, используя его как среду выполнения, десктопное— устанавливается, запускается и работает локально. Сравним их по основным характеристикам.

Веб-приложение не требует установки, все обновления происходят на сервере, доставляются пользователям сразу — достаточно просто перезагрузить страницу или выйти, а потом снова зайти в аккаунт. Но иногда для его работы нужно установить дополнительные библиотеки или использовать защищенные сетевые протоколы.

Десктопное нужно устанавливать на компьютере или мобильном устройстве, обновлять каждый раз, как выходит новая версия. Несмотря на то, что чаще всего процесс автоматизирован — все равно это занимает время пользователей и ресурсы устройств. Дополнительно придется отслеживать версии на каждом компьютере, смартфоне и планшете.

Веб-приложение публикуется на локальном или облачном сервере, там же происходит процесс обновления. При этом сервер нужен в любом случае, даже если решение совсем простое. Ведь кроме фронтенда, с которым пользователи будут работать через браузер, нужно где-то размещать бэкенд.

Десктопное придется устанавливать вручную на каждом устройстве. В компании, где много рабочих мест, это может занять достаточно много времени. Плюс в том, что не обязательно выбирать сервер или искать ресурсы для публикации, если речь не идет о клиент-серверном решении.

Работа веб-приложения зависит не только от того, насколько грамотно оно разработано и характеристик пользовательского устройства, но также от скорости интернет-соединения, работоспособности удаленного сервера.

Десктопное работает автономно, поэтому главное — качество кода и стабильность оборудования, на котором этот код выполняется. Но если связь с сервером необходима — то возникают те же проблемы, что у «конкурента».

Веб-приложение доступно из любой точки мира, с любого устройства, а пользовательские файлы всегда будут под рукой. Но только если есть интернет-соединение или реализована возможность работы офлайн и загрузки-выгрузки данных.

Десктопное доступно всегда — но только с устройства, на котором оно установлено. Чтобы работать с разных устройств, его придется установить на каждом, а также придумать, где хранить файлы, чтобы всегда иметь к ним доступ.

Веб-приложение одинаково хорошо будет работать на любом устройстве, будь то стационарный компьютер, ноутбук, планшет или смартфон — ведь оно практически не зависит от «железа» или операционной системы. Главное — подходящий браузер. Как правило, для работы большинства веб-клиентов подходят Google Chrome, Mozilla Firefox, Safari от Apple или Windows-браузер (Microsoft Edge / Internet Explorer).

Десктопное зависит от операционной системы, процессора, видеокарты, ряда других параметров. Приходится учитывать нюансы каждой среды (в том числе при «отлове» ошибок), писать код с учетом возможных вариантов, нанимать отдельных разработчиков или даже целые команды для версий под разные ОС.

Веб-приложение полностью зависит от браузера и технологий его работы. Поэтому есть ряд ограничений, например — в доступе к аппаратному обеспечению вашего устройства. Это и некоторые другие ограничения обойти невозможно (во всяком случае, сейчас). Но целый ряд задач можно решить по принципу «что нельзя переписать, можно надстраивать или расширять». Редакторы документов, изображений, аудио, видео, 3D графики; системы управления проектами; хранилища файлов; no-code конструкторы — успешно работают в браузерах. Инструменты быстрой интеграции сервисов, а также интерфейсные библиотеки еще больше расширяют существующие возможности.

Десктопное позволяет реализовать буквально любые функции — в этом оно однозначно превосходит web. Во всяком случае, полноценного онлайн аналога Photoshop или Sony Vegas еще никто не разработал. Системные утилиты — определенно сфера десктопной разработки. Как и программы, которые должны долго работать в фоновом режиме — например, чаты или торрент-клиенты — через браузер с ними просто неудобно будет работать. Также такое ПО чаще используется для специфических проектов, с нестандартными интерфейсами или функциями. Поэтому web разработка пока не представляет опасности для desktop программистов— эти технологии будут развиваться параллельно, просто под разные задачи.

По поводу скорости работы все не так однозначно, как может показаться. Несмотря на то, что браузерный клиент постоянно обменивается данными с сервером, быстродействие будет во многом будет зависеть от того, насколько грамотно он спроектирован, «чистоты» кода, возможностей оборудования, стабильности канала связи. Разница в быстродействии, которая очевидна при тестировании, зачастую незаметна для пользователей.

Веб-приложение, разработанное с использованием современных протоколов и средств защиты, способно полноценно обеспечивать сохранность данных. Однако на некоторые моменты разработчики не могут повлиять: браузер, облачный сервер, канал связи — могут повысить уровень безопасности за счет дополнительных средств проверки, но также снизить его за счет своих уязвимостей. Несомненный плюс для пользователей: такое ПО проще контролировать. Ограничения среды снижают вероятность, что оно скрыто получит доступ к файлам или запустит какой-либо процесс.

Десктопное настраивается более гибко, а значит — теоретически при его разработке можно предусмотреть все потенциальные уязвимости. На практике — вряд ли. Впрочем, сделать его полностью безопасным все же можно. Но только если устройство, на котором оно установлено, не будет никуда подключаться, даже к защищенной локальной сети. В противном случае — риск все равно будет.

Однозначно сказать, что безопаснее — сложно (если вообще возможно). На это влияют много факторов, прежде всего — человеческий. А ведь именно в защите от человеческого фактора, в различных его проявлениях, заключается смысл всех мер безопасности.

Но очевидно, что доверие к десктопному ПО выше. Некоторые организации принципиально не соглашаются работать в браузерах, многие пользователи все еще относятся к ним настороженно. Однако ситуация меняется — с развитием технологий растет лояльность людей к ним.

Возможности браузерной разработки огромны, ее потенциал раскрыт далеко не полностью. Технологии развиваются, рынок ИТ растет, предлагая все новые приложения — при прочих равных пользователи будут выбирать web просто потому, что это удобнее. Если говорить о решениях для корпоративных клиентов, то тут браузерные приложения незаменимы. Они гибкие, универсальные, не требуют предварительной подготовки среды, позволяют сэкономить финансы компании, аппаратные ресурсы, время сотрудников.

Но рассмотрим другое мнение. Некоторые разработчики считают, что перспективы далеко не безоблачные. Слишком несовершенны технологии работы браузеров, слишком много некачественного ПО уже «накодили». Поэтому пользователи браузерных решений будут возвращаться обратно к десктопным. Такая тенденция будет продолжаться, пока разработчики браузеров массово используют Java Script. Только когда появится реальная альтернатива — можно будет делать прогнозы на будущее.

Веб-приложения уже сейчас подходят для решения многих задач — как бизнеса, так и обычных пользователей. Если вы решили разработать свое — используйте no-code платформу AppMaster.io.

Готовые блоки кода и визуальные инструменты для работы с ними помогут вам создать готовое веб-приложение и его серверную часть гораздо проще и быстрее, чем методы классического программирования!

Источник