Create an engaging mobile app with NativeScript and Vue.js
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4514647/seal_3x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4604631/understanding-your-brand-your-consumer-the-bantam-group-3-638.jpg)
but first...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4604633/Screenshot_2018-02-13_08.55.09.png)
and also... announcing
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4604639/vue-vixen-logo.png)
http://www.vuevixens.org
$whoami
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4213263/IMG_3405.png)
Jen Looper
Senior Developer Advocate, Progress
Ex French Teacher
Co-Founder: Wellesley Chinese Language School
let's talk about NativeScript
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4582656/fat-seal.png)
What is NativeScript?
A framework for building native cross-platform mobile apps
No-compromise, smoothly-animating native mobile apps for iOS and Android
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484359/nativescript-logo-black.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/3493381/demo.gif)
NativeScript is...
You know JavaScript? You know NativeScript!
Use JavaScript, CSS, XML to construct the app
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484359/nativescript-logo-black.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/3492898/Picture3.png)
Nativescript is...
Use no framework, Angular, or Vue.js!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484359/nativescript-logo-black.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484404/nativescript_kendo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4319882/logo.png)
+
=
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4602277/Heart-clipart-free-clipart-images.png)
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?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4582643/Asset_1.png)
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}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4588166/carbon__1_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4588167/carbon.png)
3 Basic differences
templates
<web>
{NativeScript}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4588168/carbon__3_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4588169/carbon__2_.png)
my first
nativescript-Vue app
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4582722/forward-seal.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4518619/175x175bb.jpg)
(you'll also be prompted to download the NativeScript Preview app)
Let's build something!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4582643/Asset_1.png)
Presenting Elocute
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4518688/logo.png)
Finally! The language lab is replaced!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4518962/dw_language_lab.jpg)
Language Teachers:
Manage classrooms and assign texts for students to read aloud to perfect their accents
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4582737/Screen_Shot_2018-02-06_at_6.22.50_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4582739/Screen_Shot_2018-02-06_at_6.24.44_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4582741/Screen_Shot_2018-02-06_at_6.25.26_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4582742/Screen_Shot_2018-02-06_at_6.25.40_PM.png)
The Language lab: mobilized
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4582773/Simulator_Screen_Shot_-_iPhone_X_-_2018-02-06_at_18.56.28.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4582775/Simulator_Screen_Shot_-_iPhone_X_-_2018-02-06_at_18.56.47.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4582776/Simulator_Screen_Shot_-_iPhone_X_-_2018-02-06_at_18.56.53.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4582777/Simulator_Screen_Shot_-_iPhone_X_-_2018-02-06_at_18.56.58.png)
Building the web app
elocute.me
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4582656/fat-seal.png)
I used:
- Vue CLI
- Vuetify
- Firebase UI for Authentication
- VUEX for state management
- Firebase backend
Building the mobile app
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4585858/rounded.png)
I used:
- NativeScript CLI
- Webpack template
- NativeScript-Vue Plugin
- VUEX for state management
- Firebase backend
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4588172/carbon__4_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4588173/carbon__5_.png)
web
mobile
Routing
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4590310/carbon__6_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4590311/carbon__7_.png)
web
mobile
Vuex
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4590321/carbon__8_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4590322/carbon__9_.png)
web
mobile
Firebase integration
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4590335/carbon__10_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4590336/carbon__11_.png)
web
mobile
Styling
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4590351/carbon__12_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4590353/carbon__13_.png)
web
mobile
Templates
demo
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4582643/Asset_1.png)
Into the future!
real code sharing
Build for iOS, Android, and web in one repo
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4587093/Screen_Shot_2018-02-07_at_4.18.07_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4587167/728c90eb978e4851.png)
web
mobile
Entry points
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4590368/carbon__14_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4590369/carbon__15_.png)
App.Vue
web + mobile
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4590375/carbon__16_.png)
SFC
web + mobile
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4590383/carbon__17_.png)
Webpack
does its magic!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4587198/Screen_Shot_2018-02-07_at_4.47.13_PM.png)
one more thing
announcing
NativeScript-Vue
1.0
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4590397/NativeScript-Vue-White-Green.png)
Learn more at
NativeScript-vue.org
https://github.com/nativescript-vue/nativescript-vue
NativeScript Slack
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4587226/05da5993b8c28dfe.png)
With many thanks to Igor Randjelovic, core contributor
dank je!
@jenlooper