Нативный

Содержание

CSS variables

The Theme now exports all its internal variables to custom CSS ones in the .ns-root and .ns-modal classes. This is also done for Kendo based skins. You can use them to inherit your styles from the Theme, if using CSS. A list of the supported custom CSS variables follows:

Simple Colors Constants Light Colors Dark Colors
—color-black —const-font-size —light-primary —dark-primary
—color-white —const-background-alt-10 —light-background —dark-background
—color-grey —const-btn-color-secondary —light-accent —dark-accent
—color-grey-light —const-btn-color-disabled —light-complementary-color —dark-complementary-color
—color-charcoal —const-btn-font-size —light-complementary —dark-complementary
—color-transparent —const-btn-min-width —light-background-alt-5 —dark-background-alt-5
—color-aqua —const-btn-height —light-background-alt-10 —dark-background-alt-10
—color-blue —const-btn-padding-x —light-background-alt-20 —dark-background-alt-20
—color-brown —const-btn-padding-y —light-secondary —dark-secondary
—color-forest —const-btn-margin-x —light-disabled —dark-disabled
—color-grey-dark —const-btn-margin-y —light-text-color —dark-text-color
—color-purple —const-btn-radius —light-headings-color —dark-headings-color
—color-lemon —const-headings-margin-bottom —light-tab-text-color —dark-tab-text-color
—color-lime —const-headings-font-weight —light-accent-dark —dark-accent-dark
—color-orange —const-border-width —light-accent-light —dark-accent-light
—color-ruby —const-border-radius —light-accent-transparent —dark-accent-transparent
—color-sky —const-border-radius-sm —light-primary-accent —dark-primary-accent
—color-error —const-border-radius-lg —light-background-accent —dark-background-accent
—const-disabled-opacity —light-background-dark-accent —dark-background-dark-accent
—const-icon-font-size —light-item-active-color —dark-item-active-color
—const-icon-font-size-lg —light-item-active-background —dark-item-active-background
—light-btn-color —dark-btn-color
—light-item-active-icon-color —dark-item-active-icon-color
—light-btn-color-inverse —dark-btn-color-inverse
—light-btn-color-secondary —dark-btn-color-secondary

Use them like this:


.my-accented-class {
    color: var(--light-accent);
}

For now these CSS variables are not used internally, so changing them won’t change the look of your skin. This is planned for after HSL color support comes in NativeScript 6.2.

Ограниченная поддержка платформы

Любой кросс-платформенный фреймворк — это слой абстракции над нативной платформой и позволяет обращаться только к тем её возможностям, которые прямо поддерживаются фреймворком.

В большинстве случаев есть возможность расширить поддержку возможностей платформы путём написания нативных плагинов к фреймворку, но в некоторых случаях это может существенно усложнить разработку. Свежий пример из нашумевшей статьи AirBnb — React Native, который в данный момент не умеет “из коробки” работать с 64-битными Android-библиотеками.

Также нужно обратить внимание, что нативные плагины и основной код кросс-платформенного приложения, как правило, исполняются в разных процессах и взаимодействие между ними может вызывать проблемы с производительностью. Для работы с датчиками, или SQLite это, обычно, не проблема, но если вы используете, скажем, библиотеку OpenCV в качестве нативного плагина и начинаете кидать видео между ней и основным приложением, замедление может быть существенным

Publishing

NOTE: Only authorized authors can publish updates.

IMPORTANT: Always make sure you have run the demo app in iOS or Android to verify any changes as well as ensure the latest has been built before doing the following:

  • Bump version in
  • Adjust if any changes to the published are needed.

IMPORTANT: Never modify the contents of folder directly. The builder creates that everytime and any change you make there will be overwritten.

Setup changelog generation:

Generate changelog workflow:

  1. Make changes
  2. Commit those changes — using these conventions.
  3. Make sure Travis turns green
  4. Bump version in and
  5. Commit package.json and CHANGELOG.md files
  6. Tag
  7. Push

Гибридная разработка, HTML+JavaScript

Технически, приложения гибридного типа представляют собой HTML-страницу, отображаемую во встроенном браузере. В целом для этого подхода фреймворк не обязателен, но Cordova обеспечивает набор плагинов для доступа к возможностям платформы, из-за чего как правило используют её.

Основные плюсы

Возможность интеграции веб-элементов

Количество библиотек для HTML/JS заметно превосходит количество таковых для нативных приложений. Из интересного, сюда относятся, например, Google Analytics, или богатый выбор рекламных сетей.

Основные минусы

Невысокая производительность

Сам по себе современный JavaScript использует JIT-компиляцию, хорошо оптимизирован и работает быстро, но построение интерфейса на основе DOM-дерева — не очень эффективный процесс. Использование современных JS-фреймворков даёт дополнительный уровень нагрузки. Для слабых телефонов и/или при активном использовании интерактивных элементов, это может быть проблемой.

“Ненативное ощущение”

Это довольно неформальный, но очень важный пункт. Сайт в браузере реагирует на жесты и отображается немного не так, как мобильное приложение. Наиболее заметный элемент этого ощущения, задержку 300ms при нажатиях, Cordova решает, но многие другие детали остаются.

Проблема браузерной совместимости

На старых версиях Android (до версии 5), WebView был частью платформы и не обновлялся автоматически. Соответственно, использовать современные возможности браузеров в гибридных приложениях на этих устройствах не получится.

Как следствие, гибридные приложения либо ограничивают минимальную версию Android (оставляя за бортом около 13% устройств на данный момент), либо включают WebView в код приложения (проект CrossWalk), увеличивая размер приложения на несколько десятков мегабайт.

Предназначение

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

Основой всех основных гибридных фреймворков является Cordova, предоставляющая доступ к нативным плагинам. PhoneGap предоставляет инструментарий для сборки поверх Cordova, в то время как Ionic представляет собой фреймворк и набор компонентов для построения в ней пользовательских интерфейсов.

Long Description

What is NativeScript plugin seed?

The NativeScript plugin seed is built to be used as a starting point by NativeScript plugin developers. What does the seed give you out of the box?

  • the plugin structure with option for easy development and debugging (see below)
  • a simple working plugin
  • a demo project working with the plugin. It is useful during development and for running tests via Travis CI
  • a guideline how to structure your plugin README file that will be published to NPM
  • a shell script to create your plugin package
  • a proper to keep GitHub tidy
  • a proper to ensure everyone is happy when you publish your plugin to NPM.

Plugin folder structure

Folder/File name Description
demo The plugin demo source code (optional during postclone setup)
demo-angular The plugin demo source code (optional during postclone setup)
src The plugin source code
src/platform/android Plugin Android specific configuration
src/platform/ios Plugin ios specific configuration
src/README Your plugin README stub explaining how other developers can use your plugin in their applications. Used when you publish your plugin to NPM. On postclone step, the README in the root is replaced with this one.
src/scripts The postclone script run when you execute . Feel free to delete it after you have executed the postclone step from the section
publish Contains a shell script to create and publish your package. Read more on creating a package and publishing in the section

Getting started

  1. Open a command prompt/terminal and execute to clone the plugin seed repository into the folder where is the name of your plugin..
  2. Open a command prompt/terminal and navigate to folder using
  3. Execute to:
    • configure your github username — it will be changed in the package.json for you
    • configure your plugin name — all files and classes in the seed will be renamed for you
    • stub your plugin README.md file
    • add TypeScript NativeScript application which is setup to use your plugin from its local folder
    • add Angular NativeScript application which is setup to use your plugin from its local folder
    • create a new repository for your plugin

Now you can continue with the development of your plugin by using the described below.

NOTE: The plugin seed is updated to use the latest version of NativeScript. If you are not ready to upgrade, you can checkout a tagged version that is compatible with your NativeScript version.

Development setup

For easier development and debugging purposes continue with the following:

Open a command prompt/terminal, navigate to folder and run , , , to run the demo applications created during .

Now go and make a change to your plugin. It will be automatically applied to the demo project.


NOTE: Any changes that you need to make in a native library used in your plugin or in any other files inside directory such as Info.plist or AndroidManifest.xml can’t be directly reflected in the demo applications. You need to use or and run the application again.

Linking to CocoaPod or Android Arsenal plugins

You will want to create these folders and files in the folder in order to use native APIs:

Doing so will open up those native apis to your plugin 🙂

Take a look at these existing plugins for how that can be done very simply:

  • nativescript-cardview
  • nativescript-floatingactionbutton

It’s highly recommended to generate typings for the native libraries used in your plugin. By generating typings you’ll be able to see what APIs exactly are exposed to Javascript and use them easily in your plugin code

Generating typings for Android

  • Clone Android DTS Generator repo
  • Follow the steps in the README
  • Copy the generated d.ts files in . Feel free to rename the generated files for readablity.
  • Open and add a reference to each of the files added to

Clean plugin and demo files

Sometimes you may need to wipe away the , and folders to reinstall them fresh.

Run npm run clean to wipe those clean then you can can run npm i to install fresh dependencies.

Sometimes you just need to wipe out the demo’s directory only:

Run npm run demo.reset or npm run demo-angular.reset to delete the application’s platforms directory only.

Sometimes you may need to ensure plugin files are updated in the demo:

Run npm run plugin.prepare will do a fresh build of the plugin then remove itself from the demo and add it back for assurance.

Publish to NPM

When you have everything ready to publish:

  • Bump the version number in
  • Go to and execute (run if the file isn’t executable)

If you just want to create a package, go to folder and execute . The package will be created in folder.

To properly show current build status you will have to edit the badge at the start of the README.md file so it matches your repo, user and branch.

Kendo UI ThemeBuilder support

$base-theme:Default;
$skin-name:test;
$swatch-name:Default Purple;
$border-radius: 10px;
$accent: #bf70cc;
$info: #3e80ed;
$success: #5ec232;
$warning: #fdce3e;
$error: #d51923;
$text-color: #656565;
$bg-color: #ffffff;
$base-text: #656565;
$base-bg: #f6f6f6;
$hovered-text: #656565;
$hovered-bg: #ededed;
$selected-text: #ffffff;
$selected-bg: #bf70cc;
$series-a: #ff6358;
$series-b: #ffd246;
$series-c: #78d237;
$series-d: #28b4c8;
$series-e: #2d73f5;
$series-f: #aa46be;

Take this file, add the following under it:

// Uncomment this row, if you target compat styling:
// $compat: true;

@import '~@nativescript/theme/index';

And load the file after your core theme. It should just work. If it doesn’t — head for the issues section.

Theme classes and compatibility

The old generic theme classes have been retired to avoid clashes with user code. They now live in the .compat world — if you want to use them, you should load them separately, like this:

@import "~@nativescript/theme/core.compat";
@import "~@nativescript/theme/blue.compat";

As of 2.0, the theme now utilizes a simplified BEM approach for the new element classes, that might be needed here or there. For instance, the buttons need and modifiers, instead of the old and classes. All element classes (which are not needed by default, except if you want to style a component to look like another one) are namespaced, so for instance a button is , an action bar is and a ListView is .

Риски поддержки

Считается, что вероятность того, что поддержка кросс-платформенного фремворка закончится — намного выше, чем вероятность того же события в отношении мобильной ОС.

На самом деле вопрос довольно сложный. ОС могут закрываться так же, как фреймворки (пример Windows Phone совсем свеж). Кроме того, внутри нативной разработки могут отдельные технологии также могут закрываться и иногда код на кросс-платформенных фреймворках обладает большей живучестью.

Пример этого есть в области игр и мультимедиа — Apple собирается отправить на покой технологию OpenGL в своих ОС и всем, кто писал нативные 3D-приложения придётся их полностью переписывать для выпуска новых версий. В то же время для тех, кто пользовался кросс-платформенными игровыми движками (например Unity), обновление не потребует никаких дополнительных усилий.

SASS @import syntax

To import external stylesheets, use the standard SASS syntax:


As of v1.0.0 of this plug-in, imports use relative paths. For example, to reference an external stylesheet in the root directory from a stylesheet in a sub-folder:

As of v1.0.0 of this plugin, you can also reference SASS files in the directory using the tilde () notation. For example, to reference a SASS stylesheet in the plugin:

NOTE: Do not include a forward slash after the tilde. Use and not . The later will not resolve correctly.

Using file extensions with @import

In some cases, the current version of node-sass requires statements to explicitly include the filename extension (like ). This occurs if files with the same name exist in the same path.

For example:

Node-sass will throw an error if the syntax is used. As a workaround, use an explicit filename, like:

This is currently on the roadmap for node-sass 4.0. See this issue for more detail.

LiveSync Support

This plugin will work in all versions of NativeScript to transpile SCSS and SASS files, but for LiveSync to work as expected with real-time style updates:

  • NativeScript 2.5 and higher, use version 1.x and higher of this plugin (latest version)
  • NativeScript 2.4.x and lower, use version 0.4.2

You can install a specific version of this plug-in using this command:

To use the latest release candidates (when available), use this command:

In NativeScript 2.4 and lower, the current version of this plug-in will cause LiveSync to trigger an app restart. The last version of this plug-in that supports real-time updates (with no app restart) in NativeScript 2.4 and lower is 0.4.2.

Usage

The core theme supports light and dark core styling and skins on top of that. To load the core theme styling, just load the core CSS and its default skin:

@import "~@nativescript/theme/css/core.css";
@import "~@nativescript/theme/css/default.css";

or alternatively SCSS:

@import "~@nativescript/theme/core";
@import "~@nativescript/theme/default";

If you want, you can choose from several different skins. To do that, you can change the second CSS/SCSS file to the preferred skin name:

@import "~@nativescript/theme/css/core.css";
@import "~@nativescript/theme/css/blue.css";

or

@import "~@nativescript/theme/core";
@import "~@nativescript/theme/blue";

In order to import just the Theme variables in one of your modules, use this:

@import "~@nativescript/theme/scss/variables";

It will import just the variables and mixins, without any additional styling.

Here is the old list of Theme skins — the first two are now the Core default Light and Dark skins, the rest are all the Light skins available, listed by name.

The theme will style your application using Element selectors — you don’t need to add CSS classes on every element you need to style.

Additionally, if you need to create you own skin, you can start just from the core theme — it includes the sizing and initial styling of the components.

Should I use sass or node-sass

Theme 2.0 is developed using SASS. The NPM package used was sass (formerly dart-sass), however it can be used with either sass or node-sass. The difference between them is that sass doesn’t depend on a native module (unless you add fibers) and is a little slower (30%) than node-sass, however it doesn’t need recompilation if you change Node versions often. If you decide to use it, you should update your webpack config and change the sass-loader options to load sass instead (node-sass is the default sass-loader implementation), like this:

{
    loader: "sass-loader",
    options: {
        implementation: require("sass")
    }
}

API

Methods

create(options) — creates instance of the imagepicker. Possible options are:

Option Platform Default Description
mode both multiple The mode if the imagepicker. Possible values are for single selection and for multiple selection.
minimumNumberOfSelection iOS The minumum number of selected assets.
maximumNumberOfSelection iOS The maximum number of selected assets.
showsNumberOfSelectedAssets iOS True Display the number of selected assets.
prompt iOS undefined Display prompt text when selecting assets.
numberOfColumnsInPortrait iOS 4 Set the number of columns in Portrait orientation.
numberOfColumnsInLandscape iOS 7 Set the number of columns in Landscape orientation.
mediaType both Any Choose whether to pick Image/Video/Any type of assets.
showAdvanced Android false

The hostView parameter can be set to the view that hosts the image picker. Applicable in iOS only, intended to be used when open picker from a modal page.

  • authorize() — request the required permissions.
  • present() — show the albums to present the user the ability to select images. Returns an array of the selected images.

Setting Dark or Light mode from JavaScript

Setting the theme mode from JavaScript is also much easier now — just import the theme and call Theme.setMode() with your preferred mode — either Theme.Light or Theme.Dark, like this:

import Theme from "@nativescript/theme";

Theme.setMode(Theme.Dark); // Or Theme.Light

Keep in mind that in {N} 6.2 these changes will override the default system mode. To restore it, use Theme.Auto (available since Theme 2.3.0):

import Theme from "@nativescript/theme";

Theme.setMode(Theme.Auto);

Additionally there is another helper method — toggleMode, which can be used without parameters to just toggle the mode or with a boolean parameter to ensure light or dark mode is set:

import Theme from "@nativescript/theme";

Theme.toggleMode(); // to toggle between the modes

// or

Theme.toggleMode(true);  // to ensure dark mode
Theme.toggleMode(false); // to ensure light mode
A note of warning

Due to limitation in Playground the JS Theme API cannot be imported like an ES6 module in a TS/Angular projects. You’ll have to resort to requiring it:

const Theme = require("@nativescript/theme");

Theme.setMode(Theme.Dark); // Or Theme.Light

Migrating from 5.x.x to 6.x.x

With version 6.x.x the dependency to the plugin is removed and for iOS the QBImagePicker cocoa pod is used. Now the plugin supports some new features, fixes some bugs and has a more native look in iOS. You should remove any dependencies to , , etc. in case you’ve added them in your app specifically for this plugin. Also the options fileUri, doneText, cancelText, albumsText, newestFirst and the methods cancel() and done() are no longer applicable. The image picker now returns the basic {N} ImageAsset class (and not custom asset as before). If you have been using the property of the returned assets to get a file path in versions prior to 6.x.x, you should refer to the following issue comment for an alternative way to get the path — .

Собственный UI, общий код

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


Принцип данного подхода — приложение использует собственный код и собственную отрисовку пользовательского интерфейса.

Основные плюсы

Высокая производительность интерфейсов

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

“Дизайнерские интерфейсы”

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

Основные минусы

Данные минусы актуальны только для приложений, имитирующих стандартный интерфейс ОС. Как уже говорилось, для дизайнерских интерфейсов и игр данный подход является оптимальным.

Размер приложения

Приложения с таким подходом вынуждены нести с собой код для отрисовки всех элементов интерфейса, включая условно стандартные. Это сказывается как на размере приложения при установке, так и на оперативной памяти при работе.

Если первую проблему можно минимизировать эффективным Tree Shaking (как это делают последние версии Flutter), то по оперативной памяти эти приложения стабильно проигрывают нативным. Впрочем, эта проблема характерна и для других кросс-платформенных фреймворков.

Ненативный интерфейс

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

Но есть и более крупный минус — с таким подходом сложнее всего использовать сторонние элементы интерфейса, созданные для нативных приложений (включая упомянутые ранее Native Ads).

Основные фреймворки

Flutter

Flutter продвигается компанией Google как основной фреймворк кросс-платформенной разработки и основа интерфейса их будущей ОС Fuscia. Пока фреймворк очень молод (в стадии Release Preview) и не очень распространён, но быстро набирает популярность. Использует язык Dart (с компиляцией в нативный код).

Имеет все плюсы и минусы молодости — продуманную архитектуру с учётом ошибок предшественников, но достаточно ограниченную экосистему.

QT Mobile

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

Kivy

Ещё один не очень популярный фреймворк, который интересен, в первую очередь тем, что это единственный фреймворк в списке, который использует язык Python. Для разработчиков, знакомых только с этим языком (а таких много в некоторых областях информационных технологий), это может иметь решающее значение.

По работе памяти в Xamarin и похожих фреймворковСравнение производительности нативных приложений, Flutter и React Native

How does it differ from the NaticeScript CLI Cloud extension?

Comparing the cloud builds part of the NativeScript Cloud extension and the NativeScript Remote Builds plugin, they look similar.

The main differences come from the fact that the NativeScript Remote Builds plugin enables the existing NativeScript CLI commands on environments without any requirements instead of providing additional commands like the ones. The Remote Builds plugin is also designed to be stable and reliable in a CI environement.

Here’s a comparison table between the NativeScript Cloud Extension and the NativeScript Remote Builds plugin:

Cloud Extension Remote Builds Plugin
Build, Run and Publish without
Debug without     
Run Unit Tests without
Just the default NativeScript CLI commands
Free          
native tooling
Any native environment requirements like Java, Android SDK, Android Studio, macOS, Xcode, Cocoapods, Docker and so on.
cloud extension debug support
It is available only through NativeScript Sidekick.
iOS signing management
full CI support
If the user can build and run tests on pull requests or commits. In other words, if it is supported to build multiple versions of the same app in parallel.
full environment information
If the full environment information is available to the users (e.g. the versions of the OS and the .
full environment control
If the environment setup can be controlled by the user (e.g. change the versions of the os and the .
cloud extension price
The NativeScript Cloud extensions is providing a limited number of free builds.
remote builds plugin price

Using Theme variables

There are several functions and mixins in the core theme, that can be used in your projects, as long as you’re using SASS/SCSS.

If you need to access specific theme variables like simple colors or sizes, do it through the function:

Button {
    background-color: const(forest);
    height: const(btn-height);
}

You can get light/dark colors:

Button {
    color: light(primary);

    .ns-dark & {
        color: dark(primary);
    }
}

or alternatively set them both in one go — this mixin does the same as the upper example:

Button {
    @include colorize($color: primary);
}

You can darken/lighten a color depending on its background (darken for light theme and lighten for dark theme):

Button {
    @include colorize($contrasted-border-color: accent background 20%);
}

The above example uses the contrasted function to check the contrast level of the background and adjust the lightness of the accent color according to it.


С этим читают