Гибридные приложения

К нам на оценку ТЗ часто приходят запросы на бизнес-приложения, в которых одно из главных требований - это натив. При этом большинство клиентов не могут объяснить ни обоснованность применения именно натива, ни что это такое вообще. Сложилось ощущение, что это требование приходит от некого знакомого программиста, который не учитывает стоимость и бизнес-логику, то есть такого адепта чистого кода. Чтобы всё-таки разобраться что такое натив, что такое гибрид и в каком случае что выбрать я решил написать эту статью.

В закладки

Вообще, мы в Bright Mobile специализируемся на сложных серверных бизнес-приложениях, например, аналоги Авито, youdo, мобильные магазины, социальные сети и т.д. Анализируя ТЗ пришли к выводу, что в 95% случаев натив не то что не нужен, но даже вредит проекту. И сейчас я расскажу почему.

Но, сначала, давайте пройдём по общим характеристикам.

Общая архитектура

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

На стороне клиентской части располагается приложение iOS или Android, а со стороны сервера, собственно, серверное ПО и админка для управления данными.

Вот теперь мы подходим к отличиям. А отличия заключаются в том, какой объём функционала несёт клиентская часть, а какой серверная. Непонятно? Давайте начнём с определений

Что такое натив, а что такое гибрид

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

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

Гибрид - это скорее подход к программированию, чем какой-то особенный вид приложения. Его принцип заключается в том, что всё что можно (читай "все функции не связанные с железом") программируется на стороне сервера, а на стороне клиента остаётся только необходимый минимум. Если рассматривать типовой мобильный магазин, то GPS и функция отображения данных будет на стороне приложения, а каталог, карточки товаров и т.д. будут грузиться с сервера.

Давайте для примера рассмотрим как бы в гибриде и нативе выглядела наша платформа для создания сервиса поиска исполнителей "Сервис ПИ". Красным выделено то, что нужно делать на стороне приложения для телефона, а зелёным - на стороне сервера.

В нативе:

В гибриде:

Как видно из картинок единственная разница между нативом и гибридом - это объём функционала, который реализуется на стороне телефона. Но есть большое "НО". Весь "зелёный" функционал, который мы в гибриде перенесли на сервер делается 1 раз для обеих платформ, а красный - для каждой платформы пишется отдельно. Давайте разберём какие из этого можно сделать финансовые выводы.

Расчёт стоимости разработки приложений

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

  • Java-программист для андройда
  • Objective-C/Swift-программист для айоса
  • php-программист для сервера. Можно, конечно брать python-разработчика, но для чего он конкретно здесь, непонятно, поэтому, ориентируемся на php, т.к. он более дешёвый.

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

При полностью нативной разработке мы заплатим программистам приложений за полный функционал, а в случае гибрида только за нативные функции (отмечено красным). Оставшийся же функционал будет реализовывать php-шник. Причём, нативщики будут делать это всё и для iOS и для Android отдельно, а при гибриде php-шник делает эти экраны один раз для обеих систем. Получается, что почти двукратная работа выполняется специалистами, которые в 2 раза дороже. Путём не хитрых вычислений приходим к тому, что полностью нативное приложение будет стоить ~4 раза выше гибридного. Это, конечно, зависит от того какие нативные функции нужны в приложении и как они применяются, но при стандартном бизнес-приложении (GPS, камера, интернет) экономия в 3-4 раза.

Что выбрать для проекта

Конечно же, у натива преимущества вытекают из той же концепции:

  • "тяжёлые" вычисления, которые нужны на стороне телефона (например, работа с 3D, обработка виртуальной реальности, сложная анимация)
  • Отсутствие требований к постоянному наличию интернета (приложения шагомеры, пульсомеры, игры-кликеры, органайзеры и т.д.)

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

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

Написать
{ "author_name": "Евгений Малаховский", "author_type": "self", "tags": [], "comments": 13, "likes": 16, "favorites": 13, "is_advertisement": false, "subsite_label": "flood", "id": 39165, "is_wide": false, "is_ugc": true, "date": "Fri, 01 Jun 2018 08:06:20 +0300" }
{ "id": 39165, "author_id": 53577, "diff_limit": 1000, "urls": {"diff":"\/comments\/39165\/get","add":"\/comments\/39165\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/39165"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791 }

13 комментариев 13 комм.

Популярные

По порядку

Написать комментарий...
1

По поводу "требуют нативное, при этом не понимая что это".

Есть ощущение, что для клиента все несколько проще.

Есть натив - то, что нужно скачивать из стора и плея.

А есть веб. То, что добавляется из хрома функцией "поместить на рабочий стол".

И прося натив они просят именно установку из маркетов.

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

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

Не?

Ответить
1

Тут стандартный вопрос "как его готовить". Конечно, если в обёртку на iOS упаковать унылый лендос, который разъезжается при ширине меньше 800 и где текст написан 8pt, то тут, конечно, апстор не пропустит. Но если сделать свайп-меню, а приложение будет по гайдам стора, то почему нет?

Ответить
0

Интересное видение
не, с веб приложениями на iOS нет никаких проблем

Ответить
0

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

Ответить
1

Кстати можно и ссылку сохранять на веб-приложение (функция поделиться). Но я само собой имел ввиду веб обернутое в приложение.

Ответить
0

Интересно, автор в курсе, что такое React Native?

Ответить
0

В курсе конечно, но php кодерам реакт изучать... а html/js роднее.

Ответить
0

В вашей статье создание 2 нативных приложений для iOS и android описано только через отдельное создание на Swift и Java. И полностью проигнорирован вариант создания с помощью React Native.

Ответить
0

Согласен надо дополнить

Ответить
0

Андрей, тут ещё кроме "роднее" фишка в обновлениях. На сервере сделал изменение экрана и не ждёшь публикации новой версии. Ну и кодеры тупо дешевле.

Ответить
0

Тоже удивился отсутствию даже упоминания RN. С точки зрения стоимости берём JS Full Stack девелоперов - и сервер на ноде, клиенты - web app, iOS/Android на RN, для win/macOS/Linux оборачиваем web app в электрон (возможно, с аддонами) - и, вуаля: приложения для всех платформ. Только JS. Никаких php))

Кстати насчёт требования постоянного подключения - PWA. Даже на iOS работает))

Ответить
0

Это замечательный подход и такого все будет больше и больше, ибо сейчас все always connected. Это и к играм тоже относится - много игр на html5.
Теже самые каналы в Телеграм - это вебстраницы по сути.
Есть мессенджер Амиго - он тоже полностью веб.
Приложение Едадил - тот же веб, весит 4 метра и т.д.

Ответить
0

Спасибо за статью! 🙌🏻

Ответить

Комментарий удален

Комментарий удален

0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Хакеры смогли обойти двухфакторную
авторизацию с помощью уговоров
Подписаться на push-уведомления