[Russian] Прогрессивные веб-приложения: по-настоящему кросс-платформенный опыт

по-настоящему кросс-
по-настоящему кросс-платформенный опыт
платформенный опыт Максим Сальников
@webmaxru
Прогрессивные
Прогрессивные
веб-приложения:
веб-приложения:

Привет друзья. Я подхвачу тему PWA и раскрою ее в ключе кросс-платформенности
Speaker notes

“ Есть ли шанс у веба стать по-настоящему
универсальной платформой для всех типов
устройств

“ Есть ли шанс у веба стать по-настоящему
универсальной платформой для всех типов
устройств
Спойлер:Спойлер: ДА!ДА!

Давайте все подумаем, есть ли у современного веба, того который без точки ноль, то есть вечнозеленого, постоянно самого актуального, шанс
стать по-настоящему универсальной средой для запуска наших приложений?
- Хочется верить, что да
Speaker notes

Максим СальниковМаксим Сальников
@webmaxru
Google Developer Expert, Microsoft MVPGoogle Developer Expert, Microsoft MVP
Организатор Mobile / Web /Организатор Mobile / Web / PWA PWA
митапов в Осло и Лондонемитапов в Осло и Лондоне
Организатор конференций Mobile EraОрганизатор конференций Mobile Era
и ngVikingsи ngVikings
“ Full-stack разработчик "приложений
из будущего" в ForgeRock

Меня зовут Максим Сальников и я как фулл-стек веб-разработчик, обеими руками за этот дивный новый мир. О чем и рассказываю
достаточно часто на разных мероприятиях по всему свету, и сам разного формата мероприятия для разработчиков организовываю.
Я публикую все новости о PWA в твиттере - уверен, что-то полезное для себя найдете там и вы, например ссылку на этот набор слайдов,
которую я твитну сразу после доклада.
Speaker notes

Мобильная платформа:Мобильная платформа:

Мобильная платформа:Мобильная платформа:
2,5 млрд плюсов2,5 млрд плюсов

Давайте к делу. Наибольший интерес для заказчиков (и соответственно разработчиков) приложений сейчас представлят мобильная
платформа. Слишком уж много у нее плюсов.
- Примерно 2 с половиной миллиарда в этом году
Speaker notes

И плюсы эти - конечно же пользователи смартфонов. То есть в частности все мы с вами. Это чудное устройство постоянно с нами (мобильное
же), мы с него заказываем такси, товары, узнаем новости, иногда выполняем нашу работу и делаем еще миллиард вещей.
Speaker notes

Все это привело к такой тихой революции осенью 2016 года, когда основными потребителями интернета стали как раз вот эти устройства.
Фантастический рынок, гигантские перспективы, правда?
Но вот только поход на этот рынок к настоящему моменту не представляет собой легкую прогулку
Speaker notes

Разработка приложенийРазработка приложений

Требуется как минимум двеТребуется как минимум две
команды разработчиковкоманды разработчиков

Существующие решения дляСуществующие решения для
кросс-платформеннойкросс-платформенной
разработки — вынужденныйразработки — вынужденный
компромисскомпромисс

Бойкот магазинамиБойкот магазинами
приложениям, построеннымприложениям, построенным
с помощью шаблонов ис помощью шаблонов и
конструкторовконструкторов

Бойкот магазинамиБойкот магазинами
приложениям, построеннымприложениям, построенным
с помощью шаблонов ис помощью шаблонов и
конструкторовконструкторов
Дорого и долгоДорого и долго
разрабатыватьразрабатывать
приложенияприложения
}

- Начнем с разработки. Все мы знаем, что доминируют на рынке две достаточно отличающиеся друг от друга платформы. Соответственно,
чтобы заявить о себе и там и там, если идти классическим путем, нам нужны две команды разработчиков.
- Если мы решим сэкономить и пойдем кросс-платформенной дорогой из эпохи до появления PWA, это в любом случае будет некий
компромисс. Используя какие-то оболочки, кросс-компайлеры и прочую магию мы заведомо лишаем себя полной силы и мощи платформы
- Если мы еще хитрее и хотим получить приложение быстро и дешево для каждой платформы используя многочисленные генераторы,
шаблоны и сервисы по созданию приложений - разочарование будет и здесь. Совсем недавно Apple Store, место, где монетизация наиболее
приятная, объявил бой таким вот клонам.
- Вывод: долго, дорого или никак
Speaker notes

Магазины приложенийМагазины приложений

Около 2/3 приложений неОколо 2/3 приложений не
были установлены ни разубыли установлены ни разу

Более половиныБолее половины
пользователейпользователей
устанавливает 0устанавливает 0 (ноль)(ноль)
приложений в месяцприложений в месяц

Более 90% доходов на этомБолее 90% доходов на этом
рынке делят менее 1% егорынке делят менее 1% его
участниковучастников

Более 90% доходов на этомБолее 90% доходов на этом
рынке делят менее 1% егорынке делят менее 1% его
участниковучастников
}
Долго и дорогоДолго и дорого
привлекатьпривлекать
новыхновых

Продолжая тему магазинов приложений. Даже когда мы уже там, счастливая жизнь нам не гарантирована
- Пользователи просто игнорируют большинство приложений
- Ну никак не хотят их устанавливать
- А если и устанавливают, то что-то что на виду, кто и срывает весь куш
- Хотите установок? - будьте готовы потратиться на промо
Speaker notes

А если попробовать веб?А если попробовать веб?

А что насчет веба? Гораздо более демократичная среда:
хотите создать приложение? инструменты веб-платформы вам в помощь. Просто следуйте стандартам и браузеры любых платформ его
полюбят
хотите опубликовать? да просто выберите надежный хостинг и вперед, не спрашивая никаких разрешений
хотите быть замечены? и тут все пожалуй попроще будет хотя бы потому, что не нужно пользователей загонять ни в какие магазины.
поисковая строка браузера - всем хорошо уже привычный и постоянно находящийся под рукой инструмент
- неудивительно, что попытки подружить веб и мобильные платформы начались задолго до сенсорных экранов, сразу же как стало возможно
показать хоть что-то похожее на веб-страничку. Кто вспомнит название данной технологии?
Speaker notes

“ The biggest mistake we’veThe biggest mistake we’ve
made as a company is bettingmade as a company is betting
on HTML5 over native.on HTML5 over native.

“ The biggest mistake we’veThe biggest mistake we’ve
made as a company is bettingmade as a company is betting
on HTML5 over native.on HTML5 over native.
Mark ZuckerbergMark Zuckerberg

- К сожалению, дружба не очень задалась. Всего-то 6 лет назад, в 2012 году один известный интернет-деятель признал использование веб-
технологий для мобильного приложения серьезным просчетом. Кстати, кто это был? Правильно, Марк Цукерберг. И я его понимаю. Мобильные
устройства были другими, в плане быстродействия, и, самое главное, веб был другим. Не будем фокусироваться на тех темных временах,
давайте посмотрим
Speaker notes

Каков веб сегодня?Каков веб сегодня?

whatwebcando.todaywhatwebcando.today

Достаточно открыть веб-сайт, который называется "Что веб умеет сегодня" и удивиться. Браузер, в котором вы открыли эту страничку имеет
доступ к таким разнообразным API, умеет использовать столько аппаратных особенностей платформы, что сразу хочется начать писать
приложение
Speaker notes

Доступ к аппаратным средствамДоступ к аппаратным средствам
устройствустройств

Постоянно повышающиеПостоянно повышающие
быстродействие JavaScript-движкибыстродействие JavaScript-движки

Глубокая интеграция сГлубокая интеграция с
операционными системамиоперационными системами

Выход за рамки онлайна и браузеровВыход за рамки онлайна и браузеров

Выход за рамки онлайна и браузеровВыход за рамки онлайна и браузеров

}

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

Еще одно определение PWAЕще одно определение PWA

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

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

Итак, еще раз, что это такое? Совсем недавно редакторы Mozilla Developer Network при моем скромном участии переформулировали
определение и если вольно перевести его на русский, что я и сделал, оно звучит так:
ЧТО: приложения, которые используют современные средства браузеров
ЗАЧЕМ: чтобы работать везде (кросс-платформенность же!) и давать пользователем те же премущества, что и родные, нативные программы
Speaker notes

Кросс-платформенные?Кросс-платформенные?

БраузерыБраузеры

МобильныеМобильные

НастольныеНастольные

Для разработчиков

Магазины?Магазины?
Для разработчиков

Раз уж мы так подчеркиваем кросс-платформенность PWA, давайте разберемся с тем как она выглядит сегодня.
- Начнем с браузеров. В конце концов мы говорим о веб-технологиях, а что как не браузер возникает в уме при упоминании веба.
- Помечтаем шире рамок браузера. Ранее нами упомянутая мобильная платформа. Для идеи PWA она была катализатором. Ведь именно там
мы имеем дело с не самыми производительными устройствами, нестабильным подключением к интернету или полным его отсутствием, и там
же у нас самые интересные аппаратные возможности: различные сенсоры, камера, GPS
- Раз уж мы говорим про кросс-платформенность, давайте и наши классические устройства рассмотрим. Настольные, наколенные - в общем
компьютеры. С массовым переездом приложений и сервисов в браузеры мы пользуемся нативные приложениями все реже, но все же это
интересная область
- Итак, что у нас сегодня в браузерах насчет поддержки основных функций PWA? Картина вырисовывается неплохая. Я неслучайно поставил
иконку Гугл Хром на первое место - это золотой стандарт в плане поддержки PWA. И неслучайно Эппл Сафари идет последним - релизная
версия с поддержкой необходимых спецификаций вышла всего пару недель назад. И это был настоящий праздник для всех энтузиастов PWA.
Почему я включил в этот список Самсунг Интернет, ведь он основан на том же движке что и Хром? Во-первых, из-за широкой
распространенности данного браузера, во-вторых из-за большой работы, проделанной его командой по интеграции PWA в операционную
систему. Майкрософт Эдж - немного отстает, пока что PWA там можеи использовать и тестировать только мы, разработчики, в специальной
версии. План выхода в релиз - это лето
- Мобильные платформы. Новость последних двух недель, но все же iOS теперь с нами. Пусть там еще не все так гладко и местами сыровато -
тем не менее это в продакшне!
- А вот на десктопах Майкрософт всех обошел. Уже сейчас в Windows 10 PWA устанавливается и участвует в жизни системы как родное
приложение без всяких оберток. Хром ОС подтягивается, пока что аналогичная функциональность доступна в канале релизов для
разработчиков
Speaker notes

Выглядит неплохо, правда? Но у меня есть еще один пункт в этой табличке. Это не среда, где мы запускаем приложения, а канал их
распространения. Что? Магазины приложений скажете вы? Мы же только что увидели насколько они ужасны. Подождите, сейчас объясню.
Майкрософт - опять он тут пионер - решил, а почему бы не распространять PWA через магазин В ДОПОЛНЕНИЕ к обычному для PWA каналу -
поиску в интернете. И решил делать это автоматически! Поисковик Майкрософта Бинг сканирует интернет в поисках качественных PWA
(критерии пока не очень понятны) и автоматически их публикует. Все в выигрыше - разработчики получают еще один канал распространения
без малейших усилий, Майкрософт наполняет магазин интересными аппами, пользователи постепенно свыкаются с идеей, что PWA это
полноценная замена нативным приложениям. Пока это в рамках эксперимента, опубликован всего лишь с десяток приложений, включая,
например SkyScanner. Поживем - увидим

Новые преимущества?Новые преимущества?

Онлайн больше не обязателенОнлайн больше не обязателен

Получение уведомленийПолучение уведомлений

Установка без хлопот Установка без хлопот

Полноценное приложениеПолноценное приложение

Service Worker API
Web App Manifest
Полноценное приложениеПолноценное приложение
}
}

С кросс-платформенностью разобрались. Теперь давайте разберемся, какая функциональность нам требуется от всех этих платформ, чтобы
порадовать пользователя.
- Во-первых, отвязяться от онлайна. Давайте перестанем ассоциировать веб-приложения с необходимостью постоянно быть подключенным к
сети
- Во-вторых, привязяться к инфраструктуре рассылки уведомлений. Раз уж мы бываем онлайн, то хотелось бы получать важные сообщения
(например, пора регистрироваться на рейс) в независимости от того, работаем ли мы этом приложении прямо сейчас и вообще запущено ли
оно хотя бы в фоне
- Мы не хотим возни с магазинами, но все же неплохо бы иметь приложение установленным
- Зачем установленным? Чтобы приложение играло по правилам платформы: запрашивало разрешения когда нужно, участвовало в общем
поиске, чтобы его можно было удалить стандартными средствами в конце концов
- PWA дает нам ответы на все эти требования в виде новых API и спецификаций
Speaker notes

Разработчикам:Разработчикам:

Выразительный языкВыразительный язык

Мощный инструментарийМощный инструментарий

Гигантское сообществоГигантское сообщество

Отличные фреймворки "JavaScript в нативное приложение"

Отличные фреймворки "JavaScript в нативное приложение"
...больше не нужны...больше не нужны

А что же мы, разработчики получаем от всего этого?
- Мы просто пишет наши приложения на джаваскрипте. Что бы там ни говорили, а это все же отличный язык программирования
- С огромной экосистемой вспомогательных инструментов, позволяющих в частности писать на совершенно других языках, удобных именно
вам, которые будут преобразованы в джаваскрипт для выполнения в браузере
- И самым большим сообществом разработчиков. Практически любая проблема уже решена кем-то, на любой вопрос есть ответ или даже
несколько (что иногда вводит в заблуждения)
- А что же с отличными (без всякого сарказма) инструментами, которые мы используем прямо сейчас для написания нативных приложений на
джаваскрипте? Phonegap, NativeScript, Ionic, ReactNative, Electron? Постепенно необходимость в них для большинства обычных приложений
просто отпадет. И это отлично - меньше уровней абстракций, меньше стороннего кода - надежней и быстрее наше приложение
Speaker notes

https://www.gartner.com/doc/3645344/progressive-web-apps-impact-mobile
Gartner:Gartner:

https://www.gartner.com/doc/3645344/progressive-web-apps-impact-mobile
Gartner:Gartner:
“ К 2020 году ПВП заменятК 2020 году ПВП заменят
50% неспециализированных50% неспециализированных
мобильных приложениймобильных приложений

Дадим слово аналитикам. Серьезные ребята из Гартнер нам говорят: не пройдет и пары лет, как половина обычных мобильных приложений
будет вытеснена нашими героями - PWA. А что со специализированными? Где, например, предъявляются критические требования к
быстродействию? Безусловно, определенная ниша останется за нативными для каждой платформы приложениями. Но веб и на это готовит
ответ - WebAssembly - запуск скомпилированного кода прямо в браузере. Максимальное быстродействие станет доступной реальностью
Speaker notes

МобильноеМобильное
приложениеприложение

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

Прогрессивное веб-Прогрессивное веб-
Веб-приложениеВеб-приложение

Суммируя все вышесказанное.
- Вероятно скоро под мобильным приложением мы будет понимать
- Веб-приложение
- Да и сам термин PWA потихоньку сойдет на нет. Это будет обычный, традиционный подход. Ну не говорим же мы в 2018 году "вот мое
одностраничное веб-приложение, адаптирующееся под любое разрешение экрана" - они почти все сейчас такие. Так же и с PWA
Speaker notes

bit.ly/go-pwa-slackbit.ly/go-pwa-slack
1300+ участников1300+ участников
Представители браузеров, фреймворков,Представители браузеров, фреймворков,
библиотекбиблиотек

Но пока этот термин в расцвете сил я всех приглашаю принять участие в PWA слэк-канале, который я организовал некоторое время назад, и
который сейчас самое популярное место (в масштабах планеты, соответственно, говорим там на английском) для обсуждения всего, что
связано с PWA
Speaker notes

Спасибо!Спасибо!
@webmaxru@webmaxru
Максим СальниковМаксим Сальников

Есть вопрос?Есть вопрос?

[Russian] Прогрессивные веб-приложения: по-настоящему кросс-платформенный опыт

Recommended

Recommended

More Related Content

Similar to [Russian] Прогрессивные веб-приложения: по-настоящему кросс-платформенный опыт

Similar to [Russian] Прогрессивные веб-приложения: по-настоящему кросс-платформенный опыт (20)

More from Maxim Salnikov

More from Maxim Salnikov (17)

[Russian] Прогрессивные веб-приложения: по-настоящему кросс-платформенный опыт