Codesharing between web and mobile applications

Codesharing

Codesharing

• Reusing
  • Logic
  • Assets
  • Structure
  • Code in general

Benefits

• Ease of code reuse
• Simplifies dependency management
• Easily manage & reuse assets
• Maintain projects aligned
• Flexible Code Ownership
  • The same team can work on multiple projects
  • or teams can improve code by other teams

1. Codesharing between iOS and Android apps

NativeScript

NativeScript

• Open Source framework that abstracts iOS and Android app development using one common language: JavaScript
• Creates fully native applications
• Can make use of thousands of libraries from CocoaPods, Android Arsenal, NPM.
• Supports Vue.js

NativeScript

NativeScript + Vue

HelloWorld.vue

Ok...
but what about the web?

NativeScript Vue CLI 3 Plugin

NS Vue CLI Plugin

• Vue CLI 3 plugin
• Integrate Nativescript-Vue into new or existing Vue projects.
• Can be used for either native-only development or native and web together under one single project structure.

How does it look?

If you want to make it more modular...

Modular Naming Scheme

Sharing assets and components

• Assets
  • Place them in src/assets
  • can be accessed via "~/assets/logo.png"
• Components
  • Place them in src/components
  • can be accessed via "components/HelloWorld"

How does it work?

Going even further

Nativescript-Vue-Web

Nativescript-Vue-Web

Alternatives

• PWA
• React Native
• Cordova

References

• NS-Vue docs: https://nativescript-vue.org/
• Plugin: https://github.com/nativescript-vue/vue-cli-plugin-nativescript-vue
• Jen Looper's Code Example: https://github.com/jlooper/mandala-me
• Jen Looper's Blogpost on this topic https://www.nativescript.org/blog/code-sharing-with-nativescript-vue

Thank You's

• Factorial GmbH
• Gary Gambill (co-creator of the plugin)
• Manuel Saelices (co-creator of the plugin)
• Yigit Erol (creator of NS-Vue-Web, co-creator of the plugin)
• Igor Randjelovic (creator of NS-Vue)
• You