Sharing Top Content from the Angular-sphere.

Building maintainable Angular applications – Versett – Medium

Building maintainable Angular applications

☞ 

#Angular #programming

  • Presentational and Container ComponentsOne similarity between React, or other component based libraries, and Angular is presentational and container components–the idea of splitting the view and the logic into their own separate components instead of combining them into one.
  • Instead of performing logic within the presentational component, the presenters use the @Output() feature of Angular to let the container decide how to handle events.
  • Dan Abramov has an excellent article on presentational and container components, which refers to React, but the same principles apply to Angular.
  • The separation of streams and data is a very effective way to remove coupling between the presentational and container components.
  • It was only after we had added ngrx to our projects and embraced the pattern that we understood the original motivations of the Angular team, and how RxJS could help keep our code maintainable.

Building small components is easy at the start of a project, but preventing them from growing takes discipline. During the development of our first Angular application at Versett, we continuously…

Building maintainable Angular applicationsWe’ve been using Angular since beta 16. After putting a few projects into production, we’ve come up with a set of ground rules to help build applications with Angular.Keep Components TinyBuilding small components is easy at the start of a project, but preventing them from growing takes discipline. During the development of our first Angular application at Versett, we continuously added functionality to our components rather than splitting them out into new components. Our growing files eventually forced us to rewrite significant portions of our codebase. Our mistakes led to coupling between unrelated pieces and made future modifications dangerous due to the fragile nature of the code.

Since then, we have implemented a policy to keep components small and subsequently, they should receive only the data they need to complete their job. In turn, we find that our components are much more reusable and manageable as our applications grow.

Presentational and Container ComponentsOne similarity between React, or other component based libraries, and Angular is presentational and container components–the idea of splitting the view and the logic into their own separate components instead of combining them into one. Container components consist of the logic for the presentational components and pass through data that is used for rendering. This pattern helps ensure that the presentational components get only the data that they need and allows them to be more generic and reusable. Additionally, through the use of transclusion, you can avoid nesting throughout your presentational components,…

Building maintainable Angular applications – Versett – Medium