Nativescript-Vue @ Vue Bangalore #7

Nativescript-Vue talk at Vue Bangalore Meetup #7

Transcript

1. Nativescript-Vue Native Mobile Apps without the Hard Parts™
2. 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!!!
3. What is Nativescript-Vue ? ? ?
4. A quick tour of Nativescript
5. 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 ”
6. . . . 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
7. Layout System • AbsoluteLayout x,y co-ordinate based positioning <AbsoluteLayout> <Button text="Left: 10, Top: 5" left="10" top="5" height="42" width="230" backgroundColor="#0099CC"/> <Button text="Left: 15, Top: 50" left="15" top="50" height="190" width="160" backgroundColor="#C3C3E5"/> <Button text="Left: 185, Top: 50" left="185" top="50" height="90" width="17a0" backgroundColor="#CCFFFF"/> <Button text="Left: 70, Top: 200" left="70" top="200" height="50" width="230" backgroundColor="#8C489F"/> </AbsoluteLayout>
8. Layout System • DockLayout arranges children on outer edges <DockLayout stretchLastChild="true"> <Button dock="left" text="left" style="background-color: #0099CC; margin: 5;"></Button> <Button dock="right" text="right" style="background-color: #8C489F; margin: 5;"></Button> <Button dock="bottom" text="bottom" style="background-color: #AA0078; margin: 5;"></Button> <Button dock="top" text="top" style="background-color: #B3B3D7; margin: 5;"></Button> <Button text="fill" style="background-color: #CCFFFF; margin: 5;"></Button> </DockLayout>
9. Layout System • GridLayout <GridLayout columns="*,*,*" rows="*,*,*,*,*" sdkExampleTitle sdkToggleNavButton> <Button text="1" style="background-color: #0099CC; margin: 5;"></Button> <Button text="2" col="1" style="background-color: #FFFF66; margin: 5;"></Button> <Button text="3" col="2" rowSpan="2" style="background-color: #AA0078; margin: 5;"></Button> <Button text="4" row="1" rowSpan="2" colSpan="2" style="background-color: #8C489F; margin: 5;"></Button> <Button text="5" row="2" col="2" style="background-color: #CCFFFF; margin: 5;"></Button> <Button text="6" row="3" colSpan="3" style="background-color: #0099CC; margin: 5;"></Button> </GridLayout>
10. Layout System • Stack Layout <StackLayout orientation="horizontal"> <Button text="Button 1" backgroundColor="#0099CC" width="100" margin="2"></Button> <Button text="Button 2" backgroundColor="#CCFFFF" width="100" margin="2"></Button> <Button text="Button 3" backgroundColor="#8C489F" width="100" margin="2"></Button> </StackLayout>
11. Layout System • WrapLayout <WrapLayout> <Button text="1" width="150" height="100" style="background-color: #0099CC; margin: 5;"></Button> <Button text="2" width="100" height="150" style="background-color: #FFFF66; margin: 5;"></Button> <Button text="3" width="200" height="120" style="background-color: #8C489F; margin: 5;"></Button> <Button text="4" width="100" height="50" style="background-color: #CCFFFF; margin: 5;"></Button> <Button text="5" width="250" height="100" style="background-color: #AA0078; margin: 5;"></Button> </WrapLayout>
12. Extendable • Android Libraries – via Gradle • iOS Libraries – via CocoaPods • JS Libraries – via NPM
13. Runtime Engine JavaScriptCore V8
14. Full Native API access. Call Swift/Kotlin/Java/ObjC code directly from JS
15. // 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
16. Multiple ways to use
17. Vanilla • Templates = XML • Logic – JS or TS
18. Angular • Templates = XML-like, in template literals : `<Tmpl></Tmpl>` • Logic – Typescript (just like any Angular 4 app)
19. Vue (tns) • Templates = XML-like, in template literals : `<Tmpl></Tmpl>` • Logic – JS (or TS) • Only .js/.ts files, no .vue files • Global Stylesheet
20. Vue (vue-cli) • Single File Components `<template>, <script>, <style>` • Templates in HTML/Pug/Jade/EJS • Code in JS/TS/Coffee • Scoped + Global styles
21. 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
22. Getting Started 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:ios $ npm run watch:android nativescript-vue-template $ npm install -g nativescript $ tns create <project-name> --template nativescript-vue-template $ cd <project-name> $ tns run android $ tns run ios
23. 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
24. 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
25. 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!)
26. 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