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.