В этой статье мы рассмотрим NativeScript, инфраструктуру с открытым исходным кодом для создания мобильных приложений с JavaScript. В конце статьи вы должны иметь довольно хорошее представление о том, что такое NativeScript, как он работает и какие технологии он использует. Кроме того, мы также собираемся ответить на общие вопросы, которые могут у вас возникнуть при изучении новой технологии, например, как она отличается от таких альтернатив, как Cordova и React Native, и как Telerik участвует в проекте.
1. Что такое NativeScript?
NativeScript — это платформа для создания кроссплатформенных собственных мобильных приложений. Он позволяет разработчикам использовать XML, CSS и JavaScript для создания приложений для Android, iOS и даже универсальной платформы Windows. В отличие от Cordova, которая использует WebView для рендеринга пользовательского интерфейса приложения, NativeScript использует механизм рендеринга собственной платформы, что означает, что он обеспечивает действительно нативное взаимодействие с пользователем.
2. Плюсы
- Это бесплатно и с открытым исходным кодом. Это означает, что вы можете внести свой вклад в код и использовать его по своему усмотрению, если вы не нарушаете лицензию Apache 2.0 .
- Это позволяет создавать действительно нативные приложения для устройств Android и iOS. Каждый из компонентов пользовательского интерфейса, предоставляемых NativeScript, транслируется в соответствующие ему собственные компоненты пользовательского интерфейса.
- Он позволяет вам получить доступ к API нативной платформы через код JavaScript. Вам не нужно иметь знания Java или Objective-C, чтобы использовать API-интерфейсы нативной платформы, потому что вы можете написать все это на JavaScript. Это означает, что если вам нужен доступ к определенной функции устройства, вы можете просто узнать, как получить доступ к нативным API с помощью JavaScript, и все готово.
- Это дает пользователям опыт, более близкий к нативному, чем у гибридных мобильных приложений, таких как Cordova.
- Это позволяет разработчикам легко создавать, развертывать и управлять своими приложениями NativeScript через платформу Telerik. Я буду обсуждать Telerik Platform подробнее в следующем разделе.
- Он имеет поддержку нулевого дня для новых платформ. Это означает, что вы можете немедленно использовать новейшие собственные API и компоненты пользовательского интерфейса всякий раз, когда Google или Apple обновляют свою платформу.
- Документация содержит много информации о том, как начать работу , основные понятия и пользовательский интерфейс. Есть также примеры, учебные пособия , форум , вопросы о переполнении стека и примеры приложений, которые могут помочь начинающим освоить NativeScript.
- Вы можете написать свои приложения NativeScript с TypeScript. TypeScript — это язык, который переносится в JavaScript и добавляет возможности объектно-ориентированного программирования в JavaScript.
- Любая библиотека JavaScript, которую вы можете найти на npm , которая не зависит от браузера и DOM, может использоваться в NativeScript. Примеры таких библиотек включают служебные библиотеки, такие как lodash и подчеркивание .
- Вы можете делать практически все с помощью NativeScript CLI. Основы, такие как создание нового проекта, добавление платформы, запуск на устройстве и развертывание на определенной платформе, также включены. Кроме того, вы также можете установить плагины, отладить приложение и загрузить его в магазин приложений.
3. Минусы
- Там нет HTML и DOM в NativeScript. Вам нужно будет научиться использовать различные компоненты пользовательского интерфейса для создания пользовательского интерфейса приложения.
- Проверенные плагины отсутствуют. На момент написания этой статьи насчитывалось всего 16 проверенных плагинов . Хотя на npm есть много плагинов NativeScript , вы никогда не можете быть уверены в их качестве.
- Разработчикам необходимо знать собственные API-интерфейсы Android и iOS, чтобы получить доступ к оборудованию устройства и другим специфическим для платформы функциям.
- Из-за его собственной природы, вы можете тестировать приложения только на реальном устройстве или эмуляторе. Это замедляет начальную настройку тестирования. Но как только вы запустите его на устройстве, горячая перезагрузка вступит во владение. Это означает, что каждый раз, когда вы вносите изменения в исходный код, он сразу же перезагружает приложение, чтобы отразить изменения.
- Не все компоненты пользовательского интерфейса доступны бесплатно. Вам необходимо приобрести Telerik UI для NativeScript, если вы хотите использовать такие компоненты, как диаграммы и календари.
4. Как это работает?
NativeScript состоит из виртуальной машины JavaScript, среды выполнения и модуля моста. Виртуальная машина JavaScript интерпретирует и выполняет код JavaScript. Затем модуль моста преобразует вызовы в вызовы API для конкретной платформы и возвращает результат вызывающей стороне. Проще говоря, NativeScript предоставляет разработчикам способ управлять собственной платформой через JavaScript вместо Objective-C на iOS или Java на Android.
Конечно, за кулисами происходит гораздо больше, но разработчики Telerik объясняют это лучше, чем я, поэтому, если вы хотите узнать больше о внутренней работе NativeScript, вы можете прочитать статью Георгия Атанасова о NativeScript — Технический обзор или статья TJ VanToll о том, как работает NativeScript .
5. Какие технологии он использует?
С NativeScript вы используете XML для описания пользовательского интерфейса приложения, CSS для стилей и JavaScript для добавления функциональности.
Вы можете использовать TypeScript вместе с Angular 2, если вы предпочитаете использовать фреймворк для создания вашего кода JavaScript.
Для стилей NativeScript использует только подмножество CSS. Это означает, что не все функции CSS, доступные в среде браузера, могут использоваться. Например, вы не можете использовать плавающие или позиционные атрибуты. Вот полный список поддерживаемых свойств CSS . Как и в браузере, вы можете добавлять стили, которые применяются ко всему приложению, к определенным страницам или только к определенному компоненту пользовательского интерфейса. Если вы предпочитаете использовать Sass, вы можете установить плагин NativeScript Dev Sass .
Для описания структуры пользовательского интерфейса вы используете XML. Каждая страница в приложении должна быть в своем собственном XML-файле. NativeScript поставляется с предопределенными виджетами или компонентами пользовательского интерфейса, которые можно использовать для создания пользовательского интерфейса приложения. Некоторые из этих компонентов похожи на различные элементы HTML, которые вы используете в браузере.
Например, есть компонент Image , который является эквивалентом элемента img , или компонент TextField , который эквивалентен элементу input с типом текста. Обработчики событий, такие как нажатие кнопки, добавляются в сам компонент. Вот пример:
|
1
|
<Button tap=»doSomething» />
|
|
1
2
3
|
exports.doSomething = function(){
// do something
}
|
Следует также отметить, что компоненты также служат шаблонами. Если вы знакомы с библиотеками шаблонов, такими как Handlebars или Mustache, вы должны быть дома со следующим синтаксисом:
|
1
2
3
4
5
6
7
|
<ListView items=»{{ animals }}»>
<ListView.itemTemplate>
<StackLayout class=»animal»>
<Label text=»{{ . }}»/>
</StackLayout>
</ListView.itemTemplate>
</ListView>
|
В приведенном выше примере используется компонент ListView . Как следует из названия, этот компонент позволяет создавать списки. animals — это массив, определенный в файле JavaScript и связанный с переменной animals при загрузке страницы. Это делает переменную animals доступной для использования внутри файла XML.
|
1
2
3
4
5
6
7
8
|
var animals = [‘panda’, ‘tiger’, ‘monkey’, ‘snake’, ‘mantis’];
function pageLoaded(args){
var page = args.object;
page.bindingContext = {
animals: animals
}
}
|
Это выводит каждый элемент в массиве внутри ListView .
Наконец, есть плагины, которые позволяют вам получить доступ к аппаратному и аппаратному обеспечению устройства. NativeScript поставляется с предустановленным плагином камеры . Это позволяет получить доступ к камере устройства и делать фотографии. Затем вы можете сохранить локальный путь к фотографии в вашем приложении для дальнейшего использования. Специфические для платформы функции, такие как социальный обмен, также можно использовать путем установки плагинов, таких как NativeScript Social Share Plugin .
6. Какие приложения вы можете создать?
Из-за нативной природы NativeScript вы можете создавать практически любые приложения. Вот несколько примеров приложений, которые вы можете создавать с помощью NativeScript:
- Приложения, которые общаются с сервером, такие как новостные приложения и приложения для социальных сетей.
- Простые игры, такие как шахматы, крестики-нолики или пинбол.
- Приложения в реальном времени, такие как приложения чата или прямые трансляции. Есть плагин Firebase для NativeScript, который вы можете использовать для реализации приложений реального времени.
- Музыка и видео потоковые приложения. Есть плагин для видеопроигрывателя, который позволяет воспроизводить видео, хранящиеся локально, или передавать потоковое видео, например, на YouTube.
- Карты и геолокационные приложения. Есть плагины для Google Maps и нативные API для карт .
- Приложения для доступа к оборудованию устройства. Примеры включают в себя приложения камеры и приложения IoT .
Когда речь идет о видах приложений, которые вы можете создавать с помощью NativeScript, единственными ограничивающими факторами являются производительность и доступность плагинов. Написание собственных мобильных приложений на JavaScript имеет свою цену: вы не можете ожидать, что создадите приложения, требующие высокой производительности. Примеры включают игры со сложной графикой и анимацией, приложения с множеством движущихся частей и фоновые процессы.
Другое ограничение — доступность плагина. Большинство разработчиков приходят к NativeScript из опыта веб-разработки. Это означает, что большинство из них не знакомы или имеют ограниченные знания API-интерфейсов платформ, которые можно использовать для создания плагинов для доступа к оборудованию устройства или функциям платформы, таким как контакты или обмен сообщениями.
Если вы хотите узнать больше о том, какие приложения вы можете создавать с помощью NativeScript, вы можете посетить страницу « Витрины приложений» . Большинство приложений, перечисленных там, опубликованы как в Google Play Store, так и в Apple Store. Это означает, что вы можете установить его и запустить на своем устройстве, чтобы понять, как выглядят приложения, созданные с использованием NativeScript, и как они работают.
7. Как NativeScript сравнивается с гибридными фреймворками?
Если вы не новичок в разработке гибридных мобильных приложений, возможно, вы столкнулись с такими платформами, как Cordova и React Native. NativeScript связан с этими двумя средами в том смысле, что они обе направлены на решение проблемы «напиши один раз, повсюду беги» в области разработки мобильных приложений. Теперь давайте посмотрим на каждую структуру бок о бок:
| Кордова | React Native | NativeScript | |
|---|---|---|---|
| творец | Nitobi; Позже приобретено Adobe Systems | Telerik | |
| UI | HTML | Компоненты пользовательского интерфейса переведены на свои родные аналоги | Компоненты пользовательского интерфейса переведены на свои родные аналоги |
| Можно проверить на | Браузер, эмулятор, устройство | Эмулятор, устройство | Эмулятор, устройство |
| Код с | HTML, CSS, JavaScript | Компоненты пользовательского интерфейса, JavaScript, подмножество CSS | Компоненты пользовательского интерфейса, подмножество CSS, JavaScript |
| Доступ к собственным функциям | Через плагины | Родные модули | Собственный доступ к API через JavaScript |
| Развертывает в | Android, iOS, Ubuntu, Windows, OS X, Blackberry 10 | Android и iOS. Windows Universal и Samsung Tizen скоро появятся | Android и iOS. Windows Universal скоро появится |
| Библиотеки JavaScript и фреймворк | Любая интерфейсная библиотека или фреймворк (например, Angular, Ember) | Любая библиотека, которая не зависит от браузера | Любая библиотека, которая не зависит от браузера |
| Шаблон кодирования | Любой интерфейсный фреймворк может быть использован для структурирования кода | По умолчанию разметка пользовательского интерфейса, JavaScript и CSS объединены в одном файле. | MVVM / MVC шаблон |
| Как выполняется код JavaScript | WebView | JavaScriptCore Engine для выполнения кода приложения на Android и iOS | Движок Webkit JavaScriptCore для выполнения кода приложения на iOS и движок Google V8 JavaScript на Android |
Подводя итог, можно сказать, что Cordova — это гибридное мобильное приложение старого поколения. Он использует WebView для визуализации пользовательского интерфейса приложения и доступа к собственным возможностям устройства с помощью плагинов. React Native и NativeScript — это новое поколение, потому что они переводят ваш код JavaScript, чтобы он мог выполняться на собственной платформе.
Кто-то может придумать лучшее название для таких фреймворков, как React Native и NativeScript в будущем. Но пока давайте классифицируем их как «собственные гибридные фреймворки», потому что они оба используют JavaScript для разработки приложений, и они оба предлагают нативную работу и производительность для пользователей.
8. Как Telerik участвует в проекте?
Telerik — компания, которая создала NativeScript. И, как и любой другой компании, они должны зарабатывать деньги, чтобы выжить. Таким образом, вы можете спросить, если NativeScript является бесплатным и открытым исходным кодом, как Telerik зарабатывает на этом деньги? Ну, ответ через Telerik Platform и Telerik UI для NativeScript .
Платформа Telerik предоставляет разработчикам инструменты, необходимые для простого проектирования, создания, тестирования, развертывания, управления и измерения производительности приложений NativeScript. Вот несколько примеров инструментов, которые они предлагают:
- визуальный конструктор приложений, который позволяет перетаскивать различные компоненты пользовательского интерфейса
- облачная база данных, которая предоставляет базу данных для вашего приложения
- живые обновления приложения для легкой загрузки обновлений в приложение без необходимости повторной отправки его в магазин приложений, а пользователь должен обновить приложение вручную
- аналитическая служба, которая отвечает на такие вопросы, как то, как ваше приложение используется, как оно работает, и что ваши пользователи думают об этом
Telerik UI для NativeScript — это набор компонентов для создания пользовательского интерфейса приложения. NativeScript уже поставляется с бесплатными компонентами пользовательского интерфейса , но есть также платные компоненты пользовательского интерфейса, такие как Chart и Calendar, которые вы можете использовать только при покупке его у Telerik .
9. Следующие шаги
Если вы хотите узнать больше о NativeScript, я рекомендую проверить следующие ресурсы:
- Если у вас все еще есть вопросы, касающиеся NativeScript, обязательно посетите страницу часто задаваемых вопросов .
- Чтобы получить практическую статью о создании приложения hello world с NativeScript, ознакомьтесь с разделом Начало работы с NativeScript .
- Если вам нужна коллекция статей, видеоуроки и фрагменты кода о NativeScript, есть NativeScript Snacks и NativeScript Resources .
Вывод
В этой статье вы познакомились с основами NativeScript. Как вы уже видели, NativeScript — это хороший вариант для создания мобильных приложений с использованием навыков, которые у вас уже есть, как у веб-разработчика. Я надеюсь, что эта статья предоставила вам необходимые знания, чтобы помочь вам решить, подходит ли вам NativeScript.