Join my mailing list for more exclusive content and access to the archive of my private tips of the week: mobirony.ck.page/4a331b9076

Please create a complete course on "Angular Modern Development on Enterprise Level".

I would really like a more in depth video of writing tests in angular, especially with the reactive coding using streams

@bromptonhorsing8597

Жыл бұрын

would be really useful, especially TDD examples

@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

Жыл бұрын

@@AlainBoudard For sure, and the best logo

@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

Жыл бұрын

Upvoted

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.

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

Жыл бұрын

meh react is miles better

@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

Жыл бұрын

@@marusdod3685 you're delusional bro. You can't do anything with React lol

@marusdod3685

Жыл бұрын

@@uziboozy4540 say 1 (one) thing

@uziboozy4540

Жыл бұрын

@@marusdod3685 two way data binding

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

Жыл бұрын

Yeah for sure this is definitely a problem in software development in general

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.

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.

Keep it up please, we need more videos from you

It worked! Tank you sir.

I've been using Angular for 10 year and I found this video very helpful and informative.

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

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

Жыл бұрын

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

Жыл бұрын

@@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.

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

Жыл бұрын

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

Жыл бұрын

@@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.

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

Keep up the good work. Angular definitely deserves its high rank in the market. With more tutorials it will be used more.

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

Жыл бұрын

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

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

Жыл бұрын

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

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

Жыл бұрын

The code snippets in this video were actually generated with carbon.now.sh

@petterhoel

Жыл бұрын

Ah, nice 😍🎨

if I m injecting some kind of translation service or angular material token. Is is still dumb? For example dialogRef

@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.

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

Жыл бұрын

And wouldn't it make sense to call the folder where we group data services, stores, etc. as "data", instead "data-access"?

@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

Жыл бұрын

This is just following the Nx library naming convention, you can certainly call it data if you want

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

Жыл бұрын

Good luck Vincent!

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

Жыл бұрын

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.

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

Жыл бұрын

I discuss this in one of my other videos: kzread.info/dash/bejne/aYd40raIfMjXeKg.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

Жыл бұрын

@@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

Жыл бұрын

Just create 2 modules inside 2 folders with routing module. Thats it

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

Жыл бұрын

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)

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

Жыл бұрын

Sure, most of my content is about teaching a bunch of different Angular concepts

@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

Жыл бұрын

@@JoshuaMorony basically microservice architecture.

Purchased!

@JoshuaMorony

Жыл бұрын

Thanks so much Matthew, I hope you enjoy it!

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

Жыл бұрын

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

Жыл бұрын

Well this is what happens when Angular writes it like that in their docs instead of showing the people best practices.

Awesome

moved to React and I'm happy now

@JoshuaMorony

Жыл бұрын

What made you want to move away from Angular?

@DjLeonSKennedy

Жыл бұрын

@@JoshuaMorony OOP

@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?

Thank you

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

Жыл бұрын

This is definitely something I want to check out

what program do you use for your cover images?

@JoshuaMorony

Жыл бұрын

The thumbnails for the video? Affinity Photo which is basically a pay once version of Photoshop

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

Жыл бұрын

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

Жыл бұрын

It's interesting that "modern" Angular is basically adopting what React has been doing this whole time.

Firebase is also improving their integration making this future look great! 👍👍👍

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.

Who should get EliteIonic and who should get IonicStart?

@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.

Or just use solidjs or frameworks that only supports reactive programming

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.

"Modern" was era that started somewhere around the start of 20th Century and ended with "Post-Modern" era somewhere after the WW2.

Angular is getting refined in version 15, please create a new video and introduce new APIs.

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

Typical dumb question: what syntax theme do you use here?

@JoshuaMorony

Жыл бұрын

Hey the snippets in this video were just generated with carbon.now.sh

I didn't know about stand alone components.. goodbye shared module

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

Жыл бұрын

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

Жыл бұрын

Why use a class when you can use a function pretending to be a class 😂

@Nojo524

Жыл бұрын

@@drench1580 how do you do constructor injection with a function?

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.

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

People still use angular?

@JoshuaMorony

Жыл бұрын

Why do you think that people shouldn't still use Angular?

Society push you to learn React but Angular is the GOAT

So there are just historical Angular best practices

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

Жыл бұрын

No, don't do that unless you're using NGRX or other redux pattern library.

“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

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

Im not MAD , use react instead

@JoshuaMorony

Жыл бұрын

Why do you think people should use React instead?

So Basically we are getting MAD 😉 (Modern Angular Development)

@JoshuaMorony

Жыл бұрын

I like it!

or just not use angular thats the modern angular development

@JoshuaMorony

Жыл бұрын

Why do you think that people shouldn't use Angular?