Мобильные приложения JavaScript: да, для этого есть платформа
Если вы хотите начать создавать мобильные приложения, есть три основных языка
на выбор: приложения Java для Android, приложения Swift для iOS или JavaScript для кроссплатформенных приложений.
Но подождите, разве JavaScript не для веб-разработки? Да, все началось таким образом, но за последнее десятилетие оно изменилось. Теперь вы можете создать веб-приложение на JavaScript и связать его с движком браузера, который работает как мобильное приложение. Это так называемые «гибридные» приложения.
В последнее время некоторые платформы JavaScript могут принимать код JavaScript, компилироваться на язык, свойственный мобильной платформе, и запускаться как настоящее мобильное приложение. Они называются «нативными» приложениями и предпочтительнее гибридных приложений, поскольку они часто имеют более высокую производительность.
В этой статье вы узнаете о семи проверенных на практике фреймворках JavaScript, которые предназначены для создания мобильных приложений с помощью одного из двух методов, упомянутых выше.
1. Реагировать родной
React, разработанный и поддерживаемый Facebook, является одной из самых популярных веб-платформ JavaScript, доступных в настоящее время. Если вы еще не попробовали его, ознакомьтесь с этими замечательными руководствами по React.
для начала. Есть немного кривой обучения, но оно того стоит.
React Native — это также родственная среда, разработанная Facebook, которая позволяет создавать мобильные приложения на JavaScript с использованием принципов React. Интерфейсы приложений разработаны с использованием тегов макета в стиле HTML и таблиц стилей в стиле CSS, поэтому, если вы веб-разработчик, который хочет попробовать свои силы на мобильной арене, это лучший способ сделать это.
Как следует из названия, React Native создает собственные мобильные приложения. Это одна из причин, почему так много современных разработчиков любят React Native, потому что его приложения имеют тенденцию превосходить приложения, написанные в других средах JavaScript. Обратная сторона? Вам придется поддерживать отдельные ветви для каждой мобильной платформы с настройками для конкретной платформы. Это не «пиши один раз, беги везде».
2. Угловой
Angular — самая популярная веб-инфраструктура JavaScript, доступная на данный момент. Созданный Google и впервые запущенный в 2009 году, он собрал огромное сообщество пользователей благодаря своему уникальному, но простому в освоении подходу к разработке одностраничных веб-приложений.
Если вы придерживаетесь правильного Angular, вы можете создавать гибридные приложения, которые предлагают нативную скорость и опыт. Двухстороннее связывание данных является одной из его наиболее заметных функций, и структура достаточно надежна для использования на уровне предприятия. В конце концов, это поддерживается уважаемым Google!
Хотя вы можете использовать Angular для собственных мобильных приложений, вам придется связать его с другой средой, такой как NativeScript или Ionic. Оба они описаны ниже.
3. NativeScript
NativeScript — это интегрированная среда JavaScript для мобильных приложений с большим акцентом на повторное использование кода. Но, пожалуй, самое интересное в этом то, что вы можете использовать один из трех языков для проектов NativeScript: JavaScript, TypeScript или Angular.
Если вы предпочитаете Angular, но он слишком медленный для вашего конкретного приложения, и вам нужно снизить производительность, то NativeScript может быть решением. Не нравится Angular? Все в порядке. Используйте платформу NativeScript Core для однократной записи и развертывания на iOS и Android.
Для создания и дизайна элементов интерфейса вы будете использовать специальный HTML-подобный язык для разметки различных компонентов, а CSS — для настройки внешнего вида компонентов.
4. PhoneGap
PhoneGap — это платформа с открытым исходным кодом, которая позволяет быстро разрабатывать гибридные мобильные приложения с использованием JavaScript (для логики приложения) и HTML + CSS (для интерфейса и дизайна). Он основан на Cordova, которая также имеет открытый исходный код, но в ней отсутствуют многие навороты PhoneGap.
Две вещи делают PhoneGap отличным решением для мобильной разработки: во-первых, приложение PhoneGap Developer (которое позволяет вам тестировать и просматривать сборки на мобильных устройствах), а во-вторых, сервис PhoneGap Build (который упаковывает и развертывает приложения для вас). Вы должны написать только один раз, и PhoneGap может доставлять приложения для iOS, Android и Windows Phone.
Хотя PhoneGap Build бесплатен для проектов с открытым исходным кодом (код должен быть извлечен из общедоступного репозитория GitHub
), вы получаете только 1 личное приложение с ограничением размера в 50 МБ. За 10 долларов в месяц вы можете увеличить до 25 частных приложений размером до 100 МБ каждое. Абоненты Creative Cloud получают 25 частных приложений размером до 1 ГБ каждое!
5. ионный
Многие считают, что Ionic Framework является самой простой средой для разработки на JavaScript. Поскольку он создает гибридные мобильные приложения, вам не нужно беспокоиться о настройках платформы (вы можете настроить их, если хотите). Пиши один раз, беги везде.
Ionic также поставляется с инструментом под названием Creator, который позволяет создавать и разрабатывать интерфейсы для вашего мобильного приложения с использованием мест размещения с помощью перетаскивания. Это гораздо проще, чем пытаться собрать пользовательский интерфейс в HTML или в HTML-подобный язык разметки. Таким образом, Ionic отлично подходит для новичков
После того, как вы создали внешний интерфейс своего приложения в Ionic, фреймворк развертывается на каждой мобильной платформе с помощью Cordova. Большая часть этого процесса выполняется за кулисами, и это очень легко даже для новичков, так что не волнуйтесь, если это звучит сложно. Это не так.
6. Метеор
Метеор претендует на славу в два раза: во-первых, это решение с полным стеком
(объединяет разработку из внешнего интерфейса, бэкэнда, базы данных, клиентской части и серверной части), а во-вторых, предлагает двустороннее связывание данных в реальном времени (если что-то меняется в бэкэнде, оно немедленно обновляется во внешнем интерфейсе).
И хотя он в основном используется для веб-приложений, Meteor можно использовать для гибридных мобильных приложений. Как и Ionic, он использует Cordova для сборки вашего проекта и развертывания для iOS и Android. К сожалению, на момент написания статьи мобильный экспорт был доступен только на Mac и Linux (не поддерживается Meteor для Windows).
7. Фазер
Если вы предпочитаете создавать мобильные игры, вам понадобится среда, предназначенная для разработки игр. Такие фреймворки выполняют всю тяжелую работу, поэтому вы можете выполнять сложные задачи в одной или двух строках кода (например, загрузить изображение или переместить камеру мира). И Phaser легко один из лучших в своем классе.
Фазер самоуверен — вы должны структурировать свой код определенным образом — но его мнения основаны на десятилетиях проверенных практик разработки игр. Кривая обучения относительно невелика, и вы можете запустить свою первую игру в течение нескольких часов.
Экспорт на мобильные устройства не является встроенной функцией, поэтому вам придется делать это с помощью такого инструмента, как Cordova. Тем не менее, существует множество обучающих программ по Phaser, поэтому не составит труда выяснить, когда ваша игра будет готова к развертыванию.
Какое мобильное приложение вы делаете?
Я хочу прояснить: это НЕ просто уловки, которые существуют для новичков, которые не могут потрудиться изучать «настоящие» языки, такие как Java и Swift. Мобильные платформы JavaScript используются чаще, чем вы думаете, реальными компаниями для реальных приложений с реальными клиентами.
И это свидетельствует о том, насколько хороши эти рамки. Просмотрите список популярных приложений для Android или популярных приложений для iOS, и вы, вероятно, не сможете определить, какие из них написаны изначально или написаны на JavaScript.
Последний совет: как только ваше мобильное приложение будет готово, ознакомьтесь с этими советами, которые помогут ему стать вирусным
, В конце концов, что хорошего в создании приложения, если никто не использует его? Удачи!
Какие рамки больше всего вам нравятся? Я скучал по хорошим? Какое приложение вы надеетесь сделать? Поделитесь своими мыслями и усилиями с нами внизу!
?Создаем мобильное приложение для Android на JavaScript с помощью Apache Cordova
Распространение мобильных устройств в наше время достигло невероятных значений. Мобильный телефон есть у 2 из каждых 3 человек на планете. С помощью мобильных люди общаются, делают покупки, получают образование, играют. Это огромный рынок, который нельзя оставлять без внимания.
Однако чтобы разрабатывать приложения для мобильных платформ, нужно владеть определенным языком программирования. Swift – для iOS, Java или Kotlin – для Android. Или JavaScript – для iOS, Android и ряда других ОС!
Да-да, JavaScript везде, и на мобильных в том числе. На данный момент есть несколько известных и проверенных фреймворков для создания кроссплатформенных мобильных приложений на этом языке, например, React Native и Apache Cordova, а также основанные на ней проекты.
Для разработки на React Native требуется знание библиотеки React и основных паттернов работы с ней. Cordova же может взять обычное веб-приложение и обернуть его нужным кодом так, чтобы оно работало на мобильных ОС. Такие «гибридные» приложения не могут похвастаться высокой нативной производительностью, однако очень просты в разработке.
Cordova отлично подходит для создания простых проектов без сложной графики. Сейчас мы как раз разработаем один из них – классическое Todo App для Android на JavaScript.
Шаг #0. Настройка среды разработки
Так как мы пишем приложение для Android, нам понадобится JDK (Java Development Kit) и Android SDK – среда разработки для приложений Android. А также собственно Cordova.
Установочник для нужной платформы можно найти на сайте Oracle. Выбирайте версию не выше JDK 8, с более новыми Cordova не будет работать.
Android Studio
Для разработки под Android также потребуется установить Android Studio.
Добавьте в переменную PATH каталоги tools и platform-tools :
Затем убедитесь, что установлен пакет Android SDK Build-Tools (во вкладке SDK Tools).
Создание эмулятора
Наконец, создадим эмулятор, на котором можно будет запускать приложение в процессе разработки.
Для этого зайдите в меню AVD Manager:
И создайте эмулятор с нужными параметрами.
Cordova
Осталось глобально установить npm-пакет Cordova:
Шаг #1. Превращение веб-страницы в Android-приложение
Подготовительные работы закончены, пора приступать к самому интересному.
Вероятно, самый интересный вопрос – как запустить обычную веб-страницу на устройстве Android. Чтобы ответить на него, создадим пустой проект Cordova и разберемся на практике.
Создание пустого проекта
Команда для создания нового проекта Cordova:
deviceready – это событие, которое вызывает сама Cordova. Нетрудно догадаться, что оно возникает после того, как устройство, на котором запущено приложение будет готово его воспроизводить. Так как мы запустили проект в обход Cordova, это событие не возникает, поэтому надпись Connecting to device не исчезает.
Добавление платформы
Укажем целевые платформы для проекта – у нас это только Android:
Сборка проекта
Команда для сборки проекта для Android-платформы:
Загрузите его на смартфон, запустите – и вы увидите ту самую дефолтную веб-страницу. Все работает!
Запуск на эмуляторе или устройстве
Нет необходимости вручную копировать apk на устройство при каждом изменение приложения.
Чтобы запустить проект на смартфоне, подключите его к компьютеру, разрешите отладку и запустите команду:
Кордова сама соберет проект, обнаружит устройство и запустит приложение
Можно обойтись и без реального устройства.
Запустите созданный ранее эмулятор в Android Studio:
и снова выполните команду:
На этот раз кордова найдет эмулятор и запустит проект на нем:
Теперь мы умеем запускать обычную веб-страницу как приложение на Android-устройстве.
#Шаг 2. TODO-приложение
Теперь заменим дефолтную страницу Cordova на собственное крутое Todo-приложение.
Откройте приложение в эмуляторе или на подключенном устройстве и убедитесь, что все работает:
Отладка
Запущенное на эмуляторе или реально устройстве приложение Cordova можно отлаживать через браузер Chrome.
Для этого перейдите по адресу: chrome://inspect/#devices, найдите устройство в списке и нажмите Inspect.
Шаг #3. Использование функциональности платформы
До сих пор наше приложение использовало только функциональность веб-платформы. Однако Cordova предоставляет доступ и к возможностям мобильного устройства – через многочисленные плагины.
Для примера реализуем нативные диалоговые окна и оповещения.
Диалоговые окна
Теперь в коде приложения нам доступ объект navigator.notification с четырьмя методами:
Нам нужен метод confirm :
Напоминания о делах
Еще одна очень полезная функциональность – напоминание о делах в установленное время.
Для начала добавим возможность выбрать дату и время – нам понадобится плагин skwas-cordova-plugin-datetimepicker.
Использование в коде:
А для планирования оповещений понадобится плагин cordova-plugin-local-notification.
Использование в коде проекта:
Публикация проекта в Google Play
Приложение готово, осталось только собрать его для продакшена.
В директории platforms/android/app/build/outputs/apk должна появиться новая папка release, внутри которой вы найдете неподписанный apk-файл.
Чтобы выложить проект в Google Play, его нужно подписать.
Для этого нужно сгенерировать ключ:
Теперь скомпилируем проект с ключом:
Важно указать правильное имя ключа и алиас.
Осталось запаковать проект в новый apk. Для этого понадобится утилита zipalign (она находится в папке build-tools в Android SDK):
Этот apk-файл можно добавлять в Google Play через ваш аккаунт разработчика.
Разработка мобильных Javascript MVC приложений с Framework7, RequireJS и Handlebars
Недавно передо мной стала задача разработки IPhone и Android приложения. Опыта разработки под IOS у меня ранее не было, да и хотелось написать один раз и запускать на обеих платформах. Соответственно был выбран был выбран Javascript и PhoneGap.
И если с языком я определился относительно быстро, то далее было много вопросов.
Хотелось сделать, что бы приложение максимально повторяло интерфейс IOS7 и было похоже на native по скорости работы. При этом с одной стороны не было желания использовать «монстров», на подобии dojo или jquery mobile. c другой стороны хотелось получить удобную модульную MVC структуру приложения.
В итоге в финал моего личного сравнения вышли:
— Ionic framework: http://ionicframework.com/
— Framework7: http://www.idangero.us/framework7/
У Ионика сначала мне понравилась документация, простые примеры и знакомая по AngularJs структура кода. Но после первых попыток создать приложение наступило разочарование. Запущенное простое приложение на Iphone5 тормозило. При нажатии на кнопки или навигации была визуально заметна задержка между нажатием и срабатыванием. На подобии 300мс задержки при клике. Но по заявлениям создателей их фреймворк содержит собственную реализацию библиотеки fastclick… Странно. Так же даже в простом приложении временами были заметны подтормаживания в анимации. В итоге после пары дней чтения документации и тестовых примеров я понял, что надо искать что-то еще.
Соответственно создал парочку учебных примеров и сейчас хочу поделиться ими с сообществом. Надеюсь они будут полезны, как начинающим разработчикам, так и более опытным, которые пока еще не знают про данный фреймворк.
Начинаем
Структура проекта
Создадим следующую структуру файлов проекта (файлы index.html и app.js пока оставим пустыми)
Что бы упростить себе жизнь – можно скачать архив со структурой по этой ссылкe:
Dropbox
(В данном архиве уже заполнены первые версии файлов index.html и app.js)
Также сразу даю ссылку на исходники на Github — там лежит последняя версия вместе с пошаговой историей правок — создания данного тестового приложения:
https://github.com/philipshurpik/Framework7-MVC-base
Создадим самый простой index.html файл, в котором подключим все необходимые библиотеки:
Также в файл app.js поместим инициализацию приложения:
Запустим и получим следующую картинку:
Вот. У нас есть первая страничка и на ней даже что-то больше, чем hello-world.
Да, если кто не знает. В Devtools Chrome рядом с консолью есть вкладка Emulation, на которой можно выбрать нужный девайс и посмотреть, как примерно приложение будет выглядеть на экране этого устройства.
Подключаем RequireJs и Handlebars, подгружаем контакты
Теперь нам необходимо динамически подгружать контакты (например из localstorage) и отображать их в списке.
Для этого изменим наши файлы:
1. index.html
Заменим прямое подключение нашего app.js файла на подключение Require.Js
Атрибут data-main указывает на точку входа в приложение (это наш файл app.js)&
Также можно удалить то, что находится внутри тегов ul – внутренности списка будут генерироваться с помощью шаблона.
2. app.js
Переделаем наш файл в RequireJs модуль:
Все тоже самое, только обернули в модуль + добавили загрузку нашего первого контроллера, которого пока еще нету.
Главная страница: контроллер, представление, template элемента
Теперь нам необходимо создать контроллер для главной страницы, ее представление, а также handlebars template.
Предлагаю назвать и разместить файлы следующим образом:
Да, подобная группировка – по функциональности – как мне кажется намного удобнее в проектах, чем размещение представлений, моделей, контроллеров в разных директориях.
Создадим простой контроллер для списка. И в нем сразу же инициализируем наш localstorage несколькими объектами контактов:
Так же теперь нам необходимо добавить представление, которое будет отвечать за рендеринг наших данных (которые мы передаем при его инициализации) с помощью темплейта.
Файл: js/list/listView.js
А также код нашего простого темплейта:
Файл: js/list/contact-list-item.hbs
Запускаем — и получаем — все тоже самое, но модульное и гораздо более расширяемое.
Теперь нам необходимо добавить страницу просмотра и редактирования контакта.
Навигация между страницами в Framework7
Каждая страница размещена в отдельном html файле.
Страница содержится внутри div c >
Аттрибут data-page определяет уникальное название страницы которое будет нам необходимо в дальнейшем для роутинга.
Все визуальные элементы страницы необходимо размещать внутри:
Навигация между страницами осуществляется или при нажатии на html ссылку:
Bли из js кода:
Навигация назад (вместе с анимацией) осуществляется аналогично:
Или добавлением класса back в ссылку:
Или из js кода:
При переходе между страницами Framework7 генерирует события, на которые можно подписаться:
PageBeforeInit, PageInit, PageBeforeAnimation, PageAfterAnimation, PageBeforeRemove
Создаем router.js
Воспользуемся событием, которое возникает после вставки новой страницы в DOM – PageBeforeInit.
Создадим простой роутер (файл router.js) и положим его в папку js, в котором подпишемся на возникновение события pageBeforeInit:
При срабатывании события мы с помощью Require загружаем необходимый нам модуль контроллера и инициализируем его, передавая в него параметры запроса, с которым была открыта страница.
Также переделаем модуль app.js, добавим в него инициализацию роутера и уберем подключение и инициализацию контроллера:
Теперь при первой загрузке приложения, после вставки главной страницы в DOM сработает обработчик события pageBeforeInit.
При этом его свойство e.detail.page.name будет равняться list, то есть тому, что было задано тут в свойстве data-page: Соответственно будет запущен соответствующий контроллер.
Страница редактирования контакта
Далее необходимо создать страницу добавления и редактирования контакта.
Добавим в корень проекта html файл contact.html (если вы скачивали структуру файлов из архива, то он там уже должен быть)
Соответствующие ссылки на contact.html уже были добавлены ранее в navbar главной страницы и в темплейт элементов списка контактов.
Теперь при нажатии на элемент списка или на кнопку добавить – роутер пробует загрузить файл js/contact/contactController.
Соотвественно нам необходимо создать его, представление страницы, а так же шаблон содержимого страницы. Вот так:
Содержимое файла contactController.js:
Если страница в режиме редактирования (в query содержится значение id контакта, то получаем его из localStorage.
Если нет, то создаем новый. Пока что для простоты мы не используем модели, поэтому наш контакт – это просто объект.
Также страница представления contactView.js:
И шаблон contact.hbs:
Ну что же. Теперь мы можем открыть нашу страницу добавления или редактирования контакта:
Осталось добавить возможность контакты сохранять и удалять.
Начнем с сохранения.
Сохранение контактов
Для начала добавим обработчик кнопки сохранить.
Конечно можно сделать это сразу напрямую в контроллере вот так:
Но так делать не хорошо, и лучше отделять работу с DOM и работу с данными и моделями.
Поэтому разделим подписку на обработку события и саму обработку.
В контроллере сделаем массив bindings:
Передадим этот массив в качестве одного из свойств объекта params в представление.
И добавим функцию-обработчик:
А в представлении добавим подписку на события по данному конфигу – функцию bindEvents:
И ее вызов из функции render:
Теперь необходимо получить значение данных введенные в форму:
Делаем это в функции saveContact:
Так же полученные данные сохраняем сразу в localStorage.
Последние две строчки отвечают за возврат на предыдущую страницу (список), а также перезагрузку данных в listController.
У нас теперь все работает!
Создание модели:
Но так оперировать всеми данными в контроллере не очень хорошо. К тому же иногда необходимо добавить специальные функции – например по валидации данных.
Поэтому сделаем модель в файле js/contactModel.js.
За одно добавим в нее функцию валидации, а также установки значений из другого объекта.
Заметьте, функции добавляются не в сам объект, а в его прототип. Соответственно при передаче или сохранении объекта в JSON передаются только его свойства, без функций.
Теперь подключим модель в contactController:
Добавим в список зависимостей:
Изменим в функции init соответственно присвоение и создание контакта:
И модифицируем функцию save, добавив в нее запуск валидации модели:
Swipe to delete
Осталось добавить удаление из списка контактов.
Реализуем это с помощью жеста Swipe To Delete в списке.
Модифицируем разметку шаблона элементов:
Добавим в listController подписку на событие:
И дальше сделаем по аналогии с подпиской в контактах – передадим в представление и там подпишемся в функции bindEvents(bindings)
А также добавим обработчик события удаления:
Смотрим на результат:
Заключение
У нас вышло готовое очень простое мобильное MVC приложение с использованием Framework7.
А сам Framework7 в связке с Phonegap позволяет создавать красивые native-like приложения в первую очередь для IOS. Что может быть полезно для разработчиков, которые плохо знакомы с ObjectiveC.
При этом мы сразу получаем кросс-платформенное приложение, которое отлично и плавно работает на Android 4.4 (и скорее всего должно так же работать и на следующих версиях).
Для нормальной поддержки недорогих Android устройств на предыдущих версиях Android, достаточно отключить анимацию между страницами, что бы получить тоже достаточно приемлимое быстродействие UI.
Исходники проекта вместе с последовательной историей правок доступны тут:
https://github.com/philipshurpik/Framework7-MVC-base
Так же я сделал расширенный учебный пример приложения контактов, имеющий больше фич и использующий больше возможностей Framework7. В нем добавлены левая выдвигающаяся панель меню, popup редактирования, строка поиска и т.д.
Его исходники вот:
https://github.com/philipshurpik/Framework7-Contacts7-MVC
А вот и скриншоты (с котиками):
Надеюсь эти примеры окажутся вам полезными.
Я сам учился на подобных, поэтому и решил создать данную статью.
Буду рад ответить на вопросы.
П.С. Автора данного фреймворка vladimirkharlampidi на хабре пока нету, но если хабровчан заинтересует эта тема — я думаю он тоже будет рад принять инвайт и присоединиться к обсуждению.