Тёмный
No video :(

How I code in Angular when nobody is watching 

Joshua Morony
Подписаться 75 тыс.
Просмотров 11 тыс.
50% 1

Опубликовано:

 

27 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 52   
@JoshuaMorony
@JoshuaMorony 3 месяца назад
Get more content in the newsletter: mobirony.ck.page/4a331b9076
@Mong3
@Mong3 3 месяца назад
Hey! Can you create a stack blitz or publish the code for this video in Git Hub? I would appreciate it.
@JoshuaMorony
@JoshuaMorony 3 месяца назад
@@Mong3 usually I have the source code in the description but this one is from a private repo sorry
@muhamedkarajic
@muhamedkarajic Месяц назад
@@JoshuaMorony please make some example code so we can play around with it. I see lots of issues in the analog github. I'm worried its not gonna work out so great.
@HassanRaza-ym3uf
@HassanRaza-ym3uf 3 месяца назад
Hit like button if you want Joshua to open source this code so we can learn more from it.
@jovanthournout9707
@jovanthournout9707 3 месяца назад
Hey Josh, suggestion for a follow-up video. Typically in complexer applications, you have global state, feature state and also view state. One builds on the other. Each layer of state can be managed by signalslice, but perhaps you could give some pointers or insights in how you manage this.
@ToJak91
@ToJak91 3 месяца назад
I feel like an old grumpy man now. I truely love both `this` and the decorators. It makes reading and understanding location and purpose soo intuitive. One of the things i really miss when working in our MASSIVE monolithic c# backend, is the forced use of `this`. I have no idea, weather a variable is defiend, and possible changed on the partial parent class, of inside my method scope. And when some methods are 600 lines long, and parent object have 50 fields, it's nice to know what the scope of a field is... With @Input and @Output no longer needed (Or.. We're currently running angular 13, 14 & 15, so i can still use it with good conscience) , the purpose of the variable is no longer screamed in my face when i read the source code. Now i need to skim the entire end of RHS, instead of just the first character from LHS... :( 33 years, and ancient.. 😢
@JoshuaMorony
@JoshuaMorony 3 месяца назад
The input/output organisation is definitely something I miss (though I would still take the new input/output on the whole) - I do find myself wanting to use comments or at least gaps to more clearly delineate whats an input etc.
@larshanisch
@larshanisch 3 месяца назад
The public properties are input/output on my components. I use "protected" for the things I need in the template. And #private syntax for private fields.
@jovanthournout9707
@jovanthournout9707 3 месяца назад
Where does signalslice differ from ngrx signalstore? What are the pro's of one over the other? They both seem to create / declare a sort of encapsulated service that manages some state and only expose particular functions to the outside world and all that with reactivity in mind. Or am I overlooking a difference?
@JoshuaMorony
@JoshuaMorony 3 месяца назад
Keep in mind this is coming from someone who hasn't actually properly used SignalStore yet (me), but the key philosophical difference imo is the focus on the more declarative model for signalSlice i.e. you can't patch state in signalSlice, only pre-defined sources can update the state. Also, and I don't know if it translates to actual bundle size differences or not and I don't think that's particularly important anyway, but signalSlice is more of a simple utility function rather than a more feature complete state management library I think SignalStore is great though, to be clear
@bric305
@bric305 3 месяца назад
For context, I believe that Joshua released his signalSlice utility before ngrx' signalStore. But obviously the main angular state management library couldn't passs on making a signal based approach (I mean that ngrx didn't copy or steal anything from Joshua ofc)
@jovanthournout9707
@jovanthournout9707 3 месяца назад
@@JoshuaMorony Tnx again Josh 👌
@pezo1919
@pezo1919 Месяц назад
Nice to see CycleJS getting reinvented 😁
@jovanthournout9707
@jovanthournout9707 3 месяца назад
hey Josh, when exploring the signalslice docs, what is the idiomatic way of performing a backend call? So i create an action source for a create new user command In the pipe on the action source, I can concatMap and perform a http request Either the httpRequest responds with a the new user json, or I could follow up this concatmap with a switchmap that loads the users from the backend. After that, I can map either of these responses to a Partial of the State. Is this the way of doing things? Any example or suggestion on how to deal with a failures in the http call to the backend? Use onError and switch to a stream that returns an error object which is then mapped to the state? I must say, it takes some time to start thinking in sources, but once you get it, the pattern is often the same. SignalSlice appears to remove even more boilerplate. Feels natural and forces you to colour within the declarative lines. I like it ❤
@JoshuaMorony
@JoshuaMorony 3 месяца назад
Sounds like you've pretty much got it - yes essentially the same way I am calling the async operation in the example in the video, actionSource -> switch to request -> map result to partial of state, and yes you can also use catchError to retry/return an observable that maps to the appropriate error state
@jovanthournout9707
@jovanthournout9707 3 месяца назад
@@JoshuaMorony tnx for the confirmation 🙏
@sivuyilemagutywa5286
@sivuyilemagutywa5286 3 месяца назад
About the (ACF) Analog Component Format. 1. what are the benefits of using this in Angular? 2. what is deferent from Vue, Svelte? 3. why not use svelte or vue? I'm sorry if I seem like an Angular police. I just don't get this? Why would I use Analog if I don't get to use the Angular syntax?
@JoshuaMorony
@JoshuaMorony 3 месяца назад
To be brief: 1) less boilerplate, no loss of features (unless you specifically use OOP stuff) 2) everything else in Angular 3) same reasons I want to use Angular (the existing component authoring syntax is not why I use Angular)
@sivuyilemagutywa5286
@sivuyilemagutywa5286 3 месяца назад
​@@JoshuaMorony Ok I see? For me I just use Astrojs for (static sites, websites), I use vuejs for small things like chrome extensions, but I don't like SFC, but it is great for that stuff. But for Enterprise or Large projects, I like Angular OOP.
@JoshuaMorony
@JoshuaMorony 3 месяца назад
@@sivuyilemagutywa5286 which OOP features specifically do you make use of in large projects? just curious, not trying to judge (and btw, "Analog SFC" components don't specifically need to be SFC, it also allows defining templates/styles in separate files if that is what you want)
@sivuyilemagutywa5286
@sivuyilemagutywa5286 3 месяца назад
@@JoshuaMorony Modularity , Encapsulation and Organisation. OOP is easy for me to maintain in a large project.
@vutruong4164
@vutruong4164 3 месяца назад
​@@sivuyilemagutywa5286 I think all those points you need are still there if you use Angular Single File Component? Each component in a single file is basically encapsulation, modularity and organisation. Nothing has changed conceptually. Just the way u write code is less boilerplate.
@CodeZakk
@CodeZakk 3 месяца назад
hi .analog extension is not supported in vscode. when you try to create that file it will not read by vscode. what IDE are you using and how to solve this problem in vscode. thanks in advance!!
@JoshuaMorony
@JoshuaMorony 3 месяца назад
There's a VS Code extension available for analog language support (this is an early/alpha version though), I'm using neovim which can also make use of the same plugin with some configuration: github.com/analogjs/language-tools/blob/main/INSTALLATION.md
@Amnahbrhm
@Amnahbrhm 3 месяца назад
is analog a full stack framework? can i use it with dotnet? if i want to use is bc the SSR so can i use it in production?
@jordanking3715
@jordanking3715 3 месяца назад
I like the signal slice approach, is there a way to integrate it with redux dev tools. mostly the action triggering and starts with portions. Its helpful for debugging to examine the redux action stream that preceded an error.
@JoshuaMorony
@JoshuaMorony 3 месяца назад
I've thought about this, I think it's probably possible but I haven't actually looked into it yet
@phill13able
@phill13able 3 месяца назад
How many times do you run "ng new..."
@Zeth3D
@Zeth3D 3 месяца назад
are there differences when writing tests for createInjectable?
@JoshuaMorony
@JoshuaMorony 3 месяца назад
I haven't properly tested in an actual application scenario yet with createInjectable, but there shouldn't be (spoiler: createInjectable actually just creates a standard injectable class under the hood)
@davidromaniuk
@davidromaniuk 3 месяца назад
Do you think it is easier to do unit testing?
@JoshuaMorony
@JoshuaMorony 3 месяца назад
I haven't done large amounts of testing with this approach, but generally it shouldn't really make much difference
@paell0
@paell0 3 месяца назад
Title isn't true by definition - my very smart conclusion 😝
@JoshuaMorony
@JoshuaMorony 3 месяца назад
I think as long as this isn't a live stream I'm all good... maybe
@paell0
@paell0 3 месяца назад
I like it, have similar approach. There must be a space for experiments and a space for tested solutions. Thanks for all your content - very inspiring 👍
@ngathanh8438
@ngathanh8438 3 месяца назад
thanks
@io_inc
@io_inc 3 месяца назад
you really love Angular, huh?
@mattlaw4395
@mattlaw4395 3 месяца назад
Curious on the fact your argument for createInjectable is mostly around only exposing public apis, and you don't like typescripts private modifier. why don't you just use an octothorpe (hash names), a native javascript :D
@JoshuaMorony
@JoshuaMorony 3 месяца назад
I don't have anything against the private modifier specifically, and I do use the private field syntax sometimes (TIL the hash symbol is technically called an octothorpe) - it's not so much a "man I hate typing the keyword "private" everywhere" it's more that it forces you to think specifically about what it is you want to expose since everything is private by default
@carlosabud
@carlosabud 3 месяца назад
my only comment is: How do I get to work with you? lol
@sodium7554
@sodium7554 3 месяца назад
This looks like React philosophy. The best thing about Angular is that it's not React.
@jazy3091
@jazy3091 3 месяца назад
First! Now that I just made the most important comment of the week, back to watching.
@Dekutard
@Dekutard 3 месяца назад
why does front end have to be this wildly complicated?
@JoshuaMorony
@JoshuaMorony 3 месяца назад
imo front end just can be wildly complicated, and things like this look complicated because they are dealing with that complexity - but, in some cases we do deal with simpler things and might handle complexity we don't actually need to, but also in some cases we ignore complexity we should be dealing with which results in buggy applications (and imo, I think we probably do this too much, which is probably a big part of why so many web apps provide buggy and frustrating experiences for users)
@Dekutard
@Dekutard 3 месяца назад
@@JoshuaMorony it’s such an interesting field. i’m not exactly senior and my angular experience was from ‘19 to ‘21 so i’m mad rusty. maybe with more experience it would end up making so much sense. but in my early career it’s so easy to get terrified of how daunting all these many abstractions can be. i wondered if certain devs were just far ahead of me, or if simplicity is king and were just over engineering stuff so far ahead of what’s necessary.
Далее
The easier way to code Angular apps
9:54
Просмотров 66 тыс.
ngTemplateOutlet is WAY more useful than I realised
16:36
Oh No! My Doll Fell In The Dirt🤧💩
00:17
Просмотров 6 млн
Angular’s Third Era is…weird
21:41
Просмотров 91 тыс.
Turns out REST APIs weren't the answer (and that's OK!)
10:38
Why Angular Signals? Write Your First Signal
14:25
Просмотров 10 тыс.
`const` was a mistake
31:50
Просмотров 134 тыс.
I Was Wrong About React Router.
19:06
Просмотров 59 тыс.
Why You Shouldn't Nest Your Code
8:30
Просмотров 2,7 млн