I would like to know whether there is a graphic diagram available somewhere that shows how Ionic 2 and all the related technologies connect with each other, giving sort of the big picture for the beginner learner? I am trying to learn Ionic 2 development through online sources myself but thought a graphic if available would be a great help. Thanks!
PS: Please excuse me if this is not the right category to ask the question, admins can move it to the suitable category.
I don’t know of one big diagram. This will be especially hard as “all related technologies” can encompass hundreds of names.
Basically it boils down to this:
Ionic has two basic parts: Ionic CLI is a thing that does stuff on the command line and Ionic Framework (ionic-angular) that is a framework for building apps.
ionic-angular is built on Angular as a base framework, so uses what Angular offers and adds stuff on top.Angular itself uses Typescript as a programming language, so Ionic does too. A big part of the “top” are the components and API, basically building blocks and code thingies you can use to build these apps. That’s what most of the Ionic docs are about, these building blocks make it so easy to build apps with Ionic.
Ionic CLI is a collection of commands to create Ionic projects (collection of files that are needed to run Angular and ionic-angular) and some commands to take these Ionic projects and make them into (mobile) apps using Cordova. Cordova takes a project and wraps it in some native code that runs on a platform like iOS or Android.
Then we have some related stuff:
Ionic Native is a library that helps you easily (in a syntax that matches all the other code) use Cordova plugins in your app. Cordova plugins let your app use stuff that normally is only available in the native parts of code, like camea, vibration, bluetooth, push notifications, SQLite etc - stuff normal websites can’t really use.
Ionic Storage is a library that helps you to store key-value stuff easily and abstracts away the different storage solutions that can be used.
Hey @Sujan12! First of all, thank you so much for your descriptive and useful response!
Actually, I meant a very big bird’s eye-view kind of thing rather than anything detailed or very technical for the beginner. For example, I am new to Ionic and it’s fresh in my mind that the initial road block for me was to understand how Angular, Ionic, Typescript, Javascript/HTML/CSS/SASS were connected and where each of their boundaries were, so I actually was referring to these technologies mainly. I am learning and I do understand a bit of the picture now, your response has added to it too!
Do you think a graphic can be made if not available already, showing how these are related in an Ionic app? Won’t it be useful for the very beginner?
Thanks again for your help!
PS: Thanks for moving my question to the relevant category too!
Well, eveyone asking needs some different terms explained and set in relation, so it is hard to build “one” answer - especially as these are very different things. Creating a “graphic” out of that is even harder, as this is not a simple “stack” of stuff or some relationships, but a big tangle
I will try again in text:
Angular: Development Framework where you use Typescript to write Code.
Ionic: Development Framework built on Angular that adds some Components (Mixture of Typescript, HTML and CSS/SASS)
Typescript: Programming language, “variant” of Javascript (special syntax), compiled to Javascript for execution later.
Javascript: Not really need directly, but Typescript results in JS along the way.
HTML: Written in templates, often indirectly by Angular and Ionic components that generate HTML as the end reulst
CSS/SASS: Used to style the Components and HTML created by Angular, Ionic and the user’s code
Just keep asking questions and adding terms and we will get to everything.
This is exactly why I referred to my personal experience as I think the most important thing to understand for the learner taking the very first look at Ionic would be to understand how everything is fitting in broadly. After that, more technical questions will be coming up surely for a more in-depth understanding.
I understand this too though, it’s not easy.
Thank you so much for this, may be I can come up with a graphic myself once I am sure about all these things. Your answers are reinforcing my understanding of it and making it clearer, I hope this discussion itself will help others too!
Hey @Sujan12, if we can make this technically perfect then this will be very useful for the newbies I think. We can shift this thread back to the tutorial category and make the title same as of the graphic’s title.
I think the role of “Typescript” is too big in your graph, it’s “just” the way we write code, not really that important.
Cordova and Cordova plugins are two very different things - the grey box on your left is more the plugins, the real Cordova would probably be on the far right as a “container” around the green stuff.
Here is how Cordova itself explains how it works:
Here the green “Web App” box would be Ionic + Angular. But I like the idea of having the “uncompiled” stuff outside Cordova and only your green box inside Cordova… That’s a new way to display this and makes total sense.
Yeah, you are right the Typescript rectangle is looking very big and this visual importance might give newbies some wrong impression. Actually because of the way I’ve structured all the elements, it has to cover both the top and bottom flows so looks big, perhaps I can make it an unfilled rectangle with a dotted boundary.
Regarding this though, I am not very sure what exactly you are saying. Am I to understand that Cordova has some influence on the structure of the final web pages other than the plugins being used through the ionic-native interface for native functionalities?
Yes. Cordova is responsible for taking an Angular-based web application and packaging it into something that looks to each platform like a native application.
Hey @rapropos, thanks for your response! Okay, I’ll check that out and see how that can be represented in my design. It might be useful if you guys can suggest me as to how should I edit the current graphic.
I think the “Typescript” should actually encapsulate Ionic, Angular, template, Components, Service and Ionic Native to be correct. SASS is used to style Templates and Components.
I am thinking like the typescript we are showing here is the typescript code the Ionic app developer is going to write and not the typescript which Angular or Ionic themselves might be using. I think if we encapsulate Ionic, Angular etc. within Typescript then it’ll become complex and confusing.
Likewise, for the SASS I was just trying to show that it is being transpiled to CSS. I am not sure how to show it here that it is being used by the templates and components.
Actually, I am trying to keep it very generic as I myself don’t know much about it yet But I’ll try to incorporate your suggestions as much as I can understand.
But I’ll try to incorporate your suggestions as much as I can understand.
