Calling All Vixens!

http://www.vuevixens.org

"You can skulk with us"

$whoami

Jen Looper

Senior Developer Advocate, Progress

Ex French Teacher

Co-Founder: Wellesley Chinese Language School

let's talk about NativeScript

What is NativeScript?

A framework for building native cross-platform mobile apps

No-compromise, smoothly-animating native mobile apps for iOS and Android

NativeScript is...

You know JavaScript? You know NativeScript!

Use JavaScript, CSS, XML to construct the app

Nativescript is...

Use no framework, Angular, or Vue.js!

+

=

Nativescript is...

NativeScript-Vue.org

NativeScript-Vue 1.3.1

why vue?

How does NativeScript work with Vue?

3 Basic differences

use of nativescript-vue

import Vue from 'vue';

import Vue from 'nativescript-vue';

<web>

{NativeScript}

Vue.js

NativeScript-Vue

NativeScript

3 Basic differences

bootstrapping the app

<web>

{NativeScript}

3 Basic differences

templates

<web>

{NativeScript}

my first

nativescript-Vue app

try it!

play.nativescript.org

Download the NativeScript playground app

(you'll also be prompted to download the NativeScript Preview app)

http://bit.ly/try-ns-vue

Easiest way to try!

Vue-CLI template!

$ npm install -g @vue/cli @vue/cli-init

$ vue init nativescript-vue/vue-cli-template <project-name>

$ cd <project-name>

$ npm install

$ npm run watch:<platform>

Let's build something!

Presenting Elocute

Finally! The language lab is replaced!

for Language Teachers:

Manage classrooms and assign texts for students to read aloud to perfect their accents

for students: The Language lab, mobilized

Building the web app

elocute.me

I used:

• Vue CLI
• Vuetify
• Firebase UI for Authentication
• VUEX for state management
• Firebase backend

Building the mobile app

I used:

• NativeScript CLI
• Webpack template
• NativeScript-Vue Plugin
• VUEX for state management
• Firebase backend

web

mobile

Routing

web

mobile

Vuex

web

mobile

Firebase integration

web

mobile

Styling

web

mobile

Templates

demo

Into the future!

real code sharing

Build for iOS, Android, and web in one repo

web

mobile

Entry points

App.Vue

web + mobile

SFC

web + mobile

Webpack

does its magic!

Learn more at

NativeScript-vue.org

https://github.com/nativescript-vue/nativescript-vue

NativeScript Slack

With many thanks to Igor Randjelovic, core contributor

@jenlooper