Angular – web-devil

Function-first vs feature-first

Function-first means that your project is structured by functions like actions, components, containers, modals, handler. However, there is the problem with scaling – it will become more and more difficult to maintain the overview since features are scattered through the whole codebase. Moreover, it usually violates the principle of locality (german: Lokalitätsprinzip): code which is executed together, should be also structured together.

Feature-first takes the whole other direction. The functions are scattered but the feature itself is self-contained and closed – actually the same structural approach you would choose for defining modules. In my experience this is a good way to structure an app which can easily scale – as long as (naming) conventions are defined on how the features/modules are structured. Inside a feature I would usually structure by function.

Article reference: https://www.freecodecamp.org/news/scaling-your-redux-app-with-ducks-6115955638be/ (actually the article is about Ducks)

Generic frontend architecture (SPA)

The 10 Most Common Mistakes That Developers Make

There are tons of articles with this title and now there is also one from me. Actually, I started from this Toptal article for Rails developer and enriched it. In most cases, I was more restricting than the original article.

Easy mocking in Angular for container components

Everybody how tried to write some tests for container ccomponents knows the pain of writing the mocks. This can be very time consuming, since you have to write Mock classes for each used components including inputs etc. The possibility of NO_ERRORS_SCHEMA should NOT be used, since it is suppressing ALL error messages concerning the schema. It is just an option to lead testing ad abdsurdum …

BUT I found a nice module which is a very nice solution: ng-mocks. Mocking a component is then a oneliner in the TestBed configuration:

import { MockComponent } from 'ng-mocks';

// ... 

      declarations: [
        TestedComponent,
        MockComponent(DependencyComponent),
      ]