What exactly is the Ionic framework?

Question

I am aware that with Ionic you can create cross-platform applications. These can be created in Vue, React, Angular, etc. I do however wonder which dependencies are responsible for what.

In the background, as I can see in my package.json, the Ionic framework uses Capacitor. If you run the command ionic start myApp tabs with the Ionic CLI, then a new project is created and various dependencies are installed, including Capacitor.

However, I can just as easily add Capacitor to an existing Vue.js project and I also would be able to create a cross-platform application.

My guess is therefore that Ionic is simply an additional abstraction layer above Capacitor and has implemented some components that use Capacitor APIs and for example provides different styling on different platforms.

Answer 1

As @Everton-Costa said, Ionic came first than capacitor and always had a great effort on providing a multi-platform stack to build apps through html5/browser capabilities and cordova for native bridging. Ionic has started early with angularjs after that with Angular(N) and now its practically web framework agnostic. Ionic have great UI components that works nicely on many browser agents and performing good with different screen's sizes etc.

I see capacitor as cordova on steroids, its plugins/modules tries to be more platform independent (ios/android/web). for example, the storage plugin you don't have to handle stuffs like isAndroid()|| isIOS() or isDesktop() to perform storage operations, the module itself chooses the best strategies for the running environment.

"Appflow" is the paid product for easing with CI/CD.

Answer 2

Keep in mind that Ionic came before the Capacitor and understand that both are from the same creators.

Using Ionic you may build Android, iOS, PWA, Desktop using the same code. You may also choose your preferred framework to use with Ionic like Angular, VueJS, React and so on.

Capacitor is responsible for the bridge between your code and the device's functionalities.

Advantages: custom animations, components customization, web components, design to match native iOS13, iOS Segment design, collapsible header, large title in iOS, Searchbar inside of the collapsible header, swipe to close Modals, new iOS Menu design overlay with updated animation, refresher pulling icon in iOS, Material Design refresher as well, lists Header in iOS, open source animations utility, free and open source icon library, Back Button, Card, Segment, Split Pane, encapsulate styles, full support for Ivy Angular’s new renderer and so on... More on this Article.

Appflow is a service that is offered by Ionic Team.