Приложение для Android, вдохновленное моим вызовом #JavaScript30

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

Что такое NativeScript/NativeScript-Vue?

NativeScript — это фреймворк с открытым исходным кодом для создания нативных мобильных приложений с использованием JavaScript.

NativeScript-Vue — это плагин NativeScript, который позволяет вам использовать синтаксис Vue.js для решения общих задач, таких как привязка данных и обработка событий.

Поскольку NativeScript использует собственные компоненты пользовательского интерфейса, элементы HTML, такие как <div> и <span>, не существуют в NativeScript. Вместо этого вы должны использовать компоненты, предоставляемые NativeScript-Vue, которые, по сути, просто «указывают» на соответствующий собственный компонент пользовательского интерфейса для этого устройства.

Это также означает отсутствие веб-API, поэтому такие методы, как querySelectAll или getElementsById не будет работать, потому что код не работает в браузере. Работа с этой библиотекой действительно научила меня разнице между чистым JavaScript и веб-API JavaScript!

То же самое можно сказать о свойствах и селекторах CSS. В NativeScript поддерживается не так много свойств. Вы можете прочитать о поддерживаемых свойствах по ссылке ниже:
https://docs.nativescript.org/angular/ui/styling#supported-css-properties

Вы также можете создавать гибридные нативные мобильные приложения с помощью NativeScript-Vue, вставляя компоненты WebView в нативные интерфейсы, такие как TabView, для загрузки веб-приложений внутри нативного приложения, или вы можете просто использовать автономный компонент WebView, что-то вроде создание собственного браузерного приложения, которое просто направляет пользователя на ваш веб-сайт в собственном приложении. Они могут перемещаться вперед и назад, нажимая на ссылки, но не могут редактировать адрес напрямую, как вы можете в Google Chrome.

Однако одним из основных недостатков использования этого подхода является стоимость производительности. Использование WebView для загрузки собственного веб-приложения будет намного медленнее, чем загрузка собственных компонентов пользовательского интерфейса, поэтому это может привести к ухудшению работы пользователя, особенно при подключении к Интернету 2G или 3G.

Подробнее о компоненте WebView читайте здесь:
https://nativescript-vue.org/en/docs/elements/components/web-view/

Вывод

В целом, работать с NativeScript-Vue было весело и легко, но у него, безусловно, есть несколько недостатков:

  • NativeScript-Vue — это, по сути, уровень абстракции между вами и Java, и иногда мне казалось, что лучше написать Java, чем писать JavaScript, который компилируется в Java.
  • Горячая перезагрузка не всегда работает так, как вы ожидаете, что может привести к пустой трате времени, если вы ошибочно предположите, что в вашем коде есть проблема, хотя ее нет.
  • Настройка эмуляторов Android была не очень простой, а документация NativeScript для публикации приложений Android кажется отсутствующей?
  • Существует альтернатива использованию эмуляции, но приложение игровой площадки NativeScript просто выдавало мне ошибки. 🤷‍♂️

#JavaScript30 Challenge #02

Без лишних слов, вот приложение, вдохновленное проектом № 02 конкурса #JavaScript30.

В задании #JavaScript30 проект №2 — это просто часы CSS/JS, однако я хотел использовать NativeScript-Vue в качестве дополнительной задачи для создания приложения цифровых часов для Android/iOS с использованием NativeScript-Vue.

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

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

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

Вы можете проверить код здесь: https://github.com/anthonycoffey/JavaScript30_Clock_02

Если вы рискнете установить приложение для Android от неизвестного разработчика, вы можете скачать его здесь:
https://github.com/anthonycoffey/JavaScript30_Clock_02/blob/master/clock_02.apk

Посмотрите его в действии на YouTube, нажав на ссылку ниже:
https://www.youtube.com/watch?v=iQ9R7u_nlvI

Спасибо за чтение! Я надеюсь, вам понравилось, и если у вас есть какие-либо вопросы, не стесняйтесь, пишите мне по электронной почте [email protected]

Хорошего дня! ❤