Разработка гибридных мобильных приложений

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

В закладки

Еще пожалуй опишу свой опыт, чтобы был очевиднее ход моих мыслей. Я ранее 5 лет в роли ведущего программиста разрабатывал мобильные приложений под заказ на iOS и воспитал 8 программистов на iOS, которые также программировали мобильные приложения.

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

Если говорить о своем опыте разработки, то это:

  • тесная работа с программистом серверной части, которая порой выливается в твое тестирование и обсуждение API
  • свои баги независимо от Android, самый выбешивающий комментарий к багу «а на Android вот так-то работает, а в iOS нет»
  • необходимость адаптации дизайна под iOS на свое усмотрение, к сожалению в наших проектах это был один вид дизайна или для Android или для iOS в зависимости от того к чему заказчик отдавал сам предпочтение
  • реализация всевозможных костылей, вроде а сделайте в заголовке посередине логотип, хотя по гайдам этого делать не рекомендуется

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

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

Ну и тут вопрос «что если будет задержка отображения данных на 2-е секунды», критично ли это для бизнеса? Нет, не критично! Бизнес ценит гибкость, экономичность, а не крутой код.

Когда мы показали нашим первым пользователям наш полуфабрикат для создания сервиса поиска исполнителей, мы ожидали шквал недовольства медленной загрузкой, но нет… речи о зажержке и не было, народ требовал наращивать функционал. Тут мы сделали вывод что для бизнеса важны другие факторы, нежели наши программисткие замашки.

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

Давайте разберем варианты реализации гибридных мобильных приложений.

Xamarin (ксамарин) от Microsoft

Пишется на языке C # с использованием .NET, реализованы компоненты вызова нативных элементов, таким образом скомпилированное приложение работает по сути как нативное. Минус очевидный, нужно изучать C #. Само собой превращается в плюс для тех кто этим языком уже владеет.

React Native

Смысл тот же что и в Xamarin, только создание элементов экрана происходит в процессе его открытия на мобильном телефоне, интерпретируя скрипты на JS. Идея в том чтобы посредством языка JavaScript используя биндинги вызывать любые нативные компоненты, тем самым реализовывать нативное приложение, с соответсвующим быстродействием. Минусы: нужно изучать JS классы и методы для реализации мобильного приложения.

Cordova/Phonegap (кордова, фонегап)

Реализация на языке html + js вызовы плагинов нативных функций. Что важно наиболее простая адаптация для вебщиков, т.к. по сути создается мобильный сайт. Из минусов: грамоздкость оболочки, за счет совместимости с древними версиями iOS и Android. Адаптирован на работу с сервером по API, файлы верстки лежат в ресурсах приложения.

WebView + JS функции

Можно сказать что это тот же Phonegap, только если срезать с него 90% древних наростов и хранить файлы не в ресурсах приложения, а на сервере. Одно из главных преимуществ, любой нативщик добавит те или иные функции на ваш вкус. Например вам нужно в фоновом режиме GPS обрабатывать особым образом, а результат отправлять на сервер. Плюсы: все просто, любой веб разработчик пишет на php/html мобильный сайт, дополнительно нужно по итогу расставить несколько js функций, например, нативные переходы между экранами, получение gps или считывание QR кода с камеры телефона.

Важнейший ньюанс

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

Но это и порождает серьезные минусу на мой взгляд:

  • нужно писать API, интерфейс для обмена данными между сервером и приложением
  • нужно два программиста на проект (программист серверной части и API обмена с приложением и разработчик мобильного приложения)

Наш вариант

Мы выбрали вариант с читым webView, добавили необходимые нам JS функции, которые работают с нативными функциями. В верстке мы используем Bootstrap, а в роли серверной части и админки используем 1С-Битрикс. Тем самым у нас есть унифицированная выборка и запись данных от bitrix framework, которую программист в комплексе с остальными тонкостями может освоить за неделю. Понятное управление данными для админа сервиса буквально с небольшими настройками уже после установки. Один программист управляет всеми процессами создания приложения. Использование компонент и разделение визуальной части и работу с данными позволяет распараллелить разработку над одним проектом до 5-и программистов, для ускорения производства.

Итоги

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

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

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

1 комментарий 1 комм.

Популярные

По порядку

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" } } } ]
Компания отказалась от email
в пользу общения при помощи мемов
Подписаться на push-уведомления