We have been talking for a while about building an e-commerce application; now we will be getting started with that. As previously mentioned, it is named vPlanet Commerce. The vPlanet Commerce app is an e-commerce app that will demonstrate various Ionic components integrated inside the application and also some third-party components built by the community. As we move forward to the Chapter 3, Ionic Native and Plugins, we will be integrating Ionic Cloud services such as auth, Ionic DB, deploy, and so on. This will help us complete the application and make it look like a professional application. Let's start by creating the application from scratch using the sidemenu template:

You now have the basic application ready based on the side menu template. The next step I took is to take reference from ionic-conference-app for building the initial components of the application, same as the...

There are many Ionic JavaScript components that we can effectively use while building our application. What's best is to look around for features that we will need in our application. Let's get started with the home page of our e-commerce application, which will have an image slider with banners on it.

The slides component is a multi-section container that can be used in multiple scenarios, such as a tutorial view or banner slider. The <ion-slides> component has multiple <ion-slide> elements, which can be dragged or swiped left/right. Slides have multiple configuration options available, which can be passed in the ion-slides such as autoplay, pager, direction: vertical/horizontal, initial slide, and speed.
Using slides...

Until now, we have worked on multiple Ionic components. To support these components we have Component APIs for classes such as checkbox, toggle, or item, which show how to use them. We have already used many APIs while we used the components. Now we will look further at all the useful APIs we have that can be used inside our e-commerce application. Also, another important aspect is using custom modules, which will further enhance the application by adding localization, making custom pipes, and so on.

We will be starting with one of the common problems many developers face while building applications in the Ionic grid system. The Ionic grid system is based on flexbox (http://www.w3.org/TR/css3-flexbox/), which is a CSS3...

Lazy Loading is much-awaited feature which recently released with Ionic 3. Lazy Loading will improve our applications startup time, reduce the bundle size and removes the hassle of including same component path in every Class which eases the process of setting up Ionic routing. Let’s look into what changes are required and how your application will improve. Also, in Chapter 5, Authentication, Authorization, and Security the application demonstration will have lazy Loading implemented inside it.

Ionic components and related resources are the backbone of any Ionic application. With intelligent use of components and available third-party components, we can get better performance and make our application user friendly. Choosing the right component for the right place is tricky, and the most interesting part is we have to think from the perspective of the end user and the end user's experience with our application. We have to make sure that the user does not feel as if they are in a different world and away from the native experience, which usually happens. We can cover as many important components and important points as we want in this chapter, but what is suggested is to stay updated in the community and look for available resources that you can utilize easily for your application. Next, we will be moving towards the integration of plugins within our application. As almost every application...