Which to use? Angular or Ionic

Ionic Framework Ionic Angular
1

I’ve been very confused since the release of Capacitor 2, and I wish to create web+mobile apps at the same time.

  1. Since I can create a web app with Angular and then easily add capacitor 2 to make it a mobile.

  2. Or I can do a ionic app to create a website + mobile.

Not really sure the pros and const of these 2 options are.

Thanks for your thoughts!

1 Like
2

Ionic is just the UI layer (buttons, tabs, etc). It sits atop a framework like Angular, React or Vue. If the app needs to work with the native device or be a native app, then Ionic + the framework can use Capacitor as the interface to the native layer.

Ionic is not a application framework, but a UI component library, like Angular Material.

3

@tsenguun Hey there! Ok I will explain in my own words based on my experience but maybe you can get a more precise response searching a little bit more:

  1. What is angular?
    Angular is a TypeScript-based open-source web application framework (maintained by google. another popular framework is React and it is maintained by Facebook.)\

So what about this? Well think about this frameworks like how your website will look like, apply logic to your styles, what will happen when a user clicks on a button, define routes for navigation i.e.:

www.mywebsite.com/
mywebsite.com is available for purchase - Sedo.com
mywebsite.com is available for purchase - Sedo.com
mywebsite.com is available for purchase - Sedo.com

And so on…

The main difference of using angular or react or similar frameworks is that all of this is happening in the user browser in complex JavaScript files and there is no need to refresh the website for navigation, etc.(though you need to preserve the state with cookies or some other techniques). In other hand, when using frameworks like Django for example, everything is getting “rendered” or processed in the server where you host your website.

Note: Angular is a SPA(single page application).

Note: Angular is just the front end you will still need a backend for example in NodeJS to store data, auth… (Firebase can be very helpful with this )

So well with only angular you can create web applications alone that will work on most browsers out of the box, whether it is running on desktop or mobile phones!

But what happens when you want no create a mobile app for the same website? well, you have a couple of options but I will expose some scenarios:

  1. You can create custom native mobile app in android studio(android) or XCode(iOS).
  2. Create a custom native mobile app that can wrap your website with a WebView.
  3. Use Ionic + capacitor

So for example, if you go with:

Option 1: you will have to basically re-create your entire website into the mobile app to have a the look and feel of each platform and you brand. also reconnecting them with your server side.

Option 2: You will basically show your website inside a wrapper which you will lose the native app look unless you recreate the entire effects, styles, of each platform.

Option 3: Using Ionic you get the best of both worlds! You can create a normal web application just like angular but applying ionic specific styles, grid systems, buttons which of course you can modify at your wish.

This same styles will automatically change for each platform, android, iOS, desktop browsers. Ionic can be used with or without capacitor(you can use Cordova but capacitor is maintained by the ionic team).

By using capacitor you get “access” to build native mobile apps. But what is happening under the hood? Well remember the option 2? This is what capacitor doing. In simple words, capacitor grabs your code and puts it in a WebView.

The difference now is that ionic is handling all the styling for you(most of it). By this way every platform is having its unique look based on their “native styles”. Also additionally capacitor can handle custom plugins
for you (some by the community and some by the ionic team) which can give you access to native functionality and resources from the JavaScript side of your project! (pretty cool :D). What are some cases? Camera, Mic, geolocation…

So resuming:

Angular is an application framework (your project logic)

Ionic is a Ui component library which will give native look and feel of your project out of the box (Your website styling). Similar to Angular Material

Capacitor( A bridge that will “connect” you Angular + Ionic project to a native app)

So with that said, I will go with the 2nd option that you gave:

Or I can do a ionic app to create a website + mobile.

You can start building your web app first and when you need a native app use capacitor.

Angular will handle your logic, Ionic your styling and capacitor will be your “bridge” for native apps.

Ps: Based on your title, you cannot use Angular or Ionic. It should Be use Angular + Ionic or React + Ionic…

Hope this helps if something is not clear please let me know Ill be glad to help!

1 Like