Javascript разработка для андроид

Фреймворк JavaScript для мобильной разработки — ТОП 5

Фреймворк может стать отличным помощником для разработчиков при написании кода приложений. С ним вы сможете избавиться от мелких задач и сосредоточится на самом главном. Выбор в пользу того или иного фреймворка строго зависит от особенных нужд и предпочтений конкретного разработчика, а также от его уровня квалификации. Каждый фреймворк подходит лучше для каких-то одних задач, а для других обязательно подойдет другой. Однако, сегодня мы представляем фреймворк JavaScript для мобильной разработки.

Итак, давайте рассмотрим ТОП 5 лучших фреймворков для JavaScript-разработки мобильных приложений, которые помогут значительно упростить весь процесс разработки. Поехали!

Фреймворк JavaScript для мобильной разработки — ТОП 5 в 2017 году

Angular

В настоящий момент Angular все чаще воспринимается как фреймворк. Инструмент, предоставляемый командой Angular, это полноценное решение. В отличие от React, который представляет собой всего лишь библиотеку для рендеринга компонентов, с Angular можно легко создавать полноценные приложения без использования каких-либо сторонних решений. На ресурсе Stack Overflow недавно был проведен опрос среди веб-разработчиков о том, какой фреймворк они считают лучшим. Так вот, Angular занял второе место после Node.js. Этот фреймворк JavaScript пользуется доверием!

React Native

React Native – это специальный мобильный фреймворк, созданный на базе React JS. Собственно, это JavaScript-библиотека, которая используется для создания динамических пользовательских интерфейсов. С ней любые пользователи смогут легко создавать нативные приложения под iOS и Android, используя всего лишь один язык – JavaScript. С таким решением нет смысла отдельно изучать языки Java, Objective-C или Swift. Это полноценное кроссплатформенное решение, достойное вашего внимания.

jQuery Mobile

jQuery Mobile – отличный HTML5-фреймворк. Он позволяет вам избавиться от лишней работы по разработке приложений для каждой из платформ. Вместо этого вы сможете создать один крутой отзывчивый сайт или приложение, которое будет отлично работать на любом смартфоне, планшете, ноутбуке и ПК. Благодаря jQuery Mobile разработка под iOS, Android, Windows Phone, Symbian и т.д. стала полностью универсальной. Что примечательно, этот фреймворк JavaScript также совместим с другими мобильными фреймворками, такими как PhoneGap. Доступен в самой последней версии на сайте.

Фреймворк JavaScript для мобильной разработки — ТОП 5 в 2017 году

PhoneGap

PhoneGap – фреймворк для Android-разработки, поддерживаемый компаниями Adobe и Apache. Этот комплект разработчика отличается от других тем, что позволяет видеть внесенные изменения в режиме реального времени. Это кроссплатформенное приложение, которое поддерживает разработку на HTML5, CSS и JavaScript. Используя это решение, вы получаете полноценный доступ к обширной и надежной библиотеке плагинов, которые смогут расширить ваши возможности разработки гибридных мобильных приложений.

Meteor

Meteor это не просто библиотека JavaScript, как, к примеру, jQuery или AngularJS. Это полноценное full-stack решение, в которое входят front-end библиотеки, сервер на базе Node.js и, конечно, командная строка. Все это вместе позволяет пользователям создавать крупномасштабные веб-приложения на базе JavaScript, как на стороне сервера, так и на стороне клиента. И все в одном удобном API. С Meteor разработка веб-приложений становится гораздо проще. Этот классный фреймворк JavaScript позаботится за вас о таких скучных, но необходимых задачах, как связывание файлов и минификация.

С Meteor вам не придется связывать файлы с помощью

Источник

JavaScript to APK. Подводные камни разработки под Android для тех, кого задолбал PhoneGap. Построение мостов из Java в JavaScript

Я люблю игры на JavaScript и стараюсь сделать их код пуленепробиваемыми для портирования на все платформы. Полгода назад я уже писал о сборке Android приложений и сегодня хотел бы раскрыть тему более подробно.

Сразу предупрежу, что мне пришлось отказаться от PhoneGap, т.к. опыт использования его в двух проектах меня огорчил. Он отлично справляется с «Hello World» приложениями, но при конвейерной сборке всего подряд всплывают нюансы.

Почему PhoneGap не пошел:
1. Он изначально пустой. Постоянно приходится подключать все новые и новые модули.
2. Многие модули написаны криво. Они либо берут много лишнего, либо ведут себя неожиданно. Например, из двух модулей под Android для отправки SMS, один не работал, второй — отправлял true при любых условиях.
3. Не решены элементарные вещи, вроде получения EMEI телефона. Нужно постоянно допиливать.

Я так и не понял сути PhoneGap. Изначально ожидал одну кнопку «сделать хорошо», а не деле он ничего не делает. Под каждую платформу мне все равно надо ставить SDK. Под каждую задачу — искать и ставить модуль. Сами модули тоже ограничены. Они могут делать что-то только под часть платформ, а если нужно под другие — то приходится снова искать модули, которые смогу сделать это на других девайсах. Много мусора и ненужных вещей, а ведь хочется собирать билды с минимумом затрат. Все эти факторы заставляют писать нативно. И вот тут начинают вылезать подводные камни.

Почему CocoonJS не пошел:
С CocoonJS работал мало, поэтому никаких особых вопросов не возникло. Билды с canvas действительно работают быстрее. Но в общем — смысла работать с CocoonJS не увидел, т.к. он платный.

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

Перейдем к сути

Для начала начнем с основы — WebView с запущенной HTML страничкой на весь экран. В onCreate MainActivity пишем:

Все спорные ситуации будем решать в Java. Помните, пишите вы для Bada или SmartTV — всегда есть какой-то стандартный функционал, который позволяет кидать мосты в JavaScript. В нашем случае для Android`а мы кинули экземпляр класса WebAppInterface, а сам класс будет выглядеть так:

Подводный камень: Работа с такими мостами обычно может быть асинхронна или непредсказуема и полна сюрпризов.

Если у вас возникла необходимость из Java сообщить JavaScript`у какое-либо событие на ровном месте, самый простой способ достучаться до него — это стучать в URL:

Подводный камень: В Android`ах > 4 от Samsung`а при тач-событии DOM элементы могут подсвечиваться синим цветом.

Обратите внимание на этот нюанс. Типичная «защита» вам не поможет:

Чтобы обойти багу, надо добавить:

Но это не всегда решает проблему. Возможно, на проблему влияет сама верстка. Например, возьмем два приложения: Судоку и Тест. В судоку доска сверстана таблицей, и для таблицы такое решение помогло. В Тесте же кнопки это. Вроде бы все по стандартам семантики HTML5, и все должно быть более чем прекрасно, но на деле приходиться добивать таким CSS комбо:

Так же заметил, что синее выделение не появляется, если тач-событие пришлось точно на текст кнопки (текст при этом должен быть очень большим).

Источник

Создаем приложение для ANDROID быстро и просто

Сегодня я хотел бы поделиться с Вами, как быстро и просто можно создать приложение для Android с базовыми знаниями HTML CSS и JS. По данному примеру код на Java для Android будет минимальным. Благодаря платформе XAMARIN приложения для мобильных телефонов можно делать в Visual Studio.

▍Шаг 1 — Переходим на сайт и Скачиваем бесплатную версию Community.

▍Шаг 2 — Запускаем установку и выбираем параметры. Нас интересует XAMARIN. Но Вы также можете выбрать другие параметры.

После успешной установки мы можем создать свой первый проект.

▍Шаг 3 — Запускаем Visual Studio. Создать проект. В фильтре пишем xamarin, платформа Android, язык c# (Если желаете другой язык можете его выбрать)

▍Шаг 4 — Далее. Указываете имя для своего приложения, выбираете каталог где его сохранить. Создать.

▍Шаг 5 — Указываем пустое приложение и выбираем минимальную версию андроида для запуска этого приложения.

▍Шаг 6 — Жмем ок. Visual Studio автоматически создает код для приложения

Мы можем его запустить в эмуляторе, который идет комплекте с Visual Studio нажав клавишу F5.

▍Шаг 7 — Теперь немного модифицируем код. В данном случае мы вообще не будем использовать Java. Так как мы будем кодить на C#.

Приводим код к такому виду. Здесь мы создаем WebView контейнер который будет грузить локальный HTML файл, который находится в проекте в папке Assets.

▍Шаг 8 — Создадим там папку Content.

▍Шаг 9 — Добавим в папку Content файл login.html

▍Шаг 10 — Далее уже пишем на привычном нам HTML CSS JS. Можем нажать на F5 и увидеть результат нашей работы.

По такому принципу можно создать приложение быстро и просто. Файлы html будут выглядеть одинаково на всех устройствах. То есть, Вы можете сделать приложения для Android и iOS с одинаковым интерфейсом. Не надо изучать сложные языки разметки, не надо изучать сложные макеты (сториборды) на iOS. Все можно сделать на HTML.

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

Q: Но как быть с функциями самой платформы? Пуш сообщения? Как взаимодействовать с самой платформой?

Все очень просто! JavaScript можно использовать для вызова функций Android:

▍Шаг 1 — Немного модифицируем наш файл MainActivity

▍Шаг 2 — Далее создаем класс JavaScriptInterface на который будет ругаться Visual Studio

Мы видим, что теперь программа ругается на Export так как не знает что это такое.

▍Шаг 3 — Добавим нужную библиотеку

▍Шаг 4 — В фильтре напишем mono

▍Шаг 5 — Найдем Export и поставим галочку

▍Шаг 6 — Жмем ок и видим что ошибка пропала.

Так вы можете подключать библиотеки если вдруг Visual Studio ругается на что то.

Данная функция это показ всплывающей информации на экране. Она выполняется именно на платформе Андроида. То есть мы можем написать в HTML файле вызов функции Андроида. Получается полное дружелюбие двух платформ по JavaScript интерфейсу. Данные можно передавать туда сюда. Вызывать переход от одной активити в другую. Все через HTML + JavaScript.

Немного модифицируем файл login.htm:

Теперь при нажатии на кнопку HTML вызывается функция Toast андроида и выводиться сообщение пользователю.

Источник

12 часов в шкуре Android разработчика глазами JS разработчика

Все началось с Kotlin. Случайно попалась статья про новый язык, что на нем можно писать под Android. Соприкоснувшись с темой, узнал что изначально приложения под Android пишутся на JAVA. Решил узнать на сколько трудоемко писать приложения под Android, в чем преимущества платформы на практике. Ведь по сути приложения JS и приложения Android выполняют одну и туже функцию. Заодно решил провести эксперимент. Что можно сделать за 12 часов, не зная что такое JAVA и тонкости разработки под Android, используя как помощник только Google. Пришла идея, которую развил в постановку задачи.

Постановка задачи

Взять из внешнего сервиса список всех Аэропортов мира и по коду Аэропорта получить от внешнего сервиса он-лайн табло с информацией о статусах рейсов. В 100% приложений, которые лежат в google play и реализуют такую функцию, нужно проходить цепочку действий, искать внутри приложения. Я лично, не нашел агрегатор, который позволял бы на первой странице ввести любой Аэропорт и получить его он-лайн табло. Идея и приложение само по себе простое, но это функция которой пользуется любой кто совершает перелет. Доступ к такой информации должен быть мгновенным.

Нашел потрясающий сервис, который открывает много возможности в части разработки под Авиацию. developer.flightstats.com Зарегистрировался получил на месяц бесплатный аккаунт.

Действовал интуитивно, полагаясь на свой опыт разработки в JavaScript. Набросал скетчи экранов в Photoshop. Составил требования к приложению.

Форма «Поиск»

Форма «Результат»

• Вывод данных в виде таблицы
• Сортировка по времени Прилет\Вылет

Разработка

Дальше был Я, Google и Android Studio.

Из опыта понимаю что код нужно организовывать. Интуитивно определил структуру проекта. Выделил следующие группы(Models, Stores, Views, Fields, API, Adapters) Двигало мной в этот момент бессознательное, вернее опыт. Дальше начал развлекаться с Layouts. Android Studio очень интуитивный редактор, это одна из причин которая подвигла попробовать написать Android приложение. Если kind of intellij idea – значит все комфортно. Плюс редактор лежит в бесплатном доступе, никаких ограничений, развивается и обновляется регулярно. Layouts сложились на раз два. Ни одного глюка за весь период работы, все на своих местах.

Момент который меня насторожил в самом начале, в 90% источниках, поиск и работа ведется по ID компонента. Обще принято, работа с ID это bad practice, в Android оказалось нормальной практикой. Погуглил, одно из лекарств DataBinding, отличная вещь, позволяет уйти от findViewById. Но, принцип в начальной стадии и еще год назад связь работала в одну сторону. Звучит странно, DataBinding но в одну сторону. Нужно было писать свою реализацию чтобы DataBinding был полноценный. Опираясь на реализации в JS, удивил концепт, который на текущий момент предлагает Data Binding Library(можно увидеть в большинстве случаев в сети), в ViewModel размещается логика по обработке handlers от визуальных компонент, которые в свою очередь могут иметь прямой доступ к данным которые лежат в ViewModel. С виду какой то гибрид контроллера и ViewModel.

Далее пошли вопросы коммуникации, то что нагуглилось с первого раза повергло в шок. Чтобы сделать обычный AJAX запрос нужно было тянуть строк 70 кода. Создавать фоновый процесс и там уже творить магию соединения, а потом через буфер собирать ответ. «Не может быть, чтобы было так сложно!» и продолжил поиск. В одном из результатов попалась статья про Retrofit2. С Retrofit стало все веселее и в целом жить можно в части коммуникаций. Определился с интерфейсами взаимодействия с сервером и начал сопрягать данные с визуальными компонентами.

С фильтром spinner(он же combobox) пришлось повозиться, возможно из-за неопытности. По ходу возникала куча вопросов от конвертации одного типа в другой до как реализован ООП в JAVA, но все элементарно находилось в stack overflow с ответами и примерами, плюс интуиция. В целом все шло как по маслу, кроме некоторых моментов. Чего не ожидал, что получу головную боль с датой. Почему то JAVA(или может быть это у меня так вышло) по defaul выдавала все в UTC.

В целом каких то совсем непреодолимых моментов не было из-за которых возникал полный стопор. Что не понял(зачем это сделали как dafault поведение?!) При изменении ориентации экрана(или конфигурации), ваша View которая присутствует на экране уничтожается и в новом повернутом экране заново пересоздается(фоном идет масштабная работа). Что порождает головную боль если у Вас в классе View(она же «Активность») есть динамические данные, они просто теряются при уничтожении View и с этим что-то надо делать. Дайте эту возможность, но опционально, для тех кто хочет подменять экраны при повороте. Интересно услышать мнение Android разработчика по этому поводу, возможно я не вижу всей картинки в целом.

Awesome

Потрясла производительность интерфейсов при большой нагрузке. Для теста сделал 8 spinner, в каждый забросил 4000 записей(в каждой записи еще набор свойств) и приложение даже не крякнуло. При такой ситуации, JS приложение напряглось бы, и если бы еще нужно было отображать все записи сразу, и иметь доступ работы с ними, то большая вероятность поймать зависание экрана или вообще «Опаньки». Пришлось бы тащить буферизацию вывода или решать как то алгоритмически. Но есть задачи когда нужен весь объем и сразу.

Многопоточность и фоновые процессы, на лету. Что в JS нужно можно делать с помощью webworkers, но там свои трудности, которые при разработке под Android решаются на раз, два. Причем фоном можно тягать действительно весомые объемы. Это огромное value для разработки off line приложений с сложными инженерными расчетами.

Приложение под браузер имеет свой потолок по производительности, если речь идет о высоко нагруженных интерфейсах(вывод одновременно большого объема данных) или когда фоном нужно делать объемные вычисления. Здесь перед Android приложениями снимаю шляпу. Но если Вам нужно делать что-то средне статистическое, то javascript возьмет свое скоростью разработки.

Резюме

Признаю, трудоемко писать под Android и требует в разы больше времени чем написание приложений на JS, но google интенсивно развивает и наращивает платформу. Неделя сидения за книгами и теорией Android разработки скорее всего убило бы идею попробовать сделать Android приложение и не дала бы навыков и опыта полученного за эти 12 часов. Реально столкнуться с проблемами и увидеть мир изнутри, получить первую оценку возможностей Android приложений и в будущем, столкнувшись с задачами трудно реализуемыми в JS, иметь в запасе знания куда можно еще бросить свой взгляд. Практика — быстрый путь к достижению навыков и опыта.

Что получилось: Android-приложение для просмотра он-лайн табло любого аэропорта мира.

Источник