First steps with Ionic 3

Web development technologies have evolved incredibly in this recent years. We started from DOM manipulation with jQuery to applications with MV * patterns like Angular. Now it’s much easier than ever to build quality applications.

Even these advances have been incredible, web Technology could not overcome sll the advantages of native applications. There were also very public bugs – Facebook wrote its first iOS app in 2011 with HTML5, but ended up being a total failure due to terrible performance.

For years, hybrid applications have been mocked and criticized by native application developers for being awkward and ugly, poor performance and no advantage over native ones. While these may have been valid reasons in 2011, they are now virtually without foundation, thanks to a collection of new technologies that have emerged in the last two years.

With these technologies, you can design, build and deploy robust mobile applications faster than you could with native technologies. This is thanks in large part to the fast rendering speeds of the mobile browser and the improved performance of JavaScript.

 

 

This Gigipost have been designed to teach you how to use these new technologies effectively to create amazing mobile applications.

What will we see in this post?

  • Installation
  • Generate pages
  • Injection of modules
  • Decorator @ IonicPage

 

 

INSTALATION

One of the first steps of this process is to have Node, this does not mean that we will fully work with Node, after installation we will use the CLI de Ionic.

With this command we can install the CLI.

 

CLI

We can start with a specific template or from a scratch, in this small course we will start with the Menu’s template.

 

Ionic3 - Gigigo

 

Some functions of the CLI are:

  • Launch the application in development mode
  • Upload the application to Ionic Cloud
  • Generate a compiled for iOS / Android
  • Among many other things.

 

GENERATION OF PAGES

In order to start our application in development mode it is necessary to execute the following command:

 

We are going to create a new page with CLI of Ionic:

 

 

INJECTION OF MODULES

Once the page is created we will have to inject it into our main module, which is “app.module.ts”, er can find this module inside the app folder and the page we just created could be found at the pages folder.

This is how Our import and injection would look  like.

(Note: Is very important to know that ee have to import the module and not the component)

 

 

@IonicPage decorator

Something new that we can find in our new Ionic 3 is the use of the decorator @IonicPage, this is very helpful to us, because now, we don’t have to import the pages we want to browse, instead of older versions where we had to import the pages that we would use in our Router, in this case it would be the Menu.

Routing

 

Now with this new version we only have to put the page’s name as a string so the routing can take us to it.

How do we get this name?

We take it out of class’s name of the component we have created before

 

In this post, we started a new project, created a new page with CLI, and we were able to browse in this new page.

 

Here we can download the source of the information documentated here.

https://github.com/alfonsoara/started-app

And here is another example of everything we can do with Ionic 3 replicating the web of Gigigo

https://github.com/alfonsoara/started-ionic-3

Head of Frontend Development at Gigigo México