Nativescript-Vue @ Vue Bangalore #7

Nativescript-Vue talk at Vue Bangalore Meetup #7

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