Nativescript-Vue Native Mobile Apps without the Hard Parts™ 

Arnav Gupta Co Founder, Coding Blocks ● Author of vuex-persist – 2nd most popular Vuex plugin ● Coding Blocks has built ide.codingblocks.com – an online IDE in Vue ● Currently developing HasGeek’s new mobile app in Nativescript-Vue!!! 

What is Nativescript-Vue ? ? ? 

A quick tour of Nativescript 

A quick tour of Nativescript “ An open source framework for building truly native mobile apps with JavaScript. Use web skills, like TypeScript, Angular and CSS, and get native UI and performance on iOS and Android ” 

. . . unlike ● Cordova – not a webview ● PhoneGap – not a webview ● Ionic – not a just web framework ● React Native – WORA, not LOWA (100% code sharing) ● Xamarin – no cross-compile or bindings ● Flutter – uses OEM widgets, not render graphics itself 

Layout System ● AbsoluteLayout x,y co-ordinate based positioning 

Layout System ● DockLayout arranges children on outer edges 

Layout System ● GridLayout 

Layout System ● Stack Layout 

Layout System ● WrapLayout 

Extendable ● Android Libraries – via Gradle ● iOS Libraries – via CocoaPods ● JS Libraries – via NPM 

Runtime Engine JavaScriptCore V8 

Full Native API access. Call Swift/Kotlin/Java/ObjC code directly from JS 

// custom-plugins/device.ios.js module.exports = { version: UIDevice.currentDevice().systemVersion } // custom-plugins/device.android.js module.exports = { version: Build.VERSION.RELEASE } // app.js import device from ‘./custom-plugins/device’; console.log(device.version); Device Specific Code in JS 

Multiple ways to use 

Vanilla ● Templates = XML ● Logic – JS or TS 

Angular ● Templates = XML-like, in template literals : `` ● Logic – Typescript (just like any Angular 4 app) 

Vue (tns) ● Templates = XML-like, in template literals : `` ● Logic – JS (or TS) ● Only .js/.ts files, no .vue files ● Global Stylesheet 

Vue (vue-cli) ● Single File Components `, , <style>` ● Templates in HTML/Pug/Jade/EJS ● Code in JS/TS/Coffee ● Scoped + Global styles 

What’s the difference ? vue-cli-template ● Nativescript in Vue ● Tooling = vue-cli ● Your own webpack.config ● .vue files, just the way you like ● Vue-loader awesomeness (use any styling/scripting/template language) ● Double build step. Hot warm reload nativescript-vue-template ● Vue in Nativescript ● Tooling = tns cli ● Nativescript build + bundle JS/TS itself ● .js files, add tempalate = `` in export ● Only Sass/JS/TS/HTML support ● Single build step. Blazing fast hot reload 

Getting Started vue-cli-template $ npm install -g @vue/cli @vue/cli-init $ vue init nativescript-vue/vue-cli-template $ cd $ npm install $ npm run watch:ios $ npm run watch:android nativescript-vue-template $ npm install -g nativescript $ tns create --template nativescript-vue-template $ cd $ tns run android $ tns run ios 

Directory Structure vue-cli-template ├── dist # template + webpacked src (tns consumes) ├── src # Your VueJS app as you know it │ ├── assets │ ├── components │ ├── router │ └── store ├── template # Nativescript skeleton │ └── app │ └── App_Resources │ ├── Android │ └── iOS ├── webpack.config.js 

Directory Structure nativescript-vue-template ├── app # Vue JS app source (tns consumes) │ ├── App_Resources # Nativescript resources │ │ ├── Android │ │ └── iOS │ ├── components │ ├── router │ └── store └── platforms # Platform info, build configs 

Gotchas ● Don’t stroll into Nativescript with your DOM mentality ● DOM DOM buggy buggy DOM DOM ● We use Axios http ● DON’T move fast and break things. (3 layer dependencies) ● We actually have threads !!! ● Read NS/Angular docs and translate into Vue (shit!) 

Taking Care of The Ugly Things ™ ● Install Xcode (just CLI is ok) ● Install Cocoa Pods ● Enable iOS Simulator ● Install Android SDK ● Install Android Emulator (Genymotion recommended) ● Keep Java 8, Gradle updated