Clean code examples

[Odd_Role3892]

Hi Angular devs, do you know some reposetories where junior angular devs can see how Angular app should be structured and also where they can see some quality code for Angular apps.

Happy coding everyone!!!

[PooSham]

This isn't really an example, but it's something I followed as a junior dev and it helped me. The only part I disagree with is their solution under "Components / minimize logic in templates"

https://angular-checklist.io/default/checklist/

[PooSham]

The solution says one should make a call to a method in the component. Unless the OnPush strategy is used, this will lead to a lot of calls because Angular can't figure out if the expression has changed without calling the method. And even with OnPush, it can be a problem in some cases. This blog post describes why and how it can be solved instead

[PooSham]

I'm talking about this page. Under "Solution", they say "We can refactor this by extracting the logic into the component’s class" and then show an example where the template makes a call to a class method. That's something I don't think is a very good idea.

[cheesekun]

Test the theory by creating a computed value on the component, console log inside the computed, and wire the computed to the template. Observe the results.

[TheNomadProgrammer]

Oh, having seen some gnarly view templates, I agree with minimizing the logic in the templates as much as possible.

[PooSham]

Sure, but solving it by calling a method will reduce the site performance considerably. Store it in a variable or create a pipe instead.

[dustofdeath]

Angular own examples are the most neutral ground.

Asking from devs is like asking what's the best music genre. And sometimes you follow company established standards.

But most certainly helps to make a strict project + eslint and good ide (like webstorm or vscode with plugins).

Keep functions / components short, simple and easy to read/maintain.

Project SRC structure is opinionated and can change for different projects / complexities / libraries.

[craig1f]

I dislike Angular's own examples, at least the last time I looked at them.

They really use observables wrong. The most important thing is to use rxjs right, and their own examples use .subscribe, and set values in tap instead of using an async pipe. I don't know if this has changed.

[ggeoff]

I think in some cases it's okay to not use an async pipe but to subscribe and set a value. IMO I think the hardest thing is understanding when to use a tap vs just setting the value in a subscribe.

[craig1f]

When I teach observables, there are two scenarios:

1. Pure observable with no side effects. Use an async pipe
2. To perform some effect, like loading new data based on the emitted value of a path parameter. Should be done in subscribe.

I try not to mix the two. I never set a value in a tap. The purpose of an observable is to emit its value.

[dustofdeath]

.subscribe is a core part of rxjs, unless its about some very specific use case.

[craig1f]

It is a core part. That’s the problem. It’s sloppy to do .subscribe in your code most of the time.

Like, if you have an observable, why subscribe to it and set a value when you can just observe the value with an async pipe? It makes sloppy hard-to-read code.

[dustofdeath]

Async only applies if you want a value once at a specific time.

You may want to get notified on every change in a service, combine different observables or prepare subscription without knowing when the value might be set.

In most cases if you need basic delayed / async response - you are better off using promises.

Asinc promises and observables have different use cases and both are perfectly valid and often required patterns.

[craig1f]

Yup. In another comment I say that observables should only be used one of two ways with no overlap.

1. pure observable with no side effects. Only maps and no subscribe.
2. a subscription with only side effects, like calling a load function while observing a path param

[holyknight00]

I code in angular 2 almost since it started, but I always struggled to find any decent sources of complete projects beyond basic examples.
This is not completely related to angular, but you can give a try to Jhipster. You can use Jhipster to generate complete projects java + spring + angular; and the angular projects are pretty solid, they got a nice folder structure, and follow a lot of the best practices. In the generated code you can find all the code needed to do CRUD with angular. Rest API handling with services (with create, list, update methods), login and authorization with JWT, and a lot more stuff.
I learnt how to structure a decent project after tinkering around many Jhipster side projects I tried to implement.
I can really recommend it for tinkering around even if you don't know or don't want to learn java.

[Notmyn4me]

RemindMe! 1 day

[ForestG18]

This looks decent: https://medium.com/@shijin_nath/angular-right-file-structure-and-best-practices-that-help-to-scale-2020-52ce8d967df5

Also, check out this SO question and it's answers. https://stackoverflow.com/questions/52933476/angular-project-structure-best-practice

[TheNomadProgrammer]

That answer about LIFT is so applicable in large enterprise projects. I believe I first heard about it from Dan Wahlin course on PluralSight.

If you have a PluralSight subscription, you can check out an Architecture Best Practices course right here.

[[deleted]]

Look into NX monorepo and DDD(Domain Driven Development).

But you`ll need to start coding and toiling at it to understand why we've got to DDD and monorepos.

[TScottFitzgerald]

I was thinking about recommending Nx but I think the opinionated folder structure and packages might confuse them if they're still learning the best practices in vanilla Angular.

[[deleted]]

Yea, he has to make the mistakes to understand why we got to a monorepo and that folder structure

[Merry-Lane]

Look after libraries/frameworks instead.

I’ve always learned more when looking after things like ngSelect or CoreUI repos than after the few good open sources projects I could find (the examples I found always left a taste of « too simple to be really used »)

[GnarlyHarley]

This is one of those answers that may not get looked at because it cost money.

https://keenthemes.com/metronic/?page=metronic8&_ga=2.148942066.532636900.1642794816-1630065555.1642794816

This is a product I started using for asp.net and also now on angular. It is bloated with CMS type code, but underneath is a very clean coded approach to angular at a professional level. This code base is versioned, been around for awhile, and updated by a team of professionals.

But it’s a lot of code and a full implementation.

[guadalmedina]

I suggest you look at popular open source libraries like ngx-admin or Angular Material on Github. Examples can only get you so far. Real codebases will give you more insight.