Nativescript-Vue @ Vue Bangalore #7

Nativescript-Vue @ Vue Bangalore #7

Nativescript-Vue talk at Vue Bangalore Meetup #7

37fbf83b7d45711e41e774e29fed710e?s=128

Arnav Gupta

April 28, 2018
Tweet

Transcript

  1. 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!!!
  2. 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 ”
  3. 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
  4. 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>
  5. 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>
  6. 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>
  7. 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>
  8. 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>
  9. 12.

    Extendable • Android Libraries – via Gradle • iOS Libraries

    – via CocoaPods • JS Libraries – via NPM
  10. 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
  11. 18.

    Angular • Templates = XML-like, in template literals : `<Tmpl></Tmpl>`

    • Logic – Typescript (just like any Angular 4 app)
  12. 19.

    Vue (tns) • Templates = XML-like, in template literals :

    `<Tmpl></Tmpl>` • Logic – JS (or TS) • Only .js/.ts files, no .vue files • Global Stylesheet
  13. 20.

    Vue (vue-cli) • Single File Components `<template>, <script>, <style>` •

    Templates in HTML/Pug/Jade/EJS • Code in JS/TS/Coffee • Scoped + Global styles
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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!)
  19. 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