что значит нативный javascript

NativeScript, что за зверь и для чего он нужен?

Доброго времени суток, хабражители, меня зовут Владимир Миленко, я frontend-инженер в компании Иннософт, географически расположенной в городе Иннополис и являющейся резидентом особой экономической зоны г. Иннополис.

Сегодня я поведаю о таком звере, как NativeScript(да, он изменился, да, сильно). NativeScript — фреймворк для кроссплатформенной разработки, придерживающийся концепции write once — use everywhere, и, возможно, у него получилось!

Что ты такое?

Начнем с простого, это JS, который запускается на JSVM, специфичной для каждой системы(V8 для Android, WebKit iOS). И все-бы было бы грустно, если бы не одно но — NS предоставляет доступ ко всем системным API.

— Валидный код, который создаст proxy-объект, все обращения к которому будут вызывать нативные методы и возвращать результат от них.

Фактически, код выше показывает обращение к нативной подключаемой библиотеке для Android. В большинстве случаев такой длинный вызов вы напишете всего один раз при создании nativescript-плагина.

Execution flow в NativeScript выглядит следующим образом:

*Изображение взято с официальной документации NativeScript

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

Например, следующий код будет выполнен нативными методами проверки существования файла.

В общем и целом, — JS+XML, работающий на JSVM и позволяющий вызывать нативные методы из JS. При этом есть возможность использовать разметку ввиде XML и использовать некий сабсет CSS, а еще применять анимации и прочее.

Почему не ReactNative?

//здесь раньше было маленькое сравнение с React.Native, но ввиду моей ошибки я его убрал. Спасибо комментаторам.
Плюсы NativeScript:
Поддерживает все компоненты из AndroidArsenal и Cocoapods.
Поддерживает вызов нативных методов из нативных библиотек.
Минусы:
Эти вызовы придется декларировать, т.е. описать библиотеку(что в общем и целом не обязательно, достаточно описать лишь те методы, которые вы вызываете)

Главное преимущество — Angular 2 + NS

С выходом Angular 2 мир веба сотрясся, в т.ч. тряслись те, кто писал на rc версиях и изменял добрую половину кода под новый rc.

Команда проделала очень большуй работу и сделала Angular 2 максимально кастомизируемым. Хочешь переопределить рендер — пожалуйста, это-то и сделали ребята из Telerik.

Что же нам дает возможность писать приложения на Angular 2 + TypeScript + NativeScript? А дает это нам тот самый code-sharing, возможность использовать огромное количество фич ангуляра.

Теперь вы можете шарить ваши сервисы между веб-компонентом и между tns-компонентом.

Рассмотрим небольшой пример шаблона:

Здесь можно заметить директиву ngFor, что позволяет наиболее удобно выводить коллекцию, если же вам необходим ListView — там это делается с помощью шаблона, т.е. android разработчикам можно забыть про ViewHolder’ы и прочее.

А вот так этот код будет выглядеть на Android:

Также в разметке можно заметить platform-specific разметку, специфичную для каждой платформы:

И раз уж заговорили о разметке, то нельзя не упомянуть two-way binding, который мы получаем с помощью angular 2:

Т.е. если описать переменную name в классе компонента, то чтобы привязать её к текстовому полю нужно написать вот такой код:

И к слову об анимации, вы можете описывать её с помощью css keyframes, использовать библиотеку keyfraymes или же оперировать через Promise.

Вот так выглядит анимация через Promise:

На этом небольшое интро подойдет к концу, опрос вы найдете чуть ниже.

Для того, чтобы понять, как Telerik смог использовать ангуляр рекомендую посмотреть выступление Алексея Охрименко с GDG Perm.

Источник

Native Script. Один код для всех платформ

Native script (NS) – это библиотека, позволяющая делать кросс-платформенные приложения, используя XML, CSS, JavaScript. Native script решает ту же задачу, что и уже всем известный phonegap (создание кросс-платформенных приложений), но подходы у них разные. Phonegap использует движок браузера, чтобы отобразить ваш UI (фактически вы получаете веб-страницу), Native script использует нативный рендеринг, использует элементы нативного UI. Следующее важное отличие: чтобы получить доступ к камере, gps и так далее в phonegap необходимо устанавливать плагины, в то время как NS дает доступ из коробки.
Стоит подчеркнуть, что приложения можно писать для Android 4.2 и выше, и для iOS 7.1 и выше.

Быстрый старт

Чтобы установить native script, необходим nodejs, поэтому если у вас еще нет его, отправляйтесь сюда. Дальше все просто. Для установки NS в командной строке выполняем:

Для создания проекта:

После того, как проект создался, переходим в директорию проекта:

И, как и в phonegap, добавляем платформы:

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

Запустить на устройстве, подключенном через USB:

Запустить в эмуляторе:

Можно также запустить в Genymotion:

В общем, как бы вы не запускали, у вас откроется приложение, которое подсчитывает количество нажатий на кнопку, оставшихся до вывода текста «Hoorraaay! You unlocked the NativeScript clicker achievement!».

Вот сравнение как выглядит приложение на iOS и Android.

Как можно заметить, кнопка везде нативная, хотя код для обоих платформ один и тот же.

Что там внутри?

Структура проекта представлена ниже:

Все, что касается вида приложения, лежит в файле main-page.xml. Всех, кто привык работать с html, ужаснет этот файл, но благо документация очень хорошая, и чуть позже все становится понятнее.

app.js – точка входа в приложение. В NS используются модули, так же как и nodejs. Думаю, тут все итак понятно.

main-page.js – содержит код для main-page.xml.

Следующий файл, main-view-model.js, позволит подробнее рассмотреть механизм data binding в NS. NS поддерживает two-way и one-way binding.

Чтобы dataBinding работал, в NS объект должен выбрасывать событие propertyChange. Это реализовано в классе Observable. В нашем случае он передается в функцию, в которой HelloWorldModel наследует его. Дальше уже через метод set полям присваиваются значения. Функция __extends в самом верху файла служит для осуществления наследования.

Источник

Нативные ECMAScript модули — первый обзор

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

В 2016 году в браузеры и Nodejs было добавлено много интересных фич и полезностей из новых стандартов, в частности спецификации ECMAScript 2015. Сейчас мы сталкиваемся с ситуацией, когда поддержка среди браузеров близка к 100%:

Также фактически в стандарт введены ECMAScript модули (часто называют ES/ES6 модули). Это единственная часть спецификации, которая требовала и требует наибольшего времени для реализации, и ни один браузер пока не выпустил их в стабильной версии.

Недавно в Safari 19 Technical Preview и Edge 15 добавили реализацию модулей без использования флагов. Уже близится то время, когда мы можем отказаться от использования привычных всем бандлов и транспиляции модулей.

Чтобы лучше понять, как мир фронтенда пришел к этому, давайте начнем с истории JS модулей, а затем взглянем на текущие преимущества и реализации ES6 модулей.

Немного истории

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

1. Просто длинный код внутри script тега. Например:

2. Разделение логики между файлами и подключение их с помощью тегов script:

3. Модуль как функция (например: модуль функция, которая возвращает что-то; самовызывающаяся функция или функция конструктор) + Application файл/модель, которые будут точкой входа для приложения:

Ко всему этому Frontend сообщество изобрело много разновидностей и новых способов, которые добавляли разнообразие в этот праздник анархии.

Основная идея заключается в том, чтобы обеспечить систему, которая позволит вам просто подключить одну ссылку JS файла, вот так:

Но всё свелось к тому, что разработчики выбрали сторону бандлеров — систем сборки кода. Далее предлагается рассмотреть основные реализации модулей в JavaScript.

Асинхронное определение модуля (AMD)

Такой подход широко реализуется в библиотеке RequireJS и в инструментах, таких как r.js для создания результирующего бандла. Общий синтаксис:

CommonJS

Это основной формат модулей в Node.js экосистеме. Одним из основных инструментов для создания бандлов для клиентских устройств является Browserify. Особенность этого стандарта — обеспечение отдельной области видимости для каждого модуля. Это позволяет избежать непреднамеренной утечки в глобальную область видимости и глобальных переменных.

ECMAScript модули (ака ES6/ES2015/нативные JavaScript модули)

Еще один способ работы с модулями пришел к нам с ES2015. В новом стандарте появился новый синтаксис и особенности, удовлетворяющие потребностям фронтенда, таким как:

Инструменты

На сегодняшний день в JavaScript мы привыкли к использованию различных инструментов для объединения модулей. Если мы говорим о ECMAScript модулях, вы можете использовать один из следующих:

Давайте посмотрим на упрощенной WebPack конфиг, который устанавливает точку входа и использует Babel для транспиляции JS файлов:

Конфиг состоит из основных частей:

И ваше приложение использует бандлы/транспилируемый код JS. Это общий подход для работы с бандлерами, давайте посмотрим, как заставить его работать в браузере без каких-либо бандлов.

Как сделать так, чтобы JavaScript модули работали в браузере

Поддержка Браузеров

На сегодняшний день каждый из современных браузеров имеет поддержку модулей ES6:

Где можно проверить

Как вы видели, в настоящее время можно проверить нативные JS модули в Safari Technology Preview 19+ и EDGE 15 Preview Build 14342+. Давайте скачаем и попробуем модули в действии.

ES модули доступны в Firefox

Вы можете скачать Firefox Nightly, а это означает, что скоро модули появятся в FF Developer Edition, а затем в стабильной версии браузера.

Чтобы включить ES модули:

Safari Technology Preview с доступными ES модулями

Если вы используете MacOS, достаточно просто загрузить последнюю версию Safari Technology Preview (TP) с developer.apple.com. Установите и откройте его. Начиная с Safari Technology Preview версии 21+, модули ES включены по умолчанию.

Если это Safari TP 19 или 20, убедитесь, что ES6 модули включены: откройте меню «Develop» → «Experimental Features» → «ES6 Modules».

Другой вариант — скачать последнюю Webkit Nightly и играться с ним.

EDGE 15 — включаем ES модули

Просто выберите виртуальную машину (VM) «Microsoft EDGE на Win 10 Preview (15.XXXXX)» и, например, «Virtual Box» (также бесплатно) в качестве платформы.

Установите и запустите виртуальную машину, далее откройте браузер EDGE.

Зайдите на страницу about:flags и включите флаг «Включить экспериментальные функции JavaScript» (Enable experimental JavaScript features).

Вот и все, теперь у вас есть несколько сред, где вы можете играть с нативной реализацией модулей ECMAScript.

Отличия родных и собранных модулей

Давайте начнем с нативных особенностей модулей:

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

Почему интерпретатор JavaScript не может определять модули, если файл и так по сути является модулем?

Одна из причин — нативные модули в строгом режиме по умолчанию, а классические script-ы нет:

Определение типа ожидаемой загрузки файла открывает множество способов для оптимизации (например, загрузка импортируемых файлов параллельно/до парсинга оставшейся части файла html). Вы можете найти некоторые примеры, используемые движками Microsoft Chakra JavaScript для модулей ES.

Node.js способ указать файл как модуль

Node.js окружение отличается от браузеров и использовать тег script type=«module» не особо подходит. В настоящее время все еще продолжается спор, каким подходящим способом сделать это.

Некоторые решения были отклонены сообществом:

Простой пример нативного модуля

Во-первых, давайте создадим простую демку (вы можете запустить его в браузерах, которые вы установили ранее, чтобы проверить модули). Так что это будет простой модуль, который импортирует другой и вызывает метод из него. Первый шаг — включить файл, используя:

И, наконец, импортированные утилиты:

Во-вторых, давайте проверим область видимости у модуля (демо):

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

Строгий режим нельзя обойти в нативных модулях.

Встроенный модуль в тег script

Как и обычные скрипты, вы можете встраивать код, вместо того, чтобы разделять их по отдельным файлам. В предыдущем демо вы можете просто вставить main.js непосредственно в тег script type=«module» что приведет к такому же поведению:

Как браузер загружает и выполняет модули

Нативные модули (асинхронные) по умолчанию имеют поведение deffered скриптов. Чтобы понять это, мы можем представить каждый тег script type=«module» с атрибутом defer и без. Вот изображение из спецификации, которое объясняет поведение:

Это означает, что по умолчанию скрипты в модулях не блокируют, загружаются параллельно и выполняются, когда страница завершает парсинг html. Вы можете изменить это поведение, добавив атрибут async, тогда скрипт будет выполнен, как только он загрузится.

Главное отличие нативных модулей от обычных скриптов заключается в том, что обычные скрипты загружаются и выполняются сразу же, блокируя парсинг html. Чтобы представить это, посмотрите демо с разными вариантами атрибутов в теге script, где первым будет выполнен обычный скрипт без атрибутов defer \ async:

Порядок загрузки зависит от реализации браузеров, размера скриптов, количества импортируемых скриптов и т. д.

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

Если хотите узнать больше сейчас, предлагаю пройтись по ссылкам:

Источник

Введение в NativeScript

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

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

2. Плюсы

3. Против

4. Как это работает?

NativeScript состоит из виртуальной машины JavaScript, среды выполнения и бридж модуля. Виртуальная машина JavaScript интерпретирует и выполняет код JavaScript. Затем бридж модуль переводит вызовы на вызовы API для конкретной платформы и возвращает результат вызывающему объекту. Проще говоря, NativeScript предоставляет разработчикам способ управлять собственной платформой с помощью JavaScript вместо Objective-C на iOS или Java на Android.

5. Какие технологии используются?

С NativeScript вы используете XML для описания пользовательского интерфейса приложения, CSS для стилизации и JavaScript для добавления функциональности.

Вы можете использовать TypeScript с Angular 2, если вы предпочитаете использовать фреймворк для разработки кода JavaScript.

Для стилизации NativeScript использует только подмножество CSS. Это означает, что не все функции CSS, доступные в среде браузера, могут использоваться. Например, вы не можете использовать floats или атрибуты позиции. Ниже приведен полный список поддерживаемых свойств CSS. Как и в браузере, вы можете добавлять стили, применимые ко всему приложению, к определенным страницам или только к определенному компоненту пользовательского интерфейса. Если вы предпочитаете использовать Sass, вы можете установить плагин NativeScript Dev Sass.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вывод

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

Источник