Ionic is a cross-platform framework for mobile app development that web developers would recommend if they want to ride the wave. Its slogan is Build Amazing Apps in one Codebase, for any platform, with the Web, you can write once, run anywhere.
Ionic1 is based on angularjs and is history. Ionic4 was recently released with major changes, the most important of which is the use of Stencil, a compiler that converts custom Components into web Components, which is not recommended since it is still in beta.
This series of articles is based on ionic3. The underlying Angular version is 5.x, which will be referred to as ionic. Ionic3 used to be based on Angular 4.x, but has now switched to Angular5.x. Because there are still a lot of changes between 5.x and 4.x.
Angular and Cordova are responsible for ionic’s success.
Angular is a Google front-end development framework that uses TypeScipt for development and is suitable for large-scale, multi-party projects.
Cordova is a cross-platform mobile application development framework that uses Web technology. The core source code of Cordova was donated to Apache.
Ionic, the core developer of Angular, combines Angular with Cordova and provides a cross-platform mobile app development framework with rich UI components. Ionic also comes with a command line tool, ionic CLI, which is powerful and easy to use.
The chart above shows the relationship between Angular, Cordova, and Ionic.
Ionic can be described as a UI framework based on Angular+Cordova. It is developed using Angular and provides elegant UI components that interact with native functions through the Cordova Plugin. Finally, use the Cordova command to package the App that can run on different platforms. Of course, you can also use the content in the WWW folder as the webApp that can be accessed through the browser.
The packaged Android App is essentially a WebView that loads web pages from a local WWW folder. Cordova is the bridge through which Native functions can be invoked on web pages. IOS in the same way.
Ionic is more than just a combination of Angular and Cordova. It has also made some changes to make it more suitable for mobile development. Ionic ditches Angular’s routing framework in favor of its own stack-based page navigation, which uses simple push and pop methods to jump to and from pages, making it more mobile. Ionic has also written a JS dependency package for Cordova Native Plugin, making it easy for Web developers to use native plugins. Finally, Ionic offers a wealth of UI controls for mobile application development, such as DateTime, Toobar and other commonly used components.
The ionic’s drawbacks are also obvious. First, performance. Android’s low-end phones are sluggish and have a poor user experience. Second, while the Ionic offers most of the usual plugins to interact with native, you’ll have to write one if you need something less than that, like payments. Finally, with the Angular framework, the learning curve is steep.
The following figure shows the process of opening the app and invoking native functions using the camera as an example. The content is simple, but not much to explain.
Afterword.
I am writing an ionic introduction teaching manual ionic 3-Handbook and an Ionic project HW-Basic based on real projects. If you are interested, please check it out.