Welcome!
Hello and welcome to Ionic Start! This course will teach you everything you need to know about Ionic and Angular, from the basics right through to building an application for iOS and Android and submitting it to app stores.
Our goal here isn’t just to learn the bare minimum to get up and running, it is to build a solid foundation of knowledge and modern best practices that are used by highly skilled professionals today.
Building professional applications with Ionic is mostly about learning how to build professional applications with Angular. Angular is what makes most of your application do what it does. Ionic adds a lot on top of Angular that makes creating native-quality mobile apps a breeze (at least compared to doing it without Ionic).
However, Angular is primarily the beast you will need to tame on your learning journey.
But there’s a problem…
There are two distinct ways that you can go about learning Angular: one easier and one harder.
The easier approach uses a more intuitive imperative style of programming, whilst the harder approach uses a reactive/declarative style of programming that can be harder to wrap your head around initially but pays off in a big way in terms of developer experience and code quality.
No idea what these terms mean? Imperative and declarative? Don’t worry, we’ll get to that later. I am just trying to make a point here as to why we are going to learn the “hard” way.
The easier approach is quicker and easier to learn for most people (naturally), but the harder approach is how - at least in my opinion - the best Angular developers today build their apps.
The problem is that these two styles are so different, that it’s not a simple shift from one to the other. Starting with the easier approach is going to lead you to learn quite a lot that you will need to unlearn later when switching to the other approach.
It’s always going to be a bold claim to say that one approach is “better” than another. But, I do strongly believe that the approach we will be learning is the approach that is best for Angular applications. It is an approach that works with concepts that are deeply baked into Angular. Once you get the concepts down it becomes much easier to code this way, because in a sense you are using Angular the way it was designed to be used.
At least in my view, Angular developers will tend to move toward the “hard way” as their skills with the framework improve. But there is no reason why you can’t start down that path immediately.
What does the “best” approach look like?
Maybe you already have some Angular knowledge, or maybe you are a complete beginner. In any case, I don’t want to dive too deep straight away into what the difference between imperative and declarative is, or what coding reactively means, or what the benefits of OnPush change detection are. We will build these concepts up over time and explain them as we go.
But, I don’t want to just leave you with this wishy-washy notion of the easy way and the hard way (which I am claiming is the “best” way) to create Angular applications.
This is a general outline of the concepts we will be using to create our applications, which you might not find in a more typical approach to building Angular applications at a beginner/intermediate level.
These are the concepts that make this the “hard” way:
- Reactive/Declarative style coding
- RxJS Operators
- TypeScript strict mode
- Smart/Dumb component architecture
- Feature based project structure
- OnPush change detection
- SOLID programming principles
Again, maybe you are already familiar with some of these concepts, maybe you’ve never heard of any of them. Either way, it doesn’t matter at this point. We are going to address all of these in detail throughout the course as we learn the standard Angular concepts like:
- Components
- NgModules
- Templates
- Services
- Dependency Injection
- Forms
- Change Detection
- Decorators
- Routing
- Styling
- …and a lot more
We will even be focusing on some newer features of Angular including standalone components. Standalone components are a newer and more experimental feature of Angular so we will not be building our applications with them, but we will discuss how they will fit into the Angular ecosystem moving forward (and we will prepare our applications for this transition). Of course, we will also be learning Ionic-specific concepts along the way as well. In a later module, we are going to investigate what exactly it is that Ionic adds to Angular.
A quick test!
What?! We haven’t even learned anything yet. Throughout this course, you will find little quizzes like this to help reinforce things we learn in particular lessons. Usually, these will be used to test your knowledge. However, for now, this is going to serve as a little check to make sure you have the prerequisite knowledge to complete this course.
If you answer No for any of these, it doesn’t mean that you can’t start the course. However, you may need to seek out additional resources as these are concepts that will not be explained in this course.
I understand the basics of HTML/CSS
Great!
If you have not yet learned the basics of HTML/CSS then you will struggle with this course. You may want to seek some additional resources like <a href="https://www.khanacademy.org/computing/computer-programming/html-css">this</a> first.
I understand the basics of programming with modern JavaScript
Great!
If you are not familiar with basic programming concepts with JavaScript - things like performing a for loop, creating an array, assigning variables, writing and calling functions - then you will require some additional resources. Wes Bos has a great course on learning modern JavaScript <a href="https://wesbos.com/javascript">here</a>. The course goes deeper than is required to begin this course, but the stronger your knowledge of JavaScript the better
I have used a terminal/CLI and am at least somewhat familiar with npm
Great!
We will be using the terminal quite a bit in this course to generate applications, run build commands, and install dependencies. If you are not comfortable with entering commands into a terminal or have never used npm to install a package before, this won't be too much of a blocker for this course, but it might be useful to research the basics of Node and npm a little before getting started. You could start with <a href="https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/">this</a>