$30 off During Our Annual Pro Sale. View Details »

Nativescript-Vue @ Vue Bangalore #7

Nativescript-Vue @ Vue Bangalore #7

Nativescript-Vue talk at Vue Bangalore Meetup #7

Arnav Gupta

April 28, 2018
Tweet

More Decks by Arnav Gupta

Other Decks in Technology

Transcript

  1. Nativescript-Vue
    Native Mobile Apps without the Hard Parts™

    View Slide

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

    View Slide

  3. What is Nativescript-Vue ? ? ?

    View Slide

  4. A quick tour of Nativescript

    View Slide

  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

    View Slide

  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

    View Slide

  7. Layout System
    ● AbsoluteLayout
    x,y co-ordinate based positioning






    View Slide

  8. Layout System
    ● DockLayout
    arranges children on outer edges







    View Slide

  9. Layout System
    ● GridLayout








    View Slide

  10. Layout System
    ● Stack Layout





    View Slide

  11. Layout System
    ● WrapLayout







    View Slide

  12. Extendable
    ● Android Libraries – via Gradle
    ● iOS Libraries – via CocoaPods
    ● JS Libraries – via NPM

    View Slide

  13. Runtime Engine
    JavaScriptCore V8

    View Slide

  14. Full Native API access.
    Call Swift/Kotlin/Java/ObjC code directly from JS

    View Slide

  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

    View Slide

  16. Multiple ways to use

    View Slide

  17. Vanilla
    ● Templates = XML
    ● Logic – JS or TS

    View Slide

  18. Angular
    ● Templates = XML-like, in template literals : ``
    ● Logic – Typescript (just like any Angular 4 app)

    View Slide

  19. Vue (tns)
    ● Templates = XML-like, in template literals : ``
    ● Logic – JS (or TS)
    ● Only .js/.ts files, no .vue files
    ● Global Stylesheet

    View Slide

  20. Vue (vue-cli)
    ● Single File Components `, , <style>`<br/>● Templates in HTML/Pug/Jade/EJS<br/>● Code in JS/TS/Coffee<br/>● Scoped + Global styles<br/>

    View Slide

  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

    View Slide

  22. Getting Started
    vue-cli-template
    $ npm install -g @vue/cli @vue/cli-init
    $ vue init nativescript-vue/vue-cli-template
    $ cd
    $ npm install
    $ npm run watch:ios
    $ npm run watch:android
    nativescript-vue-template
    $ npm install -g nativescript
    $ tns create --template nativescript-vue-template
    $ cd
    $ tns run android
    $ tns run ios

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide