Lessons Learned on Writing Apps with NativeScript VueJS

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

Sandoche ADITTANE
Dec 20, 2018 Β· 13 min read
Image for post
Image for post

After learning how to taste wine 🍷, I decided to follow my second year of the Learning Lab challenge, by taking 1 month to learn how to build native apps with NativeScript VueJS. You will see in this post how to do the same and quickly build native apps!

As you probably know there are different ways to build mobile apps:

  • Native β€” it uses Java or Kotlin for Android and Objective-C or Swift for iOS; this is the best way but it takes time (you basically have to do the same app twice) and requires good skills for developing in both platforms.

As a web developer, I already tried hybrid apps using Ionic and Intel XDK. Even though it’s very easy, you can see that these apps lack reactivity, especially with old devices. The app can be quickly killed by the OS by lack of memory.

That is why I decided to learn hybrid without webview and specifically NativeScript. They recently released a plugin called NativeScript VueJS that lets you code your views using VueJS framework instead of Angular or Vanilla JS.

Note that there are a few solutions to code Native apps with Vue:

  • Weex β€” Built by Alibaba, the problem is that the community is only Chinese and some of the documentation is not translated into English.

Let’s dive into it 🧐!

Learning preparation

This learning preparation follows the Learning Lab methodology.

  1. Finding a mentor
    I didn’t spend enough time to look for a mentor 😌. Nevertheless, I joined the slack of the NativeScript community. This community is pretty welcoming and answers any kind of questions. But don’t annoy them before googling your problems.

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!

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

Basically, the NativeScript Runtimes converts the UI into Native UI for the device and it runs the JavaScript codes, like NodeJS, which means you can load as many NPM packages as you need as long as they are not made for web frontend, basically libraries that need to access the DOM through the web browser cannot work with NativeScript!

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 πŸ˜€.

The only problem is that because NativeScript VueJS support is pretty recent, it’s hard to find examples and tutorials about it. So when you don’t find anything for VueJS you should just look for NativeScript with Angular (or Vanilla) and think a bit to adapt the code. It’s not that hard but you should be aware of it!

Utilities & Components

There are a few utilities and components:

  • Routing β€” Vue Router is not yet supported, so the routing is done manually in each view.

You can see the full list in the menu on the left of this page:

I recommend to quickly have a look at all of them before starting your app, just to know what you can do.

Regarding the components, each of them will be translated to a Native component, for example, the <ListView></ListView> will become an android.widget.ListViewin Android and a UITableView in iOS. It is described at the end of the description of every component. For example here: https://nativescript-vue.org/en/docs/elements/components/list-view/#native-component

You can do a lot of thing by default with NativeScript such as persisting data into some little database or checking the connectivity, but some other APIs are not there by default.

But luckily there is a market with about 1000 plugins (when I wrote this article): https://market.nativescript.org/ πŸ‘

You can find there, for example, a plugin to access contacts, to send messages, to connect with firebase or just to have a pull to refresh ready made! Most of the time the documentation is made for Angular or VanillaJS with XML but it is pretty the same to make it work with VueJS.

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/

Once ready here is the process I followed to build this GitHub news app:

  1. Defining the goal of the app and the basic UX with wireframes.

We will quickly go through the most important steps, and describe them with examples.

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!

It will be composed of 2 main views:

  • Newsfeed of repositoriesβ€” with a pull to refresh and infinite scroll

I also added later one About view, and an error view when there is no network connectivity.

Plugins and APIs

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

For the frontend:

For the backend:

  • An endpoint to get GitHub trendings

As you could read all my requirements can be managed either with NativeScript APIs, by a plugin from the market or just by npm packages. As concern the backend I decided to call directly all the endpoints and parse/treat the results from the device instead of building my own backend.

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

Here is the structure of my GitNews app:

.
β”œβ”€β”€ 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

A few details about these folders (very similar to how to structure a VueJS project) :

  • App_Resource β€” Contains all the platform config and related files (AndroidManifest.xml, Info.plist), and platform-specific assets (such as icons).

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

You can see above a simplified version for better readability of the News vue connected to the Vuex store. The code is pretty simple.

When loaded, the loaded() method is triggered and calls the updateList() methods that check the network connectivity (and display the error page if there is none) and then retrieve the news from the APIs.

The NativeScript component <ListView/> which is wrapped into the <PullToRefresh/> component (coming from the plugin market) makes a loop of the news that has been retrieved and that are in the Vuex store. The news are displayed by the component <NewsItem/> that I created myself.

A method called onItemTap() is passed to the <ListView/>and is triggered when the user taps into an item of it. It will then load the Preview view!

The power of Vuex

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
- Source: https://vuex.vuejs.org/

Vuex is similar to Flux / Redux, it handles the state and centralizes it within the app. Working with Vuex for an app is just very powerful. You can see how it works in the figure below!

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

By implementing first your state architecture with the getters and then the actions and the mutations, you’ve done 80% of the core of the app. Then you just need to build your components and connect them to the actions, and getters to it and that’s it πŸ™Œ!

In the case of GitNews, the initial state looks more or less like this:

Then when the news.retrieve() action is triggered, the API will be called by the previousupdateList() method, the news.loading state will be true, the API will be called asynchronously, and the result will be passed to news.retrieved. Then the magic happens and the <ListView/> will show the news automatically! That’s the power of Vuex πŸ‘!!

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

So this is pretty easy, there is no need to update two code bases!

I faced some problems, the ListView was working very well on Android and it was dynamically resizing each item of the list, whereas in iOS I had some troubles. I had to set a static height for each item.

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.

This style will look like this:

Image for post
Image for post
As easy as CSS right?

You can find in this page the full specifications about what you can do in CSS with NativeScript: https://docs.nativescript.org/ui/styling

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

Important: in order to build or run for NativeScript VueJS you need to add the --bundle flat to the commands. It is not specified on this article written for NativeScript (Angular or JavaScript).

Also, after building the app I found an amazing GUI tool to help you update the settings of your app, add icons, build and even deploy iOS and Android apps from your computer (no matter if you are using windows, mac or linux)! It is called NativeScript Sidekick, it’s pretty amazing and allows cloud build. Note that when I wrote this article the publish to AppStore function was not working but there is an open issue in the NativeScript Sidekick Github repository, so it will probably fixed at some point!

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.

Image for post
Image for post
Image for post
Image for post
iOS (on the left) and Android (on the right)

Edit: I released my second app a few days later. And here it is:

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.

Cons πŸ™

  • I wanted to do an animation but I was a bit limited, I guess I could have done it with native code.

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!


Want to see more articles like this one? Support me on Patreon πŸ™Œ

Learning Lab

How to learn one topic every month

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight.
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox.
Get unlimited access to the best stories on Medium β€” and support writers while you’re at it. Just $5/month.

Get the Medium app