Вконтакте это веб приложение

Разбираем основные способы организации веб-приложения и чем они отличаются.

Время чтения: 9 мин

Открыть/закрыть навигацию по статье

1. Кратко
2. Многостраничные приложения

1. Готовые веб-страницы
2. Динамическая генерация HTML

1. Client Side Rendering (CSR)
2. Server side rendering (SSR)
3. Static site generation (SSG)

Обновлено 14 октября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Все веб-приложения делаются с помощью одних и тех же технологий: HTML, CSS и JavaScript. Однако есть много способов организации работы приложения. Выбор способа зависит от цели приложения и пользовательского опыта, которого мы хотим добиться. Хотя основных подхода всего два: многостраничные приложения и Single Page Applications, каждый из них делится на подвиды.

Статические многостраничные приложения состоят из набора статичных страниц. Их просто разрабатывать, но если страниц становится много (сотни и тысячи), или данные на странице меняются, то придётся генерировать их на лету. Для этого нужно подключать сервер и писать дополнительный код. На каждый переход нужно генерировать и загружать новую страницу, а это занимает время.

Веб-приложение и веб-сайт: разница за 8 минут

Одностраничные приложения (SPA) дают возможность разрабатывать клиентские приложения со сложной логикой с помощью JavaScript. В этом подходе отрисовкой содержимого на странице управляет JavaScript. Переходы между экранами будут мгновенными, и пользователь сразу увидит результат своих действий. Однако такой подход создаёт новые проблемы. Как не загружать в браузер слишком много кода?

Как обеспечить хорошую производительность? Где рендерить приложение: только на клиенте или на сервере?
Разработка таких приложений часто сложнее, так как может потребовать знания различных инструментов и фреймворков.

Многостраничные приложения

Скопировать ссылку «Многостраничные приложения» Скопировано

Многостраничные приложения – это набор статичных веб-страниц, которые связаны между собой с помощью ссылок. При клике на ссылки происходит переход между страницами, что ведёт к полному обновлению страницы в браузере. Это одно из наиболее значимых отличий от SPA, о нем поговорим отдельно.

Для начала выделим два основных вида многостраничных приложений:

• Набор готовых свёрстанных страниц, которые лежат на сервере и вместе с ними находятся и другие статичные файлы (CSS, JavaScript и картинки). Сервер отдаёт эти файлы по заранее настроенным путям.
• Динамическая генерация HTML на сервере. Чаще всего такое решение можно встретить на языках программирования PHP, Python и Ruby. При каждом запросе сервер запускает скрипт генерации HTML-страницы. Скрипт может взять данные из базы данных, произвести вычисления и собрать готовый HTML-код страницы.

Готовые веб-страницы

Скопировать ссылку «Готовые веб-страницы» Скопировано

Чем веб-приложения отличаются от веб-сайтов | Иван Петриченко

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

Разработка при таком подходе обычно самая простая. Рядом складываются несколько html-файлов, в которых содержится вся необходимая вёрстка и дополнительные CSS/JavaScript файлы, подключённые к странице. В продвинутом варианте можно переиспользовать части кода с помощью шаблонизаторов (например, Pug) и собрать сайт по кусочкам используя сборщики (Gulp, Rollup, Webpack и др.). В результате на сервер попадёт набор статичных файлов, которые будут раздаваться с помощью веб-сервера (Nginx, Apache).

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

Динамическая генерация HTML

Скопировать ссылку «Динамическая генерация HTML» Скопировано

Динамическая генерация HTML страницы часто использовалась до изобретения Single Page подхода. Так до сих пор работает большинство форумов, интернет-магазинов, а так же большие приложения, как Facebook или ВКонтакте.

Особенность этого подхода в использовании серверных языков программирования (например, PHP или Ruby), чтобы генерировать итоговый HTML страницы, собирая его из разных частей и обогащая данными.

Например, пользователь перешёл на страничку со списком друзей:

1. Сервер получает запрос.
2. Идёт в базу данных, выбирает список друзей и вспомогательные данные.
3. По шаблону собирает HTML.
4. Отправляет HTML в виде ответа на запрос.

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

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

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

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

Single page applications (SPA)

Скопировать ссылку «Single page applications (SPA)» Скопировано

Одностраничные приложения (сокращённо SPA) состоят из одной страницы, а всю остальную работу (создание содержимого, переход между экранами и получение данных) выполняет JavaScript. Такой подход позволяет создать полноценный опыт приложения: переходы между экранами происходят мгновенно, можно давать пользователю визуальный ответ, пока данные загружаются асинхронно с помощью API.

Разработка одностраничных приложений имеет богатую экосистему: фреймворки и библиотеки для создания интерфейсов, подходы к разработке, архитектурные паттерны. Одностраничные приложения делятся по месту начальной отрисовки страницы: в браузере (client side rendering) или на сервере (server side rendering).

Client Side Rendering (CSR)

Скопировать ссылку «Client Side Rendering (CSR)» Скопировано

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

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

SPA не работает без JavaScript. Если по какой-то причине пользователь отключил его в своём браузере, то одностраничное приложение не запустится вовсе.

Это требование особенно важно в контексте того, как поисковые сервисы индексируют SPA. Раньше поисковики не умели выполнять JavaScript и потому одностраничные приложения не попадали в результаты поиска. Сейчас ситуация изменилась, поисковые сервисы умеют исполнять JavaScript, но статические сайты до сих пор индексируются лучше.

Server side rendering (SSR)

Скопировать ссылку «Server side rendering (SSR)» Скопировано

Чтобы пользователь не смотрел на пустую страницу в ожидании загрузки приложения, можно отдавать ему сгенерированный сервером HTML. Таким образом пользователь сразу получит ожидаемую страничку и начнёт её просматривать, пока основное приложение загружается и запускается.

Такой подход называется серверным рендерингом. Он помогает улучшить и пользовательский опыт, и позицию сайта в поисковиках. Поиск Google и Яндекса умеет исполнять JavaScript, но сайтам со статическим контентом отдаётся предпочтение.

Главное отличие такого подхода от рендеринга на клиенте — это сервер, который занимается рендерингом. Чаще всего это готовое решение на базе Node.js. Многие SPA-фреймворки имеют проверенные решения для быстрого старта приложения с серверным рендерингом. Например, Next.js для React или Nuxt для Vue.

Своё решение для SSR — непростая задача. Приходится учитывать множество факторов: как и куда сходить за данными, как правильно отрисовать приложение и много других деталей.

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

Static site generation (SSG)

Скопировать ссылку «Static site generation (SSG)» Скопировано

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

Самый распространённый пример SSG — это персональный блог. У нас есть тексты статей, а с помощью шаблонизатора эти статьи превращаются в готовые html-странички. Эта страничка и сама Дока, которую вы сейчас читаете, разработана с помощью статической генерации.

Когда говорят об SSG, то часто упоминают Jamstack. Слово Jamstack — это объединение первых букв от слов JavaScript, API, Markdown и слова stack, что в данном случае означает «набор технологий». Технически Jamstack это подход к разработке сайтов и приложений основанный на перечисленных технологиях. Источником данных выступает Markdown (например текст статей блога), JavaScript вместе с React «оживляет» приложение, а с помощью API можно запрашивать наши данные.

Jamstack хорошо подходит для создания сайтов, наполненных статичным контентом, а SPA-фреймворки помогают создать хороший пользовательский опыт, получая при этом плюсы статических сайтов.

Progressive Web Applications (PWA)

Скопировать ссылку «Progressive Web Applications (PWA)» Скопировано

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

В PWA можно превратить практически любой сайт, главное чтобы он соответствовал требованиям и поддерживал необходимые технологии (Service Worker, HTTPS и так далее).

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

Заключение

Скопировать ссылку «Заключение» Скопировано

Вконтакте это веб приложение

Get Desktop App on WebCatalog

Enhance your experience with the VK desktop app for Mac and PC on WebCatalog.

Run apps in distraction-free windows with many enhancements.

Manage and switch between multiple accounts quickly.

WebCatalog Spaces

Organize apps and accounts into tidy collections with Spaces.

VK (short for its original name VKontakte; Russian: ВКонта́кте, meaning InContact) is a Russian online social media and social networking service based in Saint Petersburg. VK is available in multiple languages but it is predominantly used by Russian-speakers. VK allows users to message each other publicly or privately; create groups, public pages, and events; share and tag images, audio, and video; and play browser-based games.As of August 2018, VK had at least 500 million accounts. VK is ranked 19th (as of August 2019) in Alexa’s global Top 500 sites. It is the most popular website in Russia.According to SimilarWeb, VK is the 14th most visited website in the world.

Disclaimer: WebCatalog is not affiliated, associated, authorized, endorsed by or in any way officially connected to VK. All product names, logos, and brands are property of their respective owners.

Источник: webcatalog.io

Нужно ли веб-приложение вашему бизнесу? Разбираемся в терминах и особенностях разработки web app

12.12.2022

По данным TechJury мобильные приложения имеют более высокий уровень вовлеченности, чем веб-приложения. Но не спешите закрывать статью и вкладывать деньги в мобильную разработку. Мы знаем примеры, когда веб-программа запускалась задолго до выхода ее мобильной версии, и была успешна. Взять соцсеть Вконтакте. Сейчас этот сервис известен каждому в России, а стоимость стремится к 2,2 млрд $. А стартовал Вконтакте только как веб-проект.

Создание веб-продуктов может принести прибыль, нужно только знать, каким проектам подойдет этот вид разработки. В статье мы разбираем, что такое веб-приложение, как оно работает и каким проектам подойдет.

Что такое веб-приложение: не путать с мобильным

Web app или веб-приложение — это программа, которая работает через браузер. Ее можно запустить как на компьютере, так и на смартфоне. Веб-программу не нужно устанавливать и обновлять, для запуска нужен только доступ в интернет. Когда человек взаимодействует с веб-приложением, он видит изменения практически в ту же секунду.

При этом сервис не перезагружается. Это происходит благодаря динамическому взаимодействию фронтенда и бэкенда. Slack, Canva, Figma — это все веб-проекты.

Часто web-приложение путают с мобильным или с веб-сайтом. Но между этими продуктами есть различия. Рассказываем, в чем разница:

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

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

Еще есть PWA (Progressive Web App). Это веб-программа, которую нужно скачать на устройство, но работает она через браузер. Этот продукт отличается от обычных веб-приложений тем, что может работать без интернета. Например, PWA есть у сети Starbucks. Оно позволяет клиентам просматривать меню и добавлять товары в корзину без доступа в интернет.

Многие компании предпочитают разрабатывать мобильное приложение, а потом дополнять его веб-версией. Так можно охватить как можно больше пользователей. Чтобы понять, что такое веб-версия приложения, вспомните те же соцсети, например, Twitter. У него есть функциональное мобильное приложение, но в свой аккаунт можно войти и из браузера.

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

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

Чем хороши веб-приложения

Невысокая стоимость разработки

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

Обновления в режиме реального времени

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

Независимость от магазинов приложений

Если этот пункт кажется вам несущественным, у нас есть два аргумента: стоимость публикации и модерация. AppStore взимает с разработчиков 99$ в год. А что касается модерации — приложения должны пройти строгую проверку перед тем, как попадут в сторы. Каждый десятый проект не проходит модерацию в AppStore. Веб-приложение освобождено от этих строгих правил, поэтому вы можете запустить проект, когда захотите.

Распространение

У веб-приложения больше шансов попасть на первые страницы поисковых систем, чем у мобильных вариантов. Когда пользователи ищут ответы на свои запросы, например «система для учета рабочих задач», они с большей вероятностью найдут веб-программу, если ее сайт будет хорошо оптимизирован под поисковики. Чтобы сделать мобильное приложение более «видимым» для пользователей, нужно повышать его рейтинг в Google Play и AppStore. Это сложно, особенно когда у проекта много конкурентов.

Чем неудобны веб-приложения

Нет интеграции с функциями смартфона

Мобильные приложения могут использовать функции устройства: камеру, микрофон, GPS, календарь. Так как веб-продукты не разрабатываются под определенную операционную систему и открываются через браузер, они не имеют доступа к функциям смартфона.

Ограничения браузера

Нельзя предугадать в каком браузере пользователь откроет приложение — Safari, Mozilla, Chrome, Opera. Браузер может устареть или тормозить сам по себе, медленно загружая вашу программу. Это негативно отразится на пользовательском опыте.

Безопасность

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

Расход батареи

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

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

Есть много типов веб-приложений. Мы решили разбить их по направлениям, в зависимости от функций, и рассказать вам о самых популярных.

Социальные сети

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

Маркетплейсы

Маркетплейсы — это что-то вроде цифрового рынка, где продавцы предлагают свой товар. Это могут быть и предметы вроде одежды, мебели, косметики и электроники, и контент, и услуги. Такие как фотосессии, саундтреки и т.д. Для маркетплейсов веб-приложения — удобный формат.

Человеку не нужно будет каждый раз долго ждать прогрузки страницы, он может удобно и быстро переходить из раздела в раздел. Один из примеров маркетплейсов — Wildberries.

Сервисы для продвижения бизнеса

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

Веб-приложения для автоматизации

Компании стремятся цифровизировать свою работу, чтобы ускорить выполнение задач и повысить производительность. В этом помогают платформы для оптимизации работы. Например, есть сервисы для управления задачами — Asana, Wrike. Это все веб-приложения, которые работают через браузер.

Как понять, подойдет ли вашему проекту веб-разработка

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

1. Бюджет на создание приложения. Если вы не хотите тратить большие деньги на разработку и поддержку нативного или гибридного мобильного приложения, выбирайте веб-разработку. Такой продукт не только будет стоить дешевле, но и сэкономит деньги на продвижении, так как индексация веб-программ лучше.
2. Потребности пользователей. Некоторые идеи лучше реализовывать через мобильные приложения. Например, если вы хотите сделать сервис для вызова такси, лучше сделать приложение для андроида или айфона. Через браузер заказывать машину неудобно: сложно отслеживать автомобиль, менять способ оплаты. Подумайте о том, в каких условиях пользователи откроют ваше приложение, и отталкивайтесь от этого.
3. Ограничение возможностей программ. Как мы уже говорили, некоторые функции смартфона будут недоступны пользователям веб-приложений. Задайте себе вопрос — критичны ли эти функции для вашего проекта? Если вам нужно, чтобы пользователь мог включить камеру смартфона через ваше приложение, записать голосовое сообщение или расплачиваться с помощью NFC-технологии, лучше сразу выбирать разработку мобильного приложения. Реализовать это по-другому просто не получится. Об ограничениях функций лучше подумать на этапе проработки концепции проекта, иначе переделывать программу под смартфоны будет сложно.

Подведем итог

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

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

Сложно понять, подойдет ли вам веб-разработка? Хочется сделать именно веб-приложение, но боитесь, что потеряете деньги? Обратитесь к специалистам Q-Digital. Мы ответим на ваши вопросы, расскажем, какой вид разработки подойдет вашему проекту и воплотим вашу идею в жизнь. Чтобы связаться с нами, оставьте заявку на сайте.

Наш менеджер перезвонит вам в ближайшее время.

Источник: q-digital.org