Краткое введение в использование Vue.js с NativeScript

От автора: добро пожаловать на недельный марафон Vue.js в блоге NativeScript! На этой неделе мы загрузим вам контент Vue, ориентированный на плагин NativeScript Vue, который принесёт миру Vue.js собственную разработку мобильных приложений. Сегодня мы сосредоточимся на NativeScript-Vue для n00bs. Подумайте: «почему я могу использовать Vue (по сравнению с Angular или plain JavaScript)? Как начать работу с NativeScript-Vue? И к чему это приведёт?»

Почему Vue.js?

Фреймворк Vue.js был впервые выпущен в 2014 году бывшим специалистом Google Эваном Ю . В Google Эван был пользователем AngularJS (не путать с Angular ), это имеет большое значение, когда мы начинаем проводить параллели между двумя этими фреймворками.

Опыт Эвана с AngularJS вдохновил его написать новый фреймворк, который имеет более лёгкий жест касания или как минимум, менее сложную чувствительность, чем Angular. Эти усилия превратились в то, что мы знаем сегодня как Vue.js.

Сегодня Vue выступает как один из самых популярных фреймворков JavaScript, после Angular (JS) и React. Почему? Оосновная библиотека крошечная, в 20 кб, но имеет достаточно большие возможности, чтобы сделать ее привлекательной альтернативой Angular и React. Vue содержит такие функции, как:

Звучит похоже на AngularJS?

Перенесёмся вперёд до 2017. NativeScript с его интеграцией Angular идёт нарасхват. Но Angular, по общему признанию, подходит не для всех, а опция NativeScript Core (aka vanilla JavaScript) не достаточно обеспечивает структуру. Из-за расширяемости фреймворка NativeScript стало очевидно, что интеграция Vue.js достижима.

Что такое NativeScript-Vue?

Красота открытого исходного кода — это наблюдение за тем, кто просто вдохновлен и умеет строить поверх основы, которую вы предоставили. Концепция NativeScript-Vue Игоря сразу была зафиксирована командой разработчиков NativeScript Developer Relations и некоторыми известными членами сообщества. Мы все поняли, что теперь у нас есть нечто особенное.

Итак, что такое NativeScript-Vue ? Всё просто — это плагин, который позволяет использовать Vue.js с NativeScript. Это не ответвление Vue и не является ответвлением NativeScript. Он основывается на возможностях этих фреймворков, чтобы предоставить средства для создания действительно родных кросс-платформенных приложений с помощью этого блестящего нового инструмента, по которому все сошли с ума.

Поскольку Vue.js не взаимодействует напрямую с DOM браузера (аналогично React and Angular), код, который вы, возможно, думали, был предназначен только для работы в Интернете, допускается в приложение NativeScript (кроме синтаксиса шаблонов):

const Vue = require("nativescript-vue"); new Vue({ methods: { onButtonTap() { console.log("You tapped the button!"); }, }, template: ` <Page class="page"> <ActionBar title="Home" class="action-bar" /> <ScrollView> <StackLayout> <Label text="Hello World!" /> <Button text="Tap Me" @tap="onButtonTap" /> </StackLayout> </ScrollView> </Page> `, }).$start();

Теперь вы, вероятно:

Как вам такое?

Переход от веб версии к родной мобильной не лишен некоторого порога вхождения. Изучая Vue.js путь NativeScript, вы должны учитывать:

С чего начать?

Если вы новичок в NativeScript , я прошу прощения, поскольку я немного опередил события. NativeScript — это фреймворк с открытым исходным кодом (лицензированный Apache 2) для создания родных кросс-платформенных мобильных приложений из одной кодовой базы. Подумайте о строках JavaScript + CSS + XML-ароматизированной разметки с помощью магии NativeScript UI:

<Page class="page" xmlns="http://www.nativescript.org/tns.xsd" xmlns:calendar="nativescript-ui-calendar"> <ActionBar title="Home" class="action-bar"></ActionBar> <StackLayout> <calendar:RadCalendar /> </StackLayout>
</Page>

…как здесь:

Отставим любезности в сторону и взглянем на использование NativeScript-Vue, чтобы создать быстрое приложение, которое будет одинаково хорошо работать и на iOS и Android.

NativeScript Playground

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

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

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

Чтобы действительно увидеть мощь NativeScript Playground, нужно загрузить несколько бесплатных приложений из App Store или Google Play:

Два приложения? Что на это даёт!? Одно приложение (Playground) позволяет сканировать QR-код и загружать код в другое приложение (Preview). Вы можете представить Preview как своего рода фиктивный контейнер, в котором работает ваше приложение.

Начинаем

В открытом NativeScript Playground кликните New и выберете создание нового образца Vue.js

Затем нажмите пункт QR Code и отсканируйте код, используя ранее загруженное приложение NativeScript Playground на вашем устройстве. Вы должны увидеть что-то вроде этого:

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

Идём дальше и удаляем всё внутри тега <StackLayout>. Затем добавляем элементы <Image> и <Button>, перетащив их из меню «Components»:

… в ваш код (внутрь тега StackLayout)

Получившийся шаблон должен выглядеть так:

<Page class="page"> <ActionBar title="Home" class="action-bar" /> <ScrollView> <StackLayout class="home-panel"> <Image src="https://play.nativescript.org/dist/assets/img/NativeScript_logo.png" /> <Button text="Button" @tap="onButtonTap" /> </StackLayout> </ScrollView>
</Page>

Когда вы нажмете кнопку «Save» (или просто cmd / ctrl-S), увидите, что приложение автоматически обновляется на вашем устройстве.

Теперь мы можем немного поработать с используя тему NativeScript Core. Эта тема поставляется с каждым новым приложением NativeScript и применяется к отдельным элементам пользовательского интерфейса с классами. Добавим класс class=»btn btn-primary» к элементу button. Мы должны получить более красивую (но все еще родную) кнопку:

Вы также заметили, что Playground заполнил methods объект с помощью метода onButtonTap:

methods: { onButtonTap() { console.log("Button was pressed"); },
},

Далее нажимаем на кнопку. В Playground вы должны увидеть запись в Device Logs, отличный способ выполнить базовую отладку:

На этом этапе вы должны рассмотреть возможность входа в систему для сохранения (и совместного использования) Playground с другими.

Эй, теперь вы разработчик NativeScript и Vue! Без написания кода!

Что дальше?

Мир — это ваша золотая жила, и на данный момент следите за обновлениями в блоге NativeScript всю неделю, и вы узнаете гораздо больше от некоторых людей, которые намного умнее, чем я.

Но если вы не терпится получить контент NativeScript-Vue, взгляните на быстрый старт, доступный на nativescript-vue.org, и не забудьте зарегистрироваться в веб-семинаре NativeScript-Vue!

Автор: Rob Lauer

Источник: https://www.nativescript.org/

Редакция: Команда webformyself.