От автора: добро пожаловать на недельный марафон 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 содержит такие функции, как:
Виртуальный DOM;
Шаблонирование;
Обработка событий;
Реактивные и составные компоненты просмотра;
Переходы и анимации на основе CSS;
Вычислительные свойства;
Высокопроизводительная и сфокусированная основная библиотека;
И многое другое …
Звучит похоже на 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();
Теперь вы, вероятно:
Хотите создать родное приложение для iOS и/или Android (гибридных решений просто не достаточно);
Хотите продолжать использовать JavaScript;
Хотите продолжать использовать (или начать использовать!) Vue.js.
Как вам такое?
Переход от веб версии к родной мобильной не лишен некоторого порога вхождения. Изучая Vue.js путь NativeScript, вы должны учитывать:
Нужно изучить, как входы, так и выходы NativeScript CLI или NativeScript Sidekick;
Понять концепцию элементов интерфейса NativeScript (подумайте об этом как о лучшей версии DOM).
С чего начать?
Если вы новичок в 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:
iOS: Playground и Preview
Android: Playground и Preview
Два приложения? Что на это даёт!? Одно приложение (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.