DEV Community

Cover image for Angular Architecture Patterns and Best Practices (that help to scale)

Angular Architecture Patterns and Best Practices (that help to scale)

Bartosz Pietrucha on July 09, 2019

=== To receive more articles 👉 join the newsletter on the blog === Building scalable software is a challenging task. When we think about scalabili...
Collapse
 
polariswilliam profile image
Krieg William

Do you have a Github repo for exemple of this architecture for tests and review ?

Collapse
 
stealthmusic profile image
Jan Wedel

I was thinking the same... would be great to see a working example!

Collapse
 
cmandamiento profile image
César Mandamiento

Hey, I just uploaded an example wich looks similar to this architecture: github.com/cmandamiento/angular-ar...

It's not exactly the same example, but you can clone the coide and modify it according your requirements.

Collapse
 
jayant12 profile image
jayant pareek

Did you get the Guthub Repo link? It would be super helpful

Collapse
 
dewaldels profile image
Dewald Els

guthub

Collapse
 
yeraycat profile image
Yeray Catalá

Best post about Angular architecture ever!

I've was already doing something similar, but without the Facade in the middle.

Thanks so much!

Collapse
 
carlillo profile image
Carlos Caballero

Hi @yeraycat ,

The facade pattern in this context helps you create a layer between the state management library. Depending on the complexity of your application you can apply it or not, my recommendation of course is that if you apply it. As I said, this post from @pietrucha is simply great.

Collapse
 
yeraycat profile image
Yeray Catalá

Yes, if the application is simple enough it can be an overkill, but I like it because the state management strategy can be changed at any time without affecting the components, and I was afraid about how hard would be to change to another state management library/approach when I started adding NgRX to my projects.

I'm implementing the facade layer asap, so it won't be a problem in the future.

Thread Thread
 
carlillo profile image
Carlos Caballero

That is true, and this is the reason why I'm using... Maybe Akita will be the new bomb?

Collapse
 
hankchiutw profile image
Hank Chiu

Great article! I got some inspirations in mind:

  • This is helpful to avoid circular dependencies while Presentation layer only imports Abstraction layer, Abstraction layer only imports Core layer.
  • It's the fractional pattern when saying module design and folder structure.
    • I may apply index.ts and public-api.ts to determine what to expose explicitly.
  • For readers from React, smart and dumb components are stateful and stateless components.
    • ChangeDetectionStrategy.OnPush in dumb components is usually underrated.
  • How would the testing look like under such architecture?
Collapse
 
vikramkadiam profile image
Vikram Kadiam

I was so excited to read this article as it caught my eyes on twitter,but sorry to say I lost you in the middle of the post & it actually confused me more than helping.Nice examples though..!

Collapse
 
bartosz_io profile image
Bartosz Pietrucha

Thanks for the comment!
Can I help you get back on track?
Where did you get lost?

Collapse
 
rtpharry profile image
Matthew Harris

I'm on my third reading now and it gets a little more clear each time.

I wish there were practical tutorials to go along with this, that taught other things and followed these practices.

Often a tutorial author is obsessed with how simple everything is as a measure of quality. I want to learn best practices not just the most flimsy of examples.

This is a great article.

Thread Thread
 
bartosz_io profile image
Bartosz Pietrucha

Hi Matthew, thanks for your comment.
Actually I am considering an online course that teaches these practices.
Stay in touch.

Best,
Bartosz

Collapse
 
dualyticalchemy profile image
⚫️ nothingness negates itself

great article, thank you!!

microcomment: let's petition to no longer call them "s̶m̶a̶r̶t̶" and "d̶u̶m̶b̶" components (essentialist, ableist rhetoric), but rather "meta" and "object" components (e.g. "metacomponent" and "object component") as part of Hypermedia-Oriented Design

philosophers will enjoy this terminological sanction too

Collapse
 
abijithajayan01 profile image
abijithajayan01 • Edited

Why the Angular team is making more complications in last few year updates. Its very complicating they are doing. For very most example is - what they did for Urlsearchparams() to Httpparams(). last 5 year am working as a full stack developer with frontend Angular. Updation of this, what they are doing means. Its totally complicating everything.

Collapse
 
nwamugo profile image
UGOJI Duziem

I was referred to this article to help expand my horizon about Angular architectures that employ the use of smart and dumb components. But overall, what a resource! Thank you.
On an extra note, this brilliant piece of work, deserves a link to a repo that implements this architecture as a practical example. Well done!

Collapse
 
synga profile image
Gabriel Barreto

Great article!! One thing that is not clear to me, since it's unidirectional, can the core layers communicate with each other? The flow is only top to bottom and never left to right? So from a component i have to call a facade, then call an api service, then return data to the facade, call a service where i manipulate the data according to my business logic, then send it back to my facade and then update the state, right?

Collapse
 
igorgarnik profile image
Igor

It is a great post. Could you tell me where better to handle api and user errors?

Collapse
 
bartosz_io profile image
Bartosz Pietrucha

Thanks! How about ErrorInterceptor?

Collapse
 
igorgarnik profile image
Igor

I thought about it already))). Thanks!

Collapse
 
brlx profile image
Alex Biro

I have a more technical question. How do you prevent direct communication between layers which should not communicate directly, according to the abstractions? Let's say, importing the API services into components? I guess, even if you would neatly organize everything into modules, nothing prevents a less caring/enthusiastic dev to import a whole wrong module, if I am correct. (And on bigger / longer term projects, there will inevitably be some of those devs.) Anyone any thoughts on that? Is it only code review, or is there a more automated way?
(I know I am late to the game, but hope someone is still around here.)

Collapse
 
bartosz_io profile image
Bartosz Pietrucha

Hi Alex! Yes, code review is the most important practice here. However, writing a tool that would automatically prevent from breaking the abstractions is possible but I personally don't know any.

Collapse
 
anyandallart profile image
Jason • Edited

I have heard recently (I think on the podcast adventures in angular) that one option would be to set up some TSLint rules to prevent this sort of thing. Might be worth looking into.

Collapse
 
waseemmansour profile image
Waseem Mansour

Great article, thank you.

Collapse
 
techiediaries profile image
Ahmed

This is very helpful, thanks!

Collapse
 
developersatish profile image
Satish Singh

One of best article i have read about angular architecture.
it really going to help me out in my coming project.

Thank you.

Collapse
 
nuwannnz profile image
Nuwan Karunarathna

Wow, Such a great article about Angular and very joyful to read till the end!

Collapse
 
carlillo profile image
Carlos Caballero

This is a post to teach in my Angular's University course!

Congrats!

Collapse
 
tupax profile image
Tupax

Your publication helped me a lot, thank you very much!!

Collapse
 
bartosz_io profile image
Bartosz Pietrucha

💪🤗💥

Collapse
 
hugoblanc profile image
hugoblanc

Today I've been massively schooled !

Collapse
 
bartosz_io profile image
Bartosz Pietrucha

You are welcome!

Collapse
 
stealthmusic profile image
Jan Wedel

We were just discussion how to properly design and cut a large application. This article is just great and helps a lot, thanks!

Collapse
 
secawis1 profile image
SECAWIS1

Really helpful article. Helped us structure our Feature Modules in a clean and manageable way. I question though. I was thinking to use the same facade pattern to manage the application wide state. Like user, language and data that have a application wide scope. Is that also something you would recommend?

Collapse
 
carl_wistedt profile image
Carl Wistedt

Would you consider a dialog/modal a smart or dumb component?

Collapse
 
bartosz_io profile image
Bartosz Pietrucha

Dumb if simple, smart if complex.

Collapse
 
davidolawale profile image
David Olawale

Thanks for sharing this, I've learnt a lot

Collapse
 
bartosz_io profile image
Bartosz Pietrucha

Great!

Collapse
 
selimmeske profile image
SelimMeske

What a great post, ty!

Collapse
 
haysuse profile image
Hay Suse

How would you handle server side validation for reactive forms?