WTF is "modern" Angular development?

so what the heck does Modern angular development even mean in this video I am going to explain what modern angular development means to me and it's also going to contain a cheeky promo for my new course on that very topic I don't think modern angular development is necessarily about bandwagoning on whatever the latest features and Trends are there is a lot of cool stuff coming out for angular but using whatever came out in the latest major version is not what I consider to be modern angular development I see it as a balance between not clinging to the old ways of doing things and also not adopting new features or Trends before best practices have emerged but always being open to experimentation and change with the way that we build angular applications so ultimately it's about being able to create great apps whilst having great developer experience at the same time and finding the best way to do that now I don't think anyone should treat this as the definition of modern angular development nor do I think that this is the only good way to build angular applications but for me creating modern angular applications can be broken down into five key areas using on push change detection coding reactively with rxjs architecting with smart and dumb components using Standalone components or single component angular modules or scans and the co-locating code and it is these five areas that are the focus of my new course ionic start which hopefully launched just a few minutes prior to this video going up so it's all about learning how to build professional grade applications with angular and applying those Concepts specifically to creating mobile applications with the ionic UI components so if you happen to be watching this video within the first 48 Hours of it going up you will be able to head to ionixtart.com and get a lifetime membership for 30 off so now let's dive into those five Concepts a little bit for most of these I already have dedicated videos that go into the topic in depth so I'm aiming for this video to be a quick rundown of each point and you can check out the other videos for anything you are particularly interested in so let's start with on push change detection it might seem an odd place to start this story but I think it is significant and relates to the next two points so the short story is that on push change detection results in less change detection work because change detection is primarily only going to be triggered when the input to a component changes specifically the reference needs to change and event binding like a click is triggered or the async pipe is being used in the template and it emits a new value so the reason I think it is so important is not because it can increase performance but because in order to work within this set of rules for change detection it encourages us to architect our applications better so this relates to the next two points we are going to talk about smart and dumb components and coding reactively because one of the change detection triggers is the input to a component changing it can encourage us to break up our applications into more ideally single responsibility components if we have components that do too much it might be hard or awkward to trigger change detection but if we break everything into smaller components that receive new inputs we won't have so much trouble with on push change detection and the other thing it encourages us to do is to code reactively and utilize the async pipe as this is also another thing that will cause change detection to run with onpush change detection so I'll link to another video in the description for a lot more information on the specifics of using on push change detection but for now let's move on to those next two points so first the idea of smart and dumb components so we already touched on this in the last Point breaking our application up into smaller components that have a single responsibility can be more effective than having Giant components that do lots of things specifically using the smart and dumb component architecture means we primarily have two types of components in our application we have Smart components which are typically our routed components they are smart because they know things about the application they inject services and orchestrate data flowing to their child dumb components and so the dumb or presentational components are dumb because they do not need to understand the context in which they are used primarily they just receive inputs and communicate back to the parent component using outputs and they generally don't inject any dependencies so this is a great way to go about adhering to the single responsibility principle and it also makes the components very modular since they are context independent they are often easily reusable either within the application or even among multiple different applications so again I have more information on this topic so I'll link to another video in the description for a deeper dive then we have the concept of coding reactively with rxjs so this is not really an easy one to summarize and it also probably requires the biggest learning investment so what programming reactively looks like in angular and I am talking about a specific type of reactivity called reified reactivity is something like this so we have a stream and that stream controls what happens to the data flowing through it we have data entering these streams at the source perhaps through a service or as the result of an HTTP request and that data flows through in an unbroken stream to the exit or sync which is typically the template where we want to display that data so the key point is that on this entire Journey we never subscribe to the stream we only subscribe to the stream to pull the value out when we reach the destination which is often the template if we subscribe we are breaking this unbroken stream from the source to the sync and we lose a lot of the benefit along with so this doesn't mean we can never manually subscribe to an observable but if we do it just means we aren't coding reactively anymore and again I am referring to this reified style of reactivity so the main benefits of using this reactive style of programming with rxjs for me are that if everything is based on streams then whenever any data changes everything just updates automatically wherever it needs to when we're building applications we are often dealing with changing data and with rxjs it just feels like everything is working as it should and we don't have to be manually updating things all the time we get access to a lot of powerful rxjs operators that once they're learned can make many tasks way easier and less error prone and if we are adhering to this concept of not subscribing this style of coding makes dependencies very clear so if I am deriving something from a stream I can trace that all the way back to its source and no know that it isn't going to be modified in surprising ways by other parts of the program so I won't link to a specific video for this topic because most of my channel these days is about various rxjs and reactivity topics so feel free to browse some of my other videos if you'd like to know more about this stuff so the next thing is using Standalone components or using the single component angular module technique to somewhat approximate the benefits of Standalone components so if you are unfamiliar a standalone component is a component that does not need to be declared inside of an NG module to be used and the single component angular module technique involves using modules that only declare and Export one component directive or pipe so whether you use Standalone components or single component angular modules the key idea is about creating angular applications where there is less focus on the modules and more focus on components as the basic building blocks of an angular application so for me this greatly simplified is the way I think about structuring angular applications you can just use whatever you need wherever you need it rather than worrying about how best to group things together and likely ending up with most of your components inside of a single shared module and the final point is co-location of code so for me I specifically use and teach this NX inspired style structure where the application is broken up into features and each feature generally has three folders data access UI and utils so the feature component itself will be the smart or routed component anything related to managing data like services and stores will be in the data access folder all of the dumb components and feature specific directives will be in the UI folder and other helpers and utilities will live in the utils folder so whether you use this specific style or not the key idea is that all of the code related to a particular feature is grouped closely together which makes it easier to build and maintain and for code that is shared among multiple features we also have a shared folder which also contains data access UI and utils folders within it so rather than having a service this folder that holds all of the services for every feature in the application the services related specifically to a feature are located within the folder for that feature and the same goes for components and directives and whatever else so again I expand on this concept more in other videos so check out the links in the description for more information so that sums up my key philosophies for what constitutes a modern angular development at a basic level this is an opinionated take and it's my attempt at giving some shape to a rather vague concept so please don't consider this to be some rigid definition that I think everyone needs to adhere to there are many useful Concepts that I haven't even mentioned here it is just a style that I've adapted over the years through studying what the best angular developers and companies are doing and seeing what works for me and what I think works as a nice General default to teach others so if you do want to learn a lot more about this particular style of creating angular applications again and feel free to check out ionixtart.com and if this video is less than 48 hours old you'll still be able to grab a 30 discount otherwise I'm going to keep releasing new videos like this every week right here on YouTube so feel free to stick around [Music]

Channel: Joshua Morony

Views: 70,284

Keywords: ionic, tutorial, tutorials, ionic tutorials, ionic framework, coding, coding tutorials, angular, angular tutorials, capacitor tutorials, mobile, mobile apps, apps, html5, ios, android, native, hybrid, pwa, web apps, progressive web applications, programming, stenciljs, stencil, performance, ui, ux, animations, screencast, rxjs, nx, ngrx, architecture

Id: 36G-ZFcllkk

Length: 10min 45sec (645 seconds)

Published: Wed Oct 26 2022