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)
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