Create an engaging mobile app with NativeScript and Vue.js

but first...

and also... announcing

http://www.vuevixens.org

$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!

+

=

why vue?

Vue's 2.0 adoption of the virtual DOM enables native mobile rendering (Angular 2+ is similar)

Vue is lightweight so highly appropriate for mobile

Vue offers a great way for web developers to embrace mobile platforms via NativeScript or Weex

NativeScript and Vue have great code-sharing potential!

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

ways to try

  • playground 

    • play.nativescript.org

  • nativescript-cli with plugin addition

    • tns create MyApp

    • cd myApp
    • npm install --save nativescript-vue

Playground

play.nativescript.org

Download the NativeScript playground app

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

https://play.nativescript.org/?template=play-vue&id=KwPJ7b&v=3

Let's build something!

Presenting Elocute

Finally! The language lab is replaced!

Language Teachers:

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

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!

one more thing

announcing

NativeScript-Vue

1.0

Learn more at

NativeScript-vue.org

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

NativeScript Slack

With many thanks to Igor Randjelovic, core contributor

dank je!

@jenlooper