WTF is "modern" Angular development?

  Рет қаралды 70,348

Joshua Morony

Joshua Morony

Күн бұрын

My modern Angular course: angularstart.com/
What is modern Angular development? This video breaks down the five key areas that I think constitute modern angular development and why I think they are important.
Get a LIFETIME MEMBERSHIP for Ionic Start: ionicstart.com/
Get weekly content and tips exclusive to my newsletter: mobirony.ck.page/4a331b9076
Other videos:
The benefits of OnPush: • Why use OnPush in Angu...
Smart and Dumb Components: • Are your Angular compo...
Nx style colocation: • How to structure your ...
0:00 Introduction
1:22 Ionic Start
1:51 OnPush Change Detection
3:39 Smart/Dumb Components
4:53 Reactive Coding
7:15 Standalone/SCAM
8:12 Code colocation
9:36 Conclusion
#ionic #angular
- More tutorials: eliteionic.com
- Follow me on Twitter: / joshuamorony

Пікірлер: 135
@JoshuaMorony
@JoshuaMorony 11 ай бұрын
Join my mailing list for more exclusive content and access to the archive of my private tips of the week: mobirony.ck.page/4a331b9076
@saifurrehman0
@saifurrehman0 Жыл бұрын
Please create a complete course on "Angular Modern Development on Enterprise Level".
@sven_93
@sven_93 Жыл бұрын
I would really like a more in depth video of writing tests in angular, especially with the reactive coding using streams
@bromptonhorsing8597
@bromptonhorsing8597 Жыл бұрын
would be really useful, especially TDD examples
@JoshuaMorony
@JoshuaMorony Жыл бұрын
Maybe I could do a video on observerSpy - I use that heavily for testing streams and it is fantastic. There doesn't usually seem to be much interest in my testing/TDD videos on YT though!
@JoshuaMorony
@JoshuaMorony Жыл бұрын
@@AlainBoudard For sure, and the best logo
@sven_93
@sven_93 Жыл бұрын
@@JoshuaMorony From a professional point of view, I would really like to see that. I think that testing is just part of the deal and everyone should be at least aware how to properly do it, myself included 😀
@deepakbawa1367
@deepakbawa1367 Жыл бұрын
Upvoted
@ico0z
@ico0z Жыл бұрын
Recently managed to my team to look at Angular and its abilities and we switched from React, now all other team are getting to know Angular and those videos make me a better developer so I can teach them how it works and to follow all of those simple rules and we got a very easy environment for coding. React is easy to learn but very... very hard to master in another hand Angular is hard to learn not very much if you got someone to talk to you and that it's, nothing to bother any more. In last words thank you Joshua.
@AnimusAgent
@AnimusAgent Жыл бұрын
I agree with all the takes on the video. The hard part is to find a team/company that actually takes best practices and modern development as priority. In my experience until now, I rarelly found a team that actually cares about all this stuff and work togheter to deliver the best possible code. Which is sad, cuz we usually have to deliver fast and low quality instead in order to "perform" as the company expects.
@JoshuaMorony
@JoshuaMorony Жыл бұрын
Yeah for sure this is definitely a problem in software development in general
@RicShaa
@RicShaa Жыл бұрын
I am currently refactoring a medium sized angular application making use of a lot of dynamic form components. This is the course i have been waiting for. Just purchased it and started reading. Thank you for your effort.
@Paro2221
@Paro2221 Жыл бұрын
It's sad that angular is not getting the attraction it deserves across the web dev world. I know that the learning curves about it can be too stiff, but it's literally like climbing the walls of heaven. Once you start getting confortable with angular and you are getting ahead of the curve, it is very difficult to go back to another framework\library, and you feel at home and in heaven, with all the tools and LTS coming from the angular team. I have tried to switch to other frameworks, but there is always something missing that makes me go back to angular. And i know that what i code today it will be reusable next year, something that NO OTHER FM can deliver. Thanks for the tutorial
@marusdod3685
@marusdod3685 Жыл бұрын
meh react is miles better
@thendoronnyramashia749
@thendoronnyramashia749 Жыл бұрын
This is exactly how I feel. I can't for the life of me ever use another FM besides Angular. It's my home.
@uziboozy4540
@uziboozy4540 Жыл бұрын
@@marusdod3685 you're delusional bro. You can't do anything with React lol
@marusdod3685
@marusdod3685 Жыл бұрын
@@uziboozy4540 say 1 (one) thing
@uziboozy4540
@uziboozy4540 Жыл бұрын
@@marusdod3685 two way data binding
@GdeVseSvobodnyeNiki
@GdeVseSvobodnyeNiki Жыл бұрын
That's actually a very valid point of view. I find that over the course of a year i came up to the simillar conclusions working on my angular project and they are very close to those listed in video.
@dayronalfaro9461
@dayronalfaro9461 Жыл бұрын
Amazing content man I have learned a lot with this videos and this chanel needs more subscriber I dont know why are only ~31k. This channel is really good
@mattyjmar10
@mattyjmar10 Жыл бұрын
I've been using Angular for 10 year and I found this video very helpful and informative.
@petterhoel
@petterhoel Жыл бұрын
Great video, thanks! And love your code snippets. What is the theme and font you are using? Would love to see content on testing streams and reactivity as someone else also mentioned.
@JoshuaMorony
@JoshuaMorony Жыл бұрын
The code snippets in this video were actually generated with carbon.now.sh
@petterhoel
@petterhoel Жыл бұрын
Ah, nice 😍🎨
@saifurrehman0
@saifurrehman0 Жыл бұрын
Keep it up please, we need more videos from you
@MikelAingeru
@MikelAingeru Жыл бұрын
Amazing and very helpful video as always Josh. What do you thing about working with streams down to dumb component level? I usually use to send [input]="stream$ | async" in the input, but I don't tend to send raw stream to that level. On the other hand, I tried nx-monorepo architecture a few times, but.. apart of the 4 directory types that you show I feel very complicated the "shell" type library to extract all the app routing and logic. In addition, the base structure with which I normally work has 3 main levels (core, features & shared) and from time to time I doubt if some service have to be in core or shared, or simply how to understand "core" and it's content. Thank you! I appreciate very much all your help for Angular/Ionic, specially with rxjs (operators), state management, nx-monorepo and architecture topics.
@JoshuaMorony
@JoshuaMorony Жыл бұрын
The general advice is to just use primitive values as inputs (so using the async pipe as you have shown) - that's not to say that there wouldn't ever be a useful situation to use a stream as an input, but it's probably best to stick with just primitive values by default
@mfpears
@mfpears Жыл бұрын
Great video. You're making the world a better place! Lol Seriously, I've been looking at dozens of projects for demos to use StateAdapt on, and I would say a relatively screwed up folder structure is the norm. Code is colocated horizontally instead of vertically (by feature). I appreciate the "folds" in Nx for npm packages because dependencies need to be strictly managed, but I always first create a generic feature lib first, and I'd rather split into another feature than create a horizontal split. It's so much easier to manage code when (actually) related stuff is next to each other. And the reactivity stuff goes without saying. But I'd say keep beating the drum because I think it's about repetition, honestly. People were trained into imperative patterns, so they just need exposure to declarative patterns now.
@JoshuaMorony
@JoshuaMorony Жыл бұрын
Thanks Mike! I've come across a couple of your articles recently and they are great - I actually just linked to your Qwik/RxJS article in my newsletter. And definitely, I feel like you cross a threshold with RxJS/reactivity which makes its benefits feel obvious and necessary but getting there can be hard, so I do my best not to sound like too much of a zealot lol
@mfpears
@mfpears Жыл бұрын
@@JoshuaMorony oh thanks! My last Qwik+RxJS one could use the boost. Idk, it's like people liked the idea of it more than the actual methods I came up with. Or the intro got too technical too fast... It's hard to tell why some content does well but not others. Anyway, at least it's there for myself when I get back to Qwik.
@viepng
@viepng Жыл бұрын
One of my college classes is using angular for front end. Not even my prof knows it. Trying to learn it is insanely hard and its even worse when you don't have the time in the first place. Anways, sprint 3 is due the 8th and we need to have the MVP done, wish me luck :')
@JoshuaMorony
@JoshuaMorony Жыл бұрын
Good luck Vincent!
@amenhotepv4460
@amenhotepv4460 Жыл бұрын
Keep up the good work. Angular definitely deserves its high rank in the market. With more tutorials it will be used more.
@mvip4927
@mvip4927 Жыл бұрын
It worked! Tank you sir.
@leonardopillay4200
@leonardopillay4200 Жыл бұрын
Hi Joshua, just have a question on push change detection. So I use it 90% of the time. One struggle is when you need to show loaders or spinners I normally use an isLoading boolean to toggle the loading state. When using OnPush how do you re-assign a boolean to trigger changes?
@JoshuaMorony
@JoshuaMorony Жыл бұрын
I would do it reactively - usually by having loading states in something like Component Store, but however you do it the general idea is to have it as a stream that is subscribed in the template with the async pipe (you could just have an isLoading$ BehaviorSubject if you want). I'd also generally have the loading state as part of a vm$ stream, but that's getting into personal preferences territory.
@leonardopillay4200
@leonardopillay4200 Жыл бұрын
@@JoshuaMorony Ahh yes the good old behavior subject. I did think of that but I thought it would be overkill for a simple boolean. With regards to stores, I use firestore, and restore streams are a bit challenging to implement. There is NGXS but it's not up to date with the new SDK. If you could maybe do a tutorial in the future on state management with firebase that would be great. Awesome tutorials. You've changed my approach to angular completely.
@uomjames
@uomjames Жыл бұрын
Thank you for the helpful video. What do you think of testing? Do you think that the type system is advanced enough that we may rely on it (at least for Unit testing)? And how do you deal with forRoot, forFeature, etc. in the standalone-component approach while reaping the benefits of lazy loading?
@uomjames
@uomjames Жыл бұрын
And wouldn't it make sense to call the folder where we group data services, stores, etc. as "data", instead "data-access"?
@JoshuaMorony
@JoshuaMorony Жыл бұрын
I'm not here to force testing on anyone, but my personal philosophy is that automated tests are important for any code that you intend to maintain (for me I prefer TDD). And I haven't actually dived too much into standalone yet, I'm still mostly using SCAMs
@JoshuaMorony
@JoshuaMorony Жыл бұрын
This is just following the Nx library naming convention, you can certainly call it data if you want
@michaelcoltainecoltaine6323
@michaelcoltainecoltaine6323 Жыл бұрын
Can you make video on how to test component that has onPush detection? The change detection does not run more than once in unit tests and nobody talks about it.
@JoshuaMorony
@JoshuaMorony Жыл бұрын
You can manually call markForCheck in the tests, but what I usually do is use overrideComponent to set the change detection strategy back to default for the unit tests. I am setting inputs in non-standard ways in the tests, so I don't care about testing whether change detection works here, I am just testing whatever it is I am testing. I leave it up to E2E tests to catch if there is any issues with CD not running.
@GLawSomnia
@GLawSomnia Жыл бұрын
How do you structure a folders with multiple routed/feature components? Lets say you have a report feature with 2 reports, an student and a teacher report (for example). How would you structure that? Will you create 2 feature folders? If yes how would you name them? I myself make a report feature module and then have basically what you have, except that my routed components are in a "containers" folder (instead of the feature folder itself)
@JoshuaMorony
@JoshuaMorony Жыл бұрын
I discuss this in one of my other videos: kzfaq.info/get/bejne/bbl0o7eAscvVeHk.html - to summarise, I have a 'feature' folder within the feature for each smart/routed component (e.g. home/feature/feature-one, home/feature/feature-two), and then I will also have a "shell" feature within that (e.g. home/feature/feature-shell) to configure the routing.
@GLawSomnia
@GLawSomnia Жыл бұрын
@@JoshuaMorony yeah its basically what i do except you name the folder "feature" and i name it "containers" and that you have a shell folder, while i have those modules in the main feature (group) folder
@Vietnamcamping89
@Vietnamcamping89 Жыл бұрын
Just create 2 modules inside 2 folders with routing module. Thats it
@bobkelso5681
@bobkelso5681 Жыл бұрын
You should check out RxDB. There you can stream everything from the database into the angular ui with a single stream source which even works across multiple browser tabs.
@JoshuaMorony
@JoshuaMorony Жыл бұрын
This is definitely something I want to check out
@phuongtran-qh5kq
@phuongtran-qh5kq Жыл бұрын
Hi Joshua. Thanks for the content. I have 1 question, how do you code reactively for signing in? After signing in, the application will start download some data and display to the UI
@JoshuaMorony
@JoshuaMorony Жыл бұрын
There shouldn't really anything special to do here - have your app go to the logged in route, have a stream of the data you need to load in and subscribe to it with the async pipe in the template
@mjjjuly
@mjjjuly Жыл бұрын
so in a reified approach, if the presented data is dependent on multiple streams (needs calculation, etc), how would you do it without subscribing to the stream?
@JoshuaMorony
@JoshuaMorony Жыл бұрын
You would combine the streams in some way (e.g. by using the combineLatest creation operator to get all the values and then mapping the result in some way, but there are other ways too)
@loko1944
@loko1944 Жыл бұрын
if I m injecting some kind of translation service or angular material token. Is is still dumb? For example dialogRef
@JoshuaMorony
@JoshuaMorony Жыл бұрын
I try not to be too strict/dogmatic about the rules, keep them in mind but in the end do what is useful/makes the most sense for your app. For example, I will sometimes inject dependencies like FormBuilder or ModalController into dumb components, which I feel make sense although it definitely breaks the definition of not using DI. Sometimes I will also have a dumb component communicate back to the parent through a FormControl rather than via an Output which can make things easier sometimes. I think the key thing is that the dumb component is modular and could be easily used in other contexts.
@nejatnjonjo
@nejatnjonjo Жыл бұрын
I am sad that I can't afford it. I like your content chief. Keep doing what you are doing. I switched to start using Observables bcoz you explained better, I used to manually subscribe bcoz I thought that's how we do it 🤣🤣🤣
@JoshuaMorony
@JoshuaMorony Жыл бұрын
Observables really get a whole lot better when you go all in on reactive coding! And please keep sticking around, I'll still be releasing new free content here every week (and probably more around the place now that I've wrapped up the course)
@theanswer1993
@theanswer1993 Жыл бұрын
Well this is what happens when Angular writes it like that in their docs instead of showing the people best practices.
@sealone777
@sealone777 Жыл бұрын
Thanks for the vid! I’ve been using Angular at work after taking some udemy course. I can see why Onpush should be used as default like React. Much philosophy you explain is basically same for React. Curious what angular stack you would use on new project. Obviously I come from React world and I do miss their eco system. Angular is ok.
@JoshuaMorony
@JoshuaMorony Жыл бұрын
For new Angular apps the only third party libraries I generally include are NgRx Component Store for state management, and observer-spy for testing - otherwise, just vanilla Angular usually.
@BenjaminLeeds
@BenjaminLeeds Жыл бұрын
It's interesting that "modern" Angular is basically adopting what React has been doing this whole time.
@aminelahrim8142
@aminelahrim8142 Жыл бұрын
Good video i have one question that i surf the internet for it no answer, Why not http request not return it as observable but to Promise because ofc API request its hit one time and we don't need to subscribe for multiple change of that call on API, Instead if there a data shared between multiple components then we can update a reactive object as Subjectbehavior on the service? Any idea please
@realadityaparida
@realadityaparida Жыл бұрын
Hey joshua I've a question as I'm self learner and learnt most of the angular development by myself and on practices but doesn't know some functionalities or development related, so can you help me on that?
@JoshuaMorony
@JoshuaMorony Жыл бұрын
Sure, most of my content is about teaching a bunch of different Angular concepts
@realadityaparida
@realadityaparida Жыл бұрын
@@JoshuaMorony okay so can you explain in a video how to build up angular app with separate apps like for user side a different app and for admin side another app but all those are inside one app.
@realadityaparida
@realadityaparida Жыл бұрын
@@JoshuaMorony basically microservice architecture.
@jonathangamble
@jonathangamble Жыл бұрын
what program do you use for your cover images?
@JoshuaMorony
@JoshuaMorony Жыл бұрын
The thumbnails for the video? Affinity Photo which is basically a pay once version of Photoshop
@rtpHarry
@rtpHarry Жыл бұрын
Purchased!
@JoshuaMorony
@JoshuaMorony Жыл бұрын
Thanks so much Matthew, I hope you enjoy it!
@Robinedquist
@Robinedquist Жыл бұрын
Who should get EliteIonic and who should get IonicStart?
@JoshuaMorony
@JoshuaMorony Жыл бұрын
It's going to depend a lot on you, so looking at the modules available in each will help - but in general, Ionic Start if you want to focus on building a solid foundation of fundamentals (even if you have been using Angular for a while), Elite Ionic is you are happy with the fundamentals and want to focus more on extended topics like performance, testing, TDD, etc.
@gabecasillas493
@gabecasillas493 Жыл бұрын
Firebase is also improving their integration making this future look great! 👍👍👍
@LexMadafaka
@LexMadafaka Жыл бұрын
Yeah not using the standard CLI generated .html, .scss/.css, .ts style is kinda dumb to me. Why should I but my complex .html code to the "template" in the .ts? I think not in every project this is a great approach. With a complex form, working with miltiple endpoints and services, this is not the way, I think.
@DjLeonSKennedy
@DjLeonSKennedy Жыл бұрын
moved to React and I'm happy now
@JoshuaMorony
@JoshuaMorony Жыл бұрын
What made you want to move away from Angular?
@DjLeonSKennedy
@DjLeonSKennedy Жыл бұрын
@@JoshuaMorony OOP
@JoshuaMorony
@JoshuaMorony Жыл бұрын
@@DjLeonSKennedy not trying to criticise your decision just trying to get a sense of the pain points - was there anything in particular about Angular's OOP approach that you didn't like?
@VidyaSagarGoud-xw4nz
@VidyaSagarGoud-xw4nz Жыл бұрын
Awesome
@larrycoleman8149
@larrycoleman8149 Жыл бұрын
Or just use solidjs or frameworks that only supports reactive programming
@KiknadzeTemo
@KiknadzeTemo Жыл бұрын
it always better to explain all of this with live coding
Жыл бұрын
The most magical thing about angular is to create a whole application from start to finish without the need to install any other third party npm shit.
@lukaszpiotrluczak
@lukaszpiotrluczak Жыл бұрын
This is mad... I was teaching about this for last three years. But nrver called it "modern" it always was "normal"/"standard". And when new elements where introduced I added them and teached ofvthem as well. But I am not good at marketing and sales, I am simple guy who tries tovshare knowledge and experience. Good you said "modern" in quotes
@TheEbrahimi
@TheEbrahimi Жыл бұрын
Angular is getting refined in version 15, please create a new video and introduce new APIs.
@csmrfx
@csmrfx Жыл бұрын
"Modern" was era that started somewhere around the start of 20th Century and ended with "Post-Modern" era somewhere after the WW2.
@MrGondurfractu
@MrGondurfractu Жыл бұрын
Those advices are pretty good ones, but I wouldn't necessarily call them the keys for "modern angular development" to be completely frank. I don't think there has been any other valid ways according to these bullet points since like the release of angular 4 at the very least. The exceptions here are standalone components, but you could create virtual componens before which is almost a competitor for standalone components to some extent - the rest are really just something dictated by common sense and by knowing the framework.
@1239TROY
@1239TROY Жыл бұрын
I didn't know about stand alone components.. goodbye shared module
@suicideplatypus8151
@suicideplatypus8151 Жыл бұрын
So basically is what I've been doing with winforms for the last 20 years? I knew web dev couldn't be that hard xd
@Alessandro_Russo
@Alessandro_Russo Жыл бұрын
So there are just historical Angular best practices
@andrescamilo7406
@andrescamilo7406 Жыл бұрын
Society push you to learn React but Angular is the GOAT
@SteveLombardi58
@SteveLombardi58 Жыл бұрын
Typical dumb question: what syntax theme do you use here?
@JoshuaMorony
@JoshuaMorony Жыл бұрын
Hey the snippets in this video were just generated with carbon.now.sh
@augpie4249
@augpie4249 Жыл бұрын
Angular is a hassle, a continuous back and forth between html, ts and css files. Why would i need a class when there are functional components that can act as classes, props that can act as class members or methods. Its plain stupid to overcomplicate something just to demonstrate that a pattern works.
@JoshuaMorony
@JoshuaMorony Жыл бұрын
You can have Single File Components in Angular (which is what I do) so all HTML/TS/CSS is in the same file. What do you think is wrong with using classes?
@drench1580
@drench1580 Жыл бұрын
Why use a class when you can use a function pretending to be a class 😂
@Nojo524
@Nojo524 Жыл бұрын
@@drench1580 how do you do constructor injection with a function?
@asdqwe4427
@asdqwe4427 Жыл бұрын
People still use angular?
@JoshuaMorony
@JoshuaMorony Жыл бұрын
Why do you think that people shouldn't still use Angular?
@daviddonadze221
@daviddonadze221 Жыл бұрын
Thank you
@Sara-xi2ug
@Sara-xi2ug Жыл бұрын
When I first learned Angular I was using Input/Output as explained in the tutorials, I soon moved away from this pattern when I discovered the elegance of BehaviourSubject + Dependency injection
@GdeVseSvobodnyeNiki
@GdeVseSvobodnyeNiki Жыл бұрын
No, don't do that unless you're using NGRX or other redux pattern library.
@DummyFace123
@DummyFace123 Жыл бұрын
“Reified” = MVVM and its fart sniffer orthodoxy. Where there is only the model and properties reacting properties reacting properties. Properties all the way down. And you DO NOT want to be too gung-ho about that, my newfound silverlight aficionado. Yes streams are more flexible and aren’t strictly hierarchal but just don’t doctrine yourself into a corner
@tsheskoelmaximus3784
@tsheskoelmaximus3784 Жыл бұрын
So Basically we are getting MAD 😉 (Modern Angular Development)
@JoshuaMorony
@JoshuaMorony Жыл бұрын
I like it!
@Alex_Aly
@Alex_Aly Жыл бұрын
Im not MAD , use react instead
@JoshuaMorony
@JoshuaMorony Жыл бұрын
Why do you think people should use React instead?
@arthurkelley
@arthurkelley Жыл бұрын
but you say this because you want to sell your ionic/angualr courses to earn money. you will never say react is better because it wont feed you, someone else is selling react/native believe
@nomadshiba
@nomadshiba Жыл бұрын
or just not use angular thats the modern angular development
@JoshuaMorony
@JoshuaMorony Жыл бұрын
Why do you think that people shouldn't use Angular?
WTF is "Zone.js" and is it making your app slow?
13:21
Joshua Morony
Рет қаралды 53 М.
Angular is about to get its most IMPORTANT change in a long time...
10:15
100❤️
00:19
MY💝No War🤝
Рет қаралды 23 МЛН
БОЛЬШОЙ ПЕТУШОК #shorts
00:21
Паша Осадчий
Рет қаралды 11 МЛН
Хотите поиграть в такую?😄
00:16
МЯТНАЯ ФАНТА
Рет қаралды 3,6 МЛН
Angular’s Third Era is…weird
21:41
Theo - t3․gg
Рет қаралды 89 М.
ngTemplateOutlet is WAY more useful than I realised
16:36
Joshua Morony
Рет қаралды 73 М.
RxJS made my code 5x shorter... but is it better?
12:48
Joshua Morony
Рет қаралды 18 М.
Rethinking reactivity with Angular Signals
10:57
Angular
Рет қаралды 19 М.
DHH - Ruby on Rails, 37signals, and the future of web development
1:09:57
Why did we need Signal Inputs in Angular, again?
12:19
Zoaib Khan
Рет қаралды 1,8 М.
Why use OnPush in Angular? Not for performance...
13:15
Joshua Morony
Рет қаралды 31 М.
100❤️
00:19
MY💝No War🤝
Рет қаралды 23 МЛН