Using Vue as an Angular alternative for Ionic: The Services

Instead of centralizing all the code in a Component, it’s common practice to use Services.
Services are Classes that contain domain specific code like Ionic Native Device actions, Ionic Native Storage actions, Ionic routing.

When it comes to Services, AngularJS set the bar quite high. Back in the days we had:

  • Factories
  • Services
  • Providers
  • Values
  • Constants

Angular then simplified it by only offering the basic Services making life simpler for new Ionic users.

In this tutorial, we will analyze how we can use Services with Vue in an Ionic application.

We will :

  1. Create a simple Vanilla JavaScript Service
  2. See an example of an unshared Service
  3. Share a Service instance between two Ionic Vue Components
  4. Use a Singleton Service

You will have to go back to the first tutorial so we can work with the Ionic team’s stack.

Just a Simple Vanilla JS Service

A Service is by nature just a Class that exists in another file.

We can create one in a vanilla-js-service.ts file:

This is a very simple Service that only has a sayHello method.

We can import it in our main.ts file:

When the Ionic Vue Component is initialized, we will instantiate a new VanillaJsService instance and stock it in a vanillaJsService property.

The useVanillaJsService method will call the sayHello method from this property.

And we will call this method in the index.html file:

Resulting in:Ionic Vue Angular comparison Services simpleLet’s create a more complex Service.

 Unshared Service

We will create a traditional counter in a counter-service.ts file:

This Service has a counter property which starts at 0.
The add method increments the counter and the show method shows the current counter’s value.

We will import this Service in two Ionic Vue Components:

Both Ionic Vue Components will have a counterService property created from the CounterService Class and will delegate their actions to this property.

We import them in the main.ts file:

As we have seen in the previous Ionic Vue Components tutorial, we add those Components to the components field and use them in the index.html:

Resulting in:

Ionic Vue Angular comparison Services complex unshared

The Service is working as it should, when we use the Component 2, the counter gets updated for this Component and the Component’s 1 counter stays at 0. However, how can we share the same counter in every Ionic Vue Component?

Shared Service

In the previous example, we created a new CounterService instance in each Component.

Instead of creating a new one, we can create one and use it in both Components:

A new CounterService instance is created then stored in a sharedCounter const.
We then create a First and Second Components that will use this sharedCounter Service in their methods.

All we need now is adding those Components to the components field:

And use them in the index.html file:

We now have our counter shared between both Ionic Vue Components:

Ionic Vue Angular comparison Services complex shared

It’s working, but it’s quite annoying to have every Component in the same file right?
We can create a global variable using CounterService then use it wherever we want, however, by experience, global variables generally come to bite us in the a** later on.

Let’s see if we can do better.

Singleton Service

This time we will use the good old Singleton pattern.
Since we are using the Ionic’s stack, let’s inspire ourself from one of the best TypeScript resource and create the counter-singleton.ts file:

Thanks to this Class, we will only have one CounterSingleton instance in our Ionic Vue application!

We only need to replace CounterService by CounterSingleton:

And here we have both ComponentOne and ComponentTwo sharing the same Service:

Ionic Vue Angular comparison Services singleton

BONUS CONTENT
Enter your email address in the box below to get access to this tutorial (and others) source code.

Conclusion

Services are used to keep the Components simple, follow the Don’t Repeat Yourself principle (DRY) or share states in the application.
Vue has been around for quite some time. If they wanted to add a service field in the Components options, they would have done it a long time ago.
AngularJS popularized the usage of Services to share states between Components, however, “recently” Redux/VueX Stores started to rise, we will see more about this in another VueX tutorial.

No Comments Yet

Leave a Reply

Your email address will not be published. Required fields are marked *