Ionic 4+ Intro

Ionic is a distributed set of web components using custom elements and shadow DOM APIs available in all modern mobile and desktop browsers. Ionic framework contains its own custom set of HTML tags which can easily be imported with the framework.

Ionic contains stencil-built components which lead the pack in terms of bundle size and load performance. This web framework can be used with React and Angular to reach even higher performance levels.

Ionic has a beautiful array of custom theme designs that can be used across the platform. Here is a small sample of some of the capabilities:

Another interesting aspect of Ionic is that you can use the bundling .and tooling specific to the other web frameworks you utilize. That means you’ll use the Angular CLI when using Ionic with Angular, React CLI with React, and so on.

To get started with Ionic its very simple, run:

npm install -g ionic # Update the Ionic CLI
ionic start awesome-app

This will create your ionic app will all the pertinent needs. Then depending what you want to do grab your other framework and start building your dream project.

Finally, to create your first Ionic homepage simply utilize the Ionic CLI.

Run:

ionic generate page HomePage

And you will have created an Ionic homepage with 0 boiler code.

The next step is importing the page in src/app/app.module.ts. The code follows as so

import { HomePage } from '../pages/home/home';

@NgModule({
declarations: [
    MyApp,
    HomePage
    ],
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    HomePage  
    ],
providers: [
    /* .... */
]
})
export class AppModule {}

You now have a working homepage, congrats!

So why would you use Ionic? For sure the primary reason is its simplicity. Ionic lets you build cross platform apps at ease. There are many different plugins that enhance the overall performance of apps and this only involves adding a few simple codes to your development. With all of these aspects, the user interface is extremely well done. Ionic also supports the motion, depth, and beautiful colors of the material design for a ban awesome looking UI. The final aspect of Ionic that breeds usability is the ease of testing it provides. Cross-platform testing has never been easier. You can test the app native or hybrid on the actual platform to get an idea of how the app will function.

Overall, Ionic is one the superior options to build any hybrid app; it takes advantage of the unique pairings of any framework you choose.