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

Question

[Dima Polos]

Сегодня решил поставить intel XDK для изучения разработки под мобильные девайсы на базе веб-технологий и на оф.сайте нашел сообщение, что проект не развивается. Есть ли аналоги, что можно использовать сейчас? Предпочтительно под iOS. Акцент на веб-технологиях, про нативные среды разработки и языки я знаю.
Заранее спасибо, за ответ.

Answer 1

[Константин Китманов]

Есть несколько вариантов.

js-to-native, нативное приложение с бизнес-логикой на js и нативными виджетами:

• react-native
  
• NativeScript — на выбор angular, с недавних пор vue, чистый js
  
• weex — аналог react-native для vue.js, из коробки так же работает под веб. С документацией пока грустновато, но народ работает.
  

Вроде как из этого react-native самый проработанный и стабильный. Имел дело только с ним, если это стабильно и проработанно, то в остальное даже страшно заглядывать (хотя NativeScript+ionic мне хвалили). Выглядит нативно на каждой платформе. Знания html и css по большей части не пригодятся: тэги/компоненты свои, css-свойства работают не все и не во всех сочетаниях.

webview, гибридное приложение, браузер на весь экран:

• cordova, старейшее живое решение
  

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

прочее:

• *.webmanifest и PWA, нечто среднее между установкой приложения и добавлением сайта в закладки.
  

По идее идеал, часто юзаешь сайт — типа ставишь приложение, редко — открываешь из браузера. У разработчика голова не болит как подружить веб, iOS и Android: везде выглядит и работает одинаково. На практике поддержка пока что пятнистая.

Comments

[Dima Polos]

Спасибо, про pwa знаю. Мне еще интересно, а на React Native как происходит сборка инсталятора, сложный процесс?

[Константин Китманов]

Dima Polos, в смысле создание apk/ipa? Несложно, готовые команды есть.

[Dima Polos]

Константин Китманов, да. А для weex также, не в курсе? Я просто на vue работаю, реакт пока учу.

[Константин Китманов]

Dima Polos, скорее всего примерно так же (не пробовал пока).

[Dima Polos]

Константин Китманов, Спасибо большое, буду изучать это дело.

Answer 2

[Igor Kalashnikov]

Последние года 3 пользуюсь Appcelerator Titanium.
https://github.com/appcelerator/titanium_mobile

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

Чем он хорош?

Как и React Native и Xamarin он предоставляет возможность создания _нативных_ приложений, управляемых JavaScript, в отличии от Cordova/Phonegap.

Другой момент, в отличии от конкурентов в Appcelerator появилась возможность писать на JavaScript _нативный код_ ! который при помощи специального транслятора (Hyperloop) превращается в Java / Obj. C
Эта штука позволяет напрямую дергать нативное окружение, минуя бридж между виртуальной машиной V8 и системой, а так же использовать любые нативные фреймворки внутри вашего приложения.
https://www.appcelerator.com/mobile-app-developmen...

Есть MVC фреймворк Alloy:
docs.appcelerator.com/platform/latest/#!/guide/All...

Менеджер модулей:
gitt.io

Так же из коробки есть облачко, если не хочется писать сервер (я пользуюсь им, как бекапом):
docs.appcelerator.com/platform/latest/#!/guide/Mob...

Есть так же аналитика, бесплатный вариант порезанный, но мне хватает.

Добавлю:
Для моделей используется надстройка над Backbone:
docs.appcelerator.com/platform/latest/#!/guide/All...
Которая умеет синкаться с SQLite

Так же пользуюсь модифицированным app.tss из https://github.com/TNuzzi/wriststrap
(https://github.com/TNuzzi/wriststrap/blob/master/t...
плюс Jade/Pug (можно через Grunt в XML перегонять, но я пользуюсь Jade Watcher в WebStorm) и получаются симпатичные на мой вкус шаблоны:

Alloy
    ScrollView.w-fill.h-fill.lo-v(right=10, left=10).st-vertical  // lo-v == (layout='vertical'), w-fill == (width="FILL")
        Label#eventName.event-name.l-0

        View.lo-c(top=10)
            ImageView#photo.event-info-photo(onLoad="photoLoad")
            View.event-info-date-time
                Label#date.event-info-date-time-label.event-info-date
                Label#type.event-info-date-time-label.event-info-type
            Label#price.event-info-price

        Require#details(src='event/card/event_card_details')
        View.bottom-spacer

Если хочется просто запустить локальный сайт, аля Phonegap, просто кидаем в шаблоне WebView компонент:
docs.appcelerator.com/platform/latest/#!/api/Titan...
растягиваем по экрану: width="Ti.UI.FILL", height="Ti.UI.FILL"
в папку с assets добавляем папку с продакшн билдом вашего веб-проекта, и в WebView проставляем ссылку.
Получится та же Cordova, только с уровнем доступа выше, вы через EventListener-ы получите доступ к любым нативным функциям, без сторонних плагинов.

И напоследок канал в Слэк:
https://ti-slack.slack.com

Comments

[Dima Polos]

Круто, спасибо, стафа для изучения теперь просто море) Как происходит процесс сборки инсталятора?

[Igor Kalashnikov]

Можно из их IDE кнопочками, но я предпочитаю WebStorm и командную строку.
Пишу так:
`appc run -p ios -T simulator --liveview`
или
`appc run -p ios -T simulator -C "DEVICE_ID_448-5BA8-448F-BC89-B22B1F496248" --liveview`
это запустит скомпилированное приложение на эмуляторе с хот-релоад модом
-C флаг сразу говорит на какой симулятор установить (чтобы каждый раз не выбирать)

`appc run -p ios -T dist-appstore`
это отправить в апстор сборку

создать приложение
`appc new`

[Dima Polos]

Igor Kalashnikov, вообще отлично, спасибо, что так подробно, пойду изучать)

Answer 3

[Sergey Vashchenko]

Наиболее стабильный и мощный инструмент, особенно под iOS - React Native. С помощью Expo проекты можно писать вообще без нативного кода, исключительно на js. Я уже год работаю на RN, писал как мелкие проекты, так и очень большие - меня все устраивает.

Comments

[Dima Polos]

А как происходит процесс сборки инсталятора?

Answer 4

[xmoonlight]

PhoneGap (+ плагины): здесь - подробный список.

Comments

[Dima Polos]

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

[alex-1917]

это реклама вашего сайта - как же это здорово! спасибо, кэп!.

а таки

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

подскажете?...
,,,
и-и-и-и-ик...
......
)))

[xmoonlight]

alex-1917, PhoneGap/Cordova - это один из многих. По остальным - я некомпетентен. Сорри.))

Answer 5

[Aleksei Podgaev]

Ещё есть ionic (https://ionicframework.com/). Это библиотека визуальных компонентов, которые выглядят как нативные для каждой из платформ. Построен на базе cordova и angular. Но разработчики вроде бы делают stencil, который будет фрэймворко-независимым. Так же у них есть куча дополнительных инструментов, как, например, утилита для запуска и отладки разрабатываемого приложения на тестовом устройстве.

Comments

[Dima Polos]

Спасибо, а сами компоненты изнутри базируются на html/css/js? Могу ли я внешний вид менять с помощью стилей, например css? Логику компонента изменить возможно?
Спасибо, за ответ, больше!

[Aleksei Podgaev]

Dima Polos, я, честно говоря, внутрь особо не заглядывал. Насколько я понимаю, это бибилиотека компонентов, написанных на Angular. Основная фишка этой библиотеки, аналогично Bootstrap, внешний вид этих компонентов. Всё заточено, чтобы они выглядели максимально "нативно" для каждой из поддерживаемых платформ. В том числе и иконки меняются в зависимости от платформы.

Конечно, при помощи css всё можно поменять, но, если сильно этим увлекаться, потеряется смысл самой библиотеки. Логики у компонентов практически никакой нет, это же просто кнопки, модальные окна и т.п.

[Aleksei Podgaev]

Да, ну и стоит также отметить, что, в отличие от Bootstrap, Ionic помимо визуальных компонентов предлагает полный пакет функционала. Т.е. разворачивая новое приложение с помощью ionic-cli ты сразу получаешь полностью настроенный проект с подключённым Angular и Cordova. Приложение сразу можно компилировать и запускать на тестовом смартфоне.

[Dima Polos]

Aleksei Podgaev, спасибо!