How to not develop Angular application

angular nightmare
//component driven
--header
|---toolbar.component.ts
--body
|---datatable.component.ts

//feature driven
--navigations
|---toolbar.component.ts
--dataload
|---datatable.component.ts
  1. Segregation of core & common UI components. Have brainstorming on what is core elements of your UI, usually it is essential things of app like pipes, AUTH guards, resolvers, authentication logic, constants, HTTP interceptors, login/ logout screens, validators etc.
  2. Common can include reusable things like header, footer, navbar, sidebar any other UI block which is appearing multiple times in your application UI. It can include things which are referenced multiple times in your app like models, interfaces, classes, type definitions, directives, forms, Enums definitions.
  3. Apart from models (classes) & interfaces, DTOs can be used to group data together.
  1. If your services have considerable dependency on module level things lets say Enums, constants, type definition put it in module/services.
  1. Create custom types wherever applicable.
  2. Promote object oriented + functional design.
  3. Generics- go for it, trust me it will reduce line of code.
  1. Don't go with default change detection mechanism strategy rather looks for customizing it as per application need. Optimize Runtime Performance using OnPush, ChangeDetection .By default, Angular uses the ChangeDetectionStrategy.Default change detection strategy on all components, meaning it will undergo change detection with nearly any user interaction. This is not very efficient. Components should be re-rendered if the @Input changes. We should use ChangeDetectionStrategy.OnPush strategy for Component Decorater. The same goes for pipes. we should add ‘pure: false’ to the pipe decorater.
  2. Avoid *ngFor without trackBy.
  3. Avoid impure pipes.
  4. Cache the http calls.
  5. RxJS is must- Cascaded subscriptions should be avoided.
  6. Avoid writing logic in templates, it helps to decouple templates from logic and can be changed in future if required with minimal impact.
  7. Network calls must always be made in a service- dependency injection is a performance savior.
  8. Lazy load the modules.
  9. Do not directly import a module in a lazy loaded feature.
  10. Look for memory leaks in Observable — either use async Pipe or takeUntil(). Clean-up subscriptions while unmounting a component.
  11. ESLint issues should be addressed.
  12. Do not add filtering and sorting logic to pipes — do it in components or services before binding the model in templates.

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store