IONIC - 1.2 Understand the ecosystem

Now that we have an overall idea of what Ionic is, we can look more closely at its ecosystem and understand how an Ionic project actually fits together. To build an application, we write code using JavaScript and a framework such as Angular. You may also use another frontend framework like React or Vue, but that part stays optional. On top of that, you add the Ionic framework itself. This set of Ionic web components gives you rich UI elements with very little effort, so the app already looks great and behaves well, which would otherwise require a huge amount of extra work.

From a single codebase, you can then target several types of applications. This is where Capacitor or Cordova come in with their plugins: from your JavaScript code you can trigger functions that actually run native code on the device, for example to open the camera, get the user's location or show a native alert.

A quick refresher on Angular

Since we will use Angular in this course, here is a small reminder. Angular is an open-source development framework, created and maintained by Google and an active community since 2016, inspired by the older AngularJS framework released in 2009. It is based on the MVC architecture (Model, View, Controller): data is separated from the graphical representation and from the processing logic, which makes the code easier to maintain and to work on as a team. The language used with Angular is TypeScript, an open-source language created by Microsoft in 2012, which is compiled into JavaScript that runs in every modern browser.

With Angular, you build single-page applications: the whole app lives in one page, so there is only one full load at launch, which improves the user experience because only the needed information is updated. You can split your application into modules to reuse code across projects. Each module contains one or more components, and navigation between them is done via routes: a route is the association between a URL and a component. A component is a fully customized HTML tag and brings together the view and its controller in the MVC sense. Components can also use other components, for example a list component that uses an item component, which itself can be reused to display items in a shopping cart.

Many ready-made libraries also exist, such as Angular Material components for buttons, tables, progress bars and more. To quickly deploy an Angular app, the simplest option is Google's Firebase: it hosts the site, stores data in Realtime Database or Firestore, and Google Cloud Storage handles files much like Amazon S3, with a free tier to get started. With this Angular reminder in mind, we are ready to move on to the practical part in the next video.

Summary

This lesson provides a comprehensive overview of the Ionic ecosystem, explaining how to build applications using JavaScript, Angular framework, and Ionic web components that automatically enhance user interfaces with rich elements. It covers the essential role of Capacitor and Cordova plugins in accessing native device functionality, and introduces critical tools like Angular, TypeScript, Firebase, and Google Cloud Storage that form the complete Ionic development stack for both web and native applications.

Key points

  • Ionic web components automatically add rich UI elements and functionality to applications with minimal effort, improving both appearance and user experience
  • Capacitor and Cordova plugins enable JavaScript code to trigger native functionality on devices, including camera access, user location retrieval, system alerts, and other device-specific features
  • Angular is the recommended framework for Ionic development, offering MVC architecture, TypeScript language support, modular organization, and component-based development for scalable applications
  • Single-page applications (SPAs) improve user experience by loading and modifying only necessary information dynamically without full page reloads
  • Angular components and modules enable code reusability across different applications and sections, allowing developers to build complex features by composing smaller, reusable components
  • Firebase and Google Cloud services provide essential backend infrastructure including hosting, real-time database (Firestore and Realtime Database), and cloud storage for application files

FAQ

What is the primary role of Capacitor and Cordova in Ionic development?

Capacitor and Cordova act as bridges between JavaScript code and native device functionality, allowing developers to access native features like camera, location services, and system alerts through plugins, enabling true native capabilities within a JavaScript-based application.

Why is Angular the framework of choice for Ionic applications?

Angular provides a robust framework with MVC architecture, TypeScript language support, modular organization, component-based development, and a rich ecosystem of libraries like Angular Material, making it ideal for building professional, scalable, and maintainable Ionic applications.

What are the benefits of single-page applications (SPAs) in Ionic?

SPAs provide superior user experience by dynamically loading and modifying only necessary content within a single page, eliminating unnecessary full-page reloads and significantly improving application responsiveness and perceived performance.