IONIC - 1.2 Understand the ecosystem

Now that we've seen this first detailed look at what Ionic is, we can design an Ionic project and take a closer look at this ecosystem. To do this, we will see in detail the stages of our project. To create an application, we will write code such as JS or with a framework such as Angular. You can also use a frontend framework which is still optional, and thus add the Ionic framework, so this set of Ionic web components allows you to get beautiful rich elements added to this application. Automatically or with little effort so that the app already looks great and has lots of cool features, which would be a lot of extra work without its help. It is interesting to know here, that the web components are added to it. And in the end, create different types of applications based on your unique code base depending on your application. And this is where Capacitor or Cordova will intervene with the plugins. So from our Javascript code, we can trigger certain functions which then trigger the native code on your device. So real native code to e.g. open camera, get user location, show alert or whatever. So that's what Ionic is all about. In this trial, we will need to use Angular, which is why I offer you a little reminder about the features of this framework. Angular is an open-source development framework for creating web applications. A framework is a set of tools that allows applications to be developed quickly and Open-source, this means that everyone can participate. It was created and maintained by Google and by a very active community since 2016. It is inspired by the Angular JS framework also launched by Google and which dates back to 2009. Angular is based on an mvc architecture (model, view, controller), i.e. we separate the data, the model, the graphical representation, the view and the processing: the controller. This architecture has the advantage of easier maintenance of the written code. It also facilitates teamwork. The programming language that we use with Angular and TypeScript. It is an Opensource language also created by Microsoft in 2012, it allows you to write code which is then transformed into JS. And JS is a language compatible with all self-respecting internet browsers with Angular, which have created so-called single page applications. These are applications that will be contained in a single page on your browser. This means that there is only one load at launch which improves the user experience by avoiding unnecessary page changes. Only the necessary information is changed. With Angular, you can split your application into different modules. Modules make it easier to reuse code in multiple applications that include one or more components, and navigation between components is done with routes. A route is in fact an association between a url and a component as in Angular by all components. To put it simply, a component is a totally personalized HTML tag. It is an element of your application that you will be able to reuse wherever you want. As we have seen previously, It will include the view, the graphical representation and the processing the controller. In the MVC model what is practical is that a component can use other components. For example, in an e-commerce site you will be able to define a component that displays the list of all available items and this list can use a component to display an item and this component you will be able to reuse it to display items from the basket of the buyer. You quickly imagine the possibilities available to you and in addition many components are available such as Angular hardware components. These are component libraries that offer you buttons, tables or other progress bars to create applications in a professional way. To quickly deploy an Angular application, the easiest way is to use Google's Firebase service, which is a cloud computing service that allows you to host your site, and therefore your Angular application here. allow you to store data in realtime or Firestore databases and if you ever have files to process, including an application, you can use google cloud storage. It is an object storage service, a bit like the s3 of the WS. With google firebase you can get started for free. So much for this little reminder about the Angular Framework. Want to know more? Do not hesitate to consult the videos available on Angular on which you will have everything you need to understand and practice this framework. See you for the next video where we will start putting it into practice so see you soon!