-1

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.

Valentin Gavran
  • 341
  • 9
  • 21

2 Answers2

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.

Everton Costa
  • 570
  • 5
  • 16
  • Thank you for your answer. If someone doesn't care about the native design, then could you use Vuetify as a UI library, for example? What disadvantages would you see in doing so? – Valentin Gavran Jun 13 '21 at 06:27
  • Hello @ValentinGavran! I don't see many disadvantages, rather than Ionic you may use Vuetify as a UI library, but as I could see it is better on CSS only. However Ionic is offering a large amount of Javascript UI Libraries. You may check it in this [comparison](https://www.saashub.com/compare-vuetify-vs-ionic-framework). – Everton Costa Jun 13 '21 at 22:34
2

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.

Anderson Marques
  • 36
  • 3
  • Thank you for your answer Marques. However, I do need a more detailed explanation about Appflow. Is it possible to build and publish any iOS and Android app with Appflow or do I need Ionic/Capacitor in my dependencies? – Valentin Gavran Jun 13 '21 at 06:23
  • Reading the docs, seems that you can turn any web assets into android/ios native, you don't need to use any Ionic UI components. I think you will end up having an ionic cordova or capacitor project which contains code for both platforms. Build phases are all in the cloud. You can try trial and check if works for you. – Anderson Marques Jun 13 '21 at 16:39