Приложение для 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]
Хорошего дня! ❤