Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Mobile Development

Введение в NativeScript

by
Length:LongLanguages:

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

В этой статье мы рассмотрим NativeScript, платформу с открытым исходным кодом для создания мобильных приложений на JavaScript. В конце статьи вы должны будите иметь довольно хорошее представление о том, что такое NativeScript, как он работает и какие технологии он использует. Помимо этого, мы также получим ответы на общие вопросы, которые могут возникнуть при изучении новой технологии, например, чем она отличается от альтернатив, таких как Cordova и React Native, и о том, как Telerik участвует в проекте.

1. Что такое NativeScript?

NativeScript - это основа для создания кросс-платформенных нативных мобильных приложений. Она позволяет разработчикам использовать XML, CSS и JavaScript для создания приложений для Android, iOS и даже для Windows Universal Platform. В отличие от Cordova, которая использует WebView для визуализации пользовательского интерфейса приложения, NativeScript использует механизм рендеринга собственной платформы, что означает, что он обеспечивает действительно собственный пользовательский интерфейс.

2. Плюсы

  • Платформа бесплатная и с открытым исходным кодом. Это означает, что вы можете внести свой вклад в код и использовать его, как хотите, до тех пор, пока вы не нарушите лицензию Apache 2.0.
  • NativeScript позволяет создавать действительно нативные приложения для устройств Android и iOS. Каждый из компонентов пользовательского интерфейса, который предоставляет NativeScript, преобразуется в соответствующие компоненты собственного пользовательского интерфейса.
  • Он позволяет вам получить доступ к собственным API-интерфейсам платформы через код JavaScript. Вам не нужно знать Java или Objective-C, чтобы использовать API-интерфейсы на основе платформы, потому что вы можете написать все это в JavaScript. Это означает, что если вам нужно получить доступ к определенной функции устройства, вы можете просто узнать, как получить доступ к собственным API-интерфейсам с помощью JavaScript и двигаться дальше.
  • Это дает пользователям получить доступ к более нативным функциям устройств, чем те, которые предоставляются гибридными платформами мобильных приложений, такими как Cordova.
  • Это позволяет разработчикам легко создавать, развертывать и управлять своими приложениями NativeScript через платформу Telerik. Я расскажу о платформе Telerik больше в более позднем разделе.
  • Он поддерживает zero-day support для новых платформ. Это означает, что вы можете сразу использовать новейшие собственные API и компоненты пользовательского интерфейса, когда Google или Apple обновляют свою платформу.
  • В документации содержится много информации о том, как начать работу, основные концепции и пользовательский интерфейс. Также есть примеры, учебные пособия, форум, вопросы на Stack Overflow и примеры приложений, которые помогут начинающим освоить NativeScript.
  • Вы можете написать приложения NativeScript с помощью TypeScript. TypeScript - это язык, который преобразуется в JavaScript и добавляет возможности объектно-ориентированного программирования в JavaScript.
  • Любая библиотека JavaScript, которую вы можете найти в npm, которая не полагается на браузер и DOM, может использоваться в NativeScript. Примеры таких библиотек включают библиотеки утилиты, такие как lodash и underscore.
  • Вы можете сделать почти все с помощью NativeScript CLI. Все это включает в себя создание нового проекта, добавление платформы, запуск на устройстве и развертывание на конкретной платформе. Помимо этого, вы также можете устанавливать плагины, отлаживать приложение и загружать в магазин приложений.

3. Против

  • В NativeScript нет HTML и DOM. Вам нужно будет узнать, как использовать различные компоненты пользовательского интерфейса для создания пользовательского интерфейса приложения.
  • Проверенных плагинов не хватает. На момент написания этой статьи всего 16 проверенных плагинов. Хотя в npm есть много плагинов NativeScript, вы никогда не сможете быть уверены в их качестве.
  • Разработчикам необходимо знать собственные API для Android и iOS, чтобы получить доступ к аппаратным средствам устройства и другим специфичным для платформы функциям.
  • Из-за своей природы вы можете тестировать приложения только на самом устройстве или эмуляторе. Это делает начальную настройку для тестирования медленнее и труднее. Но как только вы его запускаете на устройстве, происходит перезагрузка. Это означает, что каждый раз, когда вы вносите изменения в исходный код, он немедленно перезагружает приложение, чтобы отразить изменения.
  • Не все компоненты пользовательского интерфейса доступны бесплатно. Вам необходимо приобрести пользовательский интерфейс Telerik для 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, доступные в среде браузера, могут использоваться. Например, вы не можете использовать floats или атрибуты позиции. Ниже приведен полный список поддерживаемых свойств CSS. Как и в браузере, вы можете добавлять стили, применимые ко всему приложению, к определенным страницам или только к определенному компоненту пользовательского интерфейса. Если вы предпочитаете использовать Sass, вы можете установить плагин NativeScript Dev Sass.

Для описания структуры пользовательского интерфейса вы используете XML. Каждая страница в приложении должна быть в собственном XML-файле. NativeScript поставляется с предустановленными виджетами или компонентами пользовательского интерфейса, которые вы можете использовать для создания пользовательского интерфейса приложения. Некоторые из этих компонентов похожи на различные HTML-элементы, которые вы используете в браузере.

Например, есть компонент Image, который эквивалентен элементу img или компонент TextField, который эквивалентен элементу input с типом текст. Обработчики событий, такие как нажатие кнопки, добавляются в самом компоненте. Вот пример:

Другое дело, что компоненты также служат в качестве шаблонов. Если вы знакомы с шаблонами таких библиотек, как Handlebars или Mustache, вы должны быть знакомы со следующим синтаксисом:

В приведенном выше примере используется компонент ListView. Как следует из названия, этот компонент позволяет создавать списки. animals - это массив, определенный в файле JavaScript и привязанный к переменной animals при загрузке страницы. Это делает переменную animals доступной для использования внутри XML-файла.

Этот код выводит каждый элемент в массиве внутри ListView.

Наконец, есть плагины, которые позволяют вам получить доступ к аппаратным средствам и особенностям платформы. NativeScript поставляется с предустановленным плагином камеры. Это позволяет получить доступ к камере устройства и делать снимки. Затем вы можете сохранить локальный путь к фотографии в своем приложении для последующего использования. Такие специфичные для платформы функции, как социальный обмен, также могут быть использованы при установке плагинов, например плагин NativeScript Social Share Plugin.

6. Какие приложения вы можете создать?

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

  • Приложения, которые общаются с сервером, например, приложения для новостей и приложения для социальных сетей.
  • Простые игры, такие как шахматы, тик-так-тое или пинбол.
  • Приложения реального времени, такие как чат-приложения или прямые трансляции. Есть плагин Firebase для NativeScript, который вы можете использовать для реализации приложений реального времени.
  • Приложения для воспроизведения музыки и видео. Существует плагин для видеоплеера, который позволяет воспроизводить видео, хранящиеся локально, или передавать удаленные видеоролики, например, на YouTube.
  • Приложения для карт и геолокации. Существуют плагины для Карт Google и собственные API карт.
  • Приложения, которые обращаются к аппаратным средствам устройства. Примеры включают приложения для камер и приложения IoT.

Когда дело доходит до видов приложений, которые можно создавать с помощью NativeScript, единственными ограничивающими факторами являются производительность и доступность плагина. У написания собственных мобильных приложений на JavaScript есть и своя цена: вы не можете рассчитывать на создание приложений, требующих высокой производительности. Примеры включают игры со сложной графикой и анимацией, приложения с большим количеством движущихся частей и фоновые процессы.

Другим ограничением является доступность плагина. Большинство разработчиков приходят к NativeScript из веб-разработки. Это означает, что большинство из них не знакомы или имеют ограниченное знание API-интерфейсов о нативной платформе, которые могут быть использованы для создания плагинов для доступа к аппаратным средствам устройства или специфичным для платформы функциям, таким как контакты или обмен сообщениями.

Если вы хотите узнать больше о том, какие приложения вы можете создать с помощью NativeScript, вы можете проверить страницу App Showcases. Большинство приложений, перечисленных в них, публикуются как в Google Play Store, так и в Apple Store. Это означает, что вы можете установить его и запустить на своем устройстве, чтобы понять, какие приложения созданы с использованием NativeScript и как они работают.

7. Сравнение NativeScript с гибридными фреймворками

Если вы не новичок в разработке мобильных мобильных приложений, возможно, вы уже успели столкнуться с такими фреймворками, как Cordova и React Native. NativeScript связан с этими двумя фреймворками, поскольку они оба направлены на решение проблемы «Write once, run at» в области разработки мобильных приложений. Теперь давайте посмотрим на каждый из этих фреймворков:


Cordova React Native NativeScript
Создатель Nitobi; Позже приобрел Adobe Systems Facebook 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) Любая библиотека, которая не зависит от браузера Любая библиотека, которая не зависит от браузера
Схема кодирования Любая инфраструктура front-end может использоваться для структурирования кода Разметка пользовательского интерфейса, JavaScript и CSS объединяются в один файл по умолчанию
Шаблон MVVM / MVC
Как выполняется код JavaScript WebView JavaScriptCore Engine для выполнения кода приложения на Android и iOS
Webkit JavaScriptCore для выполнения кода приложения на iOS и JavaScript на V8 JavaScript на Android

Подводя итог, Cordova - это старое поколение гибридных мобильных приложений. Он использует WebView для визуализации пользовательского интерфейса приложения и доступа к собственным возможностям устройства с помощью плагинов. React Native и NativeScript - это новое поколение, потому что они переводят ваш JavaScript-код, чтобы он мог выполняться на собственной платформе.

Кто-то может придумать лучшее имя для фреймворков, таких как React Native и NativeScript в будущем. Но пока давайте классифицировать их как «Нативные гибридные фреймворки», потому что они оба используют JavaScript для разработки приложений, и оба они предлагают возможности и производительность для пользователей.

8. Как Telerik участвует в проекте?

Telerik - это компания, которая создала NativeScript. И, как и любая другая компания, им нужно зарабатывать деньги, чтобы выжить. Таким образом, вы можете спросить, является ли NativeScript бесплатным и открытым исходным кодом, как Telerik зарабатывает на этом деньги? Ну, ответ через платформу Telerik и пользовательский интерфейс Telerik для NativeScript.

Платформа Telerik предоставляет разработчикам инструменты, необходимые им для легкого проектирования, сборки, тестирования, развертывания, управления и оценки производительности приложений NativeScript. Вот несколько примеров инструментов, которые они предлагают:

  • Билдер визуального приложения, который позволяет перетаскивать различные компоненты пользовательского интерфейса
  • Облачная база данных, которая предоставляет данные для вашего приложения
  • Живые обновления приложений для простого выкатывания обновления в приложении без необходимости повторной отправки его в хранилище приложений и обновления пользователем приложения вручную
  • Аналитический сервис, который отвечает на вопросы, такие как использование вашего приложения, как оно работает и что ваши пользователи думают о нем

Пользовательский интерфейс Telerik для NativeScript представляет собой набор компонентов для создания пользовательского интерфейса приложения. В NativeScript уже есть бесплатные компоненты пользовательского интерфейса, но есть и платные компоненты пользовательского интерфейса, такие как Chart и Calendar, которые вы можете использовать только при покупке у Telerik.

9. Следующие шаги

Если вы хотите узнать больше о NativeScript, я рекомендую проверить обратить внимание на следующие ресурсы:

Вывод

В этой статье вы узнали о самых основах NativeScript. Как вы видели, NativeScript является хорошим вариантом для создания мобильных приложений с использованием навыков, которые у вас уже есть как у веб-разработчика. Я надеюсь, что эта статья предоставила вам необходимые знания, чтобы помочь вам решить, подходит ли NativeScript для вас.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.