loading...
Front-End Foxes

A Sneak Peek of NativeScript-Vue 2.0!

jenlooper profile image Jen Looper Updated on ใƒป4 min read

In February, I was busting my buttons with pride, announcing the launch of NativeScript-Vue 1.0 on the big stage in Amsterdam at Vue.Amsterdam Conference. Together with its creator, community guru and Vue-Master Igor Randjelovic, we unleashed onto the world a beautiful new way of building downloadable mobile apps for iOS and Android using a single codebase, pairing the power of NativeScript with the pleasure of development with Vue.js.

1.0

Today, NativeScript-Vue is already being used in production apps, including the Catholic Answers App:

Catholic Answers

I have several demos of my own as well, showing how to style your apps to create a nice interface. Elocute, for example, is a web and mobile app suite for language teachers and their students:

Elocute

Teachers enter texts on the web (http://elocute.me) to be spoken by students in their classrooms to test their pronunciation. Students pick up assignments on the mobile app (shown above) and speak the text into the device, where it is transcribed by a speech-to-text plugin. An algorithm then works behind the scenes to score the similarity of the teacher's text to the student's transcription. The pain of language labs are now solved!

Or how about Picme, an app I created to demo the speed of ML Kit on device, testing a human's ability to identify tricky pictures vs. using an image-labelling AI:

Picme

Not impressed yet? How about my latest app, still a WIP, TarotMoji, where you can get Tarot card readings crammed with Emoji:

TarotMoji

With all the possibilities we now have to create stylish, performant native apps with NativeScript-Vue, what could be improved? In other words, what's next for this cool integration? Read on!

Change #1 - the Folder Structure

When we first launched the standard system of creating a NativeScript-Vue app via the Vue CLI, the mobile app's folder structure somewhat resembled that of a web app scaffolded via the Vue CLI.

  • The developer coded the app's screens and logic in the /src folder, which contained /assets, /components, and other parts of the app such as the Vuex store.
  • The /template folder contained the /App_Resources folder which is where a mobile app stores its icons and splash screens. This folder was necessary for the build process.
  • Finally, the built versions of the mobile app were stored in the dist folder which contains all the assets that will eventually be uploaded to the App Stores when the app is ready to be released.
  • The app was run using npm commands, such as npm run watch:ios to enable LiveSync which watches for changes and refreshes the app in the simulator or on a device.

LiveSync

In NativeScript-Vue's 2.0 version of the Vue-CLI template, the folder structure is dramatically simplified, aligning it with the folder structure of a standard NativeScript mobile app. Now, when you want to use this template, navigate to the folder where you want your app to live, and use: vue init nativescript-vue/vue-cli-template myapp in your terminal. npm install the app's dependencies, and you're off to the races:

new 2.0 via Vue-CLI

Install the dependencies of this app, and you're presented with a basic app that contains the elements you requested in the preinstall script. Then, you run the app using standard NativeScript commands tns run ios / android --bundle to get webpack working and to kick off LiveSync:

2.0 Screenshot

The new folder structure is way simpler. All the files you need to worry about are in the /app folder, where you will spend most of your time as the app developer. Build files are contained in the /platforms folder in the app root. It's very fast, clean, and tidy!

folder structure

Change #2 - the Frame element

NativeScript 4.0 introduced a new Frame element, allowing the developer to change the root element of an application, thus facilitating sharing common elements across app pages. In earlier iterations of the framework, this Frame element was created automatically, but this is no longer the case. Now we need to explicitly add a Frame to our template. No big deal! The Vue-CLI template has you covered:

new Vue({
  render: h => h('frame', [h(HelloWorld)]),
}).$start();

It's a small change that is pretty easily handled by using these standardized templates.

Change #3 - Not Really a Change, an Enhancement: Use Sidekick

Because of the prior version's folder structure, it wasn't possible to manage the app using the Sidekick tool, a nice abstraction of the CLI that keeps your mobile app projects well organized. Guess what? Since the new template offers a more vanilla NativeScript-like folder structure, you can use it with Sidekick! Download Sidekick here.

You can open a project in Sidekick once it has scaffolded via the Vue-CLI, and then manage your builds. Just make sure to click the 'webpack' switch, to ensure that webpack is leveraged, and take advantage of the local and cloud simulators it offers:

Sidekick

NativeScript-Vue 2.0 is right around the corner! In the meantime, you can create an app TODAY using our vue-cli template. Watch the NativeScript blog for a write-up on how to upgrade your app, if you have already been working in this space. If not, now's the time to jump in! Create your next blockbuster mobile app with NativeScript-Vue 2.0!

Need help? Connect with us on Slack in the #vue channel and read through the docs at NativeScript-Vue.org. Experiment with NativeScript with no commitment using the Playground.

Also! We are hosting a webinar on NativeScript 2.0 on October 4th. Come join us! Register here

Posted on by:

jenlooper profile

Jen Looper

@jenlooper

Jen Looper is a Google Developer Expert and a Cloud Advocate Lead at Microsoft with over 20 years' experience as a web and mobile developer, specializing in creating cross-platform web & mobile apps.

Front-End Foxes

Front-End Foxes are women who want to learn front-end technologies to make websites and mobile apps

Discussion

pic
Editor guide
 

This looks really cool! I liked version 1, so it will be good to use the latest release :)

 

Hi Jen,

Iโ€™d like to let you know that you were mentioned in the list of top 20 most popular articles on Vue.js in 2018โ€”bit.ly/2QvqiNA. The rank is based on the number of clicks in all issues of the Vue.js newsletter. Congrats!

Thank you for your sharing knowledge and supporting Vue.js community :)

Just wanted to give you a sign. If you find this piece of content useful, please share it with your network.

Either way, keep up the awesome work!

Cheers,
Joanna

 

This is great! How is support for the Vue Router coming along? When I last tried building something with NativeScript-Vue 1, I ran into a bunch of issues and the community told me that Vue Router support was still in beta.

 

hi, sorry for the delay. I think that pure Vue Router support isn't going to come any time soon, as changes we proposed to the core team aren't coming right away. In the meantime, manual routing works well; I use it in Elocute (github.com/jlooper/elocute/mobie-v2)

 

Super excited for the release of {N} Vue 2.0! :D

 

I love your posts on NativeScript, they're really well written! At my company we are considering an app and I'd love to use NS with Vue, I just have heard mixed opinions as to whether this is a good choice for an enterprise level application. Based on what you know, what are some of the major drawbacks / cons to using NS-Vue & NS in general? Should I even be worried about whether NS is good/bad for an enterprise app at all? Thanks!

 

This is pure bliss!!

 

Thanks for this article @jen. When I scaffold a project using Vue CLI 3.0 and tried to load it into sidekick, sidekick throws error saying Cannot find a valid app. Anything I'm missing?

 

hi Gokul, thanks for your note. Did you scaffold the new app using the new template? Make sure to add #next at the end of the template name, as the folder structure is totally different.

 

Awesome! I used version 1 before, but had to leave it there, it seems I'll get to play with this again!

 

vue init nativescript-vue/vue-cli-template#next nativescript

vue-cli ยท Failed to download repo nativescript-vue/vue-cli-template#next: Response code 404 (Not Found)

 

Try vue init nativescript-vue/vue-cli-template nativescript - Igor just moved the next branch to master! ๐Ÿ†

 

Yes! Sorry about that, maybe I should keep the #next branch for a while until all resources are updated...

I updated this article to reflect the changes, all good :)