Learning Lab
Published in

Learning Lab

Lessons Learned on Writing Apps with NativeScript VueJS

#11β€” An overview on How to Build Native Apps with NativeScript VueJS

  • Hybrid (with Webview) β€” it uses web languages (HTML, CSS, JavaScript) along with some plugins written in native languages; basically, you create a website inside a native app which has usually bad performances but saves time as you can develop only one app for both Android and iOS (and even Windows).
  • Hybrid (without Webview) β€” it uses other languages that compile into native code without webview, there are many solutions such as NativeScript, React Native or Xamarin; it brings as good performances as native, and uses only one code for both platforms, it requires fewer skills (only one language) and less time!
  • Vue Native β€” It is basically a wrapper of React Native, which is pretty new and that is why the community is still small.
  • NativeScript VueJS β€” Even though the VueJS plugin is quite new, it takes advantage of NativeScript which is stable, well tested and with a big community.

Learning preparation

This learning preparation follows the Learning Lab methodology.

  1. Defining the scope of the topic
    The scope of this topic is knowing how to start coding an app, how to build it, and how to deploy it. Also, I want to know what are the limitations of NativeScript VueJS to know in the future when I should use it and when I should not.
  2. Choosing a learning resource
    The learning resource was pretty obvious for me, the documentation, moreover because the VueJS extension for NativeScript is pretty new, there was no other learning resources. Nevertheless, there is a Coursera course about NativeScript available, but it uses Angular instead of VueJS.
    Here is the link for NativeScript VueJS: https://nativescript-vue.org/en/docs/introduction/
  3. Defining a project
    I originally wanted to build 3 apps but at the end, I had to focus on one app:
    - An app that provides an infinite newsfeed of trending GitHub repositories from different sources

What is NativeScript VueJS

Before describing how to build an app with VueJS let’s have an overview of how it works. How it can be native with JavaScript, and the tooling around.

NativeScript

This is how NativeScript works under the hood!

Source: https://docs.nativescript.org/core-concepts/technical-overview

VueJS & documentation

As you can see in the previous graph, NativeScript works with JavaScript (Vanilla and XML for templating), Angular or VueJS. It’s only a matter of taste, I like VueJS because I find it easy to read and write so I went for it πŸ˜€.

Utilities & Components

There are a few utilities and components:

  • Layouts β€” This is what defines the structure of your components, if you know CSS, you will understand it pretty fast: AbsoluteLayout, FlexboxLayout, GridLayout, …
  • Components β€” Every UI element, action bar, buttons, text fields, images…

NativeScript Command Line Interface

Last but not least, NativeScript provides a command line interface that lets you develop and run your code with an almost live update in your device/simulator, debug your code with VueJS debug tools and deploy for production! Also thanks to VueJS CLI you can start your project very fast πŸ‘¨πŸ½β€πŸ’»

NativeScript CLI and VueJS CLI are as easy as pressing β€œany” key

Let’s build the app

Before building the apps, I first tried the official tutorial. This tutorial covers the basics concept by building a To do app. The good news is that you don’t need to install anything to do it, it can be done fully online thanks to the NativeScript Playground: https://nativescript-vue.org/en/docs/getting-started/playground-tutorial/

  1. Listing and checking the plugins I would need to build it to know if it’s feasible.
  2. Defining the architecture.
  3. Implementing the services to gather data from APIs.
  4. Implementing the Vuex Store, constants, and actions.
  5. Implementing the Vues and connect them to the store.
  6. Implementing loading states and error states.
  7. Styling.
  8. Adding platform-specific code.
  9. Deploying.

Goal

The goal is to build an app to explore and discover GitHub repositories (with an infinite newsfeed) from different sources: GitHub trending, Hacker News and Reddit. I decided to call it GitNews!

  • Preview of readmeβ€”with a share function and open in browser button

Plugins and APIs

I had two kinds of needs for plugins and APIs: backend and frontend. I checked for each the feasibility.

  • An endpoint to get HackerNews last results
  • An endpoint to get Reddit last results

Architecture & file structure

I recently wrote an article about how to structure a VueJS project πŸ‘. I basically followed it and included the NativeScript files (specific assets and config files for Android and iOS).

.
β”œβ”€β”€ App_Resources
β”‚ β”œβ”€β”€ Android
β”‚ β”‚ β”œβ”€β”€ app.gradle
β”‚ β”‚ β”œβ”€β”€ google-services.json
β”‚ β”‚ └── src
β”‚ β”‚ └── main
β”‚ β”‚ β”œβ”€β”€ AndroidManifest.xml
β”‚ β”‚ └── res
β”‚ β”‚ └── ...
β”‚ └── iOS
β”‚ β”œβ”€β”€ Assets.xcassets
β”‚ β”‚ └── ...
β”‚ β”œβ”€β”€ GoogleService-Info.plist
β”‚ β”œβ”€β”€ Info.plist
β”‚ β”œβ”€β”€ LaunchScreen.storyboard
β”‚ └── build.xcconfig
β”œβ”€β”€ app.scss
β”œβ”€β”€ assets
β”‚ └── ...
β”œβ”€β”€ components
β”‚ β”œβ”€β”€ NewsItem.vue
β”‚ └── NewsLoading.vue
β”œβ”€β”€ fonts
β”œβ”€β”€ main.js
β”œβ”€β”€ package.json
β”œβ”€β”€ services
β”‚ β”œβ”€β”€ fetchGitnews.js
β”‚ β”œβ”€β”€ getColor.js
β”‚ └── getReadme.js
β”œβ”€β”€ store
β”‚ β”œβ”€β”€ index.js
β”‚ β”œβ”€β”€ modules
β”‚ β”‚ β”œβ”€β”€ news.js
β”‚ β”‚ └── readme.js
β”‚ └── mutation-types.js
└── views
β”œβ”€β”€ About.vue
β”œβ”€β”€ News.vue
β”œβ”€β”€ NoNetwork.vue
└── Preview.vue
  • assets β€” I put there the images displayed in the views that are not the icons of the action bar.
  • components β€” All the components of the projects that imported in the main views.
  • services β€” To make the code easier to read I put the β€œbackend part” into services. Basically, the functions that retrieve the news from the different APIs, and the one that converts the markdown to HTML.
  • storeβ€” The Vuex constants in mutation-type.js, the Vuex modules in the subfolder modules (which are then loaded in the index.js). The actions of the Vuex modules call the services and commit the results.
  • utils (optional) β€” Functions that I use in some components, such as regex value testing, constants or filters.
  • views β€” The main views of the app, in my case News (the newsfeed), Preview (of the readme), NoNetwork, and About.

Components

The power of NativeScript (and probably react native) is the component-based architecture πŸ’ͺ. It forces you to use composition instead of inheritance. Every native item is wrapped into a component. So building an app becomes similar to play Lego, assembling blocks (that you can reuse easily from an app to another).

The power of Vuex

Source: https://github.com/connor11528/vuex-shopping-cart

Platform-specific code

I developed the app on Android and I had to do some actions that are specific to iOS or Android (to color the status bar of Android for example).

Styling

If you are familiar with CSS, styling will be very easy for you! It’s basically a limited / constrained version of CSS (the classes will just be converted to native code that’s why it’s a bit limited). You can see it in the following code example.

As easy as CSS right?

Deployment

Deployment is also very easy, you need to add your icons, splash screen and then just type a command line! Here is a full tutorial: https://www.nativescript.org/blog/steps-to-publish-your-nativescript-app-to-the-app-stores

The final result πŸš€

Here is the final result of the app. It is available on Android and iOS. It took me about 5 days of work to build this app.

iOS (on the left) and Android (on the right)

Pros and cons of NativeScript VueJS

Using NativeScript VueJS was a very pleasant experience, I was able to build two apps very quickly. I really enjoyed it and I fully recommend it to VueJS users who want to develop mobile apps!

Pros πŸ™‚

  • Real native experience.
  • Cross-platform without maintaining two code bases.
  • Easy to write using VueJS and CSS.
  • A lot of plugins
  • A good slack community.
  • A lot of examples and tutorials online (for NativeScript with Angular).
  • The power of the Component based architecture.
  • The pleasure of having a centralized state with Vuex.
  • The speed of development.
  • Cloud build (for iOS and Android) with NativeScript Sidekick

Cons πŸ™

  • I wanted to do an animation but I was a bit limited, I guess I could have done it with native code.
  • The debugger didn’t work very well for me.
  • Most of the examples and plugin documentations are made for NativeScript with Angular, but it is not too complicated to β€œtranslate”.
  • Building an app is more work than building a website (because of the native components limitations), especially if you write it for two platforms.
  • When you write, try to test in both platforms frequently (I wrote first my code for Android and then make some fixes for iOS at the end).
  • Deployment to the AppStore is pretty hard if you don’t own a Mac book nor an iPhone (even though the cloud build makes it feasible, along with App uploader).

If you liked this post, please click the clap πŸ‘button below a few times to show your support! Also, feel free to comment and give any kind of feedback. Don’t forget to follow me!

--

--

How to learn one topic every month

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sandoche ADITTANE

Hello, I’m Sandoche Adittane. I learn about one topic every month and write a post about it!