DEV Community

Cover image for Ionic In A Nutshell
Fyodor
Fyodor

Posted on • Updated on • Originally published at fyodor.io

Ionic In A Nutshell

Ionic is around for a long time (from 2013), people started to build applications with that long before React Native or Flutter or NativeScript were born. But even today, not a lot of web developers know what it is, what it is used for, why it is better or worse than anything, and so on.
I needed to compile an Ionic questionnaire recently for corresponding position candidates at the company I work for and decided to convert it to a blog post with a kind of bird-eye overview of the framework and its tooling ecosystem. So it resulted in this FAQ format, which I hope would be useful to future Ionic engineers.

  1. What exactly is Ionic?

    A framework for building cross-platform applications using web technology (HTML, CSS, JavaScript). It includes a pretty light-weight component library and provides a set of tools (such as routing and navigation, data handling and binding, template population, native API access plugins, auxiliary CLI) and approaches for building rich UI/UX applications.

  2. What kinds of applications can you build with Ionic?

    • Hybrid mobile applications
    • Web applications, including progressive web applications (PWA)
    • Desktop applications (using Electron)
  3. Is Ionic a standalone framework, or it needs some other frameworks to build applications on top of? What frameworks can be used with Ionic?

    Ionic framework can be used as a standalone library of web components with vanilla JS applications. At the same time, it has integrations with (support for) all the major UI frameworks (Angular, React, Vue) and can be used with them

  4. What possibilities does Ionic CLI give to a developer?

    • Create an application
    • Serve/build an application
    • Configure an application
    • Generate code for different application parts (pages, components, services, and such)
  5. What is Capacitor? What are alternatives to it, and what are the pros/cons of using one or another?

    • A mobile application development framework optimized for using with Ionic and providing native mobile runtime and API layer for web apps
    • The alternative to Capacitor is the Apache Cordova project
    • Cordova is more mature and has a vast plugin ecosystem, though Capacitor aims to be a more performant, more convenient, and faster option. Capacitor is officially recommended and supported by the Ionic team and is the default option for building Ionic apps with the latest framework versions. Capacitor supports existing Cordova plugins and provides a smooth migration path.
  6. What is StencilJS, and how is it related to Ionic?

    It's the tool that the Ionic team uses to build their web components comprising the Ionic component library

  7. What are the pros/cons of using Ionic, as compared with other cross-platform solutions (e.g., Flutter, React Native, NativeScript) or native development?

    PROS

    • Easy to learn and use for web developers
    • Can be used for different platforms: iOS, Android, Windows, Web, Desktop
    • Cross-platform applications can be developed much faster by reusing the same codebase for different platforms
    • Supports all the major frameworks (Angular, React, Vue)
    • Great out-of-the-box library of components and native theming support
    • Open source solution

    CONS

    • Runs on the WebView, so it has corresponding performance caveats, though its comparable with other hybrid mobile development frameworks-competitors
    • Poor choice for graphics-intensive or data-heavy applications
    • Not the best choice for applications with highly customized UI because default components are not customizable enough
  8. How are Ionic versions different from each other? What were some breaking changes introduced with the 4th version of Ionic?

    Previous versions of Ionic were built to be used with (AngularJS and then) Angular framework. Ionic 4 became framework-agnostic by using web components for its library and delegating all the logic and routing to other UI frameworks, or even vanilla-JS solutions and tools. So now, you can use it with React and Vue or import its components to your application as is.

  9. How to get more information about Ionic?

    You can head over to

If you have any additional questions about the framework or its tools, feel free to ask in comments. I'll try to answer them and add the info to the post so it could help potential Ionic developers to get a solid grasp on the technology and move further with the learning process. Also please feel free to correct me if I'd made any mistakes in explanation, or I could formulate it in a better way.

Top comments (2)

Collapse
 
103221 profile image
103221

Thank your for your article, it is really great! I’ve heard opinions that Ionic nowadays is not as great as it used to be. For example, compared to Flutter, Ionic provides worse performance & testing. I do understand, that Flutter developers are quite biased against Ionic, but for example in this article surf.dev/flutter-vs-ionic-choosing..., we can see that Flutter becomes more popular, and this trend will probably continue for some time as Google releases new updates etc. What do you think about it? Is there some place for Ionic on the market today?

Collapse
 
fyodorio profile image
Fyodor

There definitely is. Even more than ever, probably.

We, developers, are lazy, and Ionic gives us possibility to use existing knowledge to build beautiful mobile applications in a fast way.

And we don't need to learn a new language and the whole set of tooling as in case of Flutter.

Don't get me wrong though, Flutter is very cool. And it's just the right tool for some goals.

But Ionic is great for building with ready-to-use building blocks in a real cross-platform way with the highest level of code reuse and respect to corresponding platform UI/UX guidelines and standards. Many companies and individuals recognize these benefits and use this library and the tools it provides.

There are whole bunch of pros and cons and I could reason about them forever probably, but the point is that Ionic is here to stay and it still shines, you can be sure 👍