Ionic 3 Release – Whats New?

WRITTEN BY GARETH DUNNE @JSDIARIES

Ionic 3 has released and with it, has brought some impressive but not overbearing changes to the Ionic framework.

While sites like Toptal have previously covered performance differences between Ionic 1 and 2.
This post will cover the upgrade from Ionic 2 to 3 and the performance differences that come with it.

Similar to the Angular 4 release, this isn’t a core change to the platform, rather it is adding some improvements to your applications that will increase overall performance and allows hybrid app development to come a few steps close to being on par with its native development counterparts.

As always here is some useful Ionic reading material. And here is the official post from the Ionic team specifying all the changes.

Updating from Ionic 2

Updating from Ionic 2 is actually quite a simple process. This video from Paul Halliday simplifies the process even further:

Angular 4

Ionic has been updated to be compatible with Angular 4 and all the features that come with it. You can find our Angular 4 release post here.

And the official Angular blog covers it here aswell.

Lazy Loading

One of the most notable features of the release, lazy loading provides us with the ability to breakdown our bundles for our application even further.

This allows our application to only load certain bundles/modules when they are actually needed. When you lazy load, your application performance improves, particular as the app is starting up because all the modules that were previously loaded in our app.module.ts are not requested at once rather they are loaded on a page by page basis.

I would highly recommend checking out Paul Hallidays tutorial on this:

TypeScript 2.1 and 2.2 compatibility

As specified on the official Ionic blog. Ionic 3 has been updated to be compatibly with Typescript versions 2.1 and 2.2. This is inline with **Angular 4 ** being compatible with these versions as well. More information can be found here.

A Promising future

So that just about summarizes the main changse for Ionic 3. I don’t think anyone can deny the momentum and progression that this framework has going for it.

While originally I was concentrating on all things Angular. Ionic has really provided such a sleek way to use web technologies in order to reach such a wider userbase and to target them more personally through mobile applications.

If you needed even more detail regarding Ionic 3 changes please check our Joshua Morony’s detailed guide here:

I highly recommend all his content as it provides a huge insight into all potential features you might want to implement into your application.

Ionic 2 – Geolocation & Google Maps

 WRITTEN BY GARETH DUNNE @JSDIARIES

Using Ionic Native

One of the most straightforward ways to demonstrate Ionic Native and how it works is to use the GeoLocation native plugin. This will allow us to use a range of methods that will configure the the users current GeoLocation and we can then use this information in combination with a Google Maps implementation as well.

There is already some well established tutorials for achieving this so I’m going reference them in this post whilst also giving an overview for those that don’t have to time to implement their own example.

Please also keep in mind this excellent Ionic 2 book that will get you up to scratch very quickly.

And these articles by Toptal might help you to further understand Ionic concepts:

Geolocation

With your Ionic 2 project already created we need to install the cordova geolocation plugin here.

This plugin will provide information about the current users device’s location, such as latitude and longitude. When starting the application, the user will receive a dialog asking for permission to use the current location.

This is a standard practice as some of the native plugins want to ensure that the user is content with sharing certain information with our Ionic 2 application.

In our created Ionic page, where we want to display our Google maps instance, we need to import our GeoLocation plugin from ionic native so we have access to it in the page.

We should then add an event click listener to the desired button that will provide the action of locating the users current position.

We are just invoking the .getCurrentPosition() method on the imported Geolocation object. Afterwards or .then(),  we assign the current value of our location variable to our components location variable of type any that was declared earlier in the component.

In our html file we are now able to output a value for our coordinates by accessing the properties for coordinates (.coords) and for the latitude value of those coordinates (.latitude) as well as the longitude (.longitude) on the location object.

Google Maps

While getting a GeoLocation is handy to know, what exactly should we do with the users position? Well you could implement the retrieved coordinates into a Google Maps implementation in your App.

There are two main ways to do this.

The first is to install Angular Google Maps. This is very well covered in the video tutorial below by Mindspace.

Fast forward to about 21:37.

And if you have the time,  be sure to watch part 1 and 2 in its entirety as you will come away with a full application with some nice Ionic Native functionality.

The second option that we can do is to use the JavaScript SDK, so that we can put in the header of our index.html file. This would be considered an easier way to implement it and it will also work in the browser as well as natively on devices .

However, for both cases you might as well generate an API key as if you were to ever to implement your app into a production environment or upload it to the app store there is a usage limit Google has and you might have to pay in order to remove the limit.

index.html Google Maps JavaScript SDK implementation
index.html Google Maps JavaScript SDK implementation

https://developers.google.com/maps/documentation/javascript/get-api-key

Without generating an API key, to use the Maps SDK simply put the following in your index.html file.

We then just need to reference the map id in our template HTML.

By default, the div containing our Google Maps object has no styling properties. We need to change this order for the map to display properly.

 

Finishing up

Overall, I hope that this post has given a good indication of how to use Ionic Native plugins and from that point how to combine them together.

I didn’t want to provide too much detail as there is already quite a lot of fully fledged tutorials on this.

However, if you followed the links and references in the tutorial provided there is plenty of information to digest but bear in mind that the way you implement Ionic Native functionality never really changes, its just the built in methods and functions of the particular Ionic Native plugin that you are using that will be different.

I’m far from an expert in Ionic 2 but as I’m getting to grips it, I’m becoming more comfortable with Hybrid App development and want to share what I’m learning so be sure to check out our future posts on it.

I’m thinking about covering the changes in Ionic 3 and what it means for the framework.

Please check out our resources here for additional reading content.

References

A lot of this post stems from Josh Morony’s Ionic Google Maps & Geolocation guide so be sure to check his post out and his great Ionic 2 content in general.

Ionic 2: How to Use Google Maps & Geolocation