Codesharing between web and mobile applications

One repo to rule them all

Codesharing

Codesharing

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

COOL

but

why

tho?

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

GREAT!

but how?

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

<Label text="hello" />
<TextView android:text="@string/hello" />
let label = UILabel()
label.text = "hello"

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?

✨ Magic ✨

aka Webpack

Going even further

Nativescript-Vue-Web

Nativescript-Vue-Web

Alternatives

  • PWA
  • React Native
  • Cordova

References

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
Made with Slides.com